npm 包 reg-suit-interface 使用教程

前言

在前端开发中，我们需要经常进行视觉 UI 方面的测试，以确保我们的网站或者客户端应用程序在不同的屏幕和环境下都能正常显示和工作。reg-suit-interface 是一个用于比较两个截图并生成报告的 npm 包，它可以帮助我们在自动化测试方面取得更好的效果。

安装 reg-suit-interface

在使用 reg-suit-interface 之前，我们需要确保已经安装了 Node.js 和 npm 包管理工具。我们可以通过以下命令来安装 reg-suit-interface：

npm install reg-suit-interface --save-dev

使用 reg-suit-interface

使用 reg-suit-interface 可以分为以下几个步骤：

1. 配置 reg-suit-interface
2. 运行 reg-suit-interface
3. 查看报告

配置 reg-suit-interface

reg-suit-interface 需要在项目根目录下创建 .regconfig.yml 配置文件。我们可以通过以下代码来创建一个最简单的配置文件：

suites:
  - name: default
    diffDetector:
      name: looks-same
    base: ./screenshots/base
    head: ./screenshots/head
    diff: ./screenshots/diff

这个配置文件中，我们指定了一个叫做 default 的 suite，它包含了 diffDetector、base、head 和 diff 四个属性。整个配置文件的作用是告诉 reg-suit-interface 在哪里找到基准截图和需要比较的截图，以及要使用哪种方式进行比较。

运行 reg-suit-interface

在配置完 reg-suit-interface 之后，我们可以通过以下命令来运行它：

npx reg-cli run

在运行命令之后，reg-suit-interface 会自动比较两个截图，并生成一个报告。

查看报告

当 reg-suit-interface 运行完成之后，它会生成一个包含比较结果的报告。我们可以通过以下命令来查看报告：

npx reg-cli report

这个命令会在浏览器中打开 reg-suit-interface 生成的报告页面。在这个页面中，我们可以看到两个截图之间的差异，以及 reg-suit-interface 自动检测出的问题和建议。

示例代码

以下是一个使用 reg-suit-interface 的示例代码：

const regSuitInterface = require('reg-suit-interface');

(async () => {
  await regSuitInterface.diff();
})();

这个示例代码用到了 regSuitInterface.diff() 方法，它会自动生成一个包含基准截图和需要比较的截图的 suite，并进行自动化比较和生成报告。

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