Playwright视觉比较(图片比对测试)

Playwright Test 具备通过await expect(page).toHaveScreenshot()生成并进行视觉对比的能力。首次执行时，Playwright Test 会生成基准截图。后续运行将会与基准进行对比。

import{test,expect}from'@playwright/test';test('example test',async({page})=>{awaitpage.goto('https://playwright.net.cn');awaitexpect(page).toHaveScreenshot();});

1、生成截图

当你首次运行上述代码时，测试运行器会提示：

Error: A snapshot doesn't exist at example.spec.ts-snapshots/example-test-1-chromium-darwin.png, writing actual.

这是因为此时还没有“黄金”基准文件。该方法会自动捕获多张截图，直到两张连续的截图匹配成功，并将最后一张截图保存到文件系统中。现在，该文件已准备好被添加到版本库中。

注意：chromium-darwin - 浏览器名称和平台。由于渲染方式、字体等不同，不同浏览器和平台之间的截图会有差异，因此你需要为它们分别准备不同的快照。

2、更新截图
有时你需要更新基准截图，例如当页面发生更改时。可以使用--update-snapshots标志来完成此操作

npx playwright test--update-snapshots