DownloadBook a demo

Handling Multiple Tabs with Puppeteer: A Comprehensive Guide

Updated 5/21/2024

Navigating multiple tabs in Puppeteer can be a daunting task, especially for those new to browser automation. This guide aims to provide a clear and practical solution to handle multiple tabs effectively.

Scenario

Imagine you are working with a web form for developer app registration that involves a two-part workflow:

  • Page 1: Fill out developer app details and click a button to create an Application ID, which opens in a new tab.
  • Page 2: The App ID page, where you need to copy the App ID, close the tab, return to Page 1, and fill in the App ID before submitting the form.

Solution

Below is a practical example of how to handle this scenario using Puppeteer: 

const puppeteer = require('puppeteer');

(async () => {
const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();


// Navigate to Page 1
await page.goto('https://register.example.com/new', { waitUntil: 'networkidle' });


// Fill in the form details
await page.type('#input-appName', 'App name here');
await page.type('#input-appDescription', 'Short description of app here');


// Click the button to open Page 2
await page.click('.get-appId');


// Get all open pages
const pages = await browser.pages();


// The last opened tab is Page 2
const page2 = pages[pages.length - 1];


// Wait for Page 2 to load and extract the App ID
await page2.waitForSelector('#appId');
const appId = await page2.$eval('#appId', el => el.textContent);


// Close Page 2
await page2.close();


// Return to Page 1 and fill in the App ID
await page.type('#input-appId', appId);


// Submit the form
await page.click('form button[type="submit"]');


// Close the browser
await browser.close();


})();

Explanation

The example above demonstrates the following steps:

  1. Launch Puppeteer and open Page 1.
  2. Fill out the form on Page 1.
  3. Click the button to open Page 2 in a new tab.
  4. Retrieve all open pages and identify the newly opened tab as Page 2.
  5. Wait for Page 2 to load, extract the App ID, and close Page 2.
  6. Return to Page 1, fill in the App ID, and submit the form.
  7. Close the browser.

Additional Resources

For more detailed information on Puppeteer and related topics, you may refer to the following articles on our blog:

Automating Tests with Repeato

If you are looking for a more streamlined approach to test automation, consider using Repeato. Repeato is a no-code test automation tool for iOS and Android that simplifies the process of creating, running, and maintaining automated tests for your apps. With features like a no-code interface and an intuitive test recorder, Repeato makes it easy to handle even complex use cases. Additionally, Repeato allows you to test websites inside an Android emulator or device, with explicit web testing support coming soon.

Explore more about Repeato and how it can help you with your test automation needs here.

EN