chore: address pixelCount and pixelRatio review comments (#12501)

- documentation fixes
- rename pixelCount to maxDiffPixels
- rename pixelRatio to maxDiffPixelRatio

docs/src/api/class-locatorassertions.md

@@ -1021,9 +1021,9 @@ await expect(locator).toHaveScreenshot();
 
 ### option: LocatorAssertions.toHaveScreenshot.mask = %%-screenshot-option-mask-%%
 
-### option: LocatorAssertions.toHaveScreenshot.pixelCount = %%-assertions-pixel-count-%%
+### option: LocatorAssertions.toHaveScreenshot.maxDiffPixels = %%-assertions-max-diff-pixels-%%
 
-### option: LocatorAssertions.toHaveScreenshot.pixelRatio = %%-assertions-pixel-ratio-%%
+### option: LocatorAssertions.toHaveScreenshot.maxDiffPixelRatio = %%-assertions-max-diff-pixel-ratio-%%
 
 ### option: LocatorAssertions.toHaveScreenshot.threshold = %%-assertions-threshold-%%
 

docs/src/api/class-pageassertions.md

@@ -140,9 +140,9 @@ await expect(page).toHaveScreenshot();
 
 ### option: PageAssertions.toHaveScreenshot.mask = %%-screenshot-option-mask-%%
 
-### option: PageAssertions.toHaveScreenshot.pixelCount = %%-assertions-pixel-count-%%
+### option: PageAssertions.toHaveScreenshot.maxDiffPixels = %%-assertions-max-diff-pixels-%%
 
-### option: PageAssertions.toHaveScreenshot.pixelRatio = %%-assertions-pixel-ratio-%%
+### option: PageAssertions.toHaveScreenshot.maxDiffPixelRatio = %%-assertions-max-diff-pixel-ratio-%%
 
 ### option: PageAssertions.toHaveScreenshot.threshold = %%-assertions-threshold-%%
 

docs/src/api/class-screenshotassertions.md

@@ -34,8 +34,8 @@ Learn more about [visual comparisons](./test-snapshots.md).
 
 Snapshot name.
 
-### option: ScreenshotAssertions.toMatchSnapshot.pixelCount = %%-assertions-pixel-count-%%
+### option: ScreenshotAssertions.toMatchSnapshot.maxDiffPixels = %%-assertions-max-diff-pixels-%%
 
-### option: ScreenshotAssertions.toMatchSnapshot.pixelRatio = %%-assertions-pixel-ratio-%%
+### option: ScreenshotAssertions.toMatchSnapshot.maxDiffPixelRatio = %%-assertions-max-diff-pixel-ratio-%%
 
 ### option: ScreenshotAssertions.toMatchSnapshot.threshold = %%-assertions-threshold-%%

docs/src/api/params.md

@@ -715,15 +715,15 @@ Time to retry the assertion for. Defaults to `timeout` in `TestConfig.expect`.
 
 Time to retry the assertion for.
 
-## assertions-pixel-count
+## assertions-max-diff-pixels
 * langs: js
-- `pixelCount` <[int]>
+- `maxDiffPixels` <[int]>
 
 An acceptable amount of pixels that could be different, unset by default.
 
-## assertions-pixel-ratio
+## assertions-max-diff-pixel-ratio
 * langs: js
-- `pixelRatio` <[float]>
+- `maxDiffPixelRatio` <[float]>
 
 An acceptable ratio of pixels that are different to the total amount of pixels, between `0` and `1`, unset by default.
 
@@ -731,7 +731,7 @@ An acceptable ratio of pixels that are different to the total amount of pixels,
 * langs: js
 - `threshold` <[float]>
 
-An acceptable percieved color difference in the [YIQ color space](https://en.wikipedia.org/wiki/YIQ) between pixels in compared images, between zero (strict) and one (lax), default is configurable with `TestConfig.expect`. Defaults to `0.2`.
+An acceptable percieved color difference in the [YIQ color space](https://en.wikipedia.org/wiki/YIQ) between the same pixel in compared images, between zero (strict) and one (lax), default is configurable with `TestConfig.expect`. Defaults to `0.2`.
 
 ## shared-context-params-list
 - %%-context-option-acceptdownloads-%%

docs/src/test-api/class-testconfig.md

@@ -37,9 +37,9 @@ export default config;
 - type: <[Object]>
   - `timeout` <[int]> Default timeout for async expect matchers in milliseconds, defaults to 5000ms.
   - `toMatchSnapshot` <[Object]>
-    - `threshold` <[float]> an acceptable percieved color difference in the [YIQ color space](https://en.wikipedia.org/wiki/YIQ) between pixels in compared images, between zero (strict) and one (lax). Defaults to `0.2`.
-    - `pixelCount` <[int]> an acceptable amount of pixels that could be different, unset by default.
-    - `pixelRatio` <[float]> an acceptable ratio of pixels that are different to the total amount of pixels, between `0` and `1` , unset by default.
+    - `threshold` <[float]> an acceptable percieved color difference in the [YIQ color space](https://en.wikipedia.org/wiki/YIQ) between the same pixel in compared images, between zero (strict) and one (lax). Defaults to `0.2`.
+    - `maxDiffPixels` <[int]> an acceptable amount of pixels that could be different, unset by default.
+    - `maxDiffPixelRatio` <[float]> an acceptable ratio of pixels that are different to the total amount of pixels, between `0` and `1` , unset by default.
 
 Configuration for the `expect` assertion library. Learn more about [various timeouts](./test-timeouts.md).
 

docs/src/test-api/class-testproject.md

@@ -108,9 +108,9 @@ export default config;
 - type: <[Object]>
   - `timeout` <[int]> Default timeout for async expect matchers in milliseconds, defaults to 5000ms.
   - `toMatchSnapshot` <[Object]>
-    - `threshold` <[float]> an acceptable percieved color difference in the [YIQ color space](https://en.wikipedia.org/wiki/YIQ) between pixels in compared images, between zero (strict) and one (lax). Defaults to `0.2`.
-    - `pixelCount` <[int]> an acceptable amount of pixels that could be different, unset by default.
-    - `pixelRatio` <[float]> an acceptable ratio of pixels that are different to the total amount of pixels, between `0` and `1` , unset by default.
+    - `threshold` <[float]> an acceptable percieved color difference in the [YIQ color space](https://en.wikipedia.org/wiki/YIQ) between the same pixel in compared images, between zero (strict) and one (lax). Defaults to `0.2`.
+    - `maxDiffPixels` <[int]> an acceptable amount of pixels that could be different, unset by default.
+    - `maxDiffPixelRatio` <[float]> an acceptable ratio of pixels that are different to the total amount of pixels, between `0` and `1` , unset by default.
 
 Configuration for the `expect` assertion library.
 

docs/src/test-snapshots-js.md

@@ -75,7 +75,7 @@ const { test, expect } = require('@playwright/test');
 
 test('example test', async ({ page }) => {
   await page.goto('https://playwright.dev');
-  expect(await page.screenshot()).toMatchSnapshot('home.png', { pixelCount: 100 });
+  expect(await page.screenshot()).toMatchSnapshot('home.png', { maxDiffPixels: 100 });
 });
 ```
 
@@ -85,7 +85,7 @@ import { test, expect } from '@playwright/test';
 
 test('example test', async ({ page }) => {
   await page.goto('https://playwright.dev');
-  expect(await page.screenshot()).toMatchSnapshot('home.png', { pixelCount: 100 });
+  expect(await page.screenshot()).toMatchSnapshot('home.png', { maxDiffPixels: 100 });
 });
 ```
 
@@ -94,7 +94,7 @@ If you'd like to share the default value among all the tests in the project, you
 ```js js-flavor=js
 module.exports = {
   expect: {
-    toMatchSnapshot: { pixelCount: 100 },
+    toMatchSnapshot: { maxDiffPixels: 100 },
   },
 };
 ```
@@ -103,7 +103,7 @@ module.exports = {
 import { PlaywrightTestConfig } from '@playwright/test';
 const config: PlaywrightTestConfig = {
   expect: {
-    toMatchSnapshot: { pixelCount: 100 },
+    toMatchSnapshot: { maxDiffPixels: 100 },
   },
 };
 export default config;

packages/playwright-core/src/protocol/channels.ts

@@ -1496,8 +1496,8 @@ export type PageExpectScreenshotParams = {
     selector: string,
   },
   comparatorOptions?: {
-    pixelCount?: number,
-    pixelRatio?: number,
+    maxDiffPixels?: number,
+    maxDiffPixelRatio?: number,
     threshold?: number,
   },
   screenshotOptions?: {
@@ -1519,8 +1519,8 @@ export type PageExpectScreenshotOptions = {
     selector: string,
   },
   comparatorOptions?: {
-    pixelCount?: number,
-    pixelRatio?: number,
+    maxDiffPixels?: number,
+    maxDiffPixelRatio?: number,
     threshold?: number,
   },
   screenshotOptions?: {

packages/playwright-core/src/protocol/protocol.yml

@@ -1003,8 +1003,8 @@ Page:
         comparatorOptions:
           type: object?
           properties:
-            pixelCount: number?
-            pixelRatio: number?
+            maxDiffPixels: number?
+            maxDiffPixelRatio: number?
             threshold: number?
         screenshotOptions:
           type: object?

packages/playwright-core/src/protocol/validator.ts

@@ -549,8 +549,8 @@ export function createScheme(tChannel: (name: string) => Validator): Scheme {
       selector: tString,
     })),
     comparatorOptions: tOptional(tObject({
-      pixelCount: tOptional(tNumber),
-      pixelRatio: tOptional(tNumber),
+      maxDiffPixels: tOptional(tNumber),
+      maxDiffPixelRatio: tOptional(tNumber),
       threshold: tOptional(tNumber),
     })),
     screenshotOptions: tOptional(tObject({

packages/playwright-core/src/utils/comparators.ts

@@ -23,7 +23,7 @@ import { diff_match_patch, DIFF_INSERT, DIFF_DELETE, DIFF_EQUAL } from '../third
 // Note: we require the pngjs version of pixelmatch to avoid version mismatches.
 const { PNG } = require(require.resolve('pngjs', { paths: [require.resolve('pixelmatch')] })) as typeof import('pngjs');
 
-export type ImageComparatorOptions = { threshold?: number, pixelCount?: number, pixelRatio?: number };
+export type ImageComparatorOptions = { threshold?: number, maxDiffPixels?: number, maxDiffPixelRatio?: number };
 export type ComparatorResult = { diff?: Buffer; errorMessage?: string; } | null;
 export type Comparator = (actualBuffer: Buffer | string, expectedBuffer: Buffer, options?: any) => ComparatorResult;
 export const mimeTypeToComparator: { [key: string]: Comparator } = {
@@ -59,14 +59,14 @@ function compareImages(mimeType: string, actualBuffer: Buffer | string, expected
     threshold: options.threshold ?? 0.2,
   });
 
-  const pixelCount1 = options.pixelCount;
-  const pixelCount2 = options.pixelRatio !== undefined ? expected.width * expected.height * options.pixelRatio : undefined;
-  let pixelCount;
-  if (pixelCount1 !== undefined && pixelCount2 !== undefined)
-    pixelCount = Math.min(pixelCount1, pixelCount2);
+  const maxDiffPixels1 = options.maxDiffPixels;
+  const maxDiffPixels2 = options.maxDiffPixelRatio !== undefined ? expected.width * expected.height * options.maxDiffPixelRatio : undefined;
+  let maxDiffPixels;
+  if (maxDiffPixels1 !== undefined && maxDiffPixels2 !== undefined)
+    maxDiffPixels = Math.min(maxDiffPixels1, maxDiffPixels2);
   else
-    pixelCount = pixelCount1 ?? pixelCount2 ?? 0;
-  return count > pixelCount ? { diff: PNG.sync.write(diff) } : null;
+    maxDiffPixels = maxDiffPixels1 ?? maxDiffPixels2 ?? 0;
+  return count > maxDiffPixels ? { diff: PNG.sync.write(diff) } : null;
 }
 
 function compareText(actual: Buffer | string, expectedBuffer: Buffer): ComparatorResult {

packages/playwright-test/src/matchers/toMatchSnapshot.ts

@@ -80,11 +80,11 @@ class SnapshotHelper<T extends ImageComparatorOptions> {
       ...options,
     };
 
-    if (options.pixelCount !== undefined && options.pixelCount < 0)
-      throw new Error('`pixelCount` option value must be non-negative integer');
+    if (options.maxDiffPixels !== undefined && options.maxDiffPixels < 0)
+      throw new Error('`maxDiffPixels` option value must be non-negative integer');
 
-    if (options.pixelRatio !== undefined && (options.pixelRatio < 0 || options.pixelRatio > 1))
-      throw new Error('`pixelRatio` option value must be between 0 and 1');
+    if (options.maxDiffPixelRatio !== undefined && (options.maxDiffPixelRatio < 0 || options.maxDiffPixelRatio > 1))
+      throw new Error('`maxDiffPixelRatio` option value must be between 0 and 1');
 
     // sanitizes path if string
     const pathSegments = Array.isArray(name) ? name : [addSuffixToFilePath(name, '', undefined, true)];
@@ -111,8 +111,8 @@ class SnapshotHelper<T extends ImageComparatorOptions> {
     this.updateSnapshots = updateSnapshots;
     this.allOptions = options;
     this.comparatorOptions = {
-      pixelCount: options.pixelCount,
-      pixelRatio: options.pixelRatio,
+      maxDiffPixels: options.maxDiffPixels,
+      maxDiffPixelRatio: options.maxDiffPixelRatio,
       threshold: options.threshold,
     };
     this.kind = this.mimeType.startsWith('image/') ? 'Screenshot' : 'Snapshot';
@@ -262,8 +262,8 @@ export async function toHaveScreenshot(
     mask: (helper.allOptions.mask || []) as LocatorEx[],
     name: undefined,
     threshold: undefined,
-    pixelCount: undefined,
-    pixelRatio: undefined,
+    maxDiffPixels: undefined,
+    maxDiffPixelRatio: undefined,
   };
 
   const hasSnapshot = fs.existsSync(helper.snapshotPath);

packages/playwright-test/types/test.d.ts

@@ -50,11 +50,11 @@ type ExpectSettings = {
     /**
      * An acceptable amount of pixels that could be different, unset by default.
      */
-    pixelCount?: number,
+    maxDiffPixels?: number,
     /**
      * An acceptable ratio of pixels that are different to the total amount of pixels, between `0` and `1` , unset by default.
      */
-    pixelRatio?: number,
+    maxDiffPixelRatio?: number,
   }
 };
 

packages/playwright-test/types/testExpect.d.ts

@@ -50,8 +50,8 @@ export declare type Expect = {
 
 type ImageComparatorOptions = {
   threshold?: number,
-  pixelCount?: number,
-  pixelRatio?: number,
+  maxDiffPixels?: number,
+  maxDiffPixelRatio?: number,
 };
 
 type Awaited<T> = T extends PromiseLike<infer U> ? U : T;

tests/playwright-test/golden.spec.ts

@@ -79,8 +79,8 @@ test('should compile with different option combinations', async ({ runTSC }) =>
       test('is a test', async ({ page }) => {
         expect('foo').toMatchSnapshot();
         expect('foo').toMatchSnapshot({ threshold: 0.2 });
-        expect('foo').toMatchSnapshot({ pixelRatio: 0.2 });
-        expect('foo').toMatchSnapshot({ pixelCount: 0.2 });
+        expect('foo').toMatchSnapshot({ maxDiffPixelRatio: 0.2 });
+        expect('foo').toMatchSnapshot({ maxDiffPixels: 0.2 });
       });
     `
   });
@@ -396,35 +396,35 @@ test('should compare binary', async ({ runInlineTest }) => {
   expect(result.exitCode).toBe(0);
 });
 
-test('should throw for invalid pixelCount values', async ({ runInlineTest }) => {
+test('should throw for invalid maxDiffPixels values', async ({ runInlineTest }) => {
   expect((await runInlineTest({
     ...files,
     'a.spec.js': `
       const { test } = require('./helper');
       test('is a test', ({}) => {
         expect(Buffer.from([1,2,3,4])).toMatchSnapshot({
-          pixelCount: -1,
+          maxDiffPixels: -1,
         });
       });
     `
   })).exitCode).toBe(1);
 });
 
-test('should throw for invalid pixelRatio values', async ({ runInlineTest }) => {
+test('should throw for invalid maxDiffPixelRatio values', async ({ runInlineTest }) => {
   expect((await runInlineTest({
     ...files,
     'a.spec.js': `
       const { test } = require('./helper');
       test('is a test', ({}) => {
         expect(Buffer.from([1,2,3,4])).toMatchSnapshot({
-          pixelRatio: 12,
+          maxDiffPixelRatio: 12,
         });
       });
     `
   })).exitCode).toBe(1);
 });
 
-test('should respect pixelCount option', async ({ runInlineTest }) => {
+test('should respect maxDiffPixels option', async ({ runInlineTest }) => {
   const width = 20, height = 20;
   const BAD_PIXELS = 120;
   const image1 = createWhiteImage(width, height);
@@ -448,17 +448,17 @@ test('should respect pixelCount option', async ({ runInlineTest }) => {
       const { test } = require('./helper');
       test('is a test', ({}) => {
         expect(Buffer.from('${image2.toString('base64')}', 'base64')).toMatchSnapshot('snapshot.png', {
-          pixelCount: ${BAD_PIXELS}
+          maxDiffPixels: ${BAD_PIXELS}
         });
       });
     `
-  })).exitCode, 'make sure pixelCount option is respected').toBe(0);
+  })).exitCode, 'make sure maxDiffPixels option is respected').toBe(0);
 
   expect((await runInlineTest({
     ...files,
     'playwright.config.ts': `
       module.exports = { projects: [
-        { expect: { toMatchSnapshot: { pixelCount: ${BAD_PIXELS} } } },
+        { expect: { toMatchSnapshot: { maxDiffPixels: ${BAD_PIXELS} } } },
       ]};
     `,
     'a.spec.js-snapshots/snapshot.png': image1,
@@ -468,10 +468,10 @@ test('should respect pixelCount option', async ({ runInlineTest }) => {
         expect(Buffer.from('${image2.toString('base64')}', 'base64')).toMatchSnapshot('snapshot.png');
       });
     `
-  })).exitCode, 'make sure pixelCount option in project config is respected').toBe(0);
+  })).exitCode, 'make sure maxDiffPixels option in project config is respected').toBe(0);
 });
 
-test('should respect pixelRatio option', async ({ runInlineTest }) => {
+test('should respect maxDiffPixelRatio option', async ({ runInlineTest }) => {
   const width = 20, height = 20;
   const BAD_RATIO = 0.25;
   const BAD_PIXELS = Math.floor(width * height * BAD_RATIO);
@@ -496,17 +496,17 @@ test('should respect pixelRatio option', async ({ runInlineTest }) => {
       const { test } = require('./helper');
       test('is a test', ({}) => {
         expect(Buffer.from('${image2.toString('base64')}', 'base64')).toMatchSnapshot('snapshot.png', {
-          pixelRatio: ${BAD_RATIO}
+          maxDiffPixelRatio: ${BAD_RATIO}
         });
       });
     `
-  })).exitCode, 'make sure pixelRatio option is respected').toBe(0);
+  })).exitCode, 'make sure maxDiffPixelRatio option is respected').toBe(0);
 
   expect((await runInlineTest({
     ...files,
     'playwright.config.ts': `
       module.exports = { projects: [
-        { expect: { toMatchSnapshot: { pixelRatio: ${BAD_RATIO} } } },
+        { expect: { toMatchSnapshot: { maxDiffPixelRatio: ${BAD_RATIO} } } },
       ]};
     `,
     'a.spec.js-snapshots/snapshot.png': image1,
@@ -516,10 +516,10 @@ test('should respect pixelRatio option', async ({ runInlineTest }) => {
         expect(Buffer.from('${image2.toString('base64')}', 'base64')).toMatchSnapshot('snapshot.png');
       });
     `
-  })).exitCode, 'make sure pixelCount option in project config is respected').toBe(0);
+  })).exitCode, 'make sure maxDiffPixels option in project config is respected').toBe(0);
 });
 
-test('should satisfy both pixelRatio and pixelCount', async ({ runInlineTest }) => {
+test('should satisfy both maxDiffPixelRatio and maxDiffPixels', async ({ runInlineTest }) => {
   const width = 20, height = 20;
   const BAD_RATIO = 0.25;
   const BAD_COUNT = Math.floor(width * height * BAD_RATIO);
@@ -544,12 +544,12 @@ test('should satisfy both pixelRatio and pixelCount', async ({ runInlineTest })
       const { test } = require('./helper');
       test('is a test', ({}) => {
         expect(Buffer.from('${image2.toString('base64')}', 'base64')).toMatchSnapshot('snapshot.png', {
-          pixelCount: ${Math.floor(BAD_COUNT / 2)},
-          pixelRatio: ${BAD_RATIO},
+          maxDiffPixels: ${Math.floor(BAD_COUNT / 2)},
+          maxDiffPixelRatio: ${BAD_RATIO},
         });
       });
     `
-  })).exitCode, 'make sure it fails when pixelCount < actualBadPixels < pixelRatio').toBe(1);
+  })).exitCode, 'make sure it fails when maxDiffPixels < actualBadPixels < maxDiffPixelRatio').toBe(1);
 
   expect((await runInlineTest({
     ...files,
@@ -558,12 +558,12 @@ test('should satisfy both pixelRatio and pixelCount', async ({ runInlineTest })
       const { test } = require('./helper');
       test('is a test', ({}) => {
         expect(Buffer.from('${image2.toString('base64')}', 'base64')).toMatchSnapshot('snapshot.png', {
-          pixelCount: ${BAD_COUNT},
-          pixelRatio: ${BAD_RATIO / 2},
+          maxDiffPixels: ${BAD_COUNT},
+          maxDiffPixelRatio: ${BAD_RATIO / 2},
         });
       });
     `
-  })).exitCode, 'make sure it fails when pixelRatio < actualBadPixels < pixelCount').toBe(1);
+  })).exitCode, 'make sure it fails when maxDiffPixelRatio < actualBadPixels < maxDiffPixels').toBe(1);
 
   expect((await runInlineTest({
     ...files,
@@ -572,12 +572,12 @@ test('should satisfy both pixelRatio and pixelCount', async ({ runInlineTest })
       const { test } = require('./helper');
       test('is a test', ({}) => {
         expect(Buffer.from('${image2.toString('base64')}', 'base64')).toMatchSnapshot('snapshot.png', {
-          pixelCount: ${BAD_COUNT},
-          pixelRatio: ${BAD_RATIO},
+          maxDiffPixels: ${BAD_COUNT},
+          maxDiffPixelRatio: ${BAD_RATIO},
         });
       });
     `
-  })).exitCode, 'make sure it passes when actualBadPixels < pixelRatio && actualBadPixels < pixelCount').toBe(0);
+  })).exitCode, 'make sure it passes when actualBadPixels < maxDiffPixelRatio && actualBadPixels < maxDiffPixels').toBe(0);
 });
 
 test('should compare PNG images', async ({ runInlineTest }) => {

tests/playwright-test/to-have-screenshot.spec.ts

@@ -212,11 +212,11 @@ test('should compile with different option combinations', async ({ runTSC }) =>
       test('is a test', async ({ page }) => {
         await expect(page).toHaveScreenshot();
         await expect(page.locator('body')).toHaveScreenshot({ threshold: 0.2 });
-        await expect(page).toHaveScreenshot({ pixelRatio: 0.2 });
+        await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.2 });
         await expect(page).toHaveScreenshot({
           threshold: 0.2,
-          pixelCount: 10,
-          pixelRatio: 0.2,
+          maxDiffPixels: 10,
+          maxDiffPixelRatio: 0.2,
           disableAnimations: true,
           omitBackground: true,
           timeout: 1000,
@@ -473,7 +473,7 @@ test('should use provided name via options', async ({ runInlineTest }) => {
   expect(result.exitCode).toBe(0);
 });
 
-test('should respect pixelCount option', async ({ runInlineTest }) => {
+test('should respect maxDiffPixels option', async ({ runInlineTest }) => {
   const BAD_PIXELS = 120;
   const EXPECTED_SNAPSHOT = paintBlackPixels(whiteImage, BAD_PIXELS);
 
@@ -495,17 +495,17 @@ test('should respect pixelCount option', async ({ runInlineTest }) => {
       const { test } = require('./helper');
       test('is a test', async ({ page }) => {
         await expect(page).toHaveScreenshot('snapshot.png', {
-          pixelCount: ${BAD_PIXELS}
+          maxDiffPixels: ${BAD_PIXELS}
         });
       });
     `
-  })).exitCode, 'make sure pixelCount option is respected').toBe(0);
+  })).exitCode, 'make sure maxDiffPixels option is respected').toBe(0);
 
   expect((await runInlineTest({
     ...files,
     'playwright.config.ts': `
       module.exports = { projects: [
-        { expect: { toMatchSnapshot: { pixelCount: ${BAD_PIXELS} } } },
+        { expect: { toMatchSnapshot: { maxDiffPixels: ${BAD_PIXELS} } } },
       ]};
     `,
     'a.spec.js-snapshots/snapshot.png': EXPECTED_SNAPSHOT,
@@ -515,10 +515,10 @@ test('should respect pixelCount option', async ({ runInlineTest }) => {
         await expect(page).toHaveScreenshot('snapshot.png');
       });
     `
-  })).exitCode, 'make sure pixelCount option in project config is respected').toBe(0);
+  })).exitCode, 'make sure maxDiffPixels option in project config is respected').toBe(0);
 });
 
-test('should respect pixelRatio option', async ({ runInlineTest }) => {
+test('should respect maxDiffPixelRatio option', async ({ runInlineTest }) => {
   const BAD_RATIO = 0.25;
   const BAD_PIXELS = IMG_WIDTH * IMG_HEIGHT * BAD_RATIO;
   const EXPECTED_SNAPSHOT = paintBlackPixels(whiteImage, BAD_PIXELS);
@@ -541,17 +541,17 @@ test('should respect pixelRatio option', async ({ runInlineTest }) => {
       const { test } = require('./helper');
       test('is a test', async ({ page }) => {
         await expect(page).toHaveScreenshot('snapshot.png', {
-          pixelRatio: ${BAD_RATIO}
+          maxDiffPixelRatio: ${BAD_RATIO}
         });
       });
     `
-  })).exitCode, 'make sure pixelRatio option is respected').toBe(0);
+  })).exitCode, 'make sure maxDiffPixelRatio option is respected').toBe(0);
 
   expect((await runInlineTest({
     ...files,
     'playwright.config.ts': `
       module.exports = { projects: [
-        { expect: { toMatchSnapshot: { pixelRatio: ${BAD_RATIO} } } },
+        { expect: { toMatchSnapshot: { maxDiffPixelRatio: ${BAD_RATIO} } } },
       ]};
     `,
     'a.spec.js-snapshots/snapshot.png': EXPECTED_SNAPSHOT,
@@ -561,7 +561,7 @@ test('should respect pixelRatio option', async ({ runInlineTest }) => {
         await expect(page).toHaveScreenshot('snapshot.png');
       });
     `
-  })).exitCode, 'make sure pixelCount option in project config is respected').toBe(0);
+  })).exitCode, 'make sure maxDiffPixels option in project config is respected').toBe(0);
 });
 
 test('should attach expected/actual and no diff when sizes are different', async ({ runInlineTest }, testInfo) => {

utils/generate_types/overrides-test.d.ts

@@ -49,11 +49,11 @@ type ExpectSettings = {
     /**
      * An acceptable amount of pixels that could be different, unset by default.
      */
-    pixelCount?: number,
+    maxDiffPixels?: number,
     /**
      * An acceptable ratio of pixels that are different to the total amount of pixels, between `0` and `1` , unset by default.
      */
-    pixelRatio?: number,
+    maxDiffPixelRatio?: number,
   }
 };