简介
@magnition/nightwatch-vrt 是一款用于前端自动化测试中进行视觉回归测试的 npm 包。它可以帮助我们检测前端页面中的样式以及布局是否发生变化，从而保证前端页面的质量。在日常开发中，我们可以使用该包来自动化检测前端页面，减少人工检查的时间和工作量，提高开发效率。
安装
首先，我们需要在项目中安装该包。可以通过以下命令进行安装：
npm install @magnition/nightwatch-vrt --save-dev
配置
安装后，我们需要在 nightwatch 的配置文件中进行相关的配置。假设我们的 nightwatch 配置文件路径为 nightwatch.conf.js，则我们需要在该文件中添加以下代码：
-- -------------------- ---- -------
-------------- - -
-- ---------
--------------------------- -
-- --------
------------------------- ----------------- -
-- -------------------
------ --------------- - ------------------------------- --- - --- - ------------------------------- --- ----
--
-- ------
----------------- -
-- -----------------
---------- ----
-- ----------
----------------- --
-
--
-- --------
------------ ----------
-- ---------
-------------- -
-- -----------
-------------- -
---------- -----
------------- -----
----------- -----
------- --------------
--
---------- -
-- -- --- --
----------------------------- -
-- -- ------------------------- --
---------- -----
-- -- ------------------------- -------
-------------- --------
---------------------- -------------------------------------------------------------------
------------ -------------------------------------------------------------
-
-
-
-以上代码中，我们将 visual_regression_settings 作为一个对象，用于配置截图的存储路径以及比较阈值等相关配置。然后，我们需要在 test_settings 中配置 visual_regression_settings 的相关参数，从而启用该插件，并指定该插件所需的参数。
使用
安装和配置完成后，我们就可以愉快地使用 @magnition/nightwatch-vrt 了。可以在测试脚本中添加以下代码来使用该插件：
-- -------------------- ---- -------
-------------- - -
-------- --------
-------- ------ ------------ -------- --------- -
-------
-- ----
--------------------------
-- -- ---------------- ---------
---------------------------- -
-- ----------------
-- -------- -
-- --------- -----------
-- -------- -----------
-- -
--
------
-
-以上代码中，我们首先添加了一个 @tags 标识符，用于标识该测试脚本需要进行视觉回归测试。然后，在测试脚本中添加了一个 Testing visual regression 的测试用例。在该测试用例中，我们可以使用 assertScreenshot 函数来发起一次截图并执行比较操作。其中，第一个参数为截图的名称，第二个参数为可选配置项。
到此为止，我们已经成功地添加了 @magnition/nightwatch-vrt 插件，并编写了一个简单的测试脚本来使用该插件了。
示例代码
以下是一个完整的示例代码：
-- -------------------- ---- -------
-------------- - -
-------- --------
-------- ------ ------------ -------- --------- -
-------
--------------------------
------------------------------
---------------------------- -
-- ----------------
-- -------- -
-- --------- -----------
-- -------- -----------
-- -
--
------
-
-总结
通过上述的介绍，我们了解了如何使用 npm 包 @magnition/nightwatch-vrt 来进行前端自动化视觉回归测试。我们了解了如何安装和配置该包，并且通过一个示例代码来演示了如何使用该包执行测试。希望这篇文章能够对大家在前端自动化测试和质量保障上有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672eb0520b171f02e1ee9