npm包reg-suit使用教程-JavaScript中文网-JavaScript教程资源分享门户

在现代web开发技术中，前端自动化测试已经成为了不可或缺的部分。作为一个前端工程师，我们需要关注页面的基本元素样式的可视化变化，需要对页面的样式兼容性进行测试。然而，手动测试往往会浪费很多的时间，而且容易出错。因此，众多的自动化测试工具应运而生。reg-suit是一个全名是regression suite的自动化测试工具，它能帮助前端工程师快速定位并解决样式和布局的变化和兼容性问题。

reg-suit是什么?

reg-suit是一个流行的前端自动化测试工具，它支持对页面的基本元素样式变化、布局的变化和兼容性问题进行测试。reg-suit可以直接在命令行中使用，也可以将其集成到CI/CD系统中使用。其中，"regression suite"指的是“回归套件”，指的是一系列测试用例的集合，这个概念很适合前端自动化测试。

参考官方文档：https://github.com/reg-viz/reg-suit

安装reg-suit

在开始使用reg-suit之前，你需要先把它安装到你的本地计算机上。通过如下命令可以在全局安装（确保已经安装Node.js）：

npm install -g reg-suit

使用reg-suit

安装完成之后，我们就可以使用了。reg-suit通过比较两个不同的版本（不同版本可以是不同分支或者不同的commit）的快照（screenshot）生成一份报告，报道会检测页面上元素的可视化变化，并为你提供详细报告。下面我们来演示如何使用reg-suit：

1.配置文件

在使用reg-suit之前，你需要创建一个配置文件，以告诉reg-suit测试的一些细节信息。这个配置文件通常命名为regconfig.json，要放在与测试代码保持同级的根目录下。下面的是一个典型的配置文件的例子：

-- -------------------- ---- -------
-
  -------------- -
    -
      ----- ---------
      ------- ------
      ------------- --------
    --
    -
      ----- ------------
      ------- ------
      ------------- -----------
    -
  --
  --------------- ------------------------
  ------------- -
      -------- ---
      ---------- -
  --
  ----------- -
      -
          ------- ---------
          --------- ------------------------
          -------------- ----
      -
  -
-

为了说明，下面我们依次介绍一下上面的配置项：

注意：如果本地没有上述分支，则需要执行fetch；如果已经有了也可以执行git checkout切换。

2.生成快照

配置好了之后，我们就可以使用命令行命令请求生成快照：

reg-suit run --config regconfig.json

该命令将会自动检测你的项目，并且生成基于master分支和feature-1分支的快照。快照将会输出到snapshot/__reg-suit__文件夹下。

3.生成测试报告

执行完生成快照之后，我们可以通过reg-suit run命令来生成测试报告：

reg-suit run --config regconfig.json

report会被生成到snapshot/__reg-suit__/report.html文件夹下。你可以使用浏览器打开该文件来查看测试报告。

示例代码

为了更好地说明reg-suit，下面我们给出一个样例代码：

-- -------------------- ---- -------
--------- -----
------
------
  ----- ----------------
  ---------------------
  -------
    -- -
        ---------- -----
        ----------- -------
        ------- --
    -
    - -
        ---------- -----
        ----------- -------
        ------- ---- -----
    -
    ---------- -
        ------ ------
        ------- - -----
        -------- -----
        ---------------- -------
        ------------ -------
        ------- ------
        ----------------- -----
    -
    ---- -
        ------ ------
        ------- ------
        ----------------- -----
    -
  --------
-------
------
  -------------------
  ----------------------------
  ---- ------------------
      ---- ------------------
  ------
-------
-------

接下来，我们要通过添加样式，来验证reg-suit的效果。第一次提交代码我们先定义这样一种样式：

.box {
  width: 200px;
  height: 100px;
  background-color: #F00; /* 红色 */
  margin-left: 200px;
}

执行前后对比reg-suit测试，首先安装完成之后，我们需要运行下面的命令：

reg-suit init --cypress

命令的作用是在你的项目中添加reg-suit需要的特殊注入脚本，生成cypress测试框架所使用的配置文件（如果你的项目中已经有过cypress，则需要跳过上面这一步）。

然后，我们在根目录下添加一个cypress测试脚本test.js：

describe('样式变化测试', () => {
  it('红色方块应该在100px的位置', () => {
    cy.visit('http://localhost:8080')
    cy.wait(3000)
    cy.matchImageSnapshot()
  })
})

这个测试脚本的意思是访问主页面，等待一段时间（确保样式已经加载完成），然后进行快照对比测试。

最后，我们再把这次更新它到git库中，master分支下（假设已经切换到master分支下）。做完以上的三步之后，我们进入项目路径，执行如下命令：

reg-suit run

你将会看到下面的输出：

Report artifact has been generated!
[Success]

在snapshot/__reg-suit__/report.html文件夹中，你将会看到生成的测试报告。

总结

通过阅读本篇文章，你应该已经知道了reg-suit是如何实现基础元素样式的可视化变化检测的了。它可以帮助我们自动发现，解决前端样式、布局和兼容性问题。当然，在实际使用中，有很多细节需要注意，例如快照对比阈值、测试用例说明等。希望本篇文章能够帮助你更好地了解reg-suit，并为你在实际项目中使用它提供参考。

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

npm包reg-suit使用教程