playwright.config.ts

/**
 * Шаблон конфига playwright, переиспользуется в мокированных и немокированных тестах.
 * https://playwright.dev/docs/test-configuration
 *
 * Конфигурация локального запуска и запуск в CI отличаются, см. код ниже.
 * Если требуется подебажить CI, достаточно запустить с флагом
 * CI=1 npx playwright test ...
 */

import type {
  PlaywrightTestConfig,
  ReporterDescription,
} from '@playwright/test';
import { devices } from '@playwright/test';

// Для дебага, чтоб всегда было видно весь стектрейс, а не только 30
Error.stackTraceLimit = Infinity;

/**
 * Timeouts
 */

// Максимальное время прохождения всего лонча (в рамках джобы)
const GLOBAL_TIMEOUT = 20 * 60_000;
// Максимальное время прохождения одного теста
const TEST_TIMEOUT = 10_000;
// Максимальное время загрузки страницы сторибука (локально 30, в CI 5)
const NAVIGATION_TIMEOUT = process.env.CI ? 5_000 : 30_000;
// Максимальное время ожидания экспекта
const EXPECT_TIMEOUT = 1_000;

// Порт на котором запущено tramvai приложение
const PORT = Number(process.env.PORT) || 3000;
// Вычисленный путь с явно указанным портом приложения
const BASE_URL = `http://localhost:${PORT}`;

// Директория отчета allure-playwright
const ALLURE_RESULTS_DIR =
  process.env.ALLURE_RESULTS_DIR ?? 'allure-results/playwright';
// Директория отчета playwright-html
const PLAYWRIGHT_HTML_REPORT =
  process.env.PLAYWRIGHT_HTML_REPORT ?? 'playwright/report';

/**
 * Локальный запуск
 */
let command = 'npm start';
let timeout = 60 * 1000;
let workers = 1;

let reporters: ReporterDescription[] = [
  ['list'],
  ['html', { open: 'never', outputFolder: PLAYWRIGHT_HTML_REPORT }],
];

const projects: PlaywrightTestConfig['projects'] = [
  {
    name: 'chromium',
    use: { ...devices['Desktop Chrome'] },
  },
];

/**
 * Запуск в CI
 */
if (process.env.CI) {
  timeout = 20000;
  command = 'npm run serve';

  workers = 2;

  reporters = [
    ...reporters,
    ['junit'],
    // переменная окружения ALLURE_RESULTS_DIR имеет приоритет выше чем параметр outputFolder
    ['allure-playwright', { outputFolder: ALLURE_RESULTS_DIR, detail: true }],
  ];
}

const config: PlaywrightTestConfig = {
  testMatch: '__integration__/**/*.test.ts',
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 3 : 0,
  reporter: reporters,
  expect: {
    timeout: EXPECT_TIMEOUT,
  },
  use: {
    testIdAttribute: 'data-qa-type',
    headless: true,
    video: 'retain-on-failure',
    screenshot: 'only-on-failure',
    baseURL: BASE_URL,
    navigationTimeout: NAVIGATION_TIMEOUT,

    /**
     * Флаг позволяет сохранять расширенные логи на упавшем тесте,
     * в частности сетевую активность, скриншоты на каждом шаге, логи
     * в Console. Логи сохраняются в артефакты джобы в zip файл.
     *
     * https://playwright.dev/docs/trace-viewer#recording-a-trace
     *
     * 'on' — записывает трейсинг для всех тестов
     * 'retain-on-failure' — только для упавших
     * 'on-first-retry'  – только на ретраях
     *
     * Пример запуска trace viewer:
     * npx playwright show-trace test-results/packages-forms-dolyame-__playwright__-dolyame--WIP-Dolyame-pappy-path-chromium/trace.zip
     */
    trace: 'retain-on-failure',
  },
  webServer: {
    command,
    port: PORT,
    timeout,
    reuseExistingServer: !process.env.CI,
  },
  timeout: TEST_TIMEOUT,
  globalTimeout: GLOBAL_TIMEOUT,
  projects,
  workers,
};

export default config;