是否可以使用 puppeteer 将屏幕截图与网页的 ui 元素进行比较并找出差异？

Question

我正在寻找与此相关的任何文档或帮助。现在为了测试 UI 元素是否出现在屏幕上，我只检查该类或 ID 是否已加载，例如登录表单、标题、徽标、提交按钮、输入字段等。

我想我记得看到 Puppeteer 可以帮助分析屏幕截图，然后加载网页并比较两者，但我可能还差得远。

对于使用 Puppeteer 的任何人来说，验证网页上加载的 UI 元素的最佳方法是什么？

谢谢

Answer 1

您可以使用 Puppeteer 截取屏幕截图，然后使用类似的东西， https://github.com/uber-archive/image-diff 或 https://www.npmjs.com/package/imagemagick 到 compare two images。