Обновление baseline изображений

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

Подготовка к обновлению baseline

Для корректного обновления baseline важно понимать структуру проекта и текущие настройки Playwright:

Структура хранения скриншотов Playwright хранит эталонные изображения по умолчанию в каталоге __screenshots__ внутри папки с тестами. Каждый тест имеет свою подпапку, а файлы именуются согласно имени теста и состоянию страницы.
Конфигурация сравнения В файле playwright.config.js можно настроить параметры визуальных проверок:
```
const { defineConfig } = require('@playwright/test');

module.exports = defineConfig({
  use: {
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },
  expect: {
    toHaveScreenshot: {
      maxDiffPixelRatio: 0.01, // допускаемая разница в пикселях
    },
  },
});
```
Здесь maxDiffPixelRatio определяет, насколько допустимо отклонение текущего скриншота от baseline.

Обновление baseline через команду

Playwright предоставляет встроенный механизм для обновления эталонных изображений:

npx playwright test --update-snapshots

Флаг --update-snapshots перезаписывает все устаревшие скриншоты новыми, соответствующими текущему состоянию интерфейса.
Этот способ предпочтителен при массовых изменениях интерфейса, когда ручное обновление каждого изображения неудобно.

Обновление изображений для отдельных тестов

Иногда нужно обновить baseline только для конкретного теста:

Запуск теста с флагом обновления:
```
npx playwright test path/to/test.spec.js --update-snapshots
```
Это обновит эталонные скриншоты только для тестов в указанном файле.

Использование API внутри теста:

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

test('визуальная проверка кнопки', async ({ page }) => {
  await page.goto('https://example.com');
  // Перезаписываем эталонный скриншот
  await expect(page.locator('#button')).toHaveScreenshot({ name: 'button.png', threshold: 0.01 });
});

При необходимости в toHaveScreenshot можно добавить параметр updateSnapshot: true, чтобы обновить только конкретное изображение.

Стратегии безопасного обновления

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

Практические нюансы

Постоянная интеграция (CI/CD) В пайплайнах часто используют флаги --update-snapshots только в ветках разработки, а для основной ветки сравнение происходит без обновления, чтобы выявлять регрессии.
Разница в разрешениях и окружении Скриншоты могут отличаться при разных разрешениях экранов, масштабировании или системных шрифтах. Настройка Playwright с фиксированными viewport и browser contexts минимизирует ложные срабатывания.
Локальные правки Если изменения минимальные (например, цвет кнопки), иногда выгоднее изменить baseline вручную, чем перезаписывать все изображения.