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

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

Что такое baseline скриншоты?

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

Зачем нужны baseline скриншоты?

  1. Автоматизация визуального тестирования: Возможность быстро проверять визуальные изменения в приложении без необходимости вручную сверять каждое изображение.
  2. Выявление регрессий UI: Когда после изменений в коде приложение выглядит иначе, чем в изначальной версии, baseline скриншот поможет определить источник проблемы.
  3. Экономия времени: Вместо того чтобы каждый раз вручную проверять каждый визуальный элемент, можно автоматизировать этот процесс.

Основные шаги создания baseline скриншотов

  1. Подготовка окружения:

    • Убедитесь, что Playwright установлен и настроен в проекте. Для этого нужно выполнить команду:

      npm install playwright

    • Для работы с базовыми скриншотами потребуется библиотека playwright и, возможно, дополнительные инструменты для сравнения изображений, такие как pixelmatch или jest-image-snapshot.

  2. Создание теста с baseline скриншотами: Сначала необходимо сделать скриншот базового состояния приложения. Это будет ваш baseline. Пример базового теста, который захватывает скриншот страницы:

    const { test, expect } = require('@playwright/test');

test('capture baseline screenshot', async ({ page }) => {
  await page.goto('https://example.com');
  await page.screenshot({ path: 'baseline-example.png' });
});

    Этот тест откроет страницу https://example.com и сделает скриншот, сохраняя его в файл baseline-example.png. Этот файл будет использоваться для дальнейшего сравнения с текущими скриншотами.

  3. Создание сравнения с baseline: Чтобы проверить, что внешний вид страницы не изменился, необходимо сделать новый скриншот и сравнить его с baseline. Для этого можно использовать библиотеку pixelmatch, которая предоставляет функциональность для сравнения изображений.

    Пример теста с использованием pixelmatch:

    const fs = require('fs');
const pixelmatch = require('pixelmatch');
const { PNG } = require('pngjs');
const { test, expect } = require('@playwright/test');

test('compare screenshot with baseline', async ({ page }) => {
  await page.goto('https://example.com');
  const screenshot = await page.screenshot();
  const baselineImage = PNG.sync.read(fs.readFileSync('baseline-example.png'));
  const currentImage = PNG.sync.read(screenshot);

  const { width, height } = baselineImage;
  const diff = new PNG({ width, height });

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

  fs.writeFileSync('diff.png', PNG.sync.write(diff));

  expect(numDiffPixels).toBe(0);
});

    В этом примере:

    • page.screenshot() делает текущий скриншот.
    • Файл baseline-example.png считывается как эталон.
    • Сравниваются пиксели двух изображений с помощью pixelmatch. Если изображения совпадают, количество отличающихся пикселей будет равно нулю, и тест пройдет успешно.
    • Если есть отличия, создается файл diff.png, который показывает различия между скриншотами.

  4. Использование Jest для автоматического сравнения: Для улучшения тестирования и упрощения процесса можно интегрировать jest-image-snapshot в проект. Это позволит автоматизировать процессы сравнения и отчетности.

    Установите зависимость:

    npm install jest-image-snapshot

    Пример использования с Jest:

    const { test, expect } = require('@playwright/test');
const { toMatchImageSnapshot } = require('jest-image-snapshot');

expect.extend({ toMatchImageSnapshot });

test('visual regression test', async ({ page }) => {
  await page.goto('https://example.com');
  const screenshot = await page.screenshot();

  expect(screenshot).toMatchImageSnapshot();
});

    В этом примере jest-image-snapshot автоматически будет сравнивать текущий скриншот с baseline, и если изображения не совпадают, тест завершится ошибкой.

Хранение и управление baseline скриншотами

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

Рекомендуется использовать систему контроля версий (например, Git) для хранения baseline скриншотов. Это позволит отслеживать изменения в UI и откатывать тесты при необходимости.

Обновление baseline скриншотов

Когда приложение обновляется и изменяется внешний вид, важно обновить baseline скриншоты. Это можно сделать, заменив старые baseline файлы на новые, когда изменения в UI являются ожидаемыми и корректными.

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

const fs = require('fs');
const { test } = require('@playwright/test');

test('update baseline screenshot', async ({ page }) => {
  await page.goto('https://example.com');
  const screenshot = await page.screenshot();

  fs.writeFileSync('baseline-example.png', screenshot);
});

Этот тест перезапишет старый скриншот и создаст новый baseline.

Преимущества и недостатки

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

  • Быстрое обнаружение регрессий: Сравнение скриншотов помогает быстро выявить изменения в UI.
  • Автоматизация тестов: Вместо ручной проверки визуальных элементов, можно использовать автоматические тесты, что экономит время.
  • Управление качеством: Такой подход помогает поддерживать высокое качество UI при разработке и тестировании.

Недостатки:

  • Зависимость от стабильности интерфейса: Если UI часто меняется, процесс обновления baseline может стать трудоемким.
  • Ложные срабатывания: Если используются параметры или стили, которые могут варьироваться (например, шрифты или размеры), тесты могут ошибочно воспринимать изменения как регрессии.

Заключение

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

Оглавление