Сравнение скриншотов

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

Настройка Protractor для визуального тестирования

Для начала необходимо подключить библиотеку для сравнения изображений. Одним из наиболее удобных вариантов является protractor-image-comparison, которая обеспечивает интеграцию с Protractor и возможность сохранять эталонные изображения (baseline) для последующего сравнения.

Установка библиотеки через npm:

npm install protractor-image-comparison --save-dev

В конфигурационном файле Protractor (protractor.conf.js) необходимо инициализировать плагин и задать параметры для работы с изображениями:

const { join } = require('path');
const protractorImageComparison = require('protractor-image-comparison');

exports.config = {
    framework: 'jasmine',
    specs: ['specs/**/*.spec.js'],
    capabilities: {
        browserName: 'chrome',
        chromeOptions: {
            args: ['--headless', '--disable-gpu']
        }
    },
    onPrepare: async () => {
        browser.imageComparison = new protractorImageComparison({
            baselineFolder: join(process.cwd(), './screenshots/baseline/'),
            screenshotPath: join(process.cwd(), './screenshots/current/'),
            autoSaveBaseline: true,
            ignoreAntialiasing: true,
            debug: false
        });
    }
};

Ключевые параметры:

  • baselineFolder — директория с эталонными изображениями.
  • screenshotPath — директория для текущих скриншотов.
  • autoSaveBaseline — автоматически сохраняет эталонные скриншоты, если их ещё нет.
  • ignoreAntialiasing — игнорирует различия из-за сглаживания шрифтов или графики.

Снятие скриншотов

Для получения скриншота определённого элемента на странице используется метод browser.imageComparison.takeElementScreenshot:

it('должен корректно отображать кнопку', async () => {
    const button = element(by.css('.submit-button'));
    const result = await browser.imageComparison.checkElement(button, 'submit_button');
    expect(result).toBeLessThan(0.01); // порог допустимых различий
});

Метод возвращает процент различий между текущим скриншотом и эталонным изображением. Порог можно задавать в виде числа от 0 до 1, где 0 означает полное совпадение.

Для полного экрана используется checkScreen:

it('главная страница соответствует эталону', async () => {
    const result = await browser.imageComparison.checkScreen('homepage');
    expect(result).toBeLessThan(0.02);
});

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

После выполнения теста можно получить отчёт с визуальными различиями. В случае использования protractor-image-comparison создаются три типа файлов:

  1. baseline — эталонное изображение.
  2. current — текущий скриншот, сделанный во время теста.
  3. diff — изображение, на котором выделены различия между baseline и current.

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

Настройка порогов и игнорируемых областей

Для уменьшения ложных срабатываний применяются следующие возможности:

  • Порог сравнения (tolerance) — позволяет игнорировать незначительные пиксельные различия.
  • Игнорирование областей (ignoreRect) — задаёт прямоугольники, которые не учитываются при сравнении. Например, динамические элементы вроде даты или счетчиков:
const dynamicBanner = element(by.css('.banner'));
const result = await browser.imageComparison.checkElement(dynamicBanner, 'banner', {
    ignoreRectangles: [{ x: 10, y: 5, width: 200, height: 50 }]
});

Интеграция с CI/CD

Скриншотное сравнение особенно эффективно при автоматизации в CI/CD:

  • Эталонные скриншоты хранятся в репозитории.
  • Новые сборки автоматически проверяют визуальные изменения.
  • В случае несоответствия тест падает, а diff-файлы отправляются в отчёт.

Такой подход позволяет обнаруживать регрессии интерфейса еще до релиза.

Практические рекомендации

  • Для динамических страниц или с элементами, меняющимися при каждом рендере, рекомендуется использовать игнорируемые области и порог.
  • Хранение скриншотов в репозитории должно учитывать различия в разрешении экрана и браузере. Лучше фиксировать размеры окна браузера через browser.manage().window().setSize(width, height).
  • Для больших страниц стоит сравнивать отдельные ключевые элементы, а не весь экран, чтобы ускорить тесты и снизить риск ложных срабатываний.

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

Оглавление