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

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

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

1. Pixel-by-Pixel сравнение Это наиболее точный метод, при котором каждый пиксель скриншота сравнивается с эталонным изображением. Любое расхождение фиксируется как ошибка. Применение:

import { expect } from 'chai';
import fs from 'fs';
import pixelmatch from 'pixelmatch';
import { PNG } from 'pngjs';

const baseline = PNG.sync.read(fs.readFileSync('./baseline.png'));
const current = PNG.sync.read(fs.readFileSync('./current.png'));
const { width, height } = baseline;
const diff = new PNG({ width, height });

const numDiffPixels = pixelmatch(baseline.data, current.data, diff.data, width, height, { threshold: 0.1 });

expect(numDiffPixels).to.equal(0);

Ключевой момент: threshold задаёт чувствительность, чтобы минимальные отличия, например, из-за сглаживания шрифтов, не приводили к ложным срабатываниям.

2. Сравнение с учётом области Иногда нужно проверять только конкретные элементы страницы. В WebdriverIO это реализуется через локаторы:

const element = await $('#login-button');
const screenshot = await element.saveScreenshot('./current-element.png');

Далее этот скриншот можно сравнивать с эталонным, как показано выше.

3. Использование специализированных библиотек Популярные инструменты: webdriver-image-comparison, Percy, Applitools. Они предоставляют расширенные функции:

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

Пример с webdriver-image-comparison:

import { browser } from '@wdio/globals';
await browser.setupTestingEnvironment();
const result = await browser.checkElement($('#header'), 'header');
console.log(result.misMatchPercentage); // процент различий

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

  1. Установка зависимостей:
npm install @wdio/cli @wdio/local-runner @wdio/mocha-framework webdriver-image-comparison
  1. Конфигурация плагина:
exports.config = {
    services: [
        ['image-comparison', {
            baselineFolder: './baseline/',
            formatImageName: '{tag}-{logName}-{width}x{height}',
            screenshotPath: './.tmp/',
            savePerInstance: true,
            autoSaveBaseline: true,
        }]
    ]
};
  1. Использование в тестах:
describe('Visual regression test', () => {
    it('Header should match baseline', async () => {
        await browser.url('/home');
        const result = await browser.checkElement($('#header'), 'header');
        expect(result.misMatchPercentage).toBeLessThan(1); // допускаем до 1% различий
    });
});

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

Метод Преимущества Ограничения
Pixel-by-Pixel Максимальная точность, простота реализации Чувствителен к мелким изменениям шрифтов и рендеринга
Сравнение области Позволяет проверять конкретные элементы Требует явного указания локаторов, не учитывает контекст страницы
Специализированные библиотеки Поддержка динамических областей, отчёты, интеграция с CI/CD Дополнительная зависимость, возможные платные версии

Советы по оптимизации визуального тестирования

  • Использовать динамическое масштабирование экрана, чтобы тесты не ломались из-за разных разрешений.
  • Игнорировать анимированные элементы или временно их скрывать перед снятием скриншота.
  • Автоматически обновлять эталонные скриншоты при намеренных изменениях интерфейса, чтобы не фиксировать ложные ошибки.
  • Внедрять тестирование в CI/CD, чтобы визуальные регрессии выявлялись на ранних этапах разработки.

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

WebdriverIO легко интегрируется с Jenkins, GitHub Actions, GitLab CI. Для визуальных тестов важно:

  • Хранить эталонные скриншоты в репозитории или отдельном артефакте.
  • Сравнивать новые скриншоты при каждом pull request.
  • Генерировать отчёты с визуальными диффами для быстрого анализа.

Пример GitHub Actions:

name: Visual Tests
on: [pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install dependencies
        run: npm ci
      - name: Run visual tests
        run: npx wdio run wdio.conf.js
      - name: Upload screenshots
        uses: actions/upload-artifact@v3
        with:
          name: visual-screenshots
          path: ./.tmp/

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

Оглавление