Трассировка ошибок

Трассировка ошибок — ключевой аспект автоматизированного тестирования с использованием Puppeteer. Она позволяет выявлять неполадки на ранних этапах, понимать причины сбоев и улучшать стабильность тестовых сценариев. Puppeteer предоставляет широкий набор инструментов для диагностики, логирования и анализа поведения браузера и страниц.

Логирование действий и ошибок

Puppeteer позволяет отслеживать различные события браузера, которые помогают идентифицировать проблемы: 

const puppeteer = require(&

(async () => {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();

    page.on('console', msg => console.log('CONSOLE:', msg.text()));
    page.on('pageerror', err => console.error('PAGE ERROR:', err));
    page.on('requestfailed', req => console.warn('REQUEST FAILED:', req.url(), req.failure().errorText));

    try {
        await page.goto('https://example.com');
        await page.click('#nonexistent'); // вызовет ошибку
    } catch (err) {
        console.error('SCRIPT ERROR:', err);
    } finally {
        await browser.close();
    }
})();

Ключевые моменты:

  • page.on(‘console’) — перехватывает сообщения консоли, включая console.log, console.warn и console.error.
  • page.on(‘pageerror’) — фиксирует ошибки JavaScript на странице.
  • page.on(‘requestfailed’) — отслеживает неудачные сетевые запросы, полезно при проверке загрузки ресурсов.
  • Блок try/catch помогает локализовать ошибки внутри скриптов Puppeteer.

Скриншоты и дампы состояния

Скриншоты и снимки DOM помогают понять, что происходило в момент ошибки: 

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

const html = await page.content();
const fs = require('fs');
fs.writeFileSync('error_dump.html', html);

Особенности:

  • screenshot фиксирует визуальное состояние страницы.
  • page.content() сохраняет полный HTML, что позволяет анализировать структуру DOM после сбоя.
  • Рекомендуется использовать их в комбинации с логами консоли и сетевых запросов для полноценной диагностики.

Отслеживание сетевых событий

Puppeteer позволяет контролировать все сетевые операции, что облегчает поиск ошибок загрузки ресурсов и API: 

page.on('request', req => console.log('REQUEST:', req.url()));
page.on('response', res => console.log('RESPONSE:', res.url(), res.status()));

Важные аспекты:

  • request показывает каждое отправленное сетевое обращение.
  • response позволяет проверять статус и корректность ответа.
  • Использование этих событий помогает выявлять проблемы с асинхронными запросами и динамическим контентом.

Отладка с помощью debug и headless-режима

Puppeteer поддерживает детальное логирование через переменную окружения: 

DEBUG=puppeteer:* node script.js

Особенности:

  • Выводит детальную информацию о всех шагах запуска браузера и выполнении команд.
  • Совместно с headless: false можно визуально наблюдать за поведением страницы.
  • Логирование полезно при сложных сценариях с множеством вкладок или асинхронных операций.

Управление тайм-аутами и ожиданиями

Частой причиной ошибок является недостаток времени для загрузки элементов или ресурсов. Puppeteer позволяет настраивать тайм-ауты: 

await page.goto('https://example.com', { waitUntil: 'networkidle2', timeout: 10000 });
await page.waitForSelector('#dynamicElement', { timeout: 5000 });

Ключевые моменты:

  • waitUntil: ‘networkidle2’ обеспечивает ожидание завершения сетевых запросов.
  • waitForSelector предотвращает попытку взаимодействия с элементами до их появления на странице.
  • Настройка тайм-аутов помогает избежать ложных ошибок при медленной загрузке.

Сохранение и анализ трассировки

Puppeteer предоставляет встроенный инструмент для записи трассировки действий страницы: 

await page.tracing.start({ path: 'trace.json', screenshots: true });
await page.goto('https://example.com');
// действия на странице
await page.tracing.stop();

Особенности:

  • tracing.start и tracing.stop создают JSON-файл с полной информацией о загрузке страницы, рендеринге и сетевых запросах.
  • Включение screenshots: true позволяет видеть визуальные шаги теста.
  • Файл трассировки можно открыть в Chrome DevTools для подробного анализа.

Использование кастомных обработчиков ошибок

Можно создавать собственные обработчики, чтобы централизованно управлять логированием и уведомлениями о сбоях: 

function handleError(err, context) {
    console.error('ERROR IN CONTEXT:', context, err);
    // можно добавить сохранение скриншота или дампа DOM
}

page.on('pageerror', err => handleError(err, 'page'));
page.on('requestfailed', req => handleError(req.failure().errorText, req.url()));

Преимущества:

  • Централизация обработки ошибок упрощает поддержку больших тестовых наборов.
  • Позволяет интегрировать уведомления, логирование и хранение артефактов для анализа.

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

В автоматизированных пайплайнах Puppeteer-скрипты часто выполняются в headless-режиме на сервере. Для трассировки ошибок рекомендуется:

  • Включать headless: false при локальном отладочном запуске.
  • Сохранять скриншоты и дампы DOM при падении тестов.
  • Логировать сетевые события и ошибки консоли в отдельные файлы.
  • Использовать трассировку (tracing) для сложных сценариев, где визуальное состояние страницы критично.

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

Оглавление