Skip to main content

视觉比较

Playwright Test 包括使用 await expect(page).toHaveScreenshot() 生成和视觉比较截图的能力。在首次执行时，Playwright 测试将生成参考截图。后续运行将与参考进行比较。

// example.spec.ts
import { test, expect } from '@playwright/test';

test('example test', async ({ page }) => {
  await page.goto('https://playwright.dev');
  await expect(page).toHaveScreenshot();
});

当您第一次运行上述代码时，测试运行器会说：

Error: example.spec.ts-snapshots/example-test-1-chromium-darwin.png is missing in snapshots, writing actual.

这是因为还没有黄金文件。此方法拍摄了一堆截图，直到两个连续的截图匹配，并将最后一个截图保存到文件系统。现在可以将其添加到存储库中了。

包含黄金期望的文件夹名称以您的测试文件名称开头：

drwxr-xr-x  5 user  group  160 Jun  4 11:46 .
drwxr-xr-x  6 user  group  192 Jun  4 11:45 ..
-rw-r--r--  1 user  group  231 Jun  4 11:16 example.spec.ts
drwxr-xr-x  3 user  group   96 Jun  4 11:46 example.spec.ts-snapshots

快照名称 example-test-1-chromium-darwin.png 由几个部分组成：

  • example-test-1.png - 快照的自动生成名称。或者，您可以将快照名称指定为 toHaveScreenshot() 方法的第一个参数：

    await expect(page).toHaveScreenshot('landing.png');

  • chromium-darwin - 浏览器名称和平台。由于不同的渲染、字体等原因，浏览器和平台之间的截图有所不同，因此您需要为它们提供不同的快照。如果您在配置文件中使用多个项目，则将使用项目名称而不是 chromium。

如果您的操作系统与 CI 系统不同，可以使用 Docker 生成/更新截图：

docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.28.0-focal /bin/bash
npm install
npx playwright test --update-snapshots

有时您需要更新参考截图，例如当页面发生更改时。使用 --update-snapshots 标志执行此操作。

npx playwright test --update-snapshots

注意，snapshotName 也接受快照文件的路径段数组，例如 expect().toHaveScreenshot(['relative', 'path', 'to', 'snapshot.png'])。 但是，此路径必须保留在每个测试文件的快照目录中（即 a.spec.js-snapshots），否则会抛出错误。

Playwright Test 使用 pixelmatch 库。您可以传递各种选项来修改其行为：

// example.spec.ts
import { test, expect } from '@playwright/test';

test('example test', async ({ page }) => {
  await page.goto('https://playwright.dev');
  await expect(page).toHaveScreenshot({ maxDiffPixels: 100 });
});

如果您想在项目中的所有测试之间共享默认值，可以在 playwright 配置中全局或按项目指定它：

import type { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
  expect: {
    toHaveScreenshot: { maxDiffPixels: 100 },
  },
};
export default config;

除了截图之外，您还可以使用 expect(value).toMatchSnapshot(snapshotName) 来比较文本或任意二进制数据。Playwright Test 自动检测内容类型并使用适当的比较算法。

这里我们将文本内容与参考进行比较。

// example.spec.ts
import { test, expect } from '@playwright/test';

test('example test', async ({ page }) => {
  await page.goto('https://playwright.dev');
  expect(await page.textContent('.hero__title')).toMatchSnapshot('hero.txt');
});

快照存储在测试文件旁边的单独目录中。例如，my.spec.ts 文件将在 my.spec.ts-snapshots 目录中生成和存储快照。您应该将此目录提交到版本控制（例如 git），并审查对它的任何更改。