Puppeteer popup window and multiple tabs

1. Multiple tabs
2. browser.once()
3. browser.on()
4. Puppeteer popup event

As you know, on many sites, when you perform certain actions (for example, when you click a button or click on a link), a popup window or a new tab may open. It can be both annoying ads and important information. But in any case, at this point, focusing on a new window occurs or if it is not properly processed, puppeteer will not continue executing the code, but will wait until you close in puppeteer popup window or switch to the old tab. So let’s do it!

You can read how to open the link in a new tab in this note.

Multiple tabs

First, let’s talk a little about tabs. As you know, to open a new tab, you must use the method browser.newPage(). Respectively, to open multiple tabs, you need to use this method several times and give excellent names to the declared pages:

const puppeteer = require('puppeteer');         // puppeteer

const browser = await puppeteer.launch();       // run browser
const page1 = await browser.newPage();          // open new tab1
await page1.goto('https://site1.com');          // go to site1.com 

const page2 = await browser.newPage();          // open new tab2
await page2.goto('https://site2.com');          // go to site2.com 

const page3 = await browser.newPage();          // open new tab3
await page3.goto('https://site3.com');          // go to site3.com 
...
await page1.bringToFront();                     // make the tab active if you wont work with it

...

await browser.close();                        // close browser

For further work with the selected tab, you need to make it active using the method page.bringToFront().

browser.once()

If we know after what action (click) the tab should open, then we can proceed as follows:

const puppeteer = require('puppeteer');         // puppeteer

const browser = await puppeteer.launch();       // run browser
const page = await browser.newPage();           // open new tab
await page.goto('https://site.com');            // go to site.com       

await page.waitForSelector('#goto');            // wait object load
const link = await page.$('#goto');             // declare object

const newPagePromise = new Promise(x => browser.once('targetcreated', target => x(target.page())));    // declare promise
await link.click();                             // click, a new tab opens
const newPage = await newPagePromise;           // open new tab /window, 
now you can work with it
await newPage.close();                          // close it, for example
...
await browser.close();                          // close browser

You can read how to limit the waiting time for a new tab in this article.

browser.on()

If we don’t know when a new window will open or when there are many popup windows:

const puppeteer = require('puppeteer');         // puppeteer
const browser = await puppeteer.launch();       // run browser
 
browser.on('targetcreated', async (target) => { //
This block intercepts all new events
  if (target.type() === 'page') {               // if it tab/page
         const page = await target.page();      // declare it
         const url = page.url();                // example, look at her url
         if (url.search('site.com') == -1){     // if url is not like site.com (pop-up window whith ads to anower site)
                  await page.close();           // close this page
                  }
  }
});

await page.goto('https://site.com');            // go to site.com
...
await browser.close();                          // close browser

In the second method, even those new pages that you open using browser.newPage () will get into this handler. If you make a mistake in the code, puppeteer will constantly close absolutely all tabs. Or perform with them some other operations that are not worth doing.

Puppeteer popup event

Starting with puppeteer version 1.12, a special ‘popup’ event has been added to the page, which allows you to catch new tabs and popups. We use it by rewriting the first example:

const puppeteer = require('puppeteer');         // puppeteer

const browser = await puppeteer.launch();       // run browser
const page = await browser.newPage();           // open new tab
await page.goto('https://site.com');            // go to site.com       

await page.waitForSelector('#goto');            // wait object load
const link = await page.$('#goto');             // declare object

const newPagePromise = new Promise(x => page.once('popup', x));

await link.click();                             // click, a new tab opens
const newPage = await newPagePromise;           // declare new tab /window, 
now you can work with it
await newPage.close();                          // close it, for example
...
await browser.close();                          // close browser

If, as in the second example, you need to track not a single event with a pop-up window, but listen to all such actions, you can use page.on(‘popup’, x).