pages

35 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Page creation and basic navigation

A Page refers to a single tab or popup window within a browser context. Create a page with context.newPage(). Navigate explicitly with page.goto(url), similar to entering a URL in the browser. Navigate implicitly by clicking a link which triggers page navigation.

Page interaction example

Example showing page creation, navigation, filling input, and clicking: const page = await context.newPage(); await page.goto('http://example.com'); await page.locator('#search').fill('query'); await page.locator('#submit').click(); console.log(page.url());

Multiple pages in a browser context

Each browser context can host multiple pages (tabs). Each page behaves like a focused, active page and does not require being brought to front. All pages inside a context respect context-level emulation, including viewport sizes, custom network routes, and browser locale. Get all pages with context.pages().

Multiple pages creation example

Example creating multiple pages: const pageOne = await context.newPage(); const pageTwo = await context.newPage(); const allPages = context.pages();

Waiting for new pages with waitForEvent

Use context.waitForEvent('page') to wait for new pages created in the context. Start waiting before the action that opens the page, without await. This pattern is used for handling pages opened by target="_blank" links. Example: const pagePromise = context.waitForEvent('page'); await page.getByText('open new tab').click(); const newPage = await pagePromise;

Handling new pages with runAndWaitForPageAsync pattern

Use context.RunAndWaitForPageAsync() to handle new pages opened by a specific action. The action is passed as an async lambda: var newPage = await context.RunAndWaitForPageAsync(async () => { await page.GetByText('open new tab').ClickAsync(); });

Listening for all new pages in context

Use context.on('page', handler) to get all new pages (including popups) in the context when the action that triggers them is unknown. Call waitForLoadState() on each new page. Example: context.on('page', async page => { await page.waitForLoadState(); console.log(await page.title()); });

Popup event on page

The page.waitForEvent('popup') or page.expect_popup() event is emitted when the page opens a popup (e.g., via target="_blank" links). This event is emitted in addition to the browserContext.on('page') event, but only for popups relevant to that specific page.

Waiting for popup with specific action

Example waiting for a popup triggered by a specific action: const popupPromise = page.waitForEvent('popup'); await page.getByText('open the popup').click(); const popup = await popupPromise; await popup.getByRole('button').click(); console.log(await popup.title());

Listening for all popups

Use page.on('popup', handler) to get all popups when they open. Call waitForLoadState() on each popup. Example: page.on('popup', async popup => { await popup.waitForLoadState(); console.log(await popup.title()); });

BrowserContext.clearCookies with filters

The BrowserContext.clearCookies method now supports filter options: name to clear cookies with a particular name, and domain to clear cookies for a particular domain. Without filters, all cookies are cleared.

clearCookies filter examples

await context.clearCookies(); await context.clearCookies({ name: 'session-id' }); await context.clearCookies({ domain: 'my-origin.com' });

Page.pdf tagged and outline options

The Page.pdf method now accepts tagged and outline options to control PDF generation with tagged content and outline support.

Page.unrouteAll removes all routes

The Page.unrouteAll method removes all routes registered by Page.route and Page.routeFromHAR, with optional parameters to wait for ongoing routes or ignore errors.

BrowserContext.unrouteAll removes all context routes

The BrowserContext.unrouteAll method removes all routes registered by BrowserContext.route and BrowserContext.routeFromHAR, with optional parameters to wait for ongoing routes or ignore errors.

Page.screenshot style option adds custom CSS

The style option in Page.screenshot and Locator.screenshot adds custom CSS to the page before taking a screenshot for styling adjustments.

Page.close reason option

The Page.close method now accepts a reason option to specify the close reason, which is reported for all operations interrupted by the closure.

Browser.close reason option

The Browser.close method now accepts a reason option to specify the close reason, which is reported for all operations interrupted by the closure.

Download.path throws error for failed downloads

The Download.path and Download.createReadStream methods now throw an error when called on failed or cancelled downloads.

Route.fetch timeout option

The Route.fetch method now supports a timeout option to control the maximum time for the fetch operation.

Route.fallback defers to other handlers

The Route.fallback method allows deferring routing to other handlers, useful for composing multiple route handlers and HAR file routing.

Page.routeFromHAR records and replays network

The Page.routeFromHAR and BrowserContext.routeFromHAR methods allow recording network traffic to a HAR file and replaying it in tests.

Page.screenshot animations disabled option

The animations: 'disabled' option in Page.screenshot, Locator.screenshot, and ElementHandle.screenshot rewinds all CSS animations and transitions to a consistent state.

Page.screenshot mask option masks elements

The mask option in Page.screenshot, Locator.screenshot, and ElementHandle.screenshot overlays specified elements with pink #FF00FF boxes to mask sensitive content.

BrowserContext.console event subscribes to all console messages

The BrowserContext.console event allows subscribing to console messages from any page in the context, with ConsoleMessage.page to identify the source page.

BrowserContext.dialog event subscribes to all dialogs

The BrowserContext.dialog event allows subscribing to any dialogs from any page in the context, with Dialog.page to identify the source page.

ConsoleMessage.page identifies console message source

The ConsoleMessage.page method returns the Page that emitted the console message, allowing identification of the source.

Dialog.page identifies dialog source

The Dialog.page method returns the Page that triggered the dialog, allowing identification of the source.

acceptDownloads defaults to true

The acceptDownloads option in browser.newContext now defaults to true, automatically accepting downloads.

Page.routeFromHAR updateMode option

The Page.routeFromHAR and BrowserContext.routeFromHAR methods accept updateMode and updateContent options to control HAR file updates.

Page.screenshot caret option hides text cursor

The caret option in Page.screenshot and Locator.screenshot controls the text cursor visibility, defaulting to 'hide'.

BrowserContext.webError event for uncaught exceptions

The BrowserContext.webError event is emitted when an uncaught exception occurs on a page in the context.

recordHar zip format automatically zips HAR

Using a .zip path for recordHar context option automatically creates a zipped HAR archive of network traffic.

recordHar minimal mode only records essential data

The recordHar option accepts mode: 'minimal' to record only essential HAR data for network replay, useful for manual HAR editing.

Download.page method returns page

The `Download.page()` method (introduced in 1.12) was added to retrieve the page associated with a download.

Give your agent this brain