Playwright Tutorial: Handling Multiple Tabs using Page Object Model

• 02:01 Creating a new tab
• 02:36 Creating an instance of the desired page object
• 03:03 Calling methods using the page object instance
• 03:23 Performing actions on a different page

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:

1. First, ensure that your previous tests are working correctly. In the video, the author does this by running npx playwright test headed.

2. 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();

3. Next, create an instance of the desired page object class. In the video, the author creates an instance of the ComputersPage class.

const tab2ComputersPage = new ComputersPage(newTab);

4. Now, you can simply call the methods available in your page object class using this instance.

await tab2ComputersPage.goTo();
await tab2ComputersPage.clickAddNewComputer();

5. You can then proceed to perform actions on a different page. In the video, the author creates another instance of the AddComputerPage class.

const tab2AddComputerPage = new AddComputerPage(newTab);

6. Like before, call the methods available in the page object class using the new instance.

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.