Pages & New Window

Each BrowserContext may contain several pages. A Page denotes an individual tab or a popup window within a browser context. It is intended for navigating to URLs and engaging with the content of the page.

				
					// code snippet:
// 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 is capable of hosting several pages (tabs).

Each page functions as a focused, active entity. It is unnecessary to bring the page to the forefront.
Pages within a context adhere to context-level emulation, including viewport dimensions, custom network routes, or browser locale.

				
					// code snippet:
// 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 within browser contexts serves to retrieve newly created pages in that context. This functionality can be utilized to manage new pages that are opened via target=”_blank” links.

				
					// code snippet:
// Start waiting for new page before clicking. Note no await.
const pagePromise = context.waitForEvent('page');
await page.getByText('open new tab').click();
const newPage = await pagePromise;
// Interact with the new page normally.
await newPage.getByRole('button').click();
console.log(await newPage.title());

If the action that initiates the new page is not known, the subsequent pattern may be employed.

				
					// code snippet:
// 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 a pop-up is opened by the page (for instance, pages accessed via target=”_blank” links), you can obtain a reference to it by monitoring the popup event on the page.

This event is triggered alongside the browserContext.on(‘page’) event, but it is specifically for pop-ups that pertain to this page.

				
					// code snippet:
// Start waiting for popup before clicking. Note no await.
const popupPromise = page.waitForEvent('popup');
await page.getByText('open the popup').click();
const popup = await popupPromise;
// Interact with the new popup normally.
await popup.getByRole('button').click();
console.log(await popup.title());

If the action that activates the popup is not identified, the subsequent pattern may be employed.

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

Open a New Window

Each context is like a separate browser window with isolated cookies and cache

				
					// code snippet:
const newContext = await browser.newContext();
const newPage = await newContext.newPage();
await newPage.goto('https://example.com/');