Handling Multiple Tabs with Playwright

If you’re using Playwright for end-to-end testing, you should check out Playwright Check Suites and start testing in production.

Playwright enables us to control multiple browser tabs, albeit in different ways.

Opening tabs directly

If we are looking to open brand new tabs with which to interact, the setup is rather straightforward.

multitab-open.spec.ts

import { test } from '@playwright/test'

test('open multiple tabs', async ({ browser }) => {
  const context = await browser.newContext()

  const pageOne = await context.newPage()
  const pageTwo = await context.newPage()

  await pageOne.goto('https://www.checklyhq.com/')
  await pageTwo.goto('https://playwright.dev/')

  await pageOne.screenshot({ path: 'screenshot-tab-one.png' })
  await pageTwo.screenshot({ path: 'screenshot-tab-two.png' })

  await browser.close()
})

Handling links that open a new tab

Controlling tabs that are opened after a click on an element on the page can be trickier. Let’s explore this through an example:

• Navigating to https://checklyhq.com/docs.
• Opening a new tab by clicking the link to the Checkly YouTube channel which opens in a new tab.

By allowing us to wait for the creation of a child tab with page.waitForEvent, Playwright enables us to “catch” it following a click on an element with target="_blank", and then seamlessly interact with any of the currently open tabs.

multitab-flows.spec.ts

import { test } from '@playwright/test'

test('open multiple tabs', async ({ browser }) => {
  const context = await browser.newContext()
  const page = await context.newPage()

  await page.goto('https://www.checklyhq.com/docs/')

  const [newPage] = await Promise.all([
    context.waitForEvent('page'),
    await page.getByRole('link', { name: 'Checkly on Youtube' }).click()
  ])

  await page.screenshot({ path: 'screenshot-tab-old.png' })
  await newPage.screenshot({ path: 'screenshot-tab-new.png' })

  await browser.close()
})

Further reading

1. Official documentation on Playwright’s multi-tab scenarios

Bugs don’t stop at CI/CD. Why would Playwright?

Sign up and start using Playwright for end-to-end monitoring with Checkly.