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

Question

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

1. 导航到网页
2. 截图（before.png）
3. 做一些事情，改变状态等
4. 截图（after.png）
5. 比较 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)
});

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

Answer 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

的情况下运行测试，如果发生了一些视觉变化，它们应该会失败。

Answer 2

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

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

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