Визуальное тестирование в Playwright

Playwright отлично подходит для проверки функциональности приложения, но с его помощью можно также тестировать и внешний вид интерфейса.

Что такое визуальное тестирование?

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

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

Суть метода проста: сначала мы сохраняем эталонные скриншоты корректного интерфейса, затем после каждого изменения автоматически делаем новые снимки и сравниваем их с оригиналом. Если обнаруживаются расхождения, это сигнал к проверке – либо мы нашли баг, либо нужно обновить эталон.
Особенно полезно такое тестирование для сложных интерфейсов, где важно сохранять единообразие стилей. Ведь даже мелкие изменения вёрстки могут сломать отображение элементов интерфейса.
Автоматизированное визуальное тестирование встраивается в процесс разработки и непрерывной интеграции, экономя часы рутинной работы. Современные инструменты умеют не просто находить отличия, но и анализировать их критичность, что делает процесс ещё эффективнее.

Визуальные тесты в Playwright?

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

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

Любые расхождения автоматически фиксируются, что даёт четкое понимание, было ли изменение намеренным или это баг. Что делает процесс проверки UI максимально прозрачным и предсказуемым.

Снапшот тестирование в Playwright

Рассмотрим пример end-to-end теста, который открывает диалоговое окно и закрывает его. Для визуальной проверки добавим снимки экрана в ключевых точках теста.

// tests/dashboard.spec.ts

import { test, expect } from "@playwright/test";

test("Dashboard", async ({ page }) => {
  await page.goto("/dashboard/acme");

  await expect(page).toHaveTitle(/Acme Dashboard/);

  const expandButton = await page.locator(
    ".main .card:nth-child(0) .btn-expand",
  );

  await expandButton.click();

  const dialog = await page.locator(".dialog");

  const closeButton = await dialog.locator(".btn-close");

  await closeButton.click();
});

Playwright предлагает простой API page.screenshot() для создания скриншотов. Вот как его использовать:

// tests/dashboard.spec.ts

import { test, expect } from "@playwright/test";

test("Dashboard", async ({ page }) => {
  await page.goto("/dashboard/acme");

  await expect(page).toHaveTitle(/Acme Dashboard/);

  const expandButton = await page.locator(
    ".main .card:nth-child(0) .btn-expand",
  );

  await expandButton.click();

  const dialog = await page.locator(".dialog");

  // 👇 Take a screenshot once the dialog is located
  page.screenshot({ path: "latencyExpanded.png" });

  const closeButton = await dialog.locator(".btn-close");

  await closeButton.click();
});

Метод page.screenshot() можно настроить: сохранить полный снимок всей страницы, а не только видимой области, и задать путь к файлу.

await page.screenshot({
  fullPage: true, // Capture full page height
  path: 'screenshot.png', // Provide save location
});

Playwright позволяет снимать скриншот не всей страницы, а конкретного элемента — для этого вызывается .screenshot() на локаторе.

await page.locator('.dialog').screenshot(...);

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

yarn playwright test

Проверьте полученный файл вручную — он будет сохранён в корне проекта.

Откройте скриншот и убедитесь, что он выглядит правильно:

Закоммитьте их вместе с изменениями кода. Эти снимки станут эталоном для будущих сравнений.

Запуск тестов в Playwright

Теперь используем сохранённый эталонный скриншот для проверки изменений.

Создаём новую ветку и вносим изменения
Например, поменяем основной цвет графика:

- chartPrimary: '#FD7748',
+ chartPrimary: '#1EA7FD',

Запустите тест повторно, чтобы сохранить новый скриншот. Проверьте полученное изображение, чтобы убедиться, что всё отображается корректно.

Фиксируем изменения и создаём PR
Коммитим код и новый скриншот, затем отправляем ветку на ревью.

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

Автоматизация визуальных тестов в CI

На предыдущем этапе мы создавали скриншоты локально и коммитили их в репозиторий. Такой подход может вызвать проблемы, если над одними и теми же end-to-end тестами работают несколько разработчиков: различия в окружении (например, установленные шрифты) могут привести к ложным расхождениям в изображениях.

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

Пример настройки на GitHub Actions:

# .github/workflows/e2e.yml
name: E2E tests
on: push
permissions:
  contents: write
jobs:
  E2E:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
      - uses: actions/checkout@v3
      - name: Install dependencies
        run: yarn
      - name: Install Playwright Browsers
        run: yarn playwright install --with-deps
      - name: Run tests
        run: yarn playwright test

      - name: Update E2E screenshots
        run: |
          git config --global user.name 'Your Name'
          git config --global user.email 'you@example.com'
          git commit -am "Update screenshots"
          git push

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

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

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

К счастью, существуют более эффективные решения. Специализированные инструменты для визуального тестирования легко интегрируются с Playwright и работают параллельно с вашими end-to-end тестами. Они не просто фиксируют статичные изображения, а предоставляют полноценную среду для анализа UI-изменений.

Chromatic и Playwright

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

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

Начало работы с Chromatic и Playwright:

Сначала установите пакеты Chromatic командой:

npm install --save-dev chromatic @chromatic-com/playwright

Обратите внимание, что интеграция работает только с Playwright версии 1.12 и выше.

После установки замените стандартный импорт в ваших тестах на специальный из пакета Chromatic:

// ➖ Remove this line
// import { test, expect } from '@playwright/test';
// ➕ Add this line
import { test, expect } from "@chromatic-com/playwright";

// Then use as normal 👇
test("Homepage", async ({ page }) => {
  await page.goto("https://mealexpress.com/");

  await expect(page).toHaveTitle("Mealdrop - find your next meal");

  // ...
});

Дальше вы можете писать и запускать тесты как обычно:

npx playwright test

Для отправки снапшотов в облако выполните команду с вашим токеном проекта:

npx chromatic --playwright -t=<TOKEN>

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

После завершения запуска вы увидите статус сборки с количеством протестированных компонентов и временем выполнения:

✔ Started build 1
  → Continue setup at https://www.chromatic.com/setup?appId=...
✔ Build 1 auto-accepted
  → Tested X stories across 10 components; captured 10 snapshots in 1 minute 3 seconds

Все снапшоты будут доступны в интерфейсе Chromatic, откуда их удобно просматривать и обсуждать с коллегами.

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

Перевод статьи «Visual testing with Playwright».