如何实施视觉测试：使用BackstopJS进行自动化视觉测试

什么是视觉测试

视觉测试是一种用于检测任何样式差异和变化的测试方法。它通过比较测试截图和基准截图来检查样式的正确性和变化情况。因此，视觉测试主要用于发现CSS样式问题。

在什么情况下，适合实施视觉测试 / 视觉测试的适用场景

以下情况符合1-2条，就可以考虑引入视觉测试，具体是否决定引入，除了考虑适用场景，还需要考虑投入产出比、测试开发比等等项目实际情况。

项目本身就是关于公司UI组件样式设计，用于开发统一风格的原生组件的
项目本身对于页面样式要求严格。
页面样式更新不频繁，同一页面需求变动不频繁，所以更适合将该测试放到回归测试策略中。
如果e2e测试的自动化脚本是用Puppeteer脚本，可以实现一次写脚本，实现2个测试的目的。
在缺陷分析中，缺陷类型主要是CSS样式问题的。
有响应式需求，需要确保在不同设备和屏幕大小下呈现的外观和行为一致。

视觉测试的自动化实施框架：BackStopJS

BackstopJS是一个流行的自动化视觉测试框架，它使用Puppeteer和Playwright与浏览器交互，提供了对浏览器操作的API。BackstopJS可以实现自动化截图和比较截图，从而检测出样式变化和差异。

安装BackStopJS

$ npm install -g backstopjs 这个库依赖了puppeteer和playwright,这两个库都是用于与浏览器交互的，提供了对浏览器操作的api。所以在安装的时候，是会默认下载chroimum的，所以可能下载过程会慢一点。

常用的三个命令

backstop init 初始化一个新的BackstopJS项目。执行此命令将创建一个名为backstop.json的配置文件和一个名为bitmaps_reference的目录，用于存储基准截图。

backstop test 用于运行视觉回归测试并生成测试报告。该命令将使用配置文件中定义的设置和场景，在浏览器中自动导航到指定的URL并捕获屏幕截图，然后将这些截图与基准截图进行比较，以检测任何视觉差异。

backstop approve 更新基准截图。该命令将使用与backstop test相同的设置和场景，在浏览器中自动导航到指定的URL并捕获屏幕截图，然后将这些截图与当前基准截图进行比较。如果检测到视觉差异，将提示用户选择接受或拒绝更改，以更新基准截图。

开发BackStopJS的脚本核心：配置文件 backstop.json

backstopJS在运行会去找一个 backstop.json 配置文件，可以通过命令行参数 --config= 来指定配置文件的路径。

backstopJS的比对核心是图片，所以配置文件的主要部分包括了截图（截图的命名、针对页面的什么部分截图、什么时候截图、测试属性）、干涉测试结果等等。

命令行参数

在使用BackstopJS时，可以通过命令行参数来配置一些选项，以满足特定的需求。以下是一些常用的命令行参数：

--filter=<scenarioLabelRegex>：指定要运行的场景，可以使用正则表达式进行筛选。例如，如果要只运行标签为"login"的场景，可以使用--filter=login。

--docker：在Docker容器中运行测试，以便在不同的操作系统和浏览器中进行测试。

--debug：启用调试模式，以便在控制台中输出详细的日志信息。

--config=<configFilePathStr>：指定要使用的配置文件的路径。默认情况下，BackstopJS会在当前工作目录中查找名为backstop.json的文件。

--engine=<engineName>：指定要使用的渲染引擎，可以是"puppeteer"或"playwright"。默认情况下，BackstopJS会使用Puppeteer作为渲染引擎。

提高

我们不一定要把配置写到json文件中，我们还可以把配置文件写到js文件中，这样的话，可以使用一些变量，来做一个简单的抽象。抽象了一个backstop js来生成backstop.json文件并且接受文件名、viewport、backstop命令。 www.linkedin.com/pulse/backs…