Сравнение скриншотов с expect(page).toHaveScreenshot

Сравнение скриншотов с expect(page).toHaveScreenshot

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

Метод toHaveScreenshot позволяет создать снимок текущего состояния страницы и сравнить его с заранее сохранённым эталонным изображением. Если изображение отличается, тест будет считаться не пройденным.

await expect(page).toHaveScreenshot();

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

Параметры toHaveScreenshot

Метод toHaveScreenshot принимает несколько параметров, которые позволяют настроить процесс захвата и сравнения изображений.

1. path

Параметр path позволяет указать путь для сохранения скриншота. Это полезно, если необходимо не только сравнить, но и сохранить текущий снимок.

await expect(page).toHaveScreenshot({ path: 'screenshot.png' });

2. fullPage

По умолчанию Playwright делает скриншот только видимой части страницы. Если нужно захватить всю страницу (включая невидимые области, которые можно прокручивать), можно использовать параметр fullPage: true.

await expect(page).toHaveScreenshot({ fullPage: true });

3. timeout

Время ожидания завершения скриншота можно задать через параметр timeout. Если скриншот не будет сделан в течение указанного времени, тест завершится с ошибкой.

await expect(page).toHaveScreenshot({ timeout: 5000 });

4. mask

Для некоторых случаев необходимо скрыть определённые элементы на странице перед созданием скриншота, например, данные, которые могут изменяться, такие как метки времени или уникальные идентификаторы. В этом случае используется параметр mask, который позволяет указать CSS-селекторы элементов, которые будут затемнены на скриншоте.

await expect(page).toHaveScreenshot({
  mask: [await page.locator('.header').boundingBox()]
});

Сравнение с эталонными изображениями

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

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

it('сохранение эталонного скриншота', async () => {
  await page.goto('https://example.com');
  await page.screenshot({ path: 'screenshot.png' });
});

После того как эталонное изображение сохранено, можно использовать метод toHaveScreenshot в других тестах для проверки изменений.

it('проверка изменений на странице', async () => {
  await page.goto('https://example.com');
  await expect(page).toHaveScreenshot();
});

Ручная проверка изменений

Если тест не прошёл, Playwright предоставляет возможность вручную проверить различия между текущим и эталонным изображением. При этом могут быть использованы различные инструменты визуального сравнения, такие как Pixelmatch, для анализа различий на уровне пикселей.

Метод toHaveScreenshot также поддерживает параметр maxDiffPixelRatio, который определяет допустимое количество отличий в изображениях. Если различие превышает этот порог, тест не проходит.

await expect(page).toHaveScreenshot({
  maxDiffPixelRatio: 0.1
});

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

Управление эталонными изображениями

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

it('обновление эталонного изображения', async () => {
  await page.goto('https://example.com');
  await page.screenshot({ path: 'screenshot.png' });  // Сохраняем новый скриншот
});

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

Использование toHaveScreenshot с локаторами

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

const element = page.locator('.card');
await expect(element).toHaveScreenshot();

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

Технические ограничения

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

Ещё одной проблемой может быть различие в условиях тестирования, например, на разных экранах или при различных разрешениях. Чтобы избежать таких различий, стоит устанавливать единые параметры для всех тестов, включая размер окна браузера.

Заключение

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

Оглавление