Pixel perfect проверки

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

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

Основы pixel perfect тестирования

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

Для реализации такого подхода часто используются два метода:

  1. Снимки экрана (screenshot testing). Снимаются скриншоты в определенные моменты выполнения теста и сравниваются с заранее подготовленными эталонными изображениями.
  2. Визуальные диффы. Создается база эталонных изображений, с которыми сравниваются новые скриншоты. Все различия между изображениями выделяются в виде визуальных диффов, которые можно проанализировать.

Настройка WebdriverIO для Pixel Perfect тестирования

Для выполнения pixel perfect тестов в WebdriverIO требуется несколько ключевых шагов.

  1. Установка зависимостей Для начала необходимо установить пакет, который будет отвечать за создание и сравнение изображений. Для этого можно использовать библиотеку wdio-image-comparison-service.

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

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

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

  3. Настройка базы эталонных изображений Для каждого теста необходимо подготовить эталонное изображение, которое будет служить для сравнения. Обычно эти изображения сохраняются в отдельной папке (например, ./baseline). Важно, чтобы скриншоты сохранялись с четкими метками (например, по названию теста или страницы), чтобы избежать путаницы.

Создание Pixel Perfect теста

  1. Снимок экрана Для выполнения pixel perfect тестирования в WebdriverIO создается тест, который будет снимать скриншоты страницы или ее части. Сначала необходимо установить точку, с которой будет сниматься экран.

    describe('Pixel perfect тест', () => {
  it('Проверка главной страницы', () => {
    browser.url('https://your-website.com'); // Открыть страницу
    const screenshot = browser.saveScreenshot('./screenshots/homepage.png'); // Сохранить скриншот
  });
});

  2. Сравнение изображений После того как скриншот будет сделан, его необходимо сравнить с эталонным изображением. Для этого используется метод toHaveSameDimensions и toBeExactlyOnScreen.

    describe('Pixel perfect тест', () => {
  it('Проверка главной страницы', () => {
    browser.url('https://your-website.com');
    const screenshot = browser.saveScreenshot('./screenshots/homepage.png');

    // Сравнение с эталонным изображением
    expect(screenshot).toBeExactlyOnScreen('./baseline/homepage.png');
  });
});

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

    describe('Pixel perfect тест', () => {
  it('Проверка главной страницы', () => {
    browser.url('https://your-website.com');
    const screenshot = browser.saveScreenshot('./screenshots/homepage.png');

    // Сравнение с эталонным изображением
    expect(screenshot).toHaveImageComparison('./baseline/homepage.png');
  });
});

Работа с адаптивностью

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

  1. Проверка для разных разрешений экрана

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

    describe('Pixel perfect для разных разрешений', () => {
  it('Проверка на мобильном устройстве', () => {
    browser.setWindowSize(375, 667); // Размер экрана для мобильного устройства
    browser.url('https://your-website.com');
    const screenshot = browser.saveScreenshot('./screenshots/mobile_homepage.png');
    expect(screenshot).toBeExactlyOnScreen('./baseline/mobile_homepage.png');
  });

  it('Проверка на десктопе', () => {
    browser.setWindowSize(1366, 768); // Размер экрана для десктопа
    browser.url('https://your-website.com');
    const screenshot = browser.saveScreenshot('./screenshots/desktop_homepage.png');
    expect(screenshot).toBeExactlyOnScreen('./baseline/desktop_homepage.png');
  });
});

  2. Использование различных устройств с помощью эмуляции

    Для тестирования на различных мобильных устройствах можно использовать эмуляцию через WebdriverIO:

    describe('Pixel perfect на мобильном устройстве', () => {
  it('Проверка страницы на iPhone 6', () => {
    browser.url('https://your-website.com');
    browser.setViewportSize({ width: 375, height: 667 }); // Эмуляция iPhone 6
    const screenshot = browser.saveScreenshot('./screenshots/iphone6_homepage.png');
    expect(screenshot).toBeExactlyOnScreen('./baseline/iphone6_homepage.png');
  });
});

Работа с динамическими элементами

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

  1. Ожидание стабильности элементов

    Чтобы избежать проблем с динамическими элементами, рекомендуется добавлять явные ожидания для стабилизации страницы перед созданием скриншота. Это можно сделать с помощью команды waitForDisplayed или waitUntil:

    describe('Pixel perfect с динамическими элементами', () => {
  it('Проверка страницы с модальным окном', () => {
    browser.url('https://your-website.com');
    const modal = $('#modal');
    modal.waitForDisplayed({ timeout: 5000 }); // Ожидание появления модального окна
    const screenshot = browser.saveScreenshot('./screenshots/modal_open.png');
    expect(screenshot).toBeExactlyOnScreen('./baseline/modal_open.png');
  });
});

Ограничения и сложности

Pixel perfect тестирование имеет ряд ограничений и сложностей:

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

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

Заключение

Pixel perfect тестирование в WebdriverIO позволяет эффективно контролировать визуальное представление интерфейса, обеспечивая точность и соответствие дизайну. Использование снимков экрана и сервисов для сравнения изображений позволяет автоматически выявлять ошибки в отображении, обеспечивая высокое качество и стабильность веб-приложений.

Оглавление