Open multiple links in new tab and switch focus with a loop with puppeteer?

Question

I have multiple links in a single page whom I would like to access either sequentially or all at once. What I want to do is open all the links in their respective new tabs and get the page as pdf for all the pages. How do I achieve the same with puppeteer?

I can get all the links with a DOM and href property but I don't know how to open them in new tab access them and then close them.

Answer 1

You can open a new page in a loop:

const puppeteer = require('puppeteer');

(async () => {
  try {
    const browser = await puppeteer.launch();
    const urls = [
      'https://www.google.com',
      'https://www.duckduckgo.com',
      'https://www.bing.com',
    ];
    const pdfs = urls.map(async (url, i) => {
      const page = await browser.newPage();

      console.log(`loading page: ${url}`);
      await page.goto(url, {
        waitUntil: 'networkidle0',
        timeout: 120000,
      });

      console.log(`saving as pdf: ${url}`);
      await page.pdf({
        path: `${i}.pdf`,
        format: 'Letter',
        printBackground: true,
      });

      console.log(`closing page: ${url}`);
      await page.close();
    });

    Promise.all(pdfs).then(() => {
      browser.close();
    });
  } catch (error) {
    console.log(error);
  }
})();

Answer 2

To open a new tab (activate) it you just need to make a call to page.bringToFront()

const page1 = await browser.newPage(); 
await page1.goto('https://www.google.com');

const page2 = await browser.newPage(); 
await page2.goto('https://www.bing.com');

const pageList = await browser.pages();    
console.log("NUMBER TABS:", pageList.length);

//switch tabs here
await page1.bringToFront();
//Do something... save as pdf
await page2.bringToFront();
//Do something... save as pdf

I suspect you have an array of pages so you might need to tweak the above code to cater for that.

As for generating a single pdf from multiple tabs I am pretty certain this is not possible. I suspect there will be a node library that can take multiple pdf files and merge into one.

pdf-merge might be what you are looking for.