跳到主要内容

视觉对比

引言

Playwright Test 提供了使用 await expect(page).toHaveScreenshot() 生成和视觉对比截图的能力。首次执行时,Playwright Test 会生成参考截图。后续运行将与参考截图进行对比。

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

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

浏览器渲染可能因宿主操作系统、版本、设置、硬件、电源(电池 vs 电源适配器)、无头模式以及其他因素而异。为了获得一致的截图,请在生成基准截图的相同环境中运行测试。

生成截图

首次运行上述代码时,测试运行器会提示

Error: A snapshot doesn't exist at example.spec.ts-snapshots/example-test-1-chromium-darwin.png, 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

快照名称和路径可以在 playwright 配置中的 testConfig.snapshotPathTemplate 中配置。

更新截图

有时你需要更新参考截图,例如页面发生变化时。可以使用 --update-snapshots 标志来完成此操作。

npx playwright test --update-snapshots

请注意,snapshotName 也接受一个包含快照文件路径段的数组,例如 expect().toHaveScreenshot(['relative', 'path', 'to', 'snapshot.png'])。但是,此路径必须位于每个测试文件对应的快照目录内(即 a.spec.js-snapshots),否则会抛出错误。

选项

maxDiffPixels

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

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

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

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

playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
expect: {
toHaveScreenshot: { maxDiffPixels: 100 },
},
});

stylePath

你可以在截屏时为页面应用自定义样式表。这有助于过滤掉动态或易变元素,从而提高截图的确定性。

screenshot.css
iframe {
visibility: hidden;
}
example.spec.ts
import { test, expect } from '@playwright/test';

test('example test', async ({ page }) => {
await page.goto('https://playwright.net.cn');
await expect(page).toHaveScreenshot({ stylePath: path.join(__dirname, 'screenshot.css') });
});

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

playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
expect: {
toHaveScreenshot: {
stylePath: './screenshot.css'
},
},
});

非图片快照

除了截图,你还可以使用 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.net.cn');
expect(await page.textContent('.hero__title')).toMatchSnapshot('hero.txt');
});

快照存储在测试文件旁边的一个单独目录中。例如,my.spec.ts 文件将生成快照并存储在 my.spec.ts-snapshots 目录中。你应该将此目录提交到版本控制系统(例如 git),并检查其中的任何更改。