Проверка визуальной целостности

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

Зачем нужно визуальное тестирование?

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

Основные подходы к визуальному тестированию

Для реализации визуальных тестов с использованием WebdriverIO можно применить несколько подходов:

  1. Снимки экрана (Screenshots): Сравнение изображений на разных этапах тестирования.
  2. Визуальные диффы (Visual diffs): Сравнение изображений с учетом изменений в элементах интерфейса.
  3. Платформы для визуального тестирования: Использование внешних сервисов для анализа визуальных различий, таких как Applitools или Percy.

Сравнение снимков экрана

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

В WebdriverIO этот процесс можно автоматизировать с помощью библиотеки webdriverio-image-comparison. Она позволяет захватывать изображения элементов страницы и сравнивать их с эталонными.

Установка и настройка

Для использования инструмента необходимо установить несколько зависимостей:

npm install --save-dev webdriverio-image-comparison

После этого нужно настроить сам WebdriverIO для работы с этим инструментом. В конфигурационном файле необходимо добавить следующие строки:

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

exports.config = {
  // Другие настройки WebdriverIO
  services: ['image-comparison'],
  imageComparison: {
    baselineFolder: join(__dirname, '/baseline'), // Папка для эталонных изображений
    screenshotFolder: join(__dirname, '/temp'),   // Папка для временных снимков
    diffFolder: join(__dirname, '/diff'),         // Папка для результатов сравнения
  },
};

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

Для создания снимка экрана и его сравнения с эталоном нужно воспользоваться соответствующими методами:

it('should match the visual appearance of the homepage', async () => {
  const homepage = await browser.$('#homepage');
  await homepage.saveScreenshot('homepage.png');
  await expect(homepage).toHaveImageStored('homepage.png');
});

Метод saveScreenshot сохраняет текущее изображение элемента, а toHaveImageStored сравнивает его с эталонным изображением. Если изображения отличаются, WebdriverIO генерирует дифф, который позволяет визуально оценить различия.

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

Хотя можно использовать встроенные средства WebdriverIO для тестирования визуальной целостности, сторонние сервисы, такие как Applitools или Percy, предоставляют более мощные и гибкие решения. Эти платформы автоматически обнаруживают и анализируют визуальные дефекты на страницах и предлагают более продвинутые возможности для интеграции с различными CI/CD пайплайнами.

Applitools

Applitools предоставляет сервис для визуального тестирования с использованием AI. Этот инструмент может анализировать UI на различных устройствах и браузерах, учитывать изменения в элементах и динамическом контенте, а также поддерживает “визуальные потоки” для отслеживания сложных изменений.

Для интеграции с WebdriverIO потребуется установить пакет @applitools/eyes-webdriverio:

npm install --save-dev @applitools/eyes-webdriverio

Настройка Applitools в конфигурации WebdriverIO выглядит следующим образом:

const { Eyes } = require('@applitools/eyes-webdriverio');

exports.config = {
  // Другие настройки WebdriverIO
  services: [
    ['applitools', {
      apiKey: 'YOUR_API_KEY'
    }]
  ]
};

Для того чтобы сделать визуальный тест с Applitools, достаточно использовать API Eyes:

it('should match the visual appearance of the homepage with Applitools', async () => {
  const eyes = new Eyes();
  await eyes.open(browser, 'My App', 'Homepage');
  await eyes.checkWindow('Homepage');
  await eyes.close();
});

Важные аспекты визуального тестирования

  1. Тестирование на разных разрешениях: Важно проводить визуальное тестирование на разных разрешениях экрана, чтобы убедиться, что приложение выглядит корректно на мобильных устройствах и десктопах.
  2. Сравнение с эталонными изображениями: При сравнении изображений важно следить за их качеством и убедиться, что эталонные снимки актуальны. Для этого часто используют систему ревизий, чтобы отслеживать изменения в UI и актуализировать эталонные данные.
  3. Обработка динамического контента: Визуальное тестирование должно учитывать возможные изменения в динамическом контенте, например, анимации, изменения состояний элементов, загрузку данных и другие эффекты.
  4. Сравнение только видимой части страницы: Иногда полезно ограничить область сравнения только видимыми частями страницы, игнорируя элементы, которые могут изменяться из-за прокрутки, таких как футеры и хедеры.

Преимущества и ограничения

Преимущества:

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

Ограничения:

  • Может потребоваться много времени на настройку и создание эталонных изображений для большого количества страниц и экранных состояний.
  • Сравнение изображений иногда приводит к ложным срабатываниям, особенно если интерфейс содержит динамические элементы (например, анимации или изменения, происходящие при загрузке).

Заключение

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

Оглавление