WebdriverCSS 是一个基于 WebdriverIO，用于图片比较（visual regression testing）的 npm 包。它可以主动地与浏览器交互，捕获需要比较的截屏，然后与之前的截屏进行比较，以便及早地发现页面的样式变化，从而减少手动测试的工作量，提高测试效率。
安装
首先，需要在项目中安装 WebdriverIO 和 WebdriverCSS，可以使用 npm 直接安装，具体如下：
npm install webdriverio npm install webdrivercss
初识 WebdriverCSS
WebdriverCSS 的使用分为两个步骤：初始化 WebdriverIO 驱动，然后进行图片比较。下面是一个简单的示例：
-- -------------------- ---- -------
--- ----------- - -----------------------
--- ------- - -
-------------------- -
------------ --------
-
--
--- ------ - ----------------------------
-------------
--------------------------
------------------------ -
----- ---------
----- ---------
-- ------------- ---- -
--------------------
---------------------------------------------------
--
-------下面，我们来分别解析上述代码：
webdriverio：引入 WebdriverIO。desiredCapabilities：用于指定测试的浏览器类型，这里指定 chrome。client = webdriverio.remote(options)：创建 WebdriverIO 实例。client.init().url('http://example.com')：打开需要进行 visual regression testing 的页面。webdrivercss()：调用 WebdriverCSS 进行图片比较。其中，第一个参数是名称，第二个参数使用户定义一个元素进行截图。最后一个参数是比较完成后的回调函数。end()：完成测试。
比较基准图片
在进行 visual regression testing 时，我们需要先设置一个基准图片，然后将新图片与基准图片进行比较，以此检测页面样式是否发生了变化。
在使用 WebdriverCSS 进行 visual regression testing 时，有一种情况是第一次测试，我们还没有一个基准图片。这时，WebdriverCSS 提供了一个 storeBaseImage() 方法来保存当前的图片，以此作为未来比较的基准图片。下面是一个示例：
client.init()
.url('http://example.com')
.webdrivercss('example', {
name: 'header',
elem: '#header'
})
.storeBaseImage()
.end();在使用 storeBaseImage() 时，WebdriverCSS 将当前页面进行截屏，并将结果保存到基准图片中。
比较图片
在我们有了基准图片后，我们就可以通过比较新图片和基准图片，来检测页面样式是否发生了变化。如果差异超过了预定的容差，WebdriverCSS 将在被测网页显示一条警告信息，以提醒测试人员。
下面是一个示例代码：
client.init()
.url('http://example.com')
.webdrivercss('example', {
name: 'header',
elem: '#header'
})
.compareScreenshot()
.end();在使用 compareScreenshot() 时，WebdriverCSS 会将当前页面进行截屏，并将结果与基准图片进行比较。如果发现差异，WebdriverCSS 会在被测网页上显示一个警告信息。
设置容差
有时，页面的样式发生变化，差异可能并不是在我们关心的元素上，而仅仅是与元素相邻的一些像素值。这时，如果容差设置过严，WebdriverCSS 将误报错误。在这种情况下，我们需要调整容差，去除这些不明显的差异。
WebdriverCSS 允许我们在每次图片比较时，动态地设置容差。其中 misMatchPercentage 属性指定了容差百分比。下面是一个示例代码：
-- -------------------- ---- -------
-------------
--------------------------
------------------------ -
----- ---------
----- ---------
--
--------------------
------------------- ---
--
-------在上述代码中，我们将容差设置为 3.5%，以便更准确地检测页面样式变化。
结语
WebdriverCSS 是一个强大的工具，用于 visual regression testing。它不仅提高了测试效率，还可以减少人工测试的工作量。我们可以将其作为自动化测试脚本的一部分，无需人工干预，即可发现应用的潜在 bug。希望这篇教程可以帮助你更好地理解 WebdriverCSS 的使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671058dd3466f61ffdd2e