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
// Example code - see original file for details
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
// Example code - see original file for details

​
Further reading

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