How to work with multiple Tabs (Pages) in playwright integrating Page Object model into your solution.
In this video tutorial, we will learn how to handle multitabbing using Pages with the Page Object Model (POM) pattern in Playwright. The tutorial assumes that the viewers have already watched the previous videos about multitabbing and the Page Object Model.
Here's a step-by-step guide on how to create a new tab and utilize the Page Object Model with it:
First, ensure that your previous tests are working correctly. In the video, the author does this by running
npx playwright test headed.
Start by creating a new tab in your test file. To do this, set up a new constant, say
newTab, and assign it an awaited instance of
context.newPage(). You need to pass the
context through the test's fixtures.
const newTab = await context.newPage();
const tab2ComputersPage = new ComputersPage(newTab);
await tab2ComputersPage.goTo(); await tab2ComputersPage.clickAddNewComputer();
const tab2AddComputerPage = new AddComputerPage(newTab);
await tab2AddComputerPage.addNewComputer(); await tab2AddComputerPage.assertComputerHasBeenAdded();
When you run the test, Playwright will open a new tab, perform the actions defined in your page object classes, and assert the expected outcomes.
This tutorial demonstrates how to efficiently handle multitabbing in Playwright while maintaining a clean code structure with the Page Object Model pattern. For more information and examples, check out the video and the previous videos on multitabbing and the Page Object Model.
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 firstname.lastname@example.org.