# Handling Multiple Tabs with Playwright - Checkly Docs

> Control multiple browser tabs in Playwright, opening new pages in a context and interacting with each independently within a single test.

Source: https://www.checklyhq.com/docs/learn/playwright/multitab-flows/

---

- Opening tabs directly
- Handling links that open a new tab
- Further reading

Basics

# Handling Multiple Tabs with Playwright

Control multiple browser tabs in Playwright, opening new pages in a context and interacting with each independently within a single test.

If you’re using Playwright for end-to-end testing, you should check out [Playwright Check Suites](https://www.checklyhq.com/docs/detect/synthetic-monitoring/playwright-checks/overview) 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

- Official documentation on [Playwright’s multi-tab scenarios](https://playwright.dev/docs/pages)

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

[Sign up](https://app.checklyhq.com/signup) and start using Playwright for end-to-end monitoring with Checkly.

Was this page helpful?

[Suggest edits](https://github.com/checkly/docs/edit/main/learn/playwright/multitab-flows.mdx)[Raise issue](https://github.com/checkly/docs/issues/new?title=Issue%20on%20docs&body=Path:%20/learn/playwright/multitab-flows)

[Test Dynamic Content by Mocking API Responses Previous](https://www.checklyhq.com/docs/learn/playwright/mock-api)[Playwright Screenshots - How to Take and Automate Screenshots Next](https://www.checklyhq.com/docs/learn/playwright/taking-screenshots)

[x](https://x.com/checklyhq)[github](https://github.com/checkly)[linkedin](https://linkedin.com/company/checkly)

[Powered by This documentation is built and hosted on Mintlify, a developer documentation platform](https://www.mintlify.com/?utm_campaign=poweredBy&utm_medium=referral&utm_source=checkly-422f444a)