什么是 pixel-change
pixel-change 是一个基于 node-canvas 的 npm 包，可用于检测两张图片是否完全一致。它可以用于前端自动化测试中，在比较页面是否发生变化时非常有用。
安装
使用 npm 安装：
npm install pixel-change
使用
引入
const pixelChange = require('pixel-change');API
pixelChange(options)
该方法用于比较两张图片是否完全一致。返回一个 Promise 对象，resolve 值为 true 表示两张图片一致，resolve 值为 false 表示两张图片不一致。
-- -------------------- ---- -------
----- ------- - -
----- -----------------
----- -----------------
------ ---- -- ------------
--
--------------------
------------ -- -
-- -------- -
---------------- --- ------ --- --- --------
- ---- -
---------------- --- ------ --- -------------
-
--
------------ -- -
---------------------
---示例
在 Jest 中使用
首先，在项目根目录下创建一个 __tests__ 文件夹。
接着，我们可以创建一个 index.test.js 文件：
-- -------------------- ---- -------
----- ----------- - ------------------------
----- - -------------------- - - -------------------------------
--------------- -------------------- ---
--------------- ------ -- -- -
---------- ----- --- ---------- ----- -- -- -
----- ------- - -
----- -----------------------
----- -------------------
--
----- ------ - ----- ---------------------
-- --------- -
---------------- --- ------ --- -------------
-
--------------------------------------
---
---在这个文件中，我们使用了 jest-image-snapshot 包中提供的 toMatchImageSnapshot 方法，该方法会将当前页面截图与之前的快照进行比较。如果两者一致，则测试通过；否则，测试失败。
但是，有些情况下，页面上的变化（如某个元素的颜色变化、某个元素的位置变化等）可能不会被截图包含在内，因此我们需要使用 pixel-change 包来检测页面是否发生了变化。如果页面没有发生变化，则可以更新快照。
在 Cypress 中使用
安装依赖：
npm install --save-dev cypress-image-snapshot
打开 cypress/plugins/index.js 文件，添加以下代码：
-- -------------------- ---- ------- ----- ---------------- - ------------------------------- ----- - --------------------------- - - ----------------------------------------- -------------- - ---- ------- -- - ------------------------------- -------- ---------- ------------------ ------ ------- --
打开 cypress/support/commands.js 文件，添加以下代码：
import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
addMatchImageSnapshotCommand();接着，在 cypress/integration 目录下创建一个 example.spec.js 文件：
-- -------------------- ---- -------
----- ----------- - ------------------------
----------------- ------ -- -- -
---------- ------ -- --- ------ ----- -- -- -
---------------------------------
----- ------- - -
----- ---------------------------------
----- ---------------------------
--
----- ------ - ----- ---------------------
-- --------- -
---------------- --- ------ --- -------------
-
------------------------------ -------
---
---如果页面未发生变化，可以使用 cy.screenshot() 方法进行更新快照。如果页面发生了变化，需要对代码进行修改或修正样式表的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672593660cf7123b363a2