问题标签 [jest-image-snapshot]

我正在使用 Puppeteer 进行视觉回归测试（特别是我为此使用了 jest-image-snapshot 库）。不幸的是，当我使用具有不同屏幕特性的机器时，屏幕截图略有不同，测试失败。例如，我有一个测试，屏幕截图最初是在非视网膜 Mac 显示器上拍摄的，但是当测试在具有视网膜显示器的 Mac 上运行时，屏幕截图中的细微差别会导致测试失败。

1. 是否可以使用 Puppeteer 截取独立于所用显示器的屏幕截图？
2. 我试图通过调用强制在视网膜显示器上进行非视网膜屏幕截图setViewport，但这没有帮助：page.setViewport({width: 800, height: 600, deviceScaleFactor: 1});
3. 是否有任何其他屏幕截图工具/技术可以解决此问题？

我正在尝试使用呈现 HTML5 画布的 React 组件进行图像快照测试（即，未模拟）。我正在使用 Jest、React 测试库、Node Canvas、Puppeteer 和 Jest Image Snapshot。

给定以下 React 组件render()：

以下是 Jest 测试的样子：

但是，此测试会生成一个空白的白色 800x600 PNG 图像作为基线。

但是，如果我将测试更改为：

它基于我的 React 组件生成基线 PNG 快照就好了。

我目前正在尝试调试管道中出现问题的地方。

我正在尝试在竹子构建运行中运行 puppeteer。但似乎有问题正确执行它。下面的详细错误

我想知道我是否必须安装一些东西才能让它在竹子中运行？或者我必须做其他选择。网上没有关于此问题的文章。

还有更多背景知识，我正在尝试将 jest-image-snapshot 实施到我的测试过程中。并调用生成这样的快照

的原因日志TypeError: Cannot read property 'newPage' of undefined是因为const page = await browser.newPage();

我正在尝试在元素上模拟 mousedown 操作，然后拍摄快照，但这似乎不起作用，因为屏幕截图不是我所期望的。

根据api docs，这就是它的作用

我尝试了以下方法：

按下鼠标时，该按钮有一些动画，这就是我要截屏的内容。

感谢支持

我在 jest-image-shot 和 puppeteer repos 中浏览了几个问题。然而，我还没有找到合适的解决方案。基本上，我想要做的是，允许 jesttoMatchImageSnapshot在 puppeteer chrome 实例的执行页面中忽略某些元素或区域来运行它。

jest-image-shot 本身中的任何指针或现有解决方案，或者在执行 puppeteer 期间删除元素是解决它的唯一方法？

在我做了 JSON.stringify 整个对象之后，字符串看起来像这样

'Error: Expected image to match or be a close match to snapshot but was 0.009980258828690502% different from snapshot (91 differing pixels).\n\u001b[1m\u001b[31mSee diff for details:\u001b[39m\u001b[22m \u001b[31m/src/pages/__image_snapshots__/__diff_output__/register-test-js-register-page-register-automated-desktop-control-1-diff.png\u001b[39m\n at Object.toMatchImageSnapshot (/src/command/getPageImageShot.js:62:25)\n at <anonymous>\n at process._tickCallback (internal/process/next_tick.js:189:7)'

这个值似乎不是我的 json.stringify 的结果，因为它在对象中的值本身就是一个字符串。

我想知道如何See diff for details从这团混乱中解析出整个路径字符串（在这种情况下，它是之后的路径，但中间没有所有的胡言乱语）？什么过程产生了所有 39m、22m、u0001b 等？解析它是最好的方法吗？也许我忽略了一些更好的方法？

我很想

我目前正在尝试弄清楚如何在 puppeteer 浏览器中呈现我的 React 应用程序，以便我可以截取屏幕截图并在将来执行视觉回归测试。我见过的大多数实现方式是通过启动快速服务器并在请求某个端点时提供 html 页面。但是，如果可能的话，我想避免启动服务器，并且可能希望在 puppeteer 浏览器中使用类似 ReactDOM.render 的东西来渲染它，就像 React 一样。

到目前为止，我已经尝试创建 React 应用程序的构建，然后使用 puppeteer 的 page.setContent api 将构建的 index.html 直接呈现给 puppeteer 浏览器。但是，当我这样做时，浏览器不会在屏幕上呈现任何内容，也不会对静态文件发出网络请求。

这就是它在 puppeteer 中的样子： puppeteer browser

这是 page.setContent 的方法：

另外，如果有人知道无需启动服务器即可运行图像快照测试的更好方法，请告诉我。谢谢你。

我正在尝试为使用 jest、puppeteer 和 jest-image-snapshot 编写的 webgl 渲染器编写快照测试。我测试的方式是我编写了一个 react TestApp ，其中包含如下画布：

我需要为渲染器提供渲染场景时所需的 WebGLRenderingContext。因此，在每次测试之前，我都会执行以下操作：

每当我调用 canvas.getContext("webgl") 时，返回的 WebGLRenderingContext 为空。以前有人遇到过这个问题吗？

我注意到有一个选项可以扩展 TestCafe 的 Selector。我正在从事的项目需要进行视觉图像测试。

我想看看我是否可以jest-image-snapshot与 TestCafe 一起工作……但没有这样做。

因此，需要帮助来了解如何将该包合并到对 TestCafe 期间截取的屏幕截图的验证中。

这是我到目前为止编写的一些基本代码：

const { toMatchImageSnapshot } = require('jest-image-snapshot'); var fs = 需要('fs');

fixture('快照').page('https://tallkurideon.myshopify.com/');

我正在使用 jest 快照以及 jest-image-snapshots。它们在本地工作，但是当我在 azure 管道中运行它们时，我得到：

每次运行时更新快照不会破坏目的吗？

我进行了一些研究，但我找到的最佳解决方案是更新快照或删除 CI=true。删除 CI=true 不起作用，我看不出更新快照如何是一个好的解决方案。

单元测试以及集成测试中的图像快照都会发生这种情况。

任何澄清或替代解决方案都值得赞赏。