)
Playwright Test 具备通过await expect(page).toHaveScreenshot()生成并进行视觉对比的能力。首次执行时Playwright Test 会生成基准截图。后续运行将会与基准进行对比。import{test,expect}fromplaywright/test;test(example test,async({page}){awaitpage.goto(https://playwright.net.cn);awaitexpect(page).toHaveScreenshot();});1、生成截图当你首次运行上述代码时测试运行器会提示Error: A snapshot doesnt exist at example.spec.ts-snapshots/example-test-1-chromium-darwin.png, writing actual.这是因为此时还没有“黄金”基准文件。该方法会自动捕获多张截图直到两张连续的截图匹配成功并将最后一张截图保存到文件系统中。现在该文件已准备好被添加到版本库中。注意chromium-darwin - 浏览器名称和平台。由于渲染方式、字体等不同不同浏览器和平台之间的截图会有差异因此你需要为它们分别准备不同的快照。2、更新截图有时你需要更新基准截图例如当页面发生更改时。可以使用--update-snapshots标志来完成此操作npx playwright test--update-snapshots
Playwright视觉比较(图片比对测试)
发布时间：2026/6/10 9:36:09
Playwright Test 具备通过await expect(page).toHaveScreenshot()生成并进行视觉对比的能力。首次执行时Playwright Test 会生成基准截图。后续运行将会与基准进行对比。import{test,expect}fromplaywright/test;test(example test,async({page}){awaitpage.goto(https://playwright.net.cn);awaitexpect(page).toHaveScreenshot();});1、生成截图当你首次运行上述代码时测试运行器会提示Error: A snapshot doesnt exist at example.spec.ts-snapshots/example-test-1-chromium-darwin.png, writing actual.这是因为此时还没有“黄金”基准文件。该方法会自动捕获多张截图直到两张连续的截图匹配成功并将最后一张截图保存到文件系统中。现在该文件已准备好被添加到版本库中。注意chromium-darwin - 浏览器名称和平台。由于渲染方式、字体等不同不同浏览器和平台之间的截图会有差异因此你需要为它们分别准备不同的快照。2、更新截图有时你需要更新基准截图例如当页面发生更改时。可以使用--update-snapshots标志来完成此操作npx playwright test--update-snapshots
