随着前端开发的不断发展，我们需要处理越来越多的 CSS 样式、HTML 重构、以及自动化测试等问题。为此，我们需要使用一些工具来帮助我们完成这些任务，npm 毫无疑问是我们日常开发中必不可少的工具。
reg-suit-core 是一个基于截图的前端可视化测试工具，可以让我们在开发过程中自动化地进行前端界面测试。在本文中，我们将介绍如何使用 reg-suit-core，并讨论其深度和学习意义。
安装
首先，我们需要在命令行中安装 reg-suit-core：
--- ------- ------------- ----------
然后，我们需要创建一个 reg-suit.config.js 文件来配置 reg-suit-core：
-------------- - - ----------- --------- -------------- ---------- ---------- -------------------- ------- -------------- --------------------- ------------ ---- --- ------ --------------------- ----- --
这是一个示例配置文件，它指定了一个主分支为 master，对比分支为 develop，使用 github-pr-check 作为测试报告工具，忽略 *.DS_Store 和 node_modules 目录下的所有文件，使用 npm run test 命令进行测试，且当没有变更时不会自动批准合并请求。
入门
接下来，我们需要创建一些测试用例。在这里，我们将使用 Jest 来进行测试：
-------------- ----------- -- -- -
----------- ----------- ----- -- -- -
-- ---- ---- ----
----- ---------- - ----- -----------------
------------------------------------------
---
---在测试用例中，我们需要调用 reg-suit-core 的一个方法，post。这个方法会自动地比较当前的截图和之前生成的截图，如果存在差异，就会生成一个 diff 截图并将其上载到指定的位置。
此外，我们还需要添加一个 Jest 的配置文件，jest.config.js：
-------------- - - ------- ----------------- ---------- ------------------- --
这里，我们选择了 jest-puppeteer 作为 Jest 的预设工具，同时指定了测试文件的位置。
进阶
reg-suit-core 并不仅仅局限于截图对比，它还提供了一些高级特性。例如，我们可以使用已有的截图来生成一个比较结果：
----- ------ - --- ------
----- ------------- - ----- ------ -- -
----- ---------- - ----- ------------------
---------------- ------------
--
-------------- ----------- -- -- -
--------------- -- -- -
----- ------------------
---
---------------- -- -- -
----- -----------------------------------
---
----------- ----------- ----- -- -- -
----- ----------------------
-- ---- ---- ----
---
-------------- -- -- -
----- ------------
-------
----------- ----------
-------------- -----------------
---
---
---在这个例子中，我们使用了一个 Map 来存储不同的截图，然后上传到指定的位置进行对比。
另一个重要的特性是插件系统。在 reg-suit-core 中，插件可以帮助我们自定义截图对比逻辑、扩展截图对比的控制选项，以及为测试结果添加额外的信息等等。
总结
在本文中，我们讨论了如何使用 reg-suit-core 来进行前端界面测试，包括安装、配置以及使用示例。我们还介绍了 reg-suit-core 的深度和学习意义，以及它的高级特性和插件系统。
通过使用 reg-suit-core，我们可以更加方便地进行前端测试，并且能够提升我们的开发效率和代码质量。如果你还没有使用过 reg-suit-core，不妨尝试一下，相信你一定会喜欢上它的便捷和实用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/70789