介绍
@potato4d/pw 是一个基于 Puppeteer 的截图比较工具，适用于前端开发人员进行 UI 自动化测试和截图比较。它提供了易于使用且友好的 API，方便开发人员快速比较网页的不同版本。
安装
使用 npm 安装：
npm install @potato4d/pw --save-dev
使用
在使用 @potato4d/pw 进行网页截图比较前，需要先确保安装了 Chrome 浏览器和 Puppeteer。
初始化
@potato4d/pw 的初始化很简单，只需要传入需要比较的 URL，以及一个可选的配置对象即可：
const { PW } = require('@potato4d/pw');
const pw = new PW('https://www.example.com', {
headless: true, // 是否在无头模式下运行 Chrome 浏览器
});截图
在初始化之后，可以使用 capture 方法截取网页的截图，并保存为文件：
await pw.capture('/tmp/screenshot.png'); capture 方法接受一个文件路径参数，表示将截图保存到该路径下。
比较
当需要比较两个网页版本是否有差异时，可以使用 compareTo 方法，该方法也接受一个文件路径参数：
const diff = await pw.compareTo('/tmp/screenshot.png');compareTo 方法返回一个 Promise，其中包含比较两个截图的结果。该结果是一个对象，其中的 diff 字段表示两个截图相差的像素点的数量。如果两个截图完全相同，则 diff 的值将为 0。
清理
当不再需要使用 @potato4d/pw 时，应该调用 dispose 方法进行清理工作：
await pw.dispose();
该方法将关闭 Chrome 浏览器，并释放所有相关资源。
示例
-- -------------------- ---- -------
----- - -- - - ------------------------
------ -- -- -
----- -- - --- ----------------------------- -
--------- -----
---
----- -----------------------------------
----- -------------
----- --- - --- --------------------------------- -
--------- -----
---
----- ------------------------------------
----- ---- - ----- -------------------------------------
------------------ -- ------------
----- --------------
-----结论
@potato4d/pw 是一个非常有用的前端开发工具，它简化了 UI 自动化测试和截图比较的过程。使用该工具，开发人员可以轻松地比较两个网页版本的差异，节省大量时间和精力。
如果您需要进行截图比较的工作，那么不妨试试 @potato4d/pw 吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005668681e8991b448e2b58