Артефакты и отчеты

Артефакты в контексте автоматизированного тестирования — это любые данные, сохраняемые во время выполнения тестов, которые помогают анализировать поведение приложения и выявлять ошибки. Puppeteer предоставляет гибкие возможности для создания таких артефактов: скриншоты, видео, логи сети, дампы DOM и многое другое. Эти данные позволяют не только отследить причину сбоя, но и документировать процесс тестирования.

Скриншоты и их использование

Скриншоты — один из самых распространенных артефактов. Puppeteer позволяет делать как полноэкранные снимки страницы, так и отдельного элемента. 

const puppeteer = require(&

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');

  // Полноэкранный скриншот
  await page.screenshot({ path: 'screenshot-full.png', fullPage: true });

  // Скриншот отдельного элемента
  const element = await page.$('h1');
  await element.screenshot({ path: 'screenshot-element.png' });

  await browser.close();
})();

Ключевые моменты при работе со скриншотами:

  • Всегда сохранять скриншоты с уникальными именами, чтобы избежать перезаписи.
  • При параллельном запуске тестов удобно использовать временные директории или timestamp в имени файла.
  • Скриншоты полезны не только при падении теста, но и для визуальной регрессии.

Логи и сетевые данные

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

await page.setRequestInterception(true);
page.on('request', request => {
  console.log('Запрос:', request.url());
  request.continue();
});
page.on('response', response => {
  console.log('Ответ:', response.url(), response.status());
});

Практические советы:

  • Логи сети помогают выявлять проблемы с производительностью или некорректные ответы API.
  • Можно сохранять JSON с деталями запросов и ответов для последующего анализа или отчета.
  • Полезно фильтровать запросы по типу ресурса (XHR, fetch, script, image), чтобы уменьшить объем данных.

Видео-запись сессии

Для сложных тестов полезно сохранять видео выполнения сценариев. Puppeteer сам по себе не умеет напрямую записывать видео, но можно использовать библиотеки вроде puppeteer-video-recorder или интеграцию с ffmpeg. 

const { PuppeteerScreenRecorder } = require('puppeteer-screen-recorder');

const browser = await puppeteer.launch();
const page = await browser.newPage();

const recorder = new PuppeteerScreenRecorder(page);
await recorder.start('test-video.mp4');

await page.goto('https://example.com');
await page.click('button#start');

await recorder.stop();
await browser.close();

Советы по видео-записям:

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

Дамп DOM и состояние страницы

Иногда для диагностики ошибки важнее не внешний вид, а структура страницы и текущее состояние элементов. Puppeteer позволяет сохранять HTML или содержимое отдельных элементов: 

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

Рекомендации:

  • Сохранять не только HTML, но и текстовые значения, атрибуты и состояние элементов формы.
  • Можно комбинировать дампы DOM с логами сети и скриншотами для полного анализа.
  • Для больших страниц рекомендуется сохранять только интересующие секции через page.$eval.

Формирование отчетов

Отчеты агрегируют артефакты и дают наглядное представление о результате тестирования. Puppeteer часто используют вместе с тестовыми фреймворками, например, Jest или Mocha, которые поддерживают генерацию HTML-отчетов. В отчет включаются:

  • Скриншоты и видео.
  • Логи сети и консоли.
  • Дамп DOM для конкретного шага.
  • Статус теста и продолжительность выполнения.

Пример генерации отчета с Mocha и Mochawesome: 

// npm install mocha mochawesome puppeteer
// package.json: "test": "mocha --reporter mochawesome"

describe('Пример теста', function () {
  it('Проверка заголовка', async function () {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('https://example.com');
    const title = await page.title();
    console.log('Заголовок страницы:', title);
    await page.screenshot({ path: 'report-screenshot.png' });
    await browser.close();
  });
});

Особенности эффективного формирования отчетов:

  • Включение артефактов только при падении теста уменьшает размер отчетов.
  • Использование относительных путей облегчает перенос и публикацию отчетов.
  • Совмещение скриншотов, логов и дампов DOM дает максимально полное представление о проблеме.

Автоматизация сбора артефактов

Для крупных проектов важно автоматизировать процесс:

  • Настройка директории для артефактов с поддиректориями по дате или тестовому набору.
  • Интеграция с CI/CD, чтобы каждый запуск сохранял артефакты на сервере.
  • Очистка старых артефактов через скрипты или политики хранения.

Автоматизация помогает не терять данные, упрощает отладку и обеспечивает повторяемость результатов.

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

Оглавление