Консольные сообщения страницы

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

Получение консольных сообщений

Puppeteer позволяет прослушивать консольные сообщения страницы, такие как console.log(), console.warn(), console.error() и другие. Для этого используется событие console объекта page. Оно срабатывает каждый раз, когда на странице появляется новое консольное сообщение.

Пример кода, который ловит все консольные сообщения: 

const puppeteer = require(&

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

  page.on('console', msg => {
    console.log('Консольное сообщение:', msg.text());
  });

  await page.goto('https://example.com');

  // Генерация консольных сообщений на странице
  await page.evaluate(() => {
    console.log('Это лог');
    console.warn('Это предупреждение');
    console.error('Это ошибка');
  });

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

В этом примере мы ловим все консольные сообщения с помощью обработчика события page.on(‘console’). Метод msg.text() используется для получения текста сообщения, выведенного в консоль.

Фильтрация сообщений по типам

Можно фильтровать сообщения по типу, чтобы реагировать только на определенные виды сообщений, такие как ошибки или предупреждения.

Пример фильтрации по типу сообщений: 

page.on('console', msg => {
  if (msg.type() === 'error') {
    console.error('Ошибка:', msg.text());
  } else if (msg.type() === 'warn') {
    console.warn('Предупреждение:', msg.text());
  } else {
    console.log('Информация:', msg.text());
  }
});

Метод msg.type() позволяет получить тип сообщения, который может быть одним из следующих:

  • ‘log’ — обычное сообщение,
  • ‘warn’ — предупреждение,
  • ‘error’ — ошибка,
  • ‘info’ — информационное сообщение.

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

Логирование сообщений для отладки

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

Для логирования сообщений можно использовать разнообразные способы. Один из них — вывод сообщений в отдельный файл. Для этого достаточно передать логирующий процесс в файл, используя стандартные методы Node.js.

Пример записи сообщений в файл: 

const fs = require('fs');

page.on('console', msg => {
  const message = `[${new Date().toISOString()}] ${msg.type().toUpperCase()}: ${msg.text()}\n`;
  fs.appendFileSync('console_logs.txt', message);
});

Этот код записывает консольные сообщения в файл console_logs.txt с добавлением метки времени и типа сообщения. Такой подход может быть полезен для отладки в процессе тестирования и после выполнения тестов.

Работа с сетевыми запросами и консольными сообщениями

Часто в процессе тестирования может возникнуть необходимость не только отслеживать консольные сообщения, но и проверять, какие сетевые запросы выполняются на странице. Это особенно актуально при тестировании взаимодействий с сервером, например, при выполнении AJAX-запросов.

Для этого Puppeteer позволяет слушать события, связанные с сетевыми запросами, такие как request, response, requestfailed. Эти события можно комбинировать с консольными сообщениями для более глубокой диагностики.

Пример отслеживания консольных сообщений в связке с сетевыми запросами: 

page.on('console', msg => {
  console.log(`[${msg.type()}] ${msg.text()}`);
});

page.on('response', response => {
  if (response.status() >= 400) {
    console.error('Ошибка запроса:', response.url(), response.status());
  }
});

await page.goto('https://example.com');

Здесь при ответе от сервера с кодом ошибки (например, 404 или 500) выводится информация о запросе и его статусе в консоль.

Управление выводом консоли на уровне браузера

Puppeteer позволяет управлять выводом консольных сообщений на уровне браузера. Например, можно переопределить стандартные методы console.log, console.warn, console.error, чтобы они выполняли дополнительные действия при выводе сообщений, например, отправку их на сервер для мониторинга.

Пример переопределения стандартных методов консоли: 

await page.evaluate(() => {
  console.log = function(message) {
    window.originalLog(message);
    // Дополнительная обработка, например, отправка на сервер
  };
  window.originalLog = console.log;
});

В этом примере переопределяется стандартный метод console.log, добавляется дополнительная логика, например, отправка сообщений на сервер, но при этом сохраняется возможность использования стандартного логирования через window.originalLog.

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

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

Пример проверки отсутствия ошибок в консоли: 

const errors = [];

page.on('console', msg => {
  if (msg.type() === 'error') {
    errors.push(msg.text());
  }
});

await page.goto('https://example.com');
if (errors.length > 0) {
  throw new Error('Ошибки в консоли: ' + errors.join(', '));
}

Здесь, если в консоли браузера появляются ошибки, они записываются в массив errors, а в конце теста выбрасывается исключение с сообщением об ошибках.

Вывод

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

Оглавление