Managing Multiple Tabs with Playwright

Welcome to the next chapter of our Playwright journey. As we venture into managing multiple tabs, you'll discover how essential these skills are for testing complex web applications that often involve numerous tabs and windows. Previously, we explored handling asynchronous operations and ensuring seamless waiting strategies. Now, we're taking a step forward to understand how to navigate between multiple tabs efficiently.

In modern web applications, it is common for interactions to open new windows or tabs. This is particularly true for actions such as logging into an account or accessing customer support. In this lesson, you will learn how to manage multiple tabs using Playwright efficiently and in an automated manner.

Let's take a look at a practical Playwright example:

import { test, expect } from '@playwright/test';

test('manage multiple tabs', async ({ page, context }) => {
  await page.goto('http://localhost:3000/home');
  await page.click('text=Sign In');
  await page.fill('#username', 'user1');
  await page.fill('#password', 'pass1');
  await page.click('button[type="submit"]');
  
  await expect(page).toHaveURL('http://localhost:3000/home');
  await expect(page.locator('text=Welcome to the BookStore')).toBeVisible();
  
  const [newPage] = await Promise.all([
    context.waitForEvent('page'),
    page.click('text=👤 Account')
  ]);
  
  await newPage.waitForLoadState('domcontentloaded');
  expect(await newPage.url()).toBe('http://localhost:3000/account');
  await expect(newPage.locator('text=Your Account')).toBeVisible();

  await newPage.close();
  expect(await page.url()).toBe('http://localhost:3000/home');
});

In this test, we achieve the following:

1. Navigation and Authentication: You begin by navigating to the application home page, signing in, and verifying the successful login process.

2. Handling a New Tab:

   • Promise.all([...]): This is used to run multiple asynchronous operations concurrently. It waits for all the promises inside to resolve.
   • context.waitForEvent('page'): This waits for a new page (or tab) to be opened. It's listening for the 'page' event, which is triggered when a new tab is created.
   • page.click('text=👤 Account'): This simulates a click on the "Account" link or button, which is expected to open a new tab.
   • newPage.waitForLoadState('domcontentloaded'): This waits until the new page's Document Object Model (DOM) is fully loaded and parsed, but it doesn't wait for stylesheets, images, and subframes to finish loading.

3. Verification and Closure: Once the new tab is verified, you close it using the command newPage.close() while ensuring the original tab remains functional, showcasing the ability to handle multiple contexts without losing track.