使用 Playwright 进行屏幕截图测试的好方法是什么？

Question

用playwright进行截图测试的好方法是什么？

如果我真的理解的话，我需要截图，如下：

it('Some test', async () => {
    page.screenshot({ path: 'screenshot.png' });
}

但是我如何将它与标准具屏幕截图进行比较呢？ 如果我错过了文档中的某些内容，请告诉我

Answer 1

从剧作家团队开始开发自己的可以比较屏幕截图的测试运行程序来看：

剧作家测试#视觉比较

import { it, expect } from "@playwright/test";

it("compares page screenshot", async ({ page, browserName }) => {
  await page.goto("https://stackoverflow.com");
  const screenshot = await page.screenshot();
  expect(screenshot).toMatchSnapshot(`test-${browserName}.png`, { threshold: 0.2 });
});

他们不打算直接向 Playwright 添加此类功能

Answer 2

如果您想将当前屏幕截图与之前测试运行的屏幕截图进行比较，

Playwright 的

toHaveScreenshot

和

toMatchSnapshot

非常有用，但如果您想比较内存中作为缓冲区的两个屏幕截图，您可以使用

getComparator

剧作家在幕后使用的方法：

import { getComparator } from 'playwright-core/lib/utils';

await page.goto('my website here');
const beforeImage = await page.screenshot({
    path: `./screenshots/before.png`
});
//
// some state changes implemented here
//
const afterImage = await page.screenshot({
  path: `./screenshots/after.png`
});

const comparator = getComparator('image/png');
expect(comparator(beforeImage, afterImage)).toBeNull();

使用

getComparator

的好处是模糊匹配，并且可以设置允许多少个像素不同的阈值。如果您只想检查 PNG 是否完全相同，检查两个屏幕截图之间是否相等的一个非常简单的方法是：

expect(Buffer.compare(beforeImage, afterImage)).toEqual(0)

但请注意 - 这种更简单的方法很不稳定，并且对渲染中的单个像素差异敏感（例如，是否有任何动画/过渡未完成或抗锯齿是否存在差异）。

Answer 3

对于 getComparator 解决方案，您可以通过这种方式设置阈值（选项可以作为 before / after 参数之后的第三个参数传递）：

expect(比较器(beforeImage, afterImage, {maxDiffPixelRatio:0.1})).toBeNull();