Отчёты, визуальное тестирование и стратегия

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

HTML-отчёт показывает результаты прогона наглядно; визуальное тестирование сравнивает скриншот страницы с эталоном; стратегия решает, что вообще покрывать E2E.

HTML-отчёт

Репортёр html создаёт интерактивный отчёт: список тестов, время, причины падений, а для упавших — скриншоты, трейсы и логи. Это первое, куда смотрят после прогона.

npx playwright test
npx playwright show-report

В отчёте можно фильтровать по статусу (passed/failed/flaky), раскрыть упавший тест и сразу увидеть трейс — где именно сломалось. В CI можно включить несколько репортёров: человекочитаемый в терминале и машиночитаемый для системы.

export default defineConfig({
  reporter: [
    ['list'],                                 // в консоль
    ['html', { open: 'never' }],              // HTML-файл
    ['junit', { outputFile: 'results.xml' }], // для CI-систем
  ],
});

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

Иногда важно проверить не текст, а внешний вид: не съехала ли вёрстка, на месте ли логотип. Для этого есть снимок-сравнение toHaveScreenshot. При первом запуске Playwright сохраняет эталон (baseline), а дальше сравнивает с ним.

test('главная выглядит как эталон', async ({ page }) => {
  await page.goto('/');
  await expect(page).toHaveScreenshot('homepage.png');
});

Если вёрстка изменилась намеренно, эталон обновляют флагом npx playwright test --update-snapshots. Визуальные тесты особенно склонны к флаки: разные шрифты на разных ОС, анимации, динамические данные (дата, реклама). Поэтому их «приручают».

await expect(page).toHaveScreenshot('home.png', {
  animations: 'disabled',
  mask: [page.getByTestId('current-date')],
});

Стратегия: что покрывать E2E

Вернёмся к пирамиде из первого раздела. E2E дорог, поэтому покрывайте им только то, что нельзя надёжно проверить ниже.

Правило: на каждый бизнес-сценарий — один-два E2E на «счастливый путь» и важнейшую ошибку. Все остальные вариации — дешёвыми тестами ниже по пирамиде.

Чек-лист хорошего E2E-теста

• Семантические локаторы. getByRole/getByText, а не CSS-классы и XPath по позиции.
• Никаких waitForTimeout. Доверяйтесь авто-ожиданиям и web-first assertions.
• Изоляция. Тест не зависит от других, использует чистый контекст и уникальные данные.
• Одна проверяемая идея. Тест проверяет один сценарий, а не десять разом.
• Понятное имя и стабильность — зелёный в десяти прогонах подряд, не только «обычно».

// ❌ хрупкий локатор + ручная пауза + чтение «сейчас»
await page.click('.btn-x7f');
await page.waitForTimeout(2000);
expect(await page.locator('.msg').textContent()).toBe('Готово');

// ✅ семантика + авто-ожидание + web-first assertion
await page.getByRole('button', { name: 'Сохранить' }).click();
await expect(page.getByText('Готово')).toBeVisible();

Куда двигаться дальше

• Компонентное тестирование Playwright — проверка отдельных UI-компонентов, мостик к нижним уровням пирамиды.
• API-тестирование встроенным request — быстрые проверки бэкенда без браузера.
• Доступность (a11y): интеграция с axe для автопроверок доступности.
• Codegen: npx playwright codegen записывает действия в браузере и генерирует код теста — полезно для старта.

npx playwright codegen https://example.com

Итог

• HTML-отчёт — главный способ разобрать прогон: статусы, скриншоты, трейсы.
• toHaveScreenshot сравнивает страницу с эталоном; склонен к флаки — отключайте анимации, маскируйте динамику, генерируйте эталоны в CI.
• Покрывайте E2E немного критичных сценариев; детали — ниже по пирамиде.
• Хороший тест: семантические локаторы, без пауз, изолирован, стабилен. Дальше — компонентные и API-тесты, a11y, codegen.