Использование Chrome DevTools

Puppeteer — это мощная библиотека для автоматизации браузера, построенная на основе Node.js, которая предоставляет API для управления браузером Chrome или Chromium. В процессе тестирования с Puppeteer нередко возникает необходимость в интерактивной отладке, для чего идеально подходит использование инструментов разработчика Chrome (Chrome DevTools). В этой главе рассматриваются методы взаимодействия с DevTools через Puppeteer для улучшения качества тестирования и отладки автоматизированных сценариев.

Как подключить Puppeteer к DevTools

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

const puppeteer = require(&

(async () => {
  const browser = await puppeteer.launch({ headless: false, devtools: true });
  const page = await browser.newPage();
  await page.goto('https://example.com');
})();

Указание devtools: true при запуске браузера открывает панель инструментов DevTools, предоставляя доступ к сетевым запросам, консоли и другим инструментам для отладки.

Просмотр и взаимодействие с консолью

Через DevTools можно следить за выводом из консоли браузера, включая сообщения об ошибках, предупреждения и логи. Для того чтобы перехватывать сообщения консоли, используйте следующий код: 

page.on('console', msg => {
  console.log('Console Message: ', msg.text());
});

Этот обработчик будет выводить все сообщения, которые отправляются в консоль браузера. Также можно различать типы сообщений (например, log, warn, error) и выполнять дополнительные действия в зависимости от типа: 

page.on('console', msg => {
  if (msg.type() === 'error') {
    console.error('Error: ', msg.text());
  } else {
    console.log('Log: ', msg.text());
  }
});

Отладка сетевых запросов

Одной из ключевых возможностей DevTools является возможность отслеживания сетевых запросов. Это особенно полезно для тестирования производительности и анализа загружаемых ресурсов. Puppeteer позволяет перехватывать все HTTP-запросы и изменять их или блокировать. Для этого можно использовать метод page.on(‘request’, …).

Пример: 

page.on('request', request => {
  console.log('Request URL: ', request.url());
});

Этот код будет выводить URL каждого запроса, отправляемого браузером. Также можно отследить ошибки сетевых запросов: 

page.on('response', response => {
  if (!response.ok()) {
    console.error('Request failed: ', response.status(), response.url());
  }
});

Управление состоянием страницы с помощью DevTools

Одним из интересных аспектов использования DevTools является возможность вручную изменять состояние страницы, например, внедрять JavaScript-код, изменять DOM или устанавливать специфические параметры устройства.

Для этого можно использовать метод page.evaluate(), который позволяет выполнить JavaScript в контексте страницы. Пример: 

await page.evaluate(() => {
  document.body.style.backgroundColor = 'lightblue';
});

Этот код изменит цвет фона страницы на голубой. Можно применять более сложные сценарии, такие как манипулирование DOM-элементами или обработка ошибок.

Использование DevTools Protocol

Для более тонкой настройки и получения дополнительных возможностей можно подключиться к Chrome DevTools Protocol (CDP) напрямую. Puppeteer поддерживает работу с CDP, что позволяет взаимодействовать с браузером на более низком уровне. Взаимодействие через CDP открывает доступ к таким инструментам, как управление фокусом, отладка сети и другие функции, которые не доступны через стандартное API Puppeteer.

Пример использования: 

const client = await page.target().createCDPSession();
await client.send('Network.enable');
await client.on('Network.responseReceived', (params) => {
  console.log('Response received: ', params.response.url);
});

Этот код позволяет отслеживать все сетевые ответы через Chrome DevTools Protocol. С помощью CDP можно подключаться к дополнительным инструментам, таким как:

  • Network — для работы с сетевыми запросами и ответами.
  • Page — для контроля состояния страницы, например, скриншоты, размер экрана, события.
  • Runtime — для выполнения JavaScript-кода в контексте страницы.

Интерактивное использование DevTools в режиме отладки

Одним из удобных режимов работы с Puppeteer является режим отладки, который позволяет интегрировать DevTools с автоматизированными тестами. Для этого можно использовать метод debugger в коде: 

await page.evaluate(() => {
  debugger;  // Ожидает отладки через DevTools
  document.body.style.backgroundColor = 'red';
});

Этот код при достижении debugger приостановит выполнение скрипта, предоставляя возможность разработчику остановиться на этом месте и исследовать состояние страницы через DevTools.

Управление событиями через DevTools

Через DevTools можно активно управлять событиями на странице, такими как клики, клавиатурные события, прокрутка. Например, можно симулировать нажатие клавиши или клики с помощью CDP: 

const client = await page.target().createCDPSession();
await client.send('Input.dispatchKeyEvent', {
  type: 'keyDown',
  key: 'Enter'
});

Это посылает событие нажатия клавиши “Enter” в браузер, что позволяет моделировать взаимодействие с интерфейсом.

Просмотр ошибок через DevTools

DevTools предоставляет возможность для отслеживания и устранения ошибок на более глубоком уровне. Переход в панель “Console” через DevTools позволяет видеть не только ошибки JavaScript, но и сообщения о проблемах с загрузкой ресурсов. В случае ошибок с загрузкой ресурсов Puppeteer может перехватывать эти события и выводить сообщения: 

page.on('error', err => {
  console.error('Page error: ', err);
});

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

Использование DevTools для профилирования

Для анализа производительности и оптимизации тестов с Puppeteer полезно использовать профилирование, которое доступно через DevTools. С помощью CDP можно включать профилирование и получать подробную информацию о времени выполнения различных операций на странице: 

const client = await page.target().createCDPSession();
await client.send('Profiler.start');
await client.send('Profiler.stop');

Этот подход помогает детально анализировать производительность веб-страниц и выявлять узкие места.

Заключение

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

Оглавление