Skip to main content

Pages

Pages​

Each BrowserContext can have multiple pages. A Page refers to a single tab or a popup window within a browser context. It should be used to navigate to URLs and interact with the page content.

// Create a page.
const page = await context.newPage();

// Navigate explicitly, similar to entering a URL in the browser.
await page.goto('http://example.com');
// Fill an input.
await page.locator('#search').fill('query');

// Navigate implicitly by clicking a link.
await page.locator('#submit').click();
// Expect a new url.
console.log(page.url());

Multiple pages​

Each browser context can host multiple pages (tabs).

  • Each page behaves like a focused, active page. Bringing the page to front is not required.
  • Pages inside a context respect context-level emulation, like viewport sizes, custom network routes or browser locale.
// Create two pages
const pageOne = await context.newPage();
const pageTwo = await context.newPage();

// Get pages of a browser context
const allPages = context.pages();

Handling new pages​

The page event on browser contexts can be used to get new pages that are created in the context. This can be used to handle new pages opened by target="_blank" links.

// Get page after a specific action (e.g. clicking a link)
const [newPage] = await Promise.all([
  context.waitForEvent('page'),
  page.locator('a[target="_blank"]').click() // Opens a new tab
])
await newPage.waitForLoadState();
console.log(await newPage.title());

If the action that triggers the new page is unknown, the following pattern can be used.

// Get all new pages (including popups) in the context
context.on('page', async page => {
  await page.waitForLoadState();
  console.log(await page.title());
})

Handling popups​

If the page opens a pop-up (e.g. pages opened by target="_blank" links), you can get a reference to it by listening to the popup event on the page.

This event is emitted in addition to the browserContext.on('page') event, but only for popups relevant to this page.

// Note that Promise.all prevents a race condition
// between clicking and waiting for the popup.
const [popup] = await Promise.all([
  // It is important to call waitForEvent before click to set up waiting.
  page.waitForEvent('popup'),
  // Opens popup.
  page.locator('#open').click(),
]);
await popup.waitForLoadState();
console.log(await popup.title());

If the action that triggers the popup is unknown, the following pattern can be used.

// Get all popups when they open
page.on('popup', async popup => {
  await popup.waitForLoadState();
  await popup.title();
})