Визуальное тестирование с Playwright: полное руководство

Playwright от Microsoft начиная с версии 1.22 включает встроенную функцию визуального тестирования: метод toHaveScreenshot(). Он позволяет делать скриншоты и автоматически сравнивать их с эталонными изображениями без внешних плагинов.

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

Установка и первый тест

Настройка быстрая, если у вас уже есть проект Node.js:

npm install -D @playwright/test
npx playwright install

Создайте первый визуальный тест в tests/visual.spec.ts:

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

test('homepage visual test', async ({ page }) => {
  await page.goto('https://ваш-сайт.com');
  await expect(page).toHaveScreenshot('homepage.png');
});

Первый запуск генерирует baseline (эталонное изображение). Последующие запуски сравнивают текущий скриншот с этим baseline и сигнализируют о различиях.

# Первый раз: сгенерировать baselines
npx playwright test --update-snapshots

# Далее: сравнивать
npx playwright test

Настройка толерантности

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

В playwright.config.ts:

import { defineConfig } from '@playwright/test';

export default defineConfig({
  expect: {
    toHaveScreenshot: {
      maxDiffPixelRatio: 0.01,  // 1% отличающихся пикселей допустимо
      animations: 'disabled',    // Отключает CSS-анимации
      scale: 'device',           // Учитывает Retina-экраны
    },
  },
});

Можно настраивать для каждого теста:

// Статическая страница: строгий порог
await expect(page).toHaveScreenshot('landing.png', {
  maxDiffPixelRatio: 0.001
});

// Дашборд с графиками: мягкий порог
await expect(page).toHaveScreenshot('dashboard.png', {
  maxDiffPixelRatio: 0.05,
  mask: [page.locator('.chart')]
});

Управление динамическим контентом

Динамический контент (даты, реклама, аватары, счётчики) — кошмар визуальных тестов. Playwright предлагает три решения:

Маскировка динамических зон:

await expect(page).toHaveScreenshot({
  mask: [
    page.locator('.ad-banner'),
    page.locator('.timestamp'),
    page.locator('.user-avatar')
  ]
});

Замена контента:

await page.evaluate(() => {
  document.querySelector('.date').textContent = '01/01/2026';
});
await expect(page).toHaveScreenshot();

Скрытие через CSS:

await page.addStyleTag({
  content: '.dynamic-element { visibility: hidden !important; }'
});
await expect(page).toHaveScreenshot();

Стабилизация тестов

test('stable visual test', async ({ page }) => {
  await page.goto('https://ваш-сайт.com');

  // Ждём завершения сетевых запросов
  await page.waitForLoadState('networkidle');

  // Ждём загрузки шрифтов
  await page.evaluate(() => document.fonts.ready);

  // Ждём критический элемент
  await page.waitForSelector('.hero-image', { state: 'visible' });

  await expect(page).toHaveScreenshot();
});

Ручное отключение анимаций:

await page.addStyleTag({
  content: `
    *, *::before, *::after {
      animation-duration: 0s !important;
      transition-duration: 0s !important;
    }
  `
});

Тестирование нескольких разрешений

// playwright.config.ts
projects: [
  {
    name: 'Desktop',
    use: { viewport: { width: 1920, height: 1080 } },
  },
  {
    name: 'Tablet',
    use: { viewport: { width: 768, height: 1024 } },
  },
  {
    name: 'Mobile',
    use: { ...devices['iPhone 13'] },
  },
]

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

name: Visual Tests
on: [push, pull_request]
jobs:
  visual-tests:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test
      - uses: actions/upload-artifact@v4
        if: failure()
        with:
          name: playwright-report
          path: playwright-report/

Ограничения подхода Playwright

Обязательные компетенции: нужно владеть TypeScript/JavaScript, селекторами и конфигурацией проекта. Не доступно для QA не-разработчиков.

Нет дашборда: нет встроенного интерфейса ревью. Управление baselines через терминал и файловую систему.

Ложные срабатывания: пиксельное сравнение базовое. Различия anti-aliasing между браузерами, вариации рендеринга шрифтов между ОС — всё это создаёт шум.

Обслуживание: каждое намеренное изменение UI требует перегенерации baselines. В проекте с 200 визуальными тестами и 3 браузерами — это 600 baselines.

Для команд, которые хотят визуальное тестирование без этих технических ограничений, no-code решения вроде Delta-QA предлагают альтернативу с нулевыми ложными срабатываниями благодаря алгоритму структурного сравнения в 5 проходов.

FAQ

Playwright бесплатен для визуальных тестов?

Да, полностью. toHaveScreenshot() встроен в Playwright, который является open source и поддерживается Microsoft.

Playwright или Cypress для визуальных тестов?

Playwright интегрирует визуальное тестирование нативно, тогда как Cypress требует внешний плагин. Playwright поддерживает три движка браузеров (Chromium, Firefox, WebKit). Для визуального тестирования Playwright — лучший выбор в open source.

Можно использовать Playwright и Delta-QA вместе?

Да. Рекомендуемый подход — использовать Playwright для сложных визуальных тестов и Delta-QA для рутинных визуальных проверок, поддерживаемых командой QA.

---

Playwright предлагает надёжную основу для автоматизированных визуальных тестов. Для команд разработки, владеющих TypeScript, это, вероятно, лучшая open source опция, доступная в 2026 году.

---

Попробовать Delta-QA бесплатно →

---

Предыдущая статья: От ручного тестирования к автоматизированному: руководство для QA без разработки