Сервис визуальной регрессии Novus

wdio-novus-visual-regression-service - это сторонний пакет, для получения дополнительной информации см. GitHub | npm

Тестирование визуальной регрессии для WebdriverIO

Основано на работе Jan-André Zinser над wdio-visual-regression-service и wdio-screenshot

Установка

Вы можете установить wdio-novus-visual-regression-service через NPM как обычно:

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

Инструкции по установке WebdriverIO можно найти здесь.

Конфигурация

Настройте wdio-novus-visual-regression-service, добавив novus-visual-regression в раздел services вашей конфигурации WebdriverIO и определите желаемую стратегию сравнения в опциях сервиса.

// 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'],
      }
    ]
  ],
  // ...
};

Опции

Под ключом visualRegression в вашем wdio.config.js вы можете передать объект конфигурации со следующей структурой:

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
передать функцию, которая возвращает имя файла для эталонного скриншота. Функция получает объект context в качестве первого параметра со всей соответствующей информацией о команде.
screenshotName Function
передать функцию, которая возвращает имя файла для текущего скриншота. Функция получает объект context в качестве первого параметра со всей соответствующей информацией о команде.
diffName Function
передать функцию, которая возвращает имя файла для скриншота с различиями. Функция получает объект context в качестве первого параметра со всей соответствующей информацией о команде.
misMatchTolerance Number ( по умолчанию: 0.01 )
число от 0 до 100, которое определяет степень несоответствия, при которой два изображения считаются идентичными, увеличение этого значения уменьшит покрытие тестами.
ignoreComparison String ( по умолчанию: ничего )
передайте строку со значением nothing , colors или antialiasing для настройки метода сравнения.

Для примера генерации имен файлов скриншотов в зависимости от текущего имени теста, посмотрите пример кода из раздела Конфигурация.

VisualRegressionCompare.SaveScreenshot

Этот метод является упрощенным вариантом VisualRegressionCompare.LocalCompare для создания только скриншотов. Это очень полезно, когда вы просто хотите создать эталонные скриншоты и перезаписать предыдущие без сравнения.

Вы можете передать следующие опции в его конструктор в виде объекта:

screenshotName Function
передать функцию, которая возвращает имя файла для текущего скриншота. Функция получает объект context в качестве первого параметра со всей соответствующей информацией о команде.

VisualRegressionCompare.Spectre

Этот метод используется для загрузки скриншотов в веб-приложение Spectre. Spectre - это пользовательский интерфейс для тестирования визуальной регрессии. Он хранит скриншоты и сравнивает их, что очень полезно для непрерывной интеграции.

Вы можете передать следующие опции в его конструктор в виде объекта:

url String
передать URL веб-сервиса spectre.
project String
передать имя для вашего проекта.
suite String
передать имя для вашего тестового набора. Один проект может содержать несколько наборов.
test Function
передать функцию, которая возвращает имя теста для скриншота. Функция получает объект context в качестве первого параметра со всей соответствующей информацией о команде.
browser Function
передать функцию, которая возвращает браузер для скриншота. Функция получает объект context в качестве первого параметра со всей соответствующей информацией о команде.
size Function
передать функцию, которая возвращает размер для скриншота. Функция получает объект context в качестве первого параметра со всей соответствующей информацией о команде.
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: 'http://localhost: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 }] (только для настольных ПК)
Переопределяет глобальное значение viewports для этой команды. Все скриншоты будут сделаны в разных размерах области просмотра (например, для тестов адаптивного дизайна)
orientations String[] {landscape, portrait} (только для мобильных)
Переопределяет глобальное значение orientations для этой команды. Все скриншоты будут сделаны в разных ориентациях экрана (например, для тестов адаптивного дизайна)
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

Использование

Лицензия