Puppeteer является мощным инструментом для автоматизации браузера Chrome, и одним из его ключевых аспектов является работа с событиями. В этой главе рассмотрим обработку событий, связанных с созданием и закрытием страниц.
При взаимодействии с браузером, Puppeteer предоставляет несколько
методов для работы с страницами. Каждая новая страница, открытая в
браузере, генерирует событие targetcreated, которое можно
использовать для отслеживания создания новых страниц.
Чтобы обработать это событие, нужно подписаться на него, используя метод
page.on() или browser.on():
const puppeteer = require(&
(async () => {
const browser = await puppeteer.launch();
browser.on('targetcreated', target => {
if (target.type() === 'page') {
console.log(`Страница создана: ${target.url()}`);
}
});
const page = await browser.newPage();
await page.goto('https://example.com');
await browser.close();
})();
В этом примере событие targetcreated срабатывает каждый
раз, когда в браузере появляется новая целевая страница (target). Важно
отметить, что target может быть как страницей, так и
другими типами, такими как воркеры или расширения. Поэтому стоит
проверять тип с помощью target.type().
Метод browser.on(‘targetcreated’, …) будет ловить все
события создания новых страниц, независимо от того, через какой объект
был открыт новый таб. В случае если нужно отследить только страницы,
можно добавить фильтрацию по типу цели.
Когда используется метод browser.newPage(), он создает
новую страницу в браузере и возвращает объект Page.
Ожидаемое поведение — страница будет автоматически доступна для
дальнейших операций.
const page = await browser.newPage();
Этот метод сам по себе не генерирует событие. Однако если вы хотите
отследить момент создания страницы в вашем коде, то использовать событие
targetcreated — оптимальный вариант.
При закрытии страницы в Puppeteer срабатывает событие
close. Это событие можно отследить как для отдельных
страниц, так и для всего браузера.
Чтобы отследить событие закрытия конкретной страницы, можно использовать
метод page.on(‘close’, callback). В случае, если нужно
отслеживать закрытие любой страницы в браузере, можно использовать
аналогичное событие для объекта browser.
Пример для отслеживания закрытия страницы:
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
page.on('close', () => {
console.log('Страница была закрыта');
});
await page.goto('https://example.com');
await page.close();
await browser.close();
})();
В этом примере мы подписываемся на событие close для
страницы, и как только страница закрывается, срабатывает
callback-функция. Аналогично можно отслеживать события закрытия для
всего браузера.
События создания и закрытия страниц также можно отслеживать на уровне самого браузера. Это полезно, если нужно, например, логировать все открытия и закрытия страниц в рамках одного браузерного сеанса.
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
browser.on('targetcreated', target => {
if (target.type() === 'page') {
console.log(`Создана новая страница: ${target.url()}`);
}
});
browser.on('targetdestroyed', target => {
if (target.type() === 'page') {
console.log(`Закрыта страница: ${target.url()}`);
}
});
const page1 = await browser.newPage();
await page1.goto('https://example.com');
await page1.close();
const page2 = await browser.newPage();
await page2.goto('https://example.org');
await browser.close();
})();
Здесь событие targetcreated ловит создание страниц, а
targetdestroyed — их закрытие. Этот подход позволяет
отслеживать жизненный цикл всех страниц в браузере, не привязываясь к
каждому объекту page отдельно.
Кроме событий, связанных с конкретными страницами, можно отследить и
глобальные события браузера. При запуске браузера можно подписаться на
события, такие как targetcreated и
targetdestroyed, для получения информации о том, какие
страницы были открыты или закрыты с самого начала.
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
browser.on('targetcreated', target => {
if (target.type() === 'page') {
console.log(`Открыта новая страница: ${target.url()}`);
}
});
browser.on('targetdestroyed', target => {
if (target.type() === 'page') {
console.log(`Закрыта страница: ${target.url()}`);
}
});
await browser.newPage();
await browser.newPage();
await browser.close();
})();В этом примере события отрабатывают для каждой страницы, как только она была создана или закрыта. Это позволяет контролировать и вести логи для всей сессии браузера.
При работе с событиями создания и закрытия страниц важно учитывать следующие моменты:
Асинхронность: Работа с Puppeteer и его API предполагает асинхронность. Это означает, что подписка на события, такие как создание или закрытие страниц, должна быть реализована в правильном порядке, чтобы не пропустить важные события.
Закрытие браузера: Если браузер закрывается с помощью
метода browser.close(), все страницы также будут закрыты.
Это приведет к срабатыванию события close для каждой из
них, что стоит учитывать при логировании или других операциях.
Обработка ошибок: В процессе работы с событиями может возникать множество ошибок, таких как проблемы с загрузкой страницы или с взаимодействием с объектами. Лучше всего реализовывать обработку ошибок, чтобы гарантировать стабильность тестов или скриптов.
Поскольку Puppeteer активно используется в тестировании, часто необходимо отслеживать создание и закрытие страниц в рамках тестов. В таких случаях важно интегрировать обработку этих событий с фреймворками, такими как Mocha или Jest. Это позволяет лучше контролировать жизнь теста, а также собирать дополнительные логи для отладки.
Пример использования с Mocha:
const puppeteer = require('puppeteer');
const assert = require('assert');
describe('Puppeteer Page Events', function() {
let browser;
before(async () => {
browser = await puppeteer.launch();
});
it('Создание страницы', async () => {
const page = await browser.newPage();
const url = page.url();
assert.strictEqual(url, 'about:blank');
await page.close();
});
it('Закрытие страницы', async () => {
const page = await browser.newPage();
await page.goto('https://example.com');
await page.close();
});
after(async () => {
await browser.close();
});
});В данном примере тесты проверяют, как страницы создаются и закрываются. События обработки создания и закрытия страниц позволяют отследить, когда и как происходят эти действия, что важно для тестирования и отладки автоматических тестов.
Понимание событий создания и закрытия страниц в Puppeteer является
неотъемлемой частью работы с браузером, так как это позволяет создавать
гибкие и масштабируемые решения для автоматизации. Подписка на события
targetcreated, targetdestroyed, и
close позволяет эффективно отслеживать жизненный цикл
страниц, что особенно важно для написания стабильных тестов и
взаимодействия с веб-приложениями.