我们很高兴地宣布，我们现在为 WebdriverIO V5 提供了一个新的视觉回归服务，名为 wdio-image-comparison-service。

新的更新服务

我们已经更新了服务，并在更新过程中重命名了其包名称。请在文档中查找有关 WebdriverIO 视觉测试的所有文档。

它能做什么？

wdio-image-comparison-service 是一款轻量级的 WebdriverIO 服务，用于浏览器/移动浏览器/混合应用，可以在屏幕、元素或全页面屏幕上进行图像比较。

您可以

• 保存或比较屏幕/元素/全页面屏幕与基准
• 在没有基准的情况下自动创建基准
• 屏蔽自定义区域，甚至在比较期间自动排除状态栏或工具栏（仅限移动设备）
• 增加元素尺寸截图
• 使用不同的比较方法
• 以及更多，请参阅此处的选项

该模块现在基于新的webdriver-image-comparison模块的功能。这是一个轻量级的模块，用于检索所有浏览器/设备所需的必要数据和屏幕截图。比较功能来自ResembleJS。如果您想在线比较图像，可以查看在线工具。

它可以用于

• 桌面浏览器（Chrome/Firefox/Safari/Internet Explorer 11/Microsoft Edge）
• 通过 Appium 使用移动/平板电脑浏览器（模拟器/真实设备上的 Chrome/Safari）
• 通过 Appium 使用混合应用

有关版本，请查看下方

安装

使用以下命令在本地安装此模块，用作（开发）依赖项

npm install --save-dev wdio-image-comparison-service

有关如何安装 WebdriverIO 的说明，请参阅此处。

用法

wdio-image-comparison-service 支持 NodeJS 8 或更高版本

配置

wdio-image-comparison-service 是一种服务，因此可以用作普通服务。您可以在 wdio.conf.js 文件中使用以下方法进行设置

const { join } = require('path');

// wdio.conf.js
exports.config = {
    // ...
    // =====
    // Setup
    // =====
    services: [
        ['image-comparison',
        // The options
        {
            // Some options, see the docs for more
            baselineFolder: join(process.cwd(), './tests/sauceLabsBaseline/'),
            formatImageName: '{tag}-{logName}-{width}x{height}',
            screenshotPath: join(process.cwd(), '.tmp/'),
            savePerInstance: true,
            autoSaveBaseline: true,
            blockOutStatusBar: true,
            blockOutToolBar: true,
            // ... more options
        }],
    ],
    // ...
};

更多插件选项，请参阅此处。

编写测试

wdio-image-comparison-service 与框架无关，这意味着您可以将其与 WebdriverIO 支持的所有框架（如 Jasmine|Mocha）一起使用。您可以像这样使用它

describe('Example', () => {
  beforeEach(() => {
     browser.url('https://webdriverio.node.org.cn');
  });

  it('should save some screenshots', () => {
  	// Save a screen
  	browser.saveScreen('examplePaged', { /* some options*/ });

  	// Save an element
  	browser.saveElement($('#element-id'), 'firstButtonElement', { /* some options*/ });

  	// Save a full page screens
  	browser.saveFullPageScreen('fullPage', { /* some options*/ });
  });

  it('should compare successful with a baseline', () => {
  	// Check a screen
  	expect(browser.checkScreen('examplePaged', { /* some options*/ })).toEqual(0);

  	// Check an element
  	expect(browser.checkElement($('#element-id'), 'firstButtonElement', { /* some options*/ })).toEqual(0);

  	// Check a full page screens
  	expect(browser.checkFullPageScreen('fullPage', { /* some options*/ })).toEqual(0);
  });
});

如果您在没有基准的情况下首次运行，则 check 方法将拒绝该 promise，并显示以下警告

#####################################################################################
 Baseline image not found, save the actual image manually to the baseline.
 The image can be found here:
 /Users/wswebcreation/Git/wdio-image-comparison-service/.tmp/actual/desktop_chrome/examplePage-chrome-latest-1366x768.png
 If you want the module to auto save a non existing image to the baseline you
 can provide 'autoSaveBaseline: true' to the options.
#####################################################################################

这意味着当前屏幕截图已保存在实际文件夹中，您需要手动将其复制到基准中。如果您使用 autoSaveBaseline: true 实例化 wdio-image-comparison-service，则图像将自动保存到基准文件夹中。

不错的功能

当您创建全屏截图时，您可能会看到一些元素停留在视图中，例如粘性标题或聊天框。这些元素通常会弄乱屏幕截图，如下面的图像左侧所示。

但是您现在可以添加一些在第一次滚动后需要隐藏的元素，这将为您提供如下面的图像右侧所示的结果。这可以通过在测试中添加此属性来完成

browser.checkFullPageScreen('fullPage', {
    hideAfterFirstScroll: [
        $('nav-bar'),
        $('chat-box'),
    ],
});

测试结果输出

save(Screen/Element/FullPageScreen) 方法将在方法执行后提供以下信息

const saveResult = {
  // The device pixel ratio of the instance that has run
  devicePixelRatio: 1,
  // The formatted filename, this depends on the options `formatImageName`
  fileName: 'examplePage-chrome-latest-1366x768.png',
  // The path where the actual screenshot file can be found
  path: '/Users/wswebcreation/Git/wdio-image-comparison-service/.tmp/actual/desktop_chrome',
};

请参阅保存输出部分，以及输出文档中的图像。

默认情况下，check(Screen/Element/FullPageScreen) 方法仅提供不匹配百分比（如 1.23），但是当插件具有选项 returnAllCompareData: true 时，将在方法执行后提供以下信息

const checkResult = {
  // The formatted filename, this depends on the options `formatImageName`
  fileName: 'examplePage-chrome-headless-latest-1366x768.png',
  folders: {
      // The actual folder and the file name
      actual: '/Users/wswebcreation/Git/wdio-image-comparison-service/.tmp/actual/desktop_chrome/examplePage-chrome-headless-latest-1366x768.png',
      // The baseline folder and the file name
      baseline: '/Users/wswebcreation/Git/wdio-image-comparison-service/localBaseline/desktop_chrome/examplePage-chrome-headless-latest-1366x768.png',
      // This following folder is optional and only if there is a mismatch
      // The folder that holds the diffs and the file name
      diff: '/Users/wswebcreation/Git/wdio-image-comparison-service/.tmp/diff/desktop_chrome/examplePage-chrome-headless-latest-1366x768.png',
    },
    // The mismatch percentage
    misMatchPercentage: 2.34
};

请参阅失败时的检查输出部分，以及输出文档中的图像。

支持

如果您需要支持，可以在社区Discord服务器中寻求帮助。

测试愉快！

致敬，

蓝色小子