本文将为读者介绍如何使用 vrt-cli 这款npm包工具进行Visual Regression Testing（视觉回归测试）。通过本篇文章的阅读，读者可以掌握如何使用vrt-cli建立自己的视觉回归测试流程，提高自己的前端开发能力。
简介
VRT是Visual Regression Testing的缩写，即视觉回归测试。它是前端自动化测试技术的一种。其主要思想是通过比对前后两次该页面的UI展示，来发现可能出现的现实问题。VRT能够自动化地比对两个页面是否发生了变化，并在变化发生时及时发出警报。
vrt-cli是一款基于node.js开发的VRt工具，它可以通过一行简单的命令行指令来启动VRt测试。
安装
我们使用npm包管理器来一键安装vrt-cli。打开终端输入以下指令即可：
npm install -g vrt-cli
使用方法
接下来我们将会介绍vrt-cli的核心调用方法。相信通过对这些核心指令的学习，您可以掌握vrt-cli的基本用法以及一些高级的功能。
初始化VRT环境
在开始使用VRT之前，您需要先为项目初始化VRT环境。在项目根目录中输入以下命令行指令即可完成VRT环境的初始化：
vrt init
接下来您会被要求输入VRT实例的名称和VRT主机的地址。
启动VRT测试
完成VRT环境初始化之后，您可以通过以下命令行指令启动VRT测试：
vrt test
该指令会自动在VRT中检查页面UI变化，如果检测到页面变化则会自动发送警报。
对VRT截图进行比对
VRT需要比对两个截图并返回测试结果。若要对两个VRT截图进行比对，则需要使用 vrt compare 命令。
vrt compare [refImage] [testImage] [outputImage] [threshold]
其中：
- refImage: 参考图片
- testImage: 需要测试的图片
- outputImage: 比对结果输出文件
- threshold: 对比容忍度默认为0.1
指定VRT服务器地址
在启动VRT测试过程中，您可以使用-v选项来指定VRT服务器地址。
vrt test -v [VRT服务器地址]
使用VRT配置文件
您也可以把VRT测试相关信息以及手动比对两张图片的详细信息都放到VRT配置文件中。VRT配置文件需要在VRT环境初始化之后手动创建。
vrt init -c
VRT配置文件格式应该是JSON或者YAML或者Toml。
-- -------------------- ---- -------
-
------- --------
------ ------------------------
--------- -------------
---------------- -
--------------- -
-------- -----
--------- ---
--
-------------- ----
--
------------- -
------------ -----
----------- -----
-
--- -------------------- ---- -------
----- -----
---- ---------------------
------- ----------
--------------
-------------
------ ----
------- ---
------------ ----
-----------
---------- ----
--------- ------- -------------------- ---- ------- ---- - ------- --- - ----------------------- ------ - ------------ --------- - ---- -------- - ----- --------------- ------------------ - ---- ------------------- - --- ----------- - ----
示例代码
一个简单的VRT代码示例：
-- -------------------- ---- -------
----- -- - --------------------
----- --- - -------------------
----- -------- ------ -
----- ------------- - -------------
----- ------------------ - --------------------------------
----- --------- - ------------------------------
-- ------- ----------
----- -------------
---- ---------------------
---------
---
-- ----- ---------- ------- -------- ---
----- ------------- - ----------------------------
----- ------ - ----- -------------
------------- -------------------
-------------- ----------
-------------- -------------
---
-- ---- ------ -- ----
--------------------------------------- ------- - ------- - ---
-
----------------------------上述代码使用vrt-cli来生成基准数据，并与当前时刻的快照进行比对，返回比对结果。这里我们使用了Promise和async/await机制。使用vrt-cli进行VRT测试的过程非常简单，即使用capture选项来生成基准数据，再与当前图片进行比对。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562ea81e8991b448e099c