Visual testing

Visual testing в контексте автоматизации веб-приложений предполагает проверку визуального представления интерфейса, включая корректное отображение элементов, их положение, цветовые схемы и адаптивность. Protractor, будучи инструментом для end-to-end тестирования Angular-приложений, позволяет интегрировать визуальные проверки через сторонние библиотеки.

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

  1. Сравнение скриншотов (Snapshot testing) Позволяет захватывать текущий вид страницы или элемента и сравнивать с эталонным изображением. Любое расхождение фиксируется как ошибка. Такой подход подходит для:

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

  2. Проверка стилей через DOM В отличие от скриншотов, этот метод анализирует свойства элементов, извлекаемые через CSS. Проверяются:

    • цвета (color, background-color);
    • размеры и положение (width, height, top, left);
    • шрифты (font-size, font-family, font-weight). Этот способ более устойчив к незначительным изменениям рендеринга, например, различиям в сглаживании шрифтов.

Интеграция Protractor с визуальными библиотеками

Для Protractor нет встроенных инструментов для полноценного визуального тестирования, поэтому используются сторонние решения:

  • Protractor + WebDriverCSS Позволяет создавать и сравнивать скриншоты отдельных элементов или всей страницы. Основные шаги:

    1. Подключение WebDriverCSS и настройка каталога для эталонных изображений.
    2. Захват скриншота через метод browser.takeScreenshot().
    3. Сравнение с эталонным изображением через встроенные функции библиотеки.
    4. Обработка различий и генерация отчета.

  • Protractor + Applitools Eyes Коммерческое решение для визуального тестирования, которое:

    • автоматически сравнивает изображения;
    • учитывает небольшие изменения интерфейса без ложных срабатываний;
    • поддерживает тестирование на разных устройствах и браузерах. В Protractor интеграция осуществляется через SDK Applitools и команды eyes.checkWindow() и eyes.close().

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

  • Выбор элементов для тестирования Проверять стоит критичные компоненты: кнопки, формы, панели, всплывающие окна. Неэффективно захватывать всю страницу, если достаточно проверить отдельные элементы.

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

  • Обработка динамического контента Элементы с изменяемым содержимым (даты, списки, баннеры) могут создавать ложные ошибки. Рекомендуется:

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

  • Тестирование адаптивного дизайна Важно проверять интерфейс на разных разрешениях экрана. Protractor позволяет изменять размеры окна через browser.manage().window().setSize(width, height).

Примеры кода для визуальных проверок

Скриншот элемента с WebDriverCSS:

const wdcss = require('webdrivercss');

describe('Visual check', () => {
  it('should match the login button', async () => {
    await browser.get('https://example.com/login');
    const result = await wdcss(browser, {
      name: 'login_button',
      elem: '#loginButton',
      mismatchTolerance: 0.1
    });
    expect(result.misMatchPercentage).toBeLessThan(0.1);
  });
});

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

const { Eyes, Target } = require('@applitools/eyes-protractor');

describe('Visual testing with Applitools', () => {
  const eyes = new Eyes();

  beforeAll(async () => {
    eyes.setApiKey('YOUR_API_KEY');
  });

  it('should display the homepage correctly', async () => {
    await eyes.open(browser, 'Example App', 'Homepage Visual Test');
    await browser.get('https://example.com');
    await eyes.check('Homepage', Target.window());
    await eyes.close();
  });

  afterAll(async () => {
    await eyes.abortIfNotClosed();
  });
});

Отчеты и анализ результатов

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

  • WebDriverCSS генерирует HTML-страницы с эталонным и тестовым изображением, выделяя зоны расхождения.
  • Applitools предоставляет интерактивный дашборд с подробной информацией о различиях, включая выделение пикселей, проценты совпадения и историю изменений интерфейса.

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

Оглавление