在前端开发中，我们经常需要进行页面截屏和测试，并将结果保存在持续集成/测试平台，同时还需要与团队成员分享。这时候，mugshot-js 就显得尤为重要了。
Mugshot-js 是一个基于 Puppeteer 的 npm 包，可以帮助我们轻松地获取网站或应用的视觉快照并进行比较，从而实现跨浏览器测试。
在本文中，我们将介绍如何使用 Mugshot-js 包来进行前端测试以及如何将结果保存到 CI/CD 平台。同时，我们还会深入探讨一些更高级的主题，例如如何处理异步操作，如何配置 Mugshot 和 Puppeteer，以及如何在不同的环境中运行测试。
安装 Mugshot-js
要使用 Mugshot-js，需要先安装它。使用 npm 来安装，运行以下命令
npm install --save-dev mugshot
基础使用
我们首先来看看获取截屏的基本使用方式。在示例中，我们将使用 Jest 进行测试，Jest 是一个流行的 JavaScript 测试框架。在 tests 文件夹中，我们创建一个名为 test.js 的文件，：
-- -------------------- ---- -------
----- ------- - -------------------
----- ---------------- - -----------------------------
------------ --------- -- -- -
--- ------- - -----
--------------- -- -- -
----- --------- - ----- ----------------------------------
------- - --- ---------
-------------- -------------------- ------------
-------------- --------------
------------ --------------
-------
-------- --- ------------------
----------
-------------- -
--------- -----
--
---
---
---
--------------- -- -- -
----- ------------------------
---
-------------- -- -- -
----- -----------------------
---
----------- ----------- ----- -- -- -
----- ----------------
----- --------------
--- -----------
---- ---------------------------
---
----- --------------
---
---在上述代码示例中，我们在 Jest 测试文件中创建了一个 Mugshot 实例，设置了 rootDirectory、testExtension、imageSuffix 等参数。
在 beforeAll 和 afterAll 钩子函数中，我们分别在测试前和测试后进行必要的操作。在 afterEach 钩子函数中，我们调用了 mugshot.afterEach 函数，该函数用于清理 Mugshot 实例中的比较结果。
在 it 函数中，我们使用 await mugshot.start 函数和 await mugshot.end 函数来标记测试的开始和结束，之间调用 await mugshot.snap 函数来实现将所需要页面的截图进行比较。
处理异步操作
Mugshot-js 可以并不是为所有的应用程序都是异步的，因此，我们需要确保能够正确处理异步操作。要做到这一点，我们需要使用 Puppeteer 中的 page.waitFor 函数。
在下面的示例中，我们演示了如何等待元素在DOM中可用，如何等待一个 CSS 选择器加载完成，以及如何等待一个自定义函数返回。
it("waits for async task", async () => {
await page.waitForSelector(".my-css-selector");
await page.waitFor(() => {
const element = document.querySelector(".my-css-selector");
return element && element.innerText === "Hello world!";
});
});配置 Mugshot-js
Mugshot-js 提供了许多自定义内容，以方便使用它。在本节中，我们将探讨如何配置 Mugshot-js，包括如何增加自定义的比较任务、如何自定义比较函数等。
自定义比较器
在 Mugshot-js 中，我们可以使用默认的比较器，也可以使用自定义的比较器来实现更精细的比较结果。在下面的示例中，我们演示了如何实现一个简单的相似性算法，该算法比较两张截屏的可见像素色值。
-- -------------------- ---- -------
-- ------ ------- --------
-------- -------------------- ------ -
----- ------ - -------------
--- ----------------------- - --
--- ---- - - -- - - ------- - -- -- -
----- -- - ---------
----- -- - ------- - ---
----- -- - ------- - ---
----- -- - ---------
----- -- - ------- - ---
----- -- - ------- - ---
----- ----------------- - ----------
--- - --- - --- - --- -
--- - --- - --- - --- -
--- - --- - --- - ---
--
-- ------------------ - --- -
--------------------------
-
-
------ ----------------------- -- ---
-
----- ------- - --- ---------
-- ---
------------ -
-- ---
----------------- --------------
-- ---
--
-- ---
---自定义比较任务
在 Mugshot-js 中，我们可以创建不同的比较任务，在不同的浏览器中进行测试。下面是一个演示如何在不同的浏览器中实现自定义比较任务的示例
-- -------------------- ---- -------
------------ --------- -- -- -
----- ------- - --- ---------
-- ---
-------- -
---------------- -
-------- --- ------------------
----------
-------------- -
--------- -----
----- -----------------
--
---
--------- -
------- ----
------ ----
--
--
----------------- -
-------- --- ------------------
---------- -----------------------------
-------------- -
--------- -----
--
---
--------- -
------- ----
------ ----
--
--
--
-- ---
---
-- ---
------------------------------------ ----- -- -- -
-- ---
---
------------------------------------- ----- -- -- -
-- ---
---
---Mugshot-js 的扩展
Mugshot-js 有很多扩展，可以更好地实现自动化测试。下面是一些常见的 Mugshot-js 扩展：
Mugshot-mocha
Mugshot-mocha 是一个用于测试 Web 界面的基于 Mocha 框架的扩展程序。它为 Mugshot-js 类提供了一个内置的 Mocha 插件。
Mugshot-jest
Mugshot-jest 是一个用于测试 Web 界面的 Jest 框架的扩展程序。它为 Mugshot-js 类提供了一个内置的 Jest 插件。
Mugshot-visual-regression
Mugshot-visual-regression 是一个基于 JavaScript 的视觉回归工具，可与 Mugshot-js 集成。它可用于自动化实现视觉测试，并确定网站被更改时是否发生了不当的事情。
结论
Mugshot-js 能够很好地完成前端测试的工作，特别是与 Puppeteer 集成。我们在本文中探索了其基本功能，如何处理异步操作，如何自定义比较器和比较任务，同时也介绍了一些扩展程序。
我们希望本文可以帮助读者更好地了解 Mugshot-js，并在自己的项目中实现前端自动化测试。欢迎在评论区留下你的想法和问题！
参考文献
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cd381e8991b448e6667