如何实现与剧作家在一次测试中比较两个屏幕截图答案

【问题标题】：how to implement comparing two screenshots in one test with playwright如何实现与剧作家在一次测试中比较两个屏幕截图
【发布时间】：2023-02-20 19:39:55
【问题描述】：

我对剧作家很陌生，我有一个问题。我正在尝试在一次测试中比较两个屏幕截图（之前和之后）。这就是我想要实现的目标：

导航到网页
截图（before.png）
做一些事情，改变状态等等
截图（after.png）

比较 before.png 和 after.png（如果相同则测试通过，否则测试失败）

是这样的：

test('compare screenshots', async ({ page }) => {
  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`
  })
  expect(beforeImage).toMatchSnapshot(afterImage)
});

但它不是这样工作的。任何想法/建议我怎样才能做到这一点？帮助将不胜感激

【问题讨论】：

标签： compare e2e-testing playwright playwright-test image-comparison

【解决方案1】：

你可以这样做：

test('compare screenshots', async ({ page }, testInfo)=>{
  await page.goto(pageUrl);
  const screenshotTarget =  page.locator(scTarget);
  await expect(screenshotTarget).toHaveScreenshot( `${testInfo.title}.png`);
  //
  // some state changes implemented here
  //
  await expect(screenshotTarget).toHaveScreenshot( `${testInfo.title}.png`);
});

我更喜欢使用测试标题来命名我的屏幕截图，但如果您只输入两次相同的名称，它也应该有效。然后，如果您在没有 --update-snapshots 的情况下运行测试，如果发生一些视觉变化，它们应该会失败。

【讨论】：

【解决方案2】：

您可以使用以下方法检查两个屏幕截图之间的相等性：

期望（缓冲区。比较（beforeImage，afterImage））。toEqual（0）

当心 - 这种方法不稳定并且对渲染中的单个像素差异敏感（例如，如果任何动画/过渡未完成）。

【讨论】：