Rayrun
← Back to videos

Playwright Working with Multiple tabs (NODEJS)

How to work with multiple pages / multiple tabs using playwright

In this video tutorial by Commit Quality, the focus is on writing Playwright tests that support multiple browsing tabs. This approach is touted as a handy solution that's quick and easy to apply in different scenarios.

The first step in writing the test is to define it as multi-tabbing using a standard format. The lecturer underscores that no fixtures are used at this point, though the page and context fixtures will be implemented in the test creation process. They are necessary when creating additional tabs.

Our host demonstrates how to navigate to Amazon's UK page using the go to function. This set-up is pretty common and easy to understand. The next step is to create a second tab.

To do this, the new page function is used in the context fixture. This creates a new tab in the browser's context. The host then uses the go to function again, this time to navigate the newly created tab to eBay.

To demonstrate that each tab operates independently, the video then explores how to interact with and manage the tabs. They first bring Amazon (the original tab) to the front using the bringToFront function. He does this to show that despite which tab is in focus, both tabs still remain accessible and functional. To further illustrate this, our host inputs text in eBay (the second tab) while keeping the Amazon tab in focus, using the fill function.

Another important aspect the video covers is tab management using the close function. After interacting with eBay (i.e. having it display Pokemon), the lecturer then closes the eBay tab, leaving only the original tab (Amazon) on display. The state of the browser goes back to its original state of displaying only one opened tab, in this case, Amazon.

In conclusion, the video not only demonstrates each step to create and navigate multiple tabs in a browser using Playwright tests but also shows viewers how to interact with and manage them efficiently. Whether you have a burning question or a compliment, our host advises viewers to engage in the comments section, adding that likes and subscriptions are greatly appreciated.

Related Videos

#16 - ARIA and how Playwright is making use of it to identify UI controls?
#16 - ARIA and how Playwright is making use of it to identify UI controls?
Create feature, steps & config | Playwright & Cucumber - Typescript | Part 1
Create feature, steps & config | Playwright & Cucumber - Typescript | Part 1
Working with multiple elements in Playwright Test (NodeJS)
Working with multiple elements in Playwright Test (NodeJS)
Code-first Playwright intro tutorial on macOS (install to first script)
Code-first Playwright intro tutorial on macOS (install to first script)
TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email luc@ray.run.