Allure отчёты для Playwright: настройка расширенной отчётности

Встроенный HTML-репортер Playwright не показывает пошаговую разбивку, не хранит историю трендов между CI-запусками и не позволяет связать падения с трекером задач. Allure добавляет всё это через адаптер allure-playwright, который записывает сырые результаты для последующей компиляции в интерактивный отчёт с графиками трендов и категориями падений. Здесь разобраны установка, настройка в playwright.config.ts, генерация отчётов локально и интеграция с GitHub Actions.

Что даёт Allure

Тест-сьюты, организованные по файлу, describe-блоку и названию теста
Timeline с отображением параллельного выполнения тестов
Пошаговая разбивка того что произошло в каждом тесте
Вложения: скриншоты, видео, логи консоли прямо в отчёте
Тренды: показатели pass/fail по нескольким запускам
Информация об окружении: какой браузер, ОС, версия приложения тестировались
Категории: группировка падений по типу (баги продукта, баги тестов, флаки)

Установка

# Устанавливаем адаптер Allure Playwright
npm install -D allure-playwright

# Устанавливаем Allure CLI для генерации и просмотра отчётов
npm install -D allure-commandline

Или устанавливаем Allure CLI глобально:

npm install -g allure-commandline

Конфигурация

Добавляем Allure как репортер в playwright.config.ts:

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

export default defineConfig({
  reporter: [
    ['list'],                // Вывод в консоль во время запуска
    ['allure-playwright'],   // Генерация Allure-отчёта
  ],
  
  // Опционально: дополнительная конфигурация Allure
  // reporter: [
  //   ['allure-playwright', {
  //     detail: true,
  //     outputFolder: 'allure-results',
  //     suiteTitle: false,
  //   }],
  // ],
});

Репортер записывает сырые результаты в allure-results/ во время запуска тестов. Затем из этих результатов генерируется HTML-отчёт.

Запуск и просмотр отчётов

# Запускаем тесты (результаты записываются в allure-results/)
npx playwright test

# Генерируем HTML-отчёт
npx allure generate allure-results --clean -o allure-report

# Открываем в браузере
npx allure open allure-report

Или объединяем генерацию и открытие:

npx allure generate allure-results --clean && npx allure open allure-report

Добавь в package.json для удобства:

{
  "scripts": {
    "test": "npx playwright test",
    "report": "npx allure generate allure-results --clean -o allure-report && npx allure open allure-report"
  }
}

Затем: npm test && npm run report

Добавление шагов в тесты

Allure показывает пошаговые разбивки если аннотировать код:

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

test('successful login', async ({ page }) => {
  await allure.step('Navigate to login page', async () => {
    await page.goto('/login');
  });
  
  await allure.step('Enter credentials', async () => {
    await page.fill('[data-testid="email"]', 'user@test.com');
    await page.fill('[data-testid="password"]', 'ValidPass1');
  });
  
  await allure.step('Submit login form', async () => {
    await page.click('[data-testid="submit"]');
  });
  
  await allure.step('Verify redirect to dashboard', async () => {
    await expect(page).toHaveURL('/dashboard');
    await expect(page.getByTestId('welcome')).toBeVisible();
  });
});

В Allure-отчёте каждый шаг отображается отдельно со статусом pass/fail.

Добавление метаданных

Аннотируй тесты метаданными для удобной организации и фильтрации:

test('payment with valid card', async ({ page }) => {
  // Метки для фильтрации и группировки
  allure.label('feature', 'Checkout');
  allure.label('story', 'Credit card payment');
  allure.severity('critical');  // 'blocker' | 'critical' | 'normal' | 'minor' | 'trivial'
  allure.owner('qa-team');
  
  // Ссылки на задачи и тест-кейсы
  allure.issue('PROJ-123', 'https://jira.mycompany.com/PROJ-123');
  allure.tmsLink('TC-456', 'https://testrail.mycompany.com/TC-456');
  
  // Описание
  allure.description('Verify that valid Stripe test card completes purchase');
  
  // Теги
  allure.tag('smoke');
  allure.tag('payment');
  
  // ... код теста
});

Вложение скриншотов и файлов

import { allure } from 'allure-playwright';
import * as fs from 'fs';

test('verifies page layout', async ({ page }) => {
  await page.goto('/dashboard');
  
  // Прикрепляем скриншот вручную
  const screenshot = await page.screenshot();
  await allure.attachment('Dashboard screenshot', screenshot, 'image/png');
  
  // Прикрепляем текстовый файл
  const logContent = 'Test started at: ' + new Date().toISOString();
  await allure.attachment('Test log', Buffer.from(logContent), 'text/plain');
  
  // Прикрепляем JSON-данные
  const apiResponse = { status: 'ok', users: 42 };
  await allure.attachment(
    'API response',
    Buffer.from(JSON.stringify(apiResponse, null, 2)),
    'application/json'
  );
});

Скриншоты при падении прикрепляются автоматически если настроено в playwright.config.ts:

use: {
  screenshot: 'only-on-failure',
  video: 'retain-on-failure',
}

Информация об окружении

Добавляй детали окружения чтобы в отчёте было видно что тестировалось:

// В playwright.config.ts или global setup
// Создаём файл allure-results/environment.properties

// global-setup.ts
import * as fs from 'fs';
import * as path from 'path';

export default async function globalSetup() {
  const envProps = [
    `BASE_URL=${process.env.BASE_URL || 'http://localhost:3000'}`,
    `ENV=${process.env.TEST_ENV || 'local'}`,
    `BROWSER=chromium`,
    `APP_VERSION=${process.env.APP_VERSION || 'unknown'}`,
  ].join('\n');
  
  fs.mkdirSync('allure-results', { recursive: true });
  fs.writeFileSync(path.join('allure-results', 'environment.properties'), envProps);
}

Это отображается в разделе Environment Allure-отчёта.

Конфигурация категорий

Категории группируют падения тестов по типу. Создай allure-results/categories.json:

[
  {
    "name": "Product Bugs",
    "messageRegex": ".*Expected.*",
    "matchedStatuses": ["failed"]
  },
  {
    "name": "Test Infrastructure Issues",
    "messageRegex": ".*net::ERR.*|.*Navigation timeout.*|.*Connection refused.*",
    "matchedStatuses": ["failed", "broken"]
  },
  {
    "name": "Test Flakiness",
    "matchedStatuses": ["flaky"]
  }
]

Allure автоматически категоризирует падения по паттернам сообщений об ошибках.

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

GitHub Actions

- name: Run Playwright tests
  run: npx playwright test

- name: Generate Allure report
  if: always()
  run: npx allure generate allure-results --clean -o allure-report

- name: Upload Allure report
  uses: actions/upload-artifact@v4
  if: always()
  with:
    name: allure-report
    path: allure-report/
    retention-days: 30

- name: Upload raw results (for trend data)
  uses: actions/upload-artifact@v4
  if: always()
  with:
    name: allure-results
    path: allure-results/

Allure TestOps (облачная версия)

Для постоянной истории трендов между CI-запусками Allure TestOps (платный сервис) хранит результаты централизованно. Бесплатная альтернатива: загружай артефакты allure-results из предыдущих запусков и включай их в следующую команду allure generate.

Playwright Report vs Allure

| Функция | Playwright HTML | Allure |

|---------|----------------|--------|

| Требуется настройка | Нет | Установка + шаг генерации |

| Пошаговая разбивка | Нет | Да (с аннотациями) |

| История трендов | Нет | Да |

| Категории | Нет | Да (настраиваемые) |

| Ссылки на внешние инструменты | Нет | Да (Jira, TestRail) |

| Лучше подходит для | Быстрое ежедневное использование | Отчёты для стейкхолдеров, история CI |

Встроенный отчёт Playwright используй локально для быстрой обратной связи. Allure в CI подходит для постоянной истории и отчётности для стейкхолдеров.

Итог

# Установка
npm install -D allure-playwright allure-commandline

# Конфигурация в playwright.config.ts
reporter: [['allure-playwright']]

# Запуск, генерация, просмотр
npx playwright test
npx allure generate allure-results --clean
npx allure open allure-report

Ключевые возможности для использования:

allure.step() для читаемой разбивки теста
allure.severity() и метки для фильтрации
allure.issue() для связи падений с трекером задач
Свойства окружения для документирования что тестировалось

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