fix: screenshot masks with Playwright provider #8357
Conversation
macarie
force-pushed
the
fix/screenshot-masks
branch
from
68a7e21 to
db359cf
Compare
|
|
||
| export interface ScreenshotOptions extends PWScreenshotOptions {} | ||
| export interface ScreenshotOptions extends PWScreenshotOptions { | ||
| mask?: ReadonlyArray<Element | Locator> | undefined |
There was a problem hiding this comment.
This property is already declared in PWScreenshotOptions but their Locator definition is not compatible with Vitest's.
| function convertToSelector(elementOrLocator: Element | Locator): string { | ||
| if (!elementOrLocator) { | ||
| throw new Error('Expected element or locator to be defined.') | ||
| } | ||
| if (elementOrLocator instanceof Element) { | ||
| return convertElementToCssSelector(elementOrLocator) | ||
| } | ||
| if ('selector' in elementOrLocator) { | ||
| return (elementOrLocator as any).selector | ||
| } | ||
| throw new Error('Expected element or locator to be an instance of Element or Locator.') | ||
| } |
There was a problem hiding this comment.
Not sure why, but without handling Locators like this, the mask option was ignored when used in the toMatchScreenshot assertion.
I moved the function in the same file that exports convertElementToCssSelector (the function used for Element), hopefully it's not an issue.
| const normalizedOptions = 'mask' in options | ||
| ? { | ||
| ...options, | ||
| mask: (options.mask as Array<Element | Locator>).map(convertToSelector), |
There was a problem hiding this comment.
The same code is used in toMatchScreenshot. I guess it's fine for now as it's only one option, but if it grows we should extract the logic into a function to use in both places.
| await locator.screenshot({ | ||
| save: true, | ||
| path, | ||
| maskColor, | ||
| mask, | ||
| }) |
There was a problem hiding this comment.
I couldn't find any tests for screenshot, but this test should cover it as well.
2 participants
Description
This PR fixes the issue of masks not being applied correctly when taking a screenshot, as previously discussed in the context of #8041.
Masking elements is an important feature when handling dynamic content in Visual Regression Testing.
Please don't delete this checklist! Before submitting the PR, please make sure you do the following:
pnpm-lock.yamlunless you introduce a new test example.Tests
pnpm test:ci.Documentation
pnpm run docscommand.Changesets
feat:,fix:,perf:,docs:, orchore:.