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

【问题标题】：What is a good way to make screenshot tests with Playwright?用 Playwright 进行屏幕截图测试的好方法是什么？
【发布时间】：2021-01-19 04:46:37
【问题描述】：

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

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

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

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

【问题讨论】：

您是否正在尝试比较图像进行回归测试？
是的。结果我想得到这样的结果：npmjs.com/package/jest-image-snapshot我认为，这是可能的，但我知道我需要如何做到这一点

标签： javascript e2e-testing playwright

【解决方案1】：

从 Playwright 团队开始开发自己的可以比较屏幕截图的测试运行器这一事实来看：

playwright-test#visual-comparisons

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 中

【讨论】：

我在 playwright-test 方面有过很好的体验，但对于其他人，请注意“Playwright 测试运行器可在预览版中使用，可能会发生微小的重大变化”。 API 上有很多移动，这可能会导致一些维护开销。