Concept базовое визуальное тестирование

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

WebdriverIO предоставляет инструменты для автоматизации тестирования браузеров, включая возможности для визуального тестирования. Использование WebdriverIO в сочетании с библиотеками для сравнения скриншотов позволяет проверять интерфейсы на наличие визуальных дефектов.

Установка WebdriverIO

Для того чтобы начать работать с WebdriverIO, необходимо установить его и настроить соответствующую среду. Основные шаги для установки:

  1. Установка WebdriverIO через NPM:

    npm install @wdio/cli --save-dev

  2. Запуск конфигурации WebdriverIO:

    npx wdio config

  3. Установка драйверов для браузеров, например, для Chrome:

    npm install webdriverio @wdio/chromedriver-service --save-dev

После завершения установки можно приступить к настройке и написанию тестов.

Визуальное тестирование с использованием WebdriverIO

Для реализации визуального тестирования с WebdriverIO чаще всего используются специализированные библиотеки для снятия скриншотов и их сравнения. Одной из таких библиотек является wdio-image-comparison-service. Она позволяет автоматически снимать скриншоты страниц и сравнивать их с эталонными изображениями.

Установка и настройка wdio-image-comparison-service

  1. Установите необходимую зависимость:

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

  2. В файле конфигурации WebdriverIO добавьте следующую настройку:

    exports.config = {
  services: ['image-comparison'],
  imageComparison: {
    baselineFolder: './baseline',  // Папка с эталонными изображениями
    screenshotFolder: './screenshots',  // Папка для снятых скриншотов
    savePerInstance: true,  // Сохранение скриншотов для каждого теста
    blockOutStatusBar: true,  // Убирает статусбар (для мобильных устройств)
    blockOutToolBar: true,  // Убирает тулбар
  },
};

  3. Убедитесь, что у вас есть папка для эталонных изображений. В ней должны храниться скриншоты “эталона”, с которыми будет производиться сравнение.

Пример написания теста для визуального сравнения

После настройки WebdriverIO и библиотеки для сравнения изображений, можно приступить к написанию тестов. Рассмотрим простой пример, где будет сравниваться скриншот страницы с эталоном.

describe('Visual Regression Test', () => {
  it('should match the screenshot with the baseline', () => {
    browser.url('https://example.com');  // Переход на страницу
    const screenshot = browser.takeScreenshot();  // Снимок экрана
    expect(screenshot).toHaveNoVisualDiff();  // Сравнение с эталонным изображением
  });
});

В данном примере метод toHaveNoVisualDiff() автоматически сравнивает текущий скриншот с изображением в папке baseline. Если различия есть, тест не пройдет.

Сравнение изображений

Для того чтобы понять, насколько изображение изменилось, в WebdriverIO используются различные алгоритмы сравнения:

  1. Пиксельное сравнение: Простой метод, который сравнивает изображения пиксель за пикселью. Подходит для точных тестов, где необходимо проверить полную идентичность изображений.

  2. Терпимость к изменениям (Tolerance): Позволяет настроить допустимые отклонения. Это полезно, когда элементы на странице могут изменяться в зависимости от состояния системы, времени суток или других факторов.

  3. Использование масок: Маски позволяют исключить из сравнения определенные области страницы, например, динамически изменяющиеся элементы или элементы, которые не влияют на визуальную целостность.

Пример настройки для пиксельного сравнения с терпимостью:

it('should match the screenshot with tolerance', () => {
  browser.url('https://example.com');
  const screenshot = browser.takeScreenshot();
  expect(screenshot).toHaveNoVisualDiff({
    tolerance: 0.1,  // Допустимая погрешность 10%
    comparisonMethod: 'pixel'  // Метод сравнения: пиксельное сравнение
  });
});

Обработка ошибок и отчетность

В случае обнаружения визуальных различий WebdriverIO предоставит подробный отчет с указанием области, где произошли изменения. Такие отчеты могут включать:

  • Снимки экрана, показывающие различия.
  • Логирование информации о тестах.
  • Подсчет процента отклонений и расчет “различия”.

Для использования отчетности в WebdriverIO можно добавить библиотеку wdio-allure-reporter для генерации наглядных отчетов.

Установка:

npm install @wdio/allure-reporter --save-dev

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

exports.config = {
  reporters: [
    'spec',
    ['allure', { outputDir: 'allure-results' }]
  ],
};

После выполнения тестов вы сможете получить подробные отчеты в формате Allure.

Заключение

Использование WebdriverIO для визуального тестирования является мощным инструментом для проверки интерфейсов. С помощью библиотек для сравнения изображений, таких как wdio-image-comparison-service, можно автоматизировать процесс проверки UI и гарантировать, что изменения в коде не приведут к неожиданным визуальным багам.

Оглавление