Puppeteer открыть ссылку в новой вкладке

от

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

Новая вкладка для перехода по известному url

Если известна ссылка, по которой мы хотим перейти, то в данном случае достаточно создать новую вкладку и уже в ней открыть ссылку:

const puppeteer = require('puppeteer');       // подключаем puppeteer

const browser = await puppeteer.launch();     // запускаем браузер
const page1 = await browser.newPage();        // открываем новую вкладку
await page1.goto('https://google.com');       // переходим на google.com       

const page2 = await browser.newPage();        // открываем новую вкладку
await page2.goto('https://github.com');       // переходим на github.com 
await page2.bringToFront();                   // делаем вкладку активной

...

await browser.close();                        // закрываем браузер

В данном примере мы открыли две страницы (вкладки): page1 и page2. На первой вкладке мы перешли на https://google.com, на второй – на https://github.com. Для дальнейшей работы мы указываем требуемую страницу и выполняем необходимые действия с ней. Если необходимо вывести вкладку на передний план (активировать вкладку) – используем функцию bringToFront().

Открытие ссылки в новой вкладке

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

const puppeteer = require('puppeteer');               // подключаем puppeteer

const browser = await puppeteer.launch();             // запускаем браузер
const page1 = await browser.newPage();                // открываем новую вкладку
await page1.goto('https://google.com');               // переходим на google.com       

await page1.waitForSelector('#fsl > a:nth-child(4)'); // ожидаем загрузку объекта
const link = await page1.$('#fsl > a:nth-child(4)');  // объявляем объект по селектору

const newPagePromise = new Promise(x => browser.once('targetcreated', target => x(target.page())));  // объявляем промис
await link.click({button: 'middle'});                 // кликаем средней кнопкой, ссылка открывается в новой вкладке
const page2 = await newPagePromise;                   // объявляем новую вкладку/окно, теперь с ней можно работать
await page2.bringToFront();                           // делаем вкладку активной
  
...

await browser.close();                                // закрываем браузер

Как и в предыдущем примере, мы создаем вкладку / страницу page1 и переходим на https://google.com. Далее мы хотим кликнуть по Как работает Google поиск и чтобы страница открылась в новой вкладке. Узнаем селектор данного объекта (в данном случае это ‘fsl > a:nth-child(4)’) и нажимаем среднюю кнопку мыши.

На этом мы завершаем разговор о том, как в puppeteer открыть ссылку в новой вкладке. А более детально про работу с несколькими вкладками, блокировкой всплывающих окон (popup рекламы) можно прочитать в данной статье.

Оставьте комментарий