Логирование и вывод отладочной информации

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

Консольное логирование

Основной способ отслеживания информации в процессе выполнения теста — использование стандартного console.log(). В Playwright console.log() может применяться как в самом тесте, так и в контексте страницы через обработку событий page.on('console', ...).

Пример базового логирования внутри теста:

const { test, expect } = require('@playwright/test');

test('логирование значений переменных', async ({ page }) => {
    await page.goto('https://example.com');

    const title = await page.title();
    console.log('Заголовок страницы:', title);

    const headerText = await page.textContent('h1');
    console.log('Текст заголовка:', headerText);
});

Для перехвата консольных сообщений, возникающих внутри браузера, используется обработчик события console:

page.on('console', msg => {
    console.log(`Консоль браузера: [${msg.type()}] ${msg.text()}`);
});

Типы сообщений msg.type() включают log, warning, error, info, что позволяет фильтровать вывод по важности.

Логирование сетевых запросов

Playwright позволяет отслеживать все сетевые взаимодействия, что критически важно для тестирования фронтенд-приложений с динамическим контентом.

Пример перехвата и логирования запросов и ответов:

page.on('request', request => {
    console.log(`Запрос: ${request.method()} ${request.url()}`);
});

page.on('response', async response => {
    const status = response.status();
    console.log(`Ответ: ${response.url()} - статус ${status}`);
    if (status >= 400) {
        const body = await response.text();
        console.log(`Тело ответа: ${body}`);
    }
});

Это позволяет выявлять ошибки на уровне API, видеть некорректные ответы и анализировать данные, которые получает страница.

Скриншоты и видео как инструмент отладки

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

Скриншоты:

await page.screenshot({ path: 'screenshot.png', fullPage: true });

Видео:

const context = await browser.newContext({
    recordVideo: { dir: 'videos/' }
});
const page = await context.newPage();
await page.goto('https://example.com');
await context.close(); // Видео сохраняется после закрытия контекста

Использование этих инструментов позволяет анализировать ошибки интерфейса, не полагаясь исключительно на текстовую информацию.

Встроенный дебаггер Playwright

Playwright предоставляет механизм интерактивного дебага через page.pause(). При вызове этой функции тест останавливается, и открывается DevTools или встроенный интерфейс Playwright Inspector, где можно:

  • Проверять состояние элементов.
  • Исполнять команды на лету.
  • Анализировать сетевые запросы и логи.

Пример:

await page.goto('https://example.com');
await page.pause(); // Остановка теста для интерактивного анализа

Логирование с использованием тестовых репортеров

Playwright Test поддерживает встроенные репортеры для структурированного логирования:

  • list — последовательный вывод выполнения тестов.
  • dot — минималистичный вывод.
  • json — для интеграции с системами CI/CD.
  • html — визуальный отчет с подробной информацией, скриншотами и видео.

Конфигурация репортера выполняется в playwright.config.js:

module.exports = {
    reporter: [['html', { outputFolder: 'test-report' }]],
};

При использовании репортеров важно логировать события через test.info().log() для интеграции с отчетами:

test('логирование через репортер', async ({ page }, testInfo) => {
    await page.goto('https://example.com');
    testInfo.log('Страница успешно загружена');
});

Логирование ошибок и исключений

Playwright позволяет перехватывать ошибки выполнения и события page.on('pageerror', ...):

page.on('pageerror', error => {
    console.error('Ошибка на странице:', error.message);
});

Это помогает отслеживать ошибки JavaScript, которые возникают непосредственно в браузере, включая исключения внутри асинхронных операций.

Практические рекомендации

  • Для постоянного мониторинга сетевых запросов и ошибок страниц рекомендуется использовать комбинацию page.on('console'), page.on('request'), page.on('response') и page.on('pageerror').
  • Логирование больших объектов следует выполнять через JSON.stringify(obj, null, 2) для читаемого вывода.
  • Использование page.pause() и записи видео помогает быстрее воспроизводить нестабильные ошибки.
  • Логи через test.info().log() интегрируются с отчетами, что повышает прозрачность тестирования для команд разработки.

Логирование и отладка в Playwright являются многоуровневыми: от простого console.log до визуальных отчетов и интерактивного инспектора. Правильное сочетание этих инструментов значительно ускоряет диагностику ошибок и повышает надежность автоматизированных тестов.

Оглавление