diff --git a/docs/src/api/class-locatorassertions.md b/docs/src/api/class-locatorassertions.md index b42aae325d..f4185774f2 100644 --- a/docs/src/api/class-locatorassertions.md +++ b/docs/src/api/class-locatorassertions.md @@ -1441,6 +1441,9 @@ Snapshot name. ### option: LocatorAssertions.toHaveScreenshot#1.mask = %%-screenshot-option-mask-%% * since: v1.23 +### option: LocatorAssertions.toHaveScreenshot#1.maskColor = %%-screenshot-option-mask-color-%% +* since: v1.35 + ### option: LocatorAssertions.toHaveScreenshot#1.omitBackground = %%-screenshot-option-omit-background-%% * since: v1.23 @@ -1484,6 +1487,9 @@ Note that screenshot assertions only work with Playwright test runner. ### option: LocatorAssertions.toHaveScreenshot#2.mask = %%-screenshot-option-mask-%% * since: v1.23 +### option: LocatorAssertions.toHaveScreenshot#2.maskColor = %%-screenshot-option-mask-color-%% +* since: v1.35 + ### option: LocatorAssertions.toHaveScreenshot#2.omitBackground = %%-screenshot-option-omit-background-%% * since: v1.23 diff --git a/docs/src/api/class-pageassertions.md b/docs/src/api/class-pageassertions.md index 38049e5d90..9bea84e384 100644 --- a/docs/src/api/class-pageassertions.md +++ b/docs/src/api/class-pageassertions.md @@ -158,6 +158,9 @@ Snapshot name. ### option: PageAssertions.toHaveScreenshot#1.mask = %%-screenshot-option-mask-%% * since: v1.23 +### option: PageAssertions.toHaveScreenshot#1.maskColor = %%-screenshot-option-mask-color-%% +* since: v1.35 + ### option: PageAssertions.toHaveScreenshot#1.omitBackground = %%-screenshot-option-omit-background-%% * since: v1.23 @@ -206,6 +209,9 @@ Note that screenshot assertions only work with Playwright test runner. ### option: PageAssertions.toHaveScreenshot#2.mask = %%-screenshot-option-mask-%% * since: v1.23 +### option: PageAssertions.toHaveScreenshot#2.maskColor = %%-screenshot-option-mask-color-%% +* since: v1.35 + ### option: PageAssertions.toHaveScreenshot#2.omitBackground = %%-screenshot-option-omit-background-%% * since: v1.23 diff --git a/docs/src/api/params.md b/docs/src/api/params.md index 7ca8dc28df..26544135a8 100644 --- a/docs/src/api/params.md +++ b/docs/src/api/params.md @@ -1090,10 +1090,10 @@ Specify screenshot type, defaults to `png`. - `mask` <[Array]<[Locator]>> Specify locators that should be masked when the screenshot is taken. Masked elements will be overlaid with -a pink box `#FF00FF` that completely covers its bounding box. +a pink box `#FF00FF` (customized by [`option: maskColor`]) that completely covers its bounding box. ## screenshot-option-mask-color -* since: v1.34 +* since: v1.35 - `maskColor` <[string]> Specify the color of the overlay box for masked elements, in [CSS color format](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). Default color is pink `#FF00FF`. diff --git a/packages/playwright-core/types/types.d.ts b/packages/playwright-core/types/types.d.ts index e577a3ad20..8137fed0fd 100644 --- a/packages/playwright-core/types/types.d.ts +++ b/packages/playwright-core/types/types.d.ts @@ -9834,7 +9834,7 @@ export interface ElementHandle extends JSHandle { /** * Specify locators that should be masked when the screenshot is taken. Masked elements will be overlaid with a pink - * box `#FF00FF` that completely covers its bounding box. + * box `#FF00FF` (customized by `maskColor`) that completely covers its bounding box. */ mask?: Array; @@ -19660,7 +19660,7 @@ export interface LocatorScreenshotOptions { /** * Specify locators that should be masked when the screenshot is taken. Masked elements will be overlaid with a pink - * box `#FF00FF` that completely covers its bounding box. + * box `#FF00FF` (customized by `maskColor`) that completely covers its bounding box. */ mask?: Array; @@ -19853,7 +19853,7 @@ export interface PageScreenshotOptions { /** * Specify locators that should be masked when the screenshot is taken. Masked elements will be overlaid with a pink - * box `#FF00FF` that completely covers its bounding box. + * box `#FF00FF` (customized by `maskColor`) that completely covers its bounding box. */ mask?: Array; diff --git a/packages/playwright-test/src/matchers/toMatchSnapshot.ts b/packages/playwright-test/src/matchers/toMatchSnapshot.ts index b3aafb1404..fa59a4a420 100644 --- a/packages/playwright-test/src/matchers/toMatchSnapshot.ts +++ b/packages/playwright-test/src/matchers/toMatchSnapshot.ts @@ -335,6 +335,7 @@ export async function toHaveScreenshot( caret: config?.caret ?? 'hide', ...helper.allOptions, mask: (helper.allOptions.mask || []) as LocatorEx[], + maskColor: helper.allOptions.maskColor, name: undefined, threshold: undefined, maxDiffPixels: undefined, diff --git a/packages/playwright-test/types/test.d.ts b/packages/playwright-test/types/test.d.ts index aab2e617b8..eee9b7cd7c 100644 --- a/packages/playwright-test/types/test.d.ts +++ b/packages/playwright-test/types/test.d.ts @@ -5337,10 +5337,16 @@ interface LocatorAssertions { /** * Specify locators that should be masked when the screenshot is taken. Masked elements will be overlaid with a pink - * box `#FF00FF` that completely covers its bounding box. + * box `#FF00FF` (customized by `maskColor`) that completely covers its bounding box. */ mask?: Array; + /** + * Specify the color of the overlay box for masked elements, in + * [CSS color format](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). Default color is pink `#FF00FF`. + */ + maskColor?: string; + /** * An acceptable ratio of pixels that are different to the total amount of pixels, between `0` and `1`. Default is * configurable with `TestConfig.expect`. Unset by default. @@ -5414,10 +5420,16 @@ interface LocatorAssertions { /** * Specify locators that should be masked when the screenshot is taken. Masked elements will be overlaid with a pink - * box `#FF00FF` that completely covers its bounding box. + * box `#FF00FF` (customized by `maskColor`) that completely covers its bounding box. */ mask?: Array; + /** + * Specify the color of the overlay box for masked elements, in + * [CSS color format](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). Default color is pink `#FF00FF`. + */ + maskColor?: string; + /** * An acceptable ratio of pixels that are different to the total amount of pixels, between `0` and `1`. Default is * configurable with `TestConfig.expect`. Unset by default. @@ -5667,10 +5679,16 @@ interface PageAssertions { /** * Specify locators that should be masked when the screenshot is taken. Masked elements will be overlaid with a pink - * box `#FF00FF` that completely covers its bounding box. + * box `#FF00FF` (customized by `maskColor`) that completely covers its bounding box. */ mask?: Array; + /** + * Specify the color of the overlay box for masked elements, in + * [CSS color format](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). Default color is pink `#FF00FF`. + */ + maskColor?: string; + /** * An acceptable ratio of pixels that are different to the total amount of pixels, between `0` and `1`. Default is * configurable with `TestConfig.expect`. Unset by default. @@ -5774,10 +5792,16 @@ interface PageAssertions { /** * Specify locators that should be masked when the screenshot is taken. Masked elements will be overlaid with a pink - * box `#FF00FF` that completely covers its bounding box. + * box `#FF00FF` (customized by `maskColor`) that completely covers its bounding box. */ mask?: Array; + /** + * Specify the color of the overlay box for masked elements, in + * [CSS color format](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value). Default color is pink `#FF00FF`. + */ + maskColor?: string; + /** * An acceptable ratio of pixels that are different to the total amount of pixels, between `0` and `1`. Default is * configurable with `TestConfig.expect`. Unset by default. diff --git a/tests/playwright-test/to-have-screenshot.spec.ts b/tests/playwright-test/to-have-screenshot.spec.ts index fe8e78cf3c..cdd48b84ad 100644 --- a/tests/playwright-test/to-have-screenshot.spec.ts +++ b/tests/playwright-test/to-have-screenshot.spec.ts @@ -1195,6 +1195,26 @@ test('should throw pretty error if expected PNG file is not a PNG', async ({ run expect(result.output).toContain('could not decode image as JPEG.'); }); +test('should support maskColor option', async ({ runInlineTest }) => { + const result = await runInlineTest({ + ...playwrightConfig({ + snapshotPathTemplate: '__screenshots__/{testFilePath}/{arg}{ext}', + }), + '__screenshots__/a.spec.js/snapshot.png': createImage(IMG_WIDTH, IMG_HEIGHT, 0, 255, 0), + 'a.spec.js': ` + const { test, expect } = require('@playwright/test'); + test('png', async ({ page }) => { + await page.setContent(''); + await expect(page).toHaveScreenshot('snapshot.png', { + mask: [page.locator('body')], + maskColor: '#00FF00', + }); + }); + `, + }); + expect(result.exitCode).toBe(0); +}); + function playwrightConfig(obj: any) { return { 'playwright.config.js': `