前言
在传统的前端开发过程中，我们一般会先进行开发、测试、部署等过程，然后再进行回归测试。但是一旦我们的项目复杂度开始增加，测试用例数量逐渐增多，手动回归测试所需的时间和人力开始变得不可承受。此时，我们不得不寻求一种自动化测试的解决方案。
BackstopJS 是一个开源的工具，它可以自动完成网页视觉回归测试（visual regression testing），即对比页面在不同时间或在不同终端下的样式差异。在 Drupal 项目中使用 BackstopJS 进行视觉回归测试非常常见，然而，手动生成 BackstopJS 的配置文件却是一件繁琐而且容易出错的事情。
这里，我们介绍一个 npm 包 drupal-backstop-generator，它可以自动生成 Drupal 站点的 BackstopJS 配置文件，极大提高了工作效率，降低了出错概率。
安装
我们可以通过 npm 来安装 drupal-backstop-generator：
npm install -g drupal-backstop-generator
使用方法
1. 初始化配置
在终端中，我们进入我们的 Drupal 项目目录，然后执行如下命令：
backstop init
执行完毕后，我们会发现在我们的 Drupal 项目中会出现一个新的 backstop.json 文件和一个名为 backstop_data 的文件夹。这就是我们的 BackstopJS 配置文件和测试数据文件夹。
2. 配置 Drupal 站点信息
然后，我们需要进入 backstop.json 文件，修改 srcUrl 字段为我们的 Drupal 站点地址，并将 cookiePath 以及 onBeforeScript 字段留空：
-- -------------------- ---- -------
-
----- -------------------
------------ -
-
------- --------
-------- ----
--------- ---
--
-
------- -----------
-------- ----
--------- ----
--
-
------- -----------
-------- -----
--------- ---
--
-
------- ----------
-------- -----
--------- ---
-
--
---------------- -----------------------------
------------ -
-
-------- -----------
------ ----
--------------- ---
-------- --
----------------- ---
---------------- ---
------------ -------------
------------- ---
-------------------- ----
------------------------ -----
---------- ---
---------------------- --
------------------- ---
---------- --
---------------- ---
------------------ ---
---------------- ---
--------------- ---
--------------------- --
-
--
-------- -
-------------------- ------------------------------------
--------------- -------------------------------
----------------- ---------------------------------
-------------- ------------------------------
------------ ---------------------------
--
--------- ------------
--------- ------------
---------------- -
------- ----------------
--
-------------------- --
-------------------- ---
--------- ----------------------
------------- ---
----------------- --
-3. 添加测试场景
在 scenarios 字段中，我们可以添加我们要测试的页面。如下所示，这里我们添加了三个测试页面：
-- -------------------- ---- -------
-
------------ -
-
-------- -----------
------ ----
------------ ------------
--
-
-------- ------ ----
------ ------------
------------ ------------
--
-
-------- -------- ----
------ --------------
------------ ------------
-
-
-我们还可以为测试场景设置更多参数，如下所示：
-- -------------------- ---- -------
-
------------ -
-
-------- -----------
------ ----
-------- ----- -- ----------
---------------- ------------- -- ----------
------------ ------------- -- ---
---------------------- ----- -- ------------
---------- ---- -- ----------
-
-
-4. 生成测试图片
我们在命令行中执行：
backstop test
然后，BackstopJS 就会自动加载在 backstop.json 文件中配置的场景，并在运行过程中捕获对应场景的截图。 完成后，我们可以在 backstop_data 目录下找到一个名为 bitmaps_test 的文件夹，其中包含了每个场景的测试图片。
5. 进行回归测试
在我们的 .ci.yml 配置文件中，我们可以将回归测试命令加入 scripts 中：
scripts:
test:
- backstop test然后，在执行构建时，我们可以进行回归测试。如果有任何样式的变动，我们都可以通过比较测试图片来检查并调整零散样式或完善设计规范，从而确保我们的网站始终保持美观和稳定。
结语
使用 drupal-backstop-generator 包可以帮助我们通过自动生成 BackstopJS 配置文件，自动化的进行视觉回归测试，提高了我们的生产效率，同时也保证了我们网页的质量。而使用 BackstopJS 进行视觉回归测试，也是一种十分推荐的前端自动化测试解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005772581e8991b448eac5d