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

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

Error: Screenshot comparison failed:

      1063 pixels (ratio 0.01 of all image pixels) are different.

    Expected: /Users/hexlet/playwright-example/tests/example.spec.js-snapshots/test-1-chromium-darwin.png
    Received: /Users/hexlet/playwright-example/test-results/example-test-chromium/test-1-actual.png
        Diff: /Users/hexlet/playwright-example/test-results/example-test-chromium/test-1-diff.png

Основная цель скриншот-тестирования, проверка визуальных изменений.

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

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

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

В скриншот-тестах, вместо обычных проверок используется проверка toHaveScreenshot(). Она отвечает и за генерацию скриншотов при первом запуске и за сравнение с эталоном при повторных. Первый запуск в таком случае делается по-особому, с флагом --update-snapshots:

npx playwright test --update-snapshots

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

Во время генерации различий между скриншотами, Playwright вычисляет различие в количестве пикселей, о чем пишет в выводе:

1063 pixels (ratio 0.01 of all image pixels) are different.

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

// Конфигурация (глобально) playwright.config.ts
export default defineConfig({
  expect: {
    toHaveScreenshot: { maxDiffPixels: 100 },
  },
})

// Конкретная проверка
await expect(page).toHaveScreenshot({ maxDiffPixels: 100 })

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

Бывает, что скриншоты нужны, для того чтобы поделиться ими с кем-то. Playwright позволяет генерировать их без тестирования. Для этого используется метод screenshot():

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