How to handle multiple tabs in Page Object Model | Playwright Tutorial - Part 87

• 03:00 Initial test script and first run
• 06:03 Modifying 'clickFirstResult' function
• 07:18 Passing the new tab to the constructor
• 07:56 Running the test script with changes

In this video, the instructor explains how to handle multiple windows using the page object model in Playwright. He demonstrates this using a real-world scenario in which users need to interact with an e-commerce website (Flipkart), search for a product, and add it to the cart.

To achieve this, the instructor has created a test script with three classes (HomePage, SearchResultPage, and ResultPage) that includes basic elements and actions like closing the login pop-up, searching for a product, and clicking the first search result.

However, when running the test initially, it fails to find the "Add to Cart" button on the new tab that opens after clicking the first search result. This is because Playwright did not switch to the new tab automatically.

To handle this, the instructor first modifies the 'clickFirstResult' function:

await Promise.all([
  this.page.waitForEvent("popup"),
  this.page.click(".search-result")
]);

The 'waitForEvent("popup")' line waits for a new tab to open. The destructuring method can be used to retrieve the new tab, and the 'return newTab;' line is added after clicking the first search result.

The instructor then shows how to pass the new tab to the constructor of a page object:

return Then(async () => {
  const newTab = await searchResultspage.clickFirstResult();
  return await new ResultPage(newTab).addToCart();
});

This modification successfully adds the product to the cart, and the test passes as expected. The instructor concludes the tutorial by inviting viewers to ask any questions in the comments section if they have doubts regarding the concepts covered in the video.