Table of contents
Handling Multiple Tabs with Playwright
On this page
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.
const { chromium } = require('playwright')
;(async () => {
const browser = await chromium.launch()
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()
})()
Run in Checkly
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, then opening a new tab by clicking the link to the GitHub-based Checkly Public Roadmap which is found on the page.
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.
const { chromium } = require('playwright')
;(async () => {
const browser = await chromium.launch()
const context = await browser.newContext()
const page = await context.newPage()
await page.goto('https://www.checklyhq.com/')
const [newPage] = await Promise.all([
context.waitForEvent('page'),
await page.click('text=Public roadmap')
])
await page.screenshot({ path: 'screenshot-tab-old.png' })
await newPage.click('#pull-requests-tab')
await newPage.screenshot({ path: 'screenshot-tab-new.png' })
await browser.close()
})()
Further reading
- Official documentation on Playwright’s multi-tab scenarios