npm 包 cypress-image-snapshot 使用教程-JavaScript中文网-JavaScript教程资源分享门户

什么是 cypress-image-snapshot

cypress-image-snapshot 是一个 npm 包，它可以让你使用 Cypress 来进行网站截图测试，并提供了一些工具来比较图片，如 diffPNG、pixelmatch 等等。它支持基于快照的测试方法，这样你可以在测试中捕获网站的屏幕截图，并与之前截取的“快照”进行比较。这样做可以确保你的网站、组件和样式在更新后仍然能够按照预期正确显示。

安装

在使用 cypress-image-snapshot 之前，你需要先安装 Cypress 环境。安装方法请参考官网文档。请确保你的 Cypress 版本号 >= 3.1.0。

在安装 Cypress 环境之后，可以使用以下命令来安装 cypress-image-snapshot：

npm install -D cypress-image-snapshot

使用

在你的 Cypress 项目中创建一个目录，例如 tests/snapshots。

在测试文件中引入 cypress-image-snapshot：

import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot';

注册快照命令：

addMatchImageSnapshotCommand({
  failureThreshold: 0.05, // 可以接受的错误率
  failureThresholdType: 'percent', // 错误率类型
  customDiffConfig: { threshold: 0.1 }, // 可以更改像素比较器的阈值
  capture: 'viewport', // 截取整个网站
});

这里我们将错误率设置为 0.05%，表示只要两张图片不同数量小于这个数字，就认为测试通过。如果需要更改更多属性，可以在官网文档中查找相应的设置属性。

在你的测试中调用命令：

it('should match snapshot', () => {
  cy.visit('/').then(() => {
    cy.matchImageSnapshot({
      snapshotName: 'homepage', // 快照名称
      capture: 'viewport', // 截取整个网站
    });
  });
});

这里我们使用 matchImageSnapshot 来截取当前页面的屏幕快照并与之前生成的快照进行比较，如果两者不匹配或存在差异，则测试不通过。

示例代码

-- -------------------- ---- -------
------ - ---------------------------- - ---- -------------------------

-------------- ---------------------- --- -- -- -
  --------- -- -
    --------------
  ---

  ------------- -- -
    -------------- ---
  ---

  ------------ -- -- -
    ----------------------- ------------- ---------- ---
  ---

  ------------- -- -- -
    --------------------------------
    ----------------------- ------------- --------- ---
  ---
---

结论

使用 cypress-image-snapshot 可以简化网站截图的自动化测试，同时也保证了你的网站或组件在更新后仍然能够正确显示。它可以轻松地捕获屏幕截图并与之前生成的快照进行比较，提高了测试效率和精度。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/5eedaf5cb5cbfe1ea0610ff2