How to handle multiple pages

[phileba]

When I use playwright to open the page1.html, in this page I have a link to open page2.html in the new tab/window. So how can I handle this one? In puppeteer, I remember that have this method:

page.once('targetcreated', async target => {
	const newPage = await target.page() // <== this is new page object and we can take action on this
})

[mxschmitt]

Pages which are tabs or popups are in the Playwright terminology combined in a context. So you can listen for new pages on it like that:

// @ts-check
const playwright = require("playwright");

(async () => {
  const browser = await playwright.chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  context.on("page", async newPage => {
    console.log("newPage", await newPage.title())
  })

  // emulate some opening in a new tab or popup
  await page.evaluate(() => window.open('https://google.com', '_blank'))
  // Keep in mind to have some blocking action there so that the browser won't be closed. In this case we are just waiting 2 seconds.
  await page.waitForTimeout(2000)
  await browser.close();
})();

Does this fit for your needs?

[pavelfeldman]

@arjun27 : we should have a docs section for that. @mxschmitt did a great job explaining it, but I guess it can be extended and placed right into the docs. Max, please feel free to send all kinds of PRS, including the docs!

[phileba]

@mxschmitt thanks, it works for me 👌

[rinogo]

@mxschmitt's example code is concise and very helpful - thank you!

Here's an alternate approach for those who are lazy or want to keep unnecessary complexity out of their code. Unless you're specifically testing the "opens in a new tab/window" functionality, you can eliminate that complexity entirely by removing any target attributes.

Here's a quick function to make this happen - hope it helps!

//If links/forms open in a new tab, we have to do extra work in Playwright to connect to the new tab. Instead of doing that, we can just remove all targets.
async removeTargets() {
	await this.page.$$eval("css=[target]", nodes => nodes.forEach(n => n.removeAttribute("target")));
}