События page и browser

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

Общее представление о событиях

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

События могут быть обработаны с помощью методов on или once, в зависимости от того, нужно ли реагировать на событие только один раз или на протяжении всей жизни объекта.

События browser

Браузер, как объект верхнего уровня, также имеет несколько важных событий, которые могут быть полезны при тестировании или автоматизации.

browser.on(‘disconnected’)

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

Пример: 

const browser = await puppeteer.launch();

browser.on(&
  console.log('Браузер был закрыт или потерян доступ.');
});

browser.on(‘targetcreated’)

Срабатывает, когда создается новый “цель” (target), который может быть новой страницей, фреймом или расширением.

Пример: 

browser.on('targetcreated', target => {
  console.log('Новая цель создана:', target.url());
});

browser.on(‘targetdestroyed’)

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

Пример: 

browser.on('targetdestroyed', target => {
  console.log('Цель была уничтожена:', target.url());
});

browser.on(‘targetchanged’)

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

Пример: 

browser.on('targetchanged', target => {
  console.log('Цель изменила свои свойства:', target.url());
});

События page

Страница в Puppeteer — это объект, через который происходит взаимодействие с контентом на веб-странице. Помимо стандартных методов работы с элементами DOM, на странице также можно отслеживать множество событий.

page.on(‘load’)

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

Пример: 

const page = await browser.newPage();

page.on('load', () => {
  console.log('Страница полностью загружена');
});

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

page.on(‘domcontentloaded’)

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

Пример: 

page.on('domcontentloaded', () => {
  console.log('DOM был полностью загружен');
});

page.on(‘error’)

Если на странице происходит ошибка JavaScript, это событие срабатывает, позволяя ловить ошибки скриптов.

Пример: 

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

page.on(‘pageerror’)

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

Пример: 

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

page.on(‘response’)

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

Пример: 

page.on('response', response => {
  console.log('HTTP-ответ:', response.status(), response.url());
});

page.on(‘request’)

Событие срабатывает каждый раз, когда отправляется HTTP-запрос. Его можно использовать для отслеживания, какие запросы происходят на странице, и для их фильтрации или подмены.

Пример: 

page.on('request', request => {
  console.log('HTTP-запрос:', request.method(), request.url());
});

page.on(‘dialog’)

Когда на странице появляется диалоговое окно (например, модальное окно или подтверждение), это событие срабатывает, позволяя автоматически взаимодействовать с ним.

Пример: 

page.on('dialog', dialog => {
  console.log('Появился диалог:', dialog.message());
  dialog.accept();
});

page.on(‘console’)

Событие console срабатывает при вызове функции console.log() на странице. Это может быть полезно для отладки и отслеживания выводов, генерируемых JavaScript-скриптами на странице.

Пример: 

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

page.on(‘framenavigated’)

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

Пример: 

page.on('framenavigated', frame => {
  console.log('Навигация в фрейме:', frame.url());
});

page.on(‘filechooser’)

Когда появляется элемент выбора файла, это событие позволяет автоматически взаимодействовать с ним. Например, можно подставить файл для загрузки, не требуя от пользователя участия.

Пример: 

page.on('filechooser', async fileChooser => {
  await fileChooser.accept(['/path/to/file']);
});

Работа с событиями в Puppeteer

Обработка событий в Puppeteer работает на основе подписки через методы on и once:

  • on — событие будет срабатывать каждый раз, когда оно происходит.
  • once — событие будет срабатывать только один раз.

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

page.once('load', () => {
  console.log('Страница была загружена');
});

Для удаления обработчиков событий можно использовать метод removeListener: 

const handler = () => console.log('Страница загружена');
page.on('load', handler);

// Удаляем обработчик
page.removeListener('load', handler);

Заключение

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

Оглавление