前言
在软件开发中，自动化测试是非常重要的一环。而在自动化测试中，图像比对又是一项特别重要的任务。而有了npm包 wdio-bv-image-comparison-service，图像比对的工作将变得非常简单。
本文将介绍如何使用 wdio-bv-image-comparison-service 进行自动化测试中的图像比对，而我们会基于示例代码来进行说明。
安装 wdio-bv-image-comparison-service
我们需要先安装 wdio-bv-image-comparison-service。可以通过 npm 来进行安装：
npm install wdio-bv-image-comparison-service --save-dev
配置 wdio-bv-image-comparison-service
为了在测试中使用 wdio-bv-image-comparison-service，我们需要修改 wdio.conf.js 文件，配置其插件。
首先，让我们在这个文件中声明两个全局变量：
global.actualImageDir = path.join(__dirname, 'actual-images'); global.expectedImageDir = path.join(__dirname, 'expected-images');
这里我们定义了 actualImageDir 和 expectedImageDir。它们分别用于存放我们实际测试得到的图片和预期的图片。
接下来，我们需要在我们的 wdio.conf.js 文件中声明我们想要使用的插件。在 services 属性中，添加以下代码：
-- -------------------- ---- -------
--------- -
-------------------- -
--------------- ------------------------
---------------- -----------------------------------
--------------- ----------------------
---------------- -----
----------------- -----
------------------ -----
---------------- -----
------------------- -----
--
--这里我们声明了 image-comparison 插件，并且定义了一些可选的属性。这些属性分别如下：
baselineFolder: 这个属性指向存放预期图片的文件夹。在你第一次使用时，该文件夹将会被用来写入一些空白的基准图片。这些图片将会用来和你实际获得的图片进行比对。formatImageName: 这个属性指定了用来指定图片文件名的字符串。段落之间用-分隔，其中可以插入占位符，如{tag},{browserName},{width}和{height}。你需要指定你自己的占位符，以适应自己的需求。screenshotPath: 这个属性指定了存放实际测试得到的图片的文件夹。这些图片将会被用来和预期图片进行比对。savePerInstance: 这个属性指定了是否每个实例都要保存一份截图。autoSaveBaseline: 这个属性指定了是否自动保存基准图片。如果这个值为 true，则基准图片会在首次执行测试时自动保存。blockOutStatusBar: 这个属性指定了是否要把状态栏加黑。blockOutToolBar: 这个属性指定了是否要把工具栏加黑。clearRuntimeFolder: 这个属性指定了是否要在每次测试后清空运行时文件夹。
比对图像
现在，我们已经完成了插件的配置。从现在开始，我们就可以在我们的测试代码中用插件来比对两张图片，从而进行自动化测试。
在我们的测试代码中，我们可以使用下面这个方法来比对两张图片：
browser.checkElement(
$('#my-element').getAttribute('id'),
'my-element',
{ hideScrollBars: true }
);这里，我们调用了 checkElement 方法。这个方法用来比对某个元素的视觉效果。
这个方法需要三个参数：
elementSelector: 元素选择器，用来指定测试的元素。tag: 如果你想给测试定义一个标签，这里可以指定一个需要展示的标签。options: 可选的选项对象。这里，我们使用hideScrollBars选项来指定是否要隐藏滚动条。
完整示例
-- -------------------- ---- -------
----- ---- - ----------------
--------------------- - -------------------- -----------------
----------------------- - -------------------- -------------------
------------ --- ------------- -- -- -
---------- ------- --- ---- ------ -- -- -
--------------------------------------
---------------------
------------------------------------
-------------
- --------------- ---- -
--
---
------------ -- -
---------------------------------------
---
---以上是一个完整的示例，其中我们测试了打开一个网站后某个元素的效果。该测试会自动把实际测试得到的图片保存到 actual-images 文件夹中，同时会将对应的预期图片保存到 expected-images 文件夹中。然后，这个插件会自动帮我们对这两个文件夹中相应的图片进行比对。
总结
npm包 wdio-bv-image-comparison-service 是一款非常好用的图像比对工具。使用该工具，你可以在你的自动化测试中快速、方便地完成图像比对。本文介绍了 wdio-bv-image-comparison-service 的基本使用方法和示例代码，相信大家已经简单了解如何使用它了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067357890c4f7277583cc3