Novus 视觉回归服务

wdio-novus-visual-regression-service 是一个第三方包，更多信息请参见GitHub | npm

WebdriverIO 的视觉回归测试

基于 Jan-André Zinser 在wdio-visual-regression-service 和wdio-screenshot 上的工作

安装

您可以像往常一样通过 NPM 安装 wdio-novus-visual-regression-service

$ npm install wdio-novus-visual-regression-service --save-dev

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

配置

通过将novus-visual-regression 添加到 WebdriverIO 配置的服务部分并定义您所需的服务选项中的比较策略来设置 wdio-novus-visual-regression-service。

// wdio.conf.js

var path = require('path');
var VisualRegressionCompare = require('wdio-novus-visual-regression-service/compare');

function getScreenshotName(basePath) {
  return function(context) {
    var type = context.type;
    var testName = context.test.title;
    var browserVersion = parseInt(context.browser.version, 10);
    var browserName = context.browser.name;
    var browserViewport = context.meta.viewport;
    var browserWidth = browserViewport.width;
    var browserHeight = browserViewport.height;

    return path.join(basePath, `${testName}_${type}_${browserName}_v${browserVersion}_${browserWidth}x${browserHeight}.png`);
  };
}

exports.config = {
  // ...
  services: [
    [
      'novus-visual-regression',
      {
        compare: new VisualRegressionCompare.LocalCompare({
          referenceName: getScreenshotName(path.join(process.cwd(), 'screenshots/reference')),
          screenshotName: getScreenshotName(path.join(process.cwd(), 'screenshots/screen')),
          diffName: getScreenshotName(path.join(process.cwd(), 'screenshots/diff')),
          misMatchTolerance: 0.01,
        }),
        viewportChangePause: 300,
        viewports: [{ width: 320, height: 480 }, { width: 480, height: 320 }, { width: 1024, height: 768 }],
        orientations: ['landscape', 'portrait'],
      }
    ]
  ],
  // ...
};

选项

在您的 wdio.config.js 中的visualRegression 键下，您可以传递一个具有以下结构的配置对象

compare Object
屏幕截图比较方法，请参见比较方法
viewportChangePause Number（默认值：100）
在视口更改后等待 x 毫秒。浏览器可能需要一段时间才能重新绘制。这可能导致渲染问题并导致运行之间产生不一致的结果。
viewports Object[{ width: Number, height: Number }]（默认值：[当前视口]）（**仅限桌面**）
所有屏幕截图都将在不同的视口尺寸中拍摄（例如，用于响应式设计测试）
orientations String[] {landscape, portrait}（默认值：[当前方向]）（**仅限移动设备**）
所有屏幕截图都将在不同的屏幕方向中拍摄（例如，用于响应式设计测试）

比较方法

wdio-novus-visual-regression-service 允许使用不同的屏幕截图比较方法。

VisualRegressionCompare.LocalCompare

顾名思义，LocalCompare 在您的计算机上本地捕获屏幕截图并将其与以前的运行进行比较。

您可以将以下选项作为对象传递给它的构造函数

referenceName Function
传入一个函数，该函数返回参考屏幕截图的文件名。函数接收一个上下文对象作为第一个参数，其中包含有关命令的所有相关信息。
screenshotName Function
传入一个函数，该函数返回当前屏幕截图的文件名。函数接收一个上下文对象作为第一个参数，其中包含有关命令的所有相关信息。
diffName Function
传入一个函数，该函数返回差异屏幕截图的文件名。函数接收一个上下文对象作为第一个参数，其中包含有关命令的所有相关信息。
misMatchTolerance Number（默认值：0.01）
0 到 100 之间的数字，用于定义将两张图像视为相同的失配程度，增加此值将降低测试覆盖率。
ignoreComparison String（默认值：nothing）
传入一个值为nothing、colors 或antialiasing 的字符串以调整比较方法。

有关根据当前测试名称生成屏幕截图文件名的示例，请查看配置的示例代码。

VisualRegressionCompare.SaveScreenshot

此方法是VisualRegressionCompare.LocalCompare 的精简版本，仅用于捕获屏幕截图。当您只想创建参考屏幕截图并覆盖之前的屏幕截图而无需进行差异化时，这非常有用。

您可以将以下选项作为对象传递给它的构造函数

screenshotName Function
传入一个函数，该函数返回当前屏幕截图的文件名。函数接收一个上下文对象作为第一个参数，其中包含有关命令的所有相关信息。

VisualRegressionCompare.Spectre

此方法用于将屏幕截图上传到 Web 应用程序Spectre。Spectre 是一个用于视觉回归测试的 UI。它存储屏幕截图并进行比较，这对于持续集成非常有用。

您可以将以下选项作为对象传递给它的构造函数

url String
传入一个 spectre webservice url。
project String
传入项目的名称。
suite String
传入测试套件的名称。一个项目可以包含多个套件。
test Function
传入一个函数，该函数返回屏幕截图的测试名称。函数接收一个上下文对象作为第一个参数，其中包含有关命令的所有相关信息。
browser Function
传入一个函数，该函数返回屏幕截图的浏览器。函数接收一个上下文对象作为第一个参数，其中包含有关命令的所有相关信息。
size Function
传入一个函数，该函数返回屏幕截图的大小。函数接收一个上下文对象作为第一个参数，其中包含有关命令的所有相关信息。
fuzzLevel Number（默认值：30）
0 到 100 之间的数字，用于定义 Spectre 图像比较方法的模糊因子。有关更多详细信息，请查看Spectre 文档。

示例

// wdio.conf.js

var path = require('path');
var VisualRegressionCompare = require('wdio-novus-visual-regression-service/compare');

exports.config = {
  // ...
  services: [
    [
      'novus-visual-regression',
      {
        compare: new VisualRegressionCompare.Spectre({
          url: 'https://127.0.0.1:3000',
          project: 'my project',
          suite: 'my test suite',
          test: function getTest(context) {
            return context.test.title;
          },
          browser: function getBrowser(context) {
            return context.browser.name;
          },
          size: function getSize(context) {
            return context.meta.viewport != null ? context.meta.viewport.width : context.meta.orientation;
          },
          fuzzLevel: 30
        }),
        viewportChangePause: 300,
        viewports: [{ width: 320, height: 480 }, { width: 480, height: 320 }, { width: 1024, height: 768 }],
        orientations: ['landscape', 'portrait'],
      }
    ]
  ],
  // ...
};

用法

wdio-novus-visual-regression-service 使用以下命令增强了 WebdriverIO 实例

browser.checkViewport([{options}]);
browser.checkDocument([{options}]);
browser.checkElement(elementSelector, [{options}]);

所有这些都提供了选项，可帮助您在不同维度中捕获屏幕截图或排除不相关的部分（例如，内容）。以下选项可用

exclude String[]|Object[]（**尚未实现**）
排除屏幕截图中经常变化的部分，您可以传递各种不同的WebdriverIO 选择器策略来查询一个或多个元素，或者您可以定义 x 和 y 值，这些值可以扩展矩形或多边形
hide Object[]
隐藏通过各种不同的WebdriverIO 选择器策略查询的所有元素（通过visibility: hidden）
remove Object[]
移除通过各种不同的WebdriverIO 选择器策略查询的所有元素（通过display: none）
viewports Object[{ width: Number, height: Number }]（**仅限桌面**）
覆盖此命令的全局视口值。所有屏幕截图都将在不同的视口尺寸中拍摄（例如，用于响应式设计测试）
orientations String[] {landscape, portrait}（**仅限移动设备**）
覆盖此命令的全局方向值。所有屏幕截图都将在不同的屏幕方向中拍摄（例如，用于响应式设计测试）
misMatchTolerance Number
覆盖此命令的全局misMatchTolerance 值。传入 0 到 100 之间的数字，用于定义将两张图像视为相同的失配程度。
fuzzLevel Number
覆盖此命令的全局fuzzLevel 值。传入 0 到 100 之间的数字，用于定义 Spectre 图像比较方法的模糊因子。
ignoreComparison String

覆盖此命令的全局ignoreComparison值。传入值为nothing、colors或antialiasing的字符串以调整比较方法。
viewportChangePause Number
覆盖此命令的全局viewportChangePause值。在视口更改后等待 x 毫秒。

许可证

MIT

安装​

配置​

选项​

比较方法​

VisualRegressionCompare.LocalCompare​

VisualRegressionCompare.SaveScreenshot​

VisualRegressionCompare.Spectre​

用法​

许可证​

安装

配置

选项

比较方法

VisualRegressionCompare.LocalCompare

VisualRegressionCompare.SaveScreenshot

VisualRegressionCompare.Spectre

用法

许可证