@molecule/app-e2e-fixtures-default

The @playwright/test drop-in for molecule apps: Playwright's test, expect and page, with the browser supplied by the bonded e2e provider and a console-error guard on every test.

Import test and expect from here instead of @playwright/test and write ordinary Playwright specs. Which browser runs them is the e2e bond (@molecule/app-e2e):

• @molecule/app-e2e-playwright launches a real Playwright browser. Every molecule sandbox image bakes Chromium, so this is what a sandbox uses as well as your own machine and CI — the specs run against the app's dev server on localhost, no IDE tab involved.
• @molecule/app-e2e-preview drives the LIVE PREVIEW the molecule.dev IDE is showing — the page the person is looking at, in their own browser — over a WebSocket through the dev server. Pick it with MOL_E2E_PROVIDER=preview when the point is that tab.

The same spec file runs unchanged in both. The provider is picked by resolveE2EProviderName(): MOL_E2E_PROVIDER when set; otherwise, inside a molecule sandbox (the /etc/mol/app-root marker exists), playwright when a Playwright browser is installed and preview when none is; and playwright everywhere else. The scaffolded e2e/bonds.ts bonds the matching provider (and test bonds it by name as a fallback); test reads the same answer to decide whether to launch a browser.

Every test also carries the console-error guard: the page's pageerror and console.error events fail the test at teardown, so a spec that only asserts on page.request cannot stay green while the rendered page is blank. Allow a known error with test.info().annotations.push({ type: 'allow-console-error', description: '<regex>' }).

Auto-generated, AI-first package reference for the molecule.dev ecosystem. It is written to be read by coding agents as much as by people, and is generated from this package's source — edit src/index.ts JSDoc, not this file.

Quick Start

// e2e/bonds.ts — scaffolded; wires the provider for THIS environment
import { resolveE2EProviderName, setProvider } from '@molecule/app-e2e'
import { provider as playwright } from '@molecule/app-e2e-playwright'
import { provider as preview } from '@molecule/app-e2e-preview'

setProvider(resolveE2EProviderName() === 'preview' ? preview : playwright)

// e2e/post.spec.ts — an ordinary Playwright spec
import { expect, test } from '@molecule/app-e2e-fixtures-default'

import './bonds.js'

test('the phone layout keeps the prose large', async ({ page }) => {
  await page.setViewportSize({ width: 390, height: 844 })
  await page.goto('/blog/hello/')
  const prose = page.locator('article p').first()
  const size = await prose.evaluate((el) => parseFloat(getComputedStyle(el).fontSize))
  expect(size).toBeGreaterThanOrEqual(18)
  await expect(page.getByRole('switch', { name: /summar/i })).toBeVisible()
})

Type

feature

Installation

npm install @molecule/app-e2e-fixtures-default @molecule/app-bond @molecule/app-e2e @playwright/test

API

Interfaces

Page

Page provides methods to interact with a single tab in a Browser, or an extension background page in Chromium. One Browser instance might have multiple Page instances.

This example creates a page, navigates it to a URL, and then saves a screenshot:

const { webkit } = require('playwright') // Or 'chromium' or 'firefox'.

;(async () => {
  const browser = await webkit.launch()
  const context = await browser.newContext()
  const page = await context.newPage()
  await page.goto('https://example.com')
  await page.screenshot({ path: 'screenshot.png' })
  await browser.close()
})()

The Page class emits various events (described below) which can be handled using any of Node's native EventEmitter methods, such as on, once or removeListener.

This example logs a message for a single page load event:

page.once('load', () => console.log('Page loaded!'))

To unsubscribe from events use the removeListener method:

function logRequest(interceptedRequest) {
  console.log('A request was made:', interceptedRequest.url())
}
page.on('request', logRequest)
// Sometime later...
page.removeListener('request', logRequest)

interface Page {
  /**
   * Returns the value of the
   * [`pageFunction`](https://playwright.dev/docs/api/class-page#page-evaluate-option-expression) invocation.
   *
   * If the function passed to the
   * [page.evaluate(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-page#page-evaluate) returns a
   * [Promise], then
   * [page.evaluate(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-page#page-evaluate) would wait
   * for the promise to resolve and return its value.
   *
   * If the function passed to the
   * [page.evaluate(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-page#page-evaluate) returns a
   * non-[Serializable] value, then
   * [page.evaluate(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-page#page-evaluate) resolves to
   * `undefined`. Playwright also supports transferring some additional values that are not serializable by `JSON`:
   * `-0`, `NaN`, `Infinity`, `-Infinity`.
   *
   * **Usage**
   *
   * Passing argument to [`pageFunction`](https://playwright.dev/docs/api/class-page#page-evaluate-option-expression):
   *
   * ```js
   * const result = await page.evaluate(([x, y]) => {
   *   return Promise.resolve(x * y);
   * }, [7, 8]);
   * console.log(result); // prints "56"
   * ```
   *
   * A string can also be passed in instead of a function:
   *
   * ```js
   * console.log(await page.evaluate('1 + 2')); // prints "3"
   * const x = 10;
   * console.log(await page.evaluate(`1 + ${x}`)); // prints "11"
   * ```
   *
   * [ElementHandle](https://playwright.dev/docs/api/class-elementhandle) instances can be passed as an argument to the
   * [page.evaluate(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-page#page-evaluate):
   *
   * ```js
   * const bodyHandle = await page.evaluateHandle('document.body');
   * const html = await page.evaluate<string, HTMLElement>(([body, suffix]) =>
   *   body.innerHTML + suffix, [bodyHandle, 'hello']
   * );
   * await bodyHandle.dispose();
   * ```
   *
   * @param pageFunction Function to be evaluated in the page context.
   * @param arg Optional argument to pass to
   * [`pageFunction`](https://playwright.dev/docs/api/class-page#page-evaluate-option-expression).
   * @param options
   */
  evaluate<R, Arg>(pageFunction: PageFunction<Arg, R>, arg: Arg, options?: { exposeFunctions?: boolean }): Promise<R>;
  /**
   * Returns the value of the
   * [`pageFunction`](https://playwright.dev/docs/api/class-page#page-evaluate-option-expression) invocation.
   *
   * If the function passed to the
   * [page.evaluate(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-page#page-evaluate) returns a
   * [Promise], then
   * [page.evaluate(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-page#page-evaluate) would wait
   * for the promise to resolve and return its value.
   *
   * If the function passed to the
   * [page.evaluate(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-page#page-evaluate) returns a
   * non-[Serializable] value, then
   * [page.evaluate(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-page#page-evaluate) resolves to
   * `undefined`. Playwright also supports transferring some additional values that are not serializable by `JSON`:
   * `-0`, `NaN`, `Infinity`, `-Infinity`.
   *
   * **Usage**
   *
   * Passing argument to [`pageFunction`](https://playwright.dev/docs/api/class-page#page-evaluate-option-expression):
   *
   * ```js
   * const result = await page.evaluate(([x, y]) => {
   *   return Promise.resolve(x * y);
   * }, [7, 8]);
   * console.log(result); // prints "56"
   * ```
   *
   * A string can also be passed in instead of a function:
   *
   * ```js
   * console.log(await page.evaluate('1 + 2')); // prints "3"
   * const x = 10;
   * console.log(await page.evaluate(`1 + ${x}`)); // prints "11"
   * ```
   *
   * [ElementHandle](https://playwright.dev/docs/api/class-elementhandle) instances can be passed as an argument to the
   * [page.evaluate(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-page#page-evaluate):
   *
   * ```js
   * const bodyHandle = await page.evaluateHandle('document.body');
   * const html = await page.evaluate<string, HTMLElement>(([body, suffix]) =>
   *   body.innerHTML + suffix, [bodyHandle, 'hello']
   * );
   * await bodyHandle.dispose();
   * ```
   *
   * @param pageFunction Function to be evaluated in the page context.
   * @param arg Optional argument to pass to
   * [`pageFunction`](https://playwright.dev/docs/api/class-page#page-evaluate-option-expression).
   * @param options
   */
  evaluate<R>(pageFunction: PageFunction<void, R>, arg?: any, options?: { exposeFunctions?: boolean }): Promise<R>;

  /**
   * Returns the value of the
   * [`pageFunction`](https://playwright.dev/docs/api/class-page#page-evaluate-handle-option-expression) invocation as a
   * [JSHandle](https://playwright.dev/docs/api/class-jshandle).
   *
   * The only difference between
   * [page.evaluate(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-page#page-evaluate) and
   * [page.evaluateHandle(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-page#page-evaluate-handle)
   * is that
   * [page.evaluateHandle(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-page#page-evaluate-handle)
   * returns [JSHandle](https://playwright.dev/docs/api/class-jshandle).
   *
   * If the function passed to the
   * [page.evaluateHandle(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-page#page-evaluate-handle)
   * returns a [Promise], then
   * [page.evaluateHandle(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-page#page-evaluate-handle)
   * would wait for the promise to resolve and return its value.
   *
   * **Usage**
   *
   * ```js
   * // Handle for the window object.
   * const aWindowHandle = await page.evaluateHandle(() => Promise.resolve(window));
   * ```
   *
   * A string can also be passed in instead of a function:
   *
   * ```js
   * const aHandle = await page.evaluateHandle('document'); // Handle for the 'document'
   * ```
   *
   * [JSHandle](https://playwright.dev/docs/api/class-jshandle) instances can be passed as an argument to the
   * [page.evaluateHandle(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-page#page-evaluate-handle):
   *
   * ```js
   * const aHandle = await page.evaluateHandle(() => document.body);
   * const resultHandle = await page.evaluateHandle(body => body.innerHTML, aHandle);
   * console.log(await resultHandle.jsonValue());
   * await resultHandle.dispose();
   * ```
   *
   * @param pageFunction Function to be evaluated in the page context.
   * @param arg Optional argument to pass to
   * [`pageFunction`](https://playwright.dev/docs/api/class-page#page-evaluate-handle-option-expression).
   * @param options
   */
  evaluateHandle<R, Arg>(pageFunction: PageFunction<Arg, R>, arg: Arg, options?: { exposeFunctions?: boolean }): Promise<SmartHandle<R>>;
  /**
   * Returns the value of the
   * [`pageFunction`](https://playwright.dev/docs/api/class-page#page-evaluate-handle-option-expression) invocation as a
   * [JSHandle](https://playwright.dev/docs/api/class-jshandle).
   *
   * The only difference between
   * [page.evaluate(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-page#page-evaluate) and
   * [page.evaluateHandle(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-page#page-evaluate-handle)
   * is that
   * [page.evaluateHandle(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-page#page-evaluate-handle)
   * returns [JSHandle](https://playwright.dev/docs/api/class-jshandle).
   *
   * If the function passed to the
   * [page.evaluateHandle(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-page#page-evaluate-handle)
// … truncated — the full declaration is in node_modules/playwright-core/types/types.d.ts

Frame

At every point of time, page exposes its current frame tree via the page.mainFrame() and frame.childFrames() methods.

Frame object's lifecycle is controlled by three events, dispatched on the page object:

• page.on('frameattached') - fired when the frame gets attached to the page. A Frame can be attached to the page only once.
• page.on('framenavigated') - fired when the frame commits navigation to a different URL.
• page.on('framedetached') - fired when the frame gets detached from the page. A Frame can be detached from the page only once.

An example of dumping frame tree:

const { firefox } = require('playwright') // Or 'chromium' or 'webkit'.

;(async () => {
  const browser = await firefox.launch()
  const page = await browser.newPage()
  await page.goto('https://www.google.com/chrome/browser/canary.html')
  dumpFrameTree(page.mainFrame(), '')
  await browser.close()

  function dumpFrameTree(frame, indent) {
    console.log(indent + frame.url())
    for (const child of frame.childFrames()) dumpFrameTree(child, indent + '  ')
  }
})()

interface Frame {
  /**
   * Returns the return value of
   * [`pageFunction`](https://playwright.dev/docs/api/class-frame#frame-evaluate-option-expression).
   *
   * If the function passed to the
   * [frame.evaluate(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-frame#frame-evaluate) returns
   * a [Promise], then
   * [frame.evaluate(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-frame#frame-evaluate) would
   * wait for the promise to resolve and return its value.
   *
   * If the function passed to the
   * [frame.evaluate(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-frame#frame-evaluate) returns
   * a non-[Serializable] value, then
   * [frame.evaluate(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-frame#frame-evaluate) returns
   * `undefined`. Playwright also supports transferring some additional values that are not serializable by `JSON`:
   * `-0`, `NaN`, `Infinity`, `-Infinity`.
   *
   * **Usage**
   *
   * ```js
   * const result = await frame.evaluate(([x, y]) => {
   *   return Promise.resolve(x * y);
   * }, [7, 8]);
   * console.log(result); // prints "56"
   * ```
   *
   * A string can also be passed in instead of a function.
   *
   * ```js
   * console.log(await frame.evaluate('1 + 2')); // prints "3"
   * ```
   *
   * [ElementHandle](https://playwright.dev/docs/api/class-elementhandle) instances can be passed as an argument to the
   * [frame.evaluate(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-frame#frame-evaluate):
   *
   * ```js
   * const bodyHandle = await frame.evaluateHandle('document.body');
   * const html = await frame.evaluate(([body, suffix]) =>
   *   body.innerHTML + suffix, [bodyHandle, 'hello'],
   * );
   * await bodyHandle.dispose();
   * ```
   *
   * @param pageFunction Function to be evaluated in the page context.
   * @param arg Optional argument to pass to
   * [`pageFunction`](https://playwright.dev/docs/api/class-frame#frame-evaluate-option-expression).
   * @param options
   */
  evaluate<R, Arg>(pageFunction: PageFunction<Arg, R>, arg: Arg, options?: { exposeFunctions?: boolean }): Promise<R>;
  /**
   * Returns the return value of
   * [`pageFunction`](https://playwright.dev/docs/api/class-frame#frame-evaluate-option-expression).
   *
   * If the function passed to the
   * [frame.evaluate(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-frame#frame-evaluate) returns
   * a [Promise], then
   * [frame.evaluate(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-frame#frame-evaluate) would
   * wait for the promise to resolve and return its value.
   *
   * If the function passed to the
   * [frame.evaluate(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-frame#frame-evaluate) returns
   * a non-[Serializable] value, then
   * [frame.evaluate(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-frame#frame-evaluate) returns
   * `undefined`. Playwright also supports transferring some additional values that are not serializable by `JSON`:
   * `-0`, `NaN`, `Infinity`, `-Infinity`.
   *
   * **Usage**
   *
   * ```js
   * const result = await frame.evaluate(([x, y]) => {
   *   return Promise.resolve(x * y);
   * }, [7, 8]);
   * console.log(result); // prints "56"
   * ```
   *
   * A string can also be passed in instead of a function.
   *
   * ```js
   * console.log(await frame.evaluate('1 + 2')); // prints "3"
   * ```
   *
   * [ElementHandle](https://playwright.dev/docs/api/class-elementhandle) instances can be passed as an argument to the
   * [frame.evaluate(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-frame#frame-evaluate):
   *
   * ```js
   * const bodyHandle = await frame.evaluateHandle('document.body');
   * const html = await frame.evaluate(([body, suffix]) =>
   *   body.innerHTML + suffix, [bodyHandle, 'hello'],
   * );
   * await bodyHandle.dispose();
   * ```
   *
   * @param pageFunction Function to be evaluated in the page context.
   * @param arg Optional argument to pass to
   * [`pageFunction`](https://playwright.dev/docs/api/class-frame#frame-evaluate-option-expression).
   * @param options
   */
  evaluate<R>(pageFunction: PageFunction<void, R>, arg?: any, options?: { exposeFunctions?: boolean }): Promise<R>;

  /**
   * Returns the return value of
   * [`pageFunction`](https://playwright.dev/docs/api/class-frame#frame-evaluate-handle-option-expression) as a
   * [JSHandle](https://playwright.dev/docs/api/class-jshandle).
   *
   * The only difference between
   * [frame.evaluate(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-frame#frame-evaluate) and
   * [frame.evaluateHandle(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-frame#frame-evaluate-handle)
   * is that
   * [frame.evaluateHandle(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-frame#frame-evaluate-handle)
   * returns [JSHandle](https://playwright.dev/docs/api/class-jshandle).
   *
   * If the function, passed to the
   * [frame.evaluateHandle(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-frame#frame-evaluate-handle),
   * returns a [Promise], then
   * [frame.evaluateHandle(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-frame#frame-evaluate-handle)
   * would wait for the promise to resolve and return its value.
   *
   * **Usage**
   *
   * ```js
   * // Handle for the window object
   * const aWindowHandle = await frame.evaluateHandle(() => Promise.resolve(window));
   * ```
   *
   * A string can also be passed in instead of a function.
   *
   * ```js
   * const aHandle = await frame.evaluateHandle('document'); // Handle for the 'document'.
   * ```
   *
   * [JSHandle](https://playwright.dev/docs/api/class-jshandle) instances can be passed as an argument to the
   * [frame.evaluateHandle(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-frame#frame-evaluate-handle):
   *
   * ```js
   * const aHandle = await frame.evaluateHandle(() => document.body);
   * const resultHandle = await frame.evaluateHandle(([body, suffix]) =>
   *   body.innerHTML + suffix, [aHandle, 'hello'],
   * );
   * console.log(await resultHandle.jsonValue());
   * await resultHandle.dispose();
   * ```
   *
   * @param pageFunction Function to be evaluated in the page context.
   * @param arg Optional argument to pass to
   * [`pageFunction`](https://playwright.dev/docs/api/class-frame#frame-evaluate-handle-option-expression).
   * @param options
   */
  evaluateHandle<R, Arg>(pageFunction: PageFunction<Arg, R>, arg: Arg, options?: { exposeFunctions?: boolean }): Promise<SmartHandle<R>>;
  /**
   * Returns the return value of
   * [`pageFunction`](https://playwright.dev/docs/api/class-frame#frame-evaluate-handle-option-expression) as a
   * [JSHandle](https://playwright.dev/docs/api/class-jshandle).
   *
   * The only difference between
   * [frame.evaluate(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-frame#frame-evaluate) and
   * [frame.evaluateHandle(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-frame#frame-evaluate-handle)
   * is that
   * [frame.evaluateHandle(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-frame#frame-evaluate-handle)
   * returns [JSHandle](https://playwright.dev/docs/api/class-jshandle).
   *
   * If the function, passed to the
   * [frame.evaluateHandle(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-frame#frame-evaluate-handle),
   * returns a [Promise], then
   * [frame.evaluateHandle(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-frame#frame-evaluate-handle)
   * would wait for the promise to resolve and return its value.
   *
   * **Usage**
   *
   * ```js
   * // Handle for the window object
// … truncated — the full declaration is in node_modules/playwright-core/types/types.d.ts

BrowserContext

BrowserContexts provide a way to operate multiple independent browser sessions.

If a page opens another page, e.g. with a window.open call, the popup will belong to the parent page's browser context.

Playwright allows creating isolated non-persistent browser contexts with browser.newContext([options]) method. Non-persistent browser contexts don't write any browsing data to disk.

// Create a new incognito browser context
const context = await browser.newContext()
// Create a new page inside context.
const page = await context.newPage()
await page.goto('https://example.com')
// Dispose context once it's no longer needed.
await context.close()

interface BrowserContext {
  /**
   * The method adds a function called
   * [`name`](https://playwright.dev/docs/api/class-browsercontext#browser-context-expose-binding-option-name) on the
   * `window` object of every frame in every page in the context. When called, the function executes
   * [`callback`](https://playwright.dev/docs/api/class-browsercontext#browser-context-expose-binding-option-callback)
   * and returns a [Promise] which resolves to the return value of
   * [`callback`](https://playwright.dev/docs/api/class-browsercontext#browser-context-expose-binding-option-callback).
   * If the
   * [`callback`](https://playwright.dev/docs/api/class-browsercontext#browser-context-expose-binding-option-callback)
   * returns a [Promise], it will be awaited.
   *
   * The first argument of the
   * [`callback`](https://playwright.dev/docs/api/class-browsercontext#browser-context-expose-binding-option-callback)
   * function contains information about the caller: `{ browserContext: BrowserContext, page: Page, frame: Frame }`.
   *
   * See [page.exposeBinding(name, callback)](https://playwright.dev/docs/api/class-page#page-expose-binding) for
   * page-only version.
   *
   * **Usage**
   *
   * An example of exposing page URL to all frames in all pages in the context:
   *
   * ```js
   * const { webkit } = require('playwright');  // Or 'chromium' or 'firefox'.
   *
   * (async () => {
   *   const browser = await webkit.launch({ headless: false });
   *   const context = await browser.newContext();
   *   await context.exposeBinding('pageURL', ({ page }) => page.url());
   *   const page = await context.newPage();
   *   await page.setContent(`
   *     <script>
   *       async function onClick() {
   *         document.querySelector('div').textContent = await window.pageURL();
   *       }
   *     </script>
   *     <button onclick="onClick()">Click me</button>
   *     <div></div>
   *   `);
   *   await page.getByRole('button').click();
   * })();
   * ```
   *
   * @param name Name of the function on the window object.
   * @param callback Callback function that will be called in the Playwright's context.
   */
  exposeBinding(name: string, playwrightBinding: (source: BindingSource, ...args: any[]) => any): Promise<Disposable>;

  /**
   * Adds a script which would be evaluated in one of the following scenarios:
   * - Whenever a page is created in the browser context or is navigated.
   * - Whenever a child frame is attached or navigated in any page in the browser context. In this case, the script is
   *   evaluated in the context of the newly attached frame.
   *
   * The script is evaluated after the document was created but before any of its scripts were run. This is useful to
   * amend the JavaScript environment, e.g. to seed `Math.random`.
   *
   * **Usage**
   *
   * An example of overriding `Math.random` before the page loads:
   *
   * ```js
   * // preload.js
   * Math.random = () => 42;
   * ```
   *
   * ```js
   * // In your playwright script, assuming the preload.js file is in same directory.
   * await browserContext.addInitScript({
   *   path: 'preload.js'
   * });
   * ```
   *
   * **NOTE** The order of evaluation of multiple scripts installed via
   * [browserContext.addInitScript(script[, arg, options])](https://playwright.dev/docs/api/class-browsercontext#browser-context-add-init-script)
   * and [page.addInitScript(script[, arg, options])](https://playwright.dev/docs/api/class-page#page-add-init-script)
   * is not defined.
   *
   * @param script Script to be evaluated in all pages in the browser context.
   * @param arg Optional argument to pass to
   * [`script`](https://playwright.dev/docs/api/class-browsercontext#browser-context-add-init-script-option-script)
   * (only supported when passing a function).
   * @param options
   */
  addInitScript<Arg>(script: PageFunction<Arg, any> | { path?: string, content?: string }, arg?: Arg, options?: { exposeFunctions?: boolean }): Promise<Disposable>;

  /**
   * Removes all the listeners of the given type (or all registered listeners if no type given). Allows to wait for
   * async listeners to complete or to ignore subsequent errors from these listeners.
   * @param type
   * @param options
   */
  removeAllListeners(type?: string): this;
  /**
   * Removes all the listeners of the given type (or all registered listeners if no type given). Allows to wait for
   * async listeners to complete or to ignore subsequent errors from these listeners.
   * @param type
   * @param options
   */
  removeAllListeners(type: string | undefined, options: {
    /**
     * Specifies whether to wait for already running listeners and what to do if they throw errors:
     * - `'default'` - do not wait for current listener calls (if any) to finish, if the listener throws, it may result in unhandled error
     * - `'wait'` - wait for current listener calls (if any) to finish
     * - `'ignoreErrors'` - do not wait for current listener calls (if any) to finish, all errors thrown by the listeners after removal are silently caught
     */
    behavior?: 'wait'|'ignoreErrors'|'default'
  }): Promise<void>;

  /**
   * This event is not emitted.
   */
  on(event: 'backgroundpage', listener: (page: Page) => any): this;

  /**
   * Emitted when Browser context gets closed. This might happen because of one of the following:
   * - Browser context is closed.
   * - Browser application is closed or crashed.
   * - The [browser.close([options])](https://playwright.dev/docs/api/class-browser#browser-close) method was called.
   */
  on(event: 'close', listener: (browserContext: BrowserContext) => any): this;

  /**
   * Emitted when JavaScript within the page calls one of console API methods, e.g. `console.log` or `console.dir`.
   *
   * The arguments passed into `console.log` and the page are available on the
   * [ConsoleMessage](https://playwright.dev/docs/api/class-consolemessage) event handler argument.
   *
   * **Usage**
   *
   * ```js
   * context.on('console', async msg => {
   *   const values = [];
   *   for (const arg of msg.args())
   *     values.push(await arg.jsonValue());
   *   console.log(...values);
   * });
   * await page.evaluate(() => console.log('hello', 5, { foo: 'bar' }));
   * ```
   *
   */
  on(event: 'console', listener: (consoleMessage: ConsoleMessage) => any): this;

  /**
   * Emitted when a JavaScript dialog appears, such as `alert`, `prompt`, `confirm` or `beforeunload`. Listener **must**
   * either [dialog.accept([promptText])](https://playwright.dev/docs/api/class-dialog#dialog-accept) or
   * [dialog.dismiss()](https://playwright.dev/docs/api/class-dialog#dialog-dismiss) the dialog - otherwise the page
   * will [freeze](https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop#never_blocking) waiting for the
   * dialog, and actions like click will never finish.
   *
   * **Usage**
   *
   * ```js
   * context.on('dialog', dialog => {
   *   dialog.accept();
   * });
   * ```
   *
   * **NOTE** When no [page.on('dialog')](https://playwright.dev/docs/api/class-page#page-event-dialog) or
   * [browserContext.on('dialog')](https://playwright.dev/docs/api/class-browsercontext#browser-context-event-dialog)
   * listeners are present, all dialogs are automatically dismissed.
   *
   */
  on(event: 'dialog', listener: (dialog: Dialog) => any): this;

  /**
   * Emitted when a JavaScript dialog in any page belonging to this context has been closed, either by
   * [dialog.accept([promptText])](https://playwright.dev/docs/api/class-dialog#dialog-accept), by
   * [dialog.dismiss()](https://playwright.dev/docs/api/class-dialog#dialog-dismiss), or manually by the user in the
   * headed browser.
   */
  on(event: 'dialogclosed', listener: (dialog: Dialog) => any): this;

  /**
   * Emitted when attachment download started in any page belonging to this context. User can access basic file
// … truncated — the full declaration is in node_modules/playwright-core/types/types.d.ts

Browser

A Browser is created via browserType.launch([options]). An example of using a Browser to create a Page:

const { firefox } = require('playwright') // Or 'chromium' or 'webkit'.

;(async () => {
  const browser = await firefox.launch()
  const page = await browser.newPage()
  await page.goto('https://example.com')
  await browser.close()
})()

interface Browser {
  /**
   * Removes all the listeners of the given type (or all registered listeners if no type given). Allows to wait for
   * async listeners to complete or to ignore subsequent errors from these listeners.
   * @param type
   * @param options
   */
  removeAllListeners(type?: string): this;
  /**
   * Removes all the listeners of the given type (or all registered listeners if no type given). Allows to wait for
   * async listeners to complete or to ignore subsequent errors from these listeners.
   * @param type
   * @param options
   */
  removeAllListeners(type: string | undefined, options: {
    /**
     * Specifies whether to wait for already running listeners and what to do if they throw errors:
     * - `'default'` - do not wait for current listener calls (if any) to finish, if the listener throws, it may result in unhandled error
     * - `'wait'` - wait for current listener calls (if any) to finish
     * - `'ignoreErrors'` - do not wait for current listener calls (if any) to finish, all errors thrown by the listeners after removal are silently caught
     */
    behavior?: 'wait'|'ignoreErrors'|'default'
  }): Promise<void>;
  /**
   * Emitted when a new browser context is created.
   */
  on(event: 'context', listener: (browserContext: BrowserContext) => any): this;

  /**
   * Emitted when Browser gets disconnected from the browser application. This might happen because of one of the
   * following:
   * - Browser application is closed or crashed.
   * - The [browser.close([options])](https://playwright.dev/docs/api/class-browser#browser-close) method was called.
   */
  on(event: 'disconnected', listener: (browser: Browser) => any): this;

  /**
   * Adds an event listener that will be automatically removed after it is triggered once. See `addListener` for more information about this event.
   */
  once(event: 'context', listener: (browserContext: BrowserContext) => any): this;

  /**
   * Adds an event listener that will be automatically removed after it is triggered once. See `addListener` for more information about this event.
   */
  once(event: 'disconnected', listener: (browser: Browser) => any): this;

  /**
   * Emitted when a new browser context is created.
   */
  addListener(event: 'context', listener: (browserContext: BrowserContext) => any): this;

  /**
   * Emitted when Browser gets disconnected from the browser application. This might happen because of one of the
   * following:
   * - Browser application is closed or crashed.
   * - The [browser.close([options])](https://playwright.dev/docs/api/class-browser#browser-close) method was called.
   */
  addListener(event: 'disconnected', listener: (browser: Browser) => any): this;

  /**
   * Removes an event listener added by `on` or `addListener`.
   */
  removeListener(event: 'context', listener: (browserContext: BrowserContext) => any): this;

  /**
   * Removes an event listener added by `on` or `addListener`.
   */
  removeListener(event: 'disconnected', listener: (browser: Browser) => any): this;

  /**
   * Removes an event listener added by `on` or `addListener`.
   */
  off(event: 'context', listener: (browserContext: BrowserContext) => any): this;

  /**
   * Removes an event listener added by `on` or `addListener`.
   */
  off(event: 'disconnected', listener: (browser: Browser) => any): this;

  /**
   * Emitted when a new browser context is created.
   */
  prependListener(event: 'context', listener: (browserContext: BrowserContext) => any): this;

  /**
   * Emitted when Browser gets disconnected from the browser application. This might happen because of one of the
   * following:
   * - Browser application is closed or crashed.
   * - The [browser.close([options])](https://playwright.dev/docs/api/class-browser#browser-close) method was called.
   */
  prependListener(event: 'disconnected', listener: (browser: Browser) => any): this;

  /**
   * Binds the browser to a named pipe or web socket, making it available for other clients to connect to.
   * @param title Title of the browser server, used for identification.
   * @param options
   */
  bind(title: string, options?: {
    /**
     * Host to bind the web socket server to. When specified, a web socket server is created instead of a named pipe.
     */
    host?: string;

    /**
     * Additional metadata to associate with the browser server.
     */
    metadata?: { [key: string]: any; };

    /**
     * Port to bind the web socket server to. When specified, a web socket server is created instead of a named pipe. Use
     * `0` to let the OS pick an available port.
     */
    port?: number;

    /**
     * Working directory associated with this browser server.
     */
    workspaceDir?: string;
  }): Promise<{
    endpoint: string;
  }>;

  /**
   * Get the browser type (chromium, firefox or webkit) that the browser belongs to.
   */
  browserType(): BrowserType;

  /**
   * In case this browser is obtained using
   * [browserType.launch([options])](https://playwright.dev/docs/api/class-browsertype#browser-type-launch), closes the
   * browser and all of its pages (if any were opened).
   *
   * In case this browser is connected to, clears all created contexts belonging to this browser and disconnects from
   * the browser server.
   *
   * **NOTE** This is similar to force-quitting the browser. To close pages gracefully and ensure you receive page close
   * events, call
   * [browserContext.close([options])](https://playwright.dev/docs/api/class-browsercontext#browser-context-close) on
   * any [BrowserContext](https://playwright.dev/docs/api/class-browsercontext) instances you explicitly created earlier
   * using [browser.newContext([options])](https://playwright.dev/docs/api/class-browser#browser-new-context) **before**
   * calling [browser.close([options])](https://playwright.dev/docs/api/class-browser#browser-close).
   *
   * The [Browser](https://playwright.dev/docs/api/class-browser) object itself is considered to be disposed and cannot
   * be used anymore.
   * @param options
   */
  close(options?: {
    /**
     * The reason to be reported to the operations interrupted by the browser closure.
     */
    reason?: string;
  }): Promise<void>;

  /**
   * Returns an array of all open browser contexts. In a newly created browser, this will return zero browser contexts.
   *
   * **Usage**
   *
   * ```js
   * const browser = await pw.webkit.launch();
   * console.log(browser.contexts().length); // prints `0`
   *
   * const context = await browser.newContext();
   * console.log(browser.contexts().length); // prints `1`
   * ```
   *
   */
  contexts(): Array<BrowserContext>;

  /**
   * Indicates that the browser is connected.
   */
  isConnected(): boolean;

  /**
   * **NOTE** CDP Sessions are only supported on Chromium-based browsers.
   *
   * Returns the newly created browser session.
   */
  newBrowserCDPSession(): Promise<CDPSession>;

  /**
   * Creates a new browser context. It won't share cookies/cache with other browser contexts.
   *
   * **NOTE** If directly using this method to create
   * [BrowserContext](https://playwright.dev/docs/api/class-browsercontext)s, it is best practice to explicitly close
   * the returned context via
   * [browserContext.close([options])](https://playwright.dev/docs/api/class-browsercontext#browser-context-close) when
   * your code is done with the [BrowserContext](https://playwright.dev/docs/api/class-browsercontext), and before
   * calling [browser.close([options])](https://playwright.dev/docs/api/class-browser#browser-close). This will ensure
   * the `context` is closed gracefully and any artifacts—like HARs and videos—are fully flushed and saved.
   *
   * **Usage**
   *
   * ```js
   * (async () => {
   *   const browser = await playwright.firefox.launch();  // Or 'chromium' or 'webkit'.
   *   // Create a new incognito browser context.
   *   const context = await browser.newContext();
// … truncated — the full declaration is in node_modules/playwright-core/types/types.d.ts

JSHandle

JSHandle represents an in-page JavaScript object. JSHandles can be created with the page.evaluateHandle(pageFunction[, arg, options]) method.

const windowHandle = await page.evaluateHandle(() => window)
// ...

JSHandle prevents the referenced JavaScript object being garbage collected unless the handle is exposed with jsHandle.dispose(). JSHandles are auto-disposed when their origin frame gets navigated or the parent context gets destroyed.

JSHandle instances can be used as an argument in page.$eval(selector, pageFunction[, arg, options]), page.evaluate(pageFunction[, arg, options]) and page.evaluateHandle(pageFunction[, arg, options]) methods.

interface JSHandle<T = any> {
  /**
   * Returns the return value of
   * [`pageFunction`](https://playwright.dev/docs/api/class-elementhandle#element-handle-evaluate-option-expression).
   *
   * This method passes this handle as the first argument to
   * [`pageFunction`](https://playwright.dev/docs/api/class-elementhandle#element-handle-evaluate-option-expression).
   *
   * If [`pageFunction`](https://playwright.dev/docs/api/class-elementhandle#element-handle-evaluate-option-expression)
   * returns a [Promise], then `handle.evaluate` would wait for the promise to resolve and return its value.
   *
   * **Usage**
   *
   * ```js
   * const tweetHandle = await page.$('.tweet .retweets');
   * expect(await tweetHandle.evaluate(node => node.innerText)).toBe('10 retweets');
   * ```
   *
   * @param pageFunction Function to be evaluated in the page context.
   * @param arg Optional argument to pass to
   * [`pageFunction`](https://playwright.dev/docs/api/class-elementhandle#element-handle-evaluate-option-expression).
   * @param options
   */
  evaluate<R, Arg, O extends T = T>(
    pageFunction: PageFunctionOn<O, Arg, R>,
    arg: Arg,
    options?: { exposeFunctions?: boolean },
  ): Promise<R>
  /**
   * Returns the return value of
   * [`pageFunction`](https://playwright.dev/docs/api/class-elementhandle#element-handle-evaluate-option-expression).
   *
   * This method passes this handle as the first argument to
   * [`pageFunction`](https://playwright.dev/docs/api/class-elementhandle#element-handle-evaluate-option-expression).
   *
   * If [`pageFunction`](https://playwright.dev/docs/api/class-elementhandle#element-handle-evaluate-option-expression)
   * returns a [Promise], then `handle.evaluate` would wait for the promise to resolve and return its value.
   *
   * **Usage**
   *
   * ```js
   * const tweetHandle = await page.$('.tweet .retweets');
   * expect(await tweetHandle.evaluate(node => node.innerText)).toBe('10 retweets');
   * ```
   *
   * @param pageFunction Function to be evaluated in the page context.
   * @param arg Optional argument to pass to
   * [`pageFunction`](https://playwright.dev/docs/api/class-elementhandle#element-handle-evaluate-option-expression).
   * @param options
   */
  evaluate<R, O extends T = T>(
    pageFunction: PageFunctionOn<O, void, R>,
    arg?: any,
    options?: { exposeFunctions?: boolean },
  ): Promise<R>

  /**
   * Returns the return value of
   * [`pageFunction`](https://playwright.dev/docs/api/class-elementhandle#element-handle-evaluate-handle-option-expression)
   * as a [JSHandle](https://playwright.dev/docs/api/class-jshandle).
   *
   * This method passes this handle as the first argument to
   * [`pageFunction`](https://playwright.dev/docs/api/class-elementhandle#element-handle-evaluate-handle-option-expression).
   *
   * The only difference between `jsHandle.evaluate` and `jsHandle.evaluateHandle` is that `jsHandle.evaluateHandle`
   * returns [JSHandle](https://playwright.dev/docs/api/class-jshandle).
   *
   * If the function passed to the `jsHandle.evaluateHandle` returns a [Promise], then `jsHandle.evaluateHandle` would
   * wait for the promise to resolve and return its value.
   *
   * See
   * [page.evaluateHandle(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-page#page-evaluate-handle)
   * for more details.
   * @param pageFunction Function to be evaluated in the page context.
   * @param arg Optional argument to pass to
   * [`pageFunction`](https://playwright.dev/docs/api/class-elementhandle#element-handle-evaluate-handle-option-expression).
   * @param options
   */
  evaluateHandle<R, Arg, O extends T = T>(
    pageFunction: PageFunctionOn<O, Arg, R>,
    arg: Arg,
    options?: { exposeFunctions?: boolean },
  ): Promise<SmartHandle<R>>
  /**
   * Returns the return value of
   * [`pageFunction`](https://playwright.dev/docs/api/class-elementhandle#element-handle-evaluate-handle-option-expression)
   * as a [JSHandle](https://playwright.dev/docs/api/class-jshandle).
   *
   * This method passes this handle as the first argument to
   * [`pageFunction`](https://playwright.dev/docs/api/class-elementhandle#element-handle-evaluate-handle-option-expression).
   *
   * The only difference between `jsHandle.evaluate` and `jsHandle.evaluateHandle` is that `jsHandle.evaluateHandle`
   * returns [JSHandle](https://playwright.dev/docs/api/class-jshandle).
   *
   * If the function passed to the `jsHandle.evaluateHandle` returns a [Promise], then `jsHandle.evaluateHandle` would
   * wait for the promise to resolve and return its value.
   *
   * See
   * [page.evaluateHandle(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-page#page-evaluate-handle)
   * for more details.
   * @param pageFunction Function to be evaluated in the page context.
   * @param arg Optional argument to pass to
   * [`pageFunction`](https://playwright.dev/docs/api/class-elementhandle#element-handle-evaluate-handle-option-expression).
   * @param options
   */
  evaluateHandle<R, O extends T = T>(
    pageFunction: PageFunctionOn<O, void, R>,
    arg?: any,
    options?: { exposeFunctions?: boolean },
  ): Promise<SmartHandle<R>>

  /**
   * Returns a JSON representation of the object. If the object has a `toJSON` function, it **will not be called**.
   *
   * **NOTE** The method will return an empty JSON object if the referenced object is not stringifiable. It will throw
   * an error if the object has circular references.
   *
   */
  jsonValue(): Promise<T>
  /**
   * Returns either `null` or the object handle itself, if the object handle is an instance of
   * [ElementHandle](https://playwright.dev/docs/api/class-elementhandle).
   */
  asElement(): T extends Node ? ElementHandle<T> : null
  /**
   * The `jsHandle.dispose` method stops referencing the element handle.
   */
  dispose(): Promise<void>

  /**
   * The method returns a map with **own property names** as keys and JSHandle instances for the property values.
   *
   * **Usage**
   *
   * ```js
   * const handle = await page.evaluateHandle(() => ({ window, document }));
   * const properties = await handle.getProperties();
   * const windowHandle = properties.get('window');
   * const documentHandle = properties.get('document');
   * await handle.dispose();
   * ```
   *
   */
  getProperties(): Promise<Map<string, JSHandle>>

  /**
   * Fetches a single property from the referenced object.
   * @param propertyName property to get
   */
  getProperty(propertyName: string): Promise<JSHandle>

  [Symbol.asyncDispose](): Promise<void>
}

APIResponse

APIResponse class represents responses returned by apiRequestContext.get(url[, options]) and similar methods.

interface APIResponse<T = any> {
  /**
   * Returns the JSON representation of response body.
   *
   * This method will throw if the response body is not parsable via `JSON.parse`.
   */
  json(): Promise<T>
  /**
   * Returns the buffer with response body.
   */
  body(): Promise<Buffer>

  /**
   * Disposes the body of this response. If not called then the body will stay in memory until the context closes.
   */
  dispose(): Promise<void>

  /**
   * An object with all the response HTTP headers associated with this response.
   */
  headers(): { [key: string]: string }

  /**
   * An array with all the response HTTP headers associated with this response. Header names are not lower-cased.
   * Headers with multiple entries, such as `Set-Cookie`, appear in the array multiple times.
   */
  headersArray(): Array<{
    /**
     * Name of the header.
     */
    name: string

    /**
     * Value of the header.
     */
    value: string
  }>

  /**
   * Contains a boolean stating whether the response was successful (status in the range 200-299) or not.
   */
  ok(): boolean

  /**
   * Returns SSL and other security information. Resolves to `null` for non-HTTPS responses. For redirected requests,
   * returns the information for the last request in the redirect chain.
   */
  securityDetails(): Promise<null | {
    /**
     * Common Name component of the Issuer field. from the certificate. This should only be used for informational
     * purposes. Optional.
     */
    issuer?: string

    /**
     * The specific TLS protocol used. (e.g. `TLS 1.3`). Optional.
     */
    protocol?: string

    /**
     * Common Name component of the Subject field from the certificate. This should only be used for informational
     * purposes. Optional.
     */
    subjectName?: string

    /**
     * Unix timestamp (in seconds) specifying when this cert becomes valid. Optional.
     */
    validFrom?: number

    /**
     * Unix timestamp (in seconds) specifying when this cert becomes invalid. Optional.
     */
    validTo?: number
  }>

  /**
   * Returns the IP address and port of the server. Resolves to `null` if the server address is not available. For
   * redirected requests, returns the information for the last request in the redirect chain.
   */
  serverAddr(): Promise<null | {
    /**
     * IPv4 or IPV6 address of the server.
     */
    ipAddress: string

    port: number
  }>

  /**
   * Contains the status code of the response (e.g., 200 for a success).
   */
  status(): number

  /**
   * Contains the status text of the response (e.g. usually an "OK" for a success).
   */
  statusText(): string

  /**
   * Returns the text representation of response body.
   */
  text(): Promise<string>

  /**
   * Returns resource timing information for given response. For redirected requests, returns the information for the
   * last request in the redirect chain. When the response is served [from the HAR file](https://playwright.dev/docs/mock#replaying-from-har),
   * timing information is not available and all the values are -1. Find more information at
   * [Resource Timing API](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceResourceTiming).
   */
  timing(): {
    /**
     * Request start time in milliseconds elapsed since January 1, 1970 00:00:00 UTC
     */
    startTime: number

    /**
     * Time immediately before the client starts the domain name lookup for the resource. The value is given in
     * milliseconds relative to `startTime`, -1 if not available.
     */
    domainLookupStart: number

    /**
     * Time immediately after the client ends the domain name lookup for the resource. The value is given in milliseconds
     * relative to `startTime`, -1 if not available.
     */
    domainLookupEnd: number

    /**
     * Time immediately before the client starts establishing the connection to the server to retrieve the resource. The
     * value is given in milliseconds relative to `startTime`, -1 if not available.
     */
    connectStart: number

    /**
     * Time immediately before the client starts the handshake process to secure the current connection. The value is
     * given in milliseconds relative to `startTime`, -1 if not available.
     */
    secureConnectionStart: number

    /**
     * Time immediately after the client establishes the connection to the server to retrieve the resource. The value is
     * given in milliseconds relative to `startTime`, -1 if not available.
     */
    connectEnd: number

    /**
     * Time immediately before the client starts requesting the resource from the server, cache, or local resource. The
     * value is given in milliseconds relative to `startTime`, -1 if not available.
     */
    requestStart: number

    /**
     * Time immediately after the client receives the first byte of the response from the server, cache, or local
     * resource. The value is given in milliseconds relative to `startTime`, -1 if not available.
     */
    responseStart: number

    /**
     * Time immediately after the client receives the last byte of the resource or immediately before the transport
     * connection is closed, whichever comes first. The value is given in milliseconds relative to `startTime`, -1 if not
     * available.
     */
    responseEnd: number
  }

  /**
   * Contains the URL of the response.
   */
  url(): string

  [Symbol.asyncDispose](): Promise<void>
}

ElementHandle

• extends: JSHandle

ElementHandle represents an in-page DOM element. ElementHandles can be created with the page.$(selector[, options]) method.

NOTE The use of ElementHandle is discouraged, use Locator objects and web-first assertions instead.

const hrefElement = await page.$('a')
await hrefElement.click()

ElementHandle prevents DOM element from garbage collection unless the handle is disposed with jsHandle.dispose(). ElementHandles are auto-disposed when their origin frame gets navigated.

ElementHandle instances can be used as an argument in page.$eval(selector, pageFunction[, arg, options]) and page.evaluate(pageFunction[, arg, options]) methods.

The difference between the Locator and ElementHandle is that the ElementHandle points to a particular element, while Locator captures the logic of how to retrieve an element.

In the example below, handle points to a particular DOM element on page. If that element changes text or is used by

(description truncated — read the full text in node_modules/playwright-core/types/types.d.ts.)

interface ElementHandle<T=Node> extends JSHandle<T> {
  /**
   * **NOTE** Use locator-based [page.locator(selector[, options])](https://playwright.dev/docs/api/class-page#page-locator)
   * instead. Read more about [locators](https://playwright.dev/docs/locators).
   *
   * The method finds an element matching the specified selector in the `ElementHandle`'s subtree. If no elements match
   * the selector, returns `null`.
   * @param selector A selector to query for.
   */
  $<K extends keyof HTMLElementTagNameMap>(selector: K, options?: { strict: boolean }): Promise<ElementHandleForTag<K> | null>;
  /**
   * **NOTE** Use locator-based [page.locator(selector[, options])](https://playwright.dev/docs/api/class-page#page-locator)
   * instead. Read more about [locators](https://playwright.dev/docs/locators).
   *
   * The method finds an element matching the specified selector in the `ElementHandle`'s subtree. If no elements match
   * the selector, returns `null`.
   * @param selector A selector to query for.
   */
  $(selector: string, options?: { strict: boolean }): Promise<ElementHandle<SVGElement | HTMLElement> | null>;

  /**
   * **NOTE** Use locator-based [page.locator(selector[, options])](https://playwright.dev/docs/api/class-page#page-locator)
   * instead. Read more about [locators](https://playwright.dev/docs/locators).
   *
   * The method finds all elements matching the specified selector in the `ElementHandle`s subtree. If no elements match
   * the selector, returns empty array.
   * @param selector A selector to query for.
   */
  $$<K extends keyof HTMLElementTagNameMap>(selector: K): Promise<ElementHandleForTag<K>[]>;
  /**
   * **NOTE** Use locator-based [page.locator(selector[, options])](https://playwright.dev/docs/api/class-page#page-locator)
   * instead. Read more about [locators](https://playwright.dev/docs/locators).
   *
   * The method finds all elements matching the specified selector in the `ElementHandle`s subtree. If no elements match
   * the selector, returns empty array.
   * @param selector A selector to query for.
   */
  $$(selector: string): Promise<ElementHandle<SVGElement | HTMLElement>[]>;

  /**
   * **NOTE** This method does not wait for the element to pass actionability checks and therefore can lead to the flaky tests.
   * Use
   * [locator.evaluate(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-locator#locator-evaluate),
   * other [Locator](https://playwright.dev/docs/api/class-locator) helper methods or web-first assertions instead.
   *
   * Returns the return value of
   * [`pageFunction`](https://playwright.dev/docs/api/class-elementhandle#element-handle-eval-on-selector-option-expression).
   *
   * The method finds an element matching the specified selector in the `ElementHandle`s subtree and passes it as a
   * first argument to
   * [`pageFunction`](https://playwright.dev/docs/api/class-elementhandle#element-handle-eval-on-selector-option-expression).
   * If no elements match the selector, the method throws an error.
   *
   * If
   * [`pageFunction`](https://playwright.dev/docs/api/class-elementhandle#element-handle-eval-on-selector-option-expression)
   * returns a [Promise], then
   * [elementHandle.$eval(selector, pageFunction[, arg])](https://playwright.dev/docs/api/class-elementhandle#element-handle-eval-on-selector)
   * would wait for the promise to resolve and return its value.
   *
   * **Usage**
   *
   * ```js
   * const tweetHandle = await page.$('.tweet');
   * expect(await tweetHandle.$eval('.like', node => node.innerText)).toBe('100');
   * expect(await tweetHandle.$eval('.retweets', node => node.innerText)).toBe('10');
   * ```
   *
   * @param selector A selector to query for.
   * @param pageFunction Function to be evaluated in the page context.
   * @param arg Optional argument to pass to
   * [`pageFunction`](https://playwright.dev/docs/api/class-elementhandle#element-handle-eval-on-selector-option-expression).
   */
  $eval<K extends keyof HTMLElementTagNameMap, R, Arg>(selector: K, pageFunction: PageFunctionOn<HTMLElementTagNameMap[K], Arg, R>, arg: Arg): Promise<R>;
  /**
   * **NOTE** This method does not wait for the element to pass actionability checks and therefore can lead to the flaky tests.
   * Use
   * [locator.evaluate(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-locator#locator-evaluate),
   * other [Locator](https://playwright.dev/docs/api/class-locator) helper methods or web-first assertions instead.
   *
   * Returns the return value of
   * [`pageFunction`](https://playwright.dev/docs/api/class-elementhandle#element-handle-eval-on-selector-option-expression).
   *
   * The method finds an element matching the specified selector in the `ElementHandle`s subtree and passes it as a
   * first argument to
   * [`pageFunction`](https://playwright.dev/docs/api/class-elementhandle#element-handle-eval-on-selector-option-expression).
   * If no elements match the selector, the method throws an error.
   *
   * If
   * [`pageFunction`](https://playwright.dev/docs/api/class-elementhandle#element-handle-eval-on-selector-option-expression)
   * returns a [Promise], then
   * [elementHandle.$eval(selector, pageFunction[, arg])](https://playwright.dev/docs/api/class-elementhandle#element-handle-eval-on-selector)
   * would wait for the promise to resolve and return its value.
   *
   * **Usage**
   *
   * ```js
   * const tweetHandle = await page.$('.tweet');
   * expect(await tweetHandle.$eval('.like', node => node.innerText)).toBe('100');
   * expect(await tweetHandle.$eval('.retweets', node => node.innerText)).toBe('10');
   * ```
   *
   * @param selector A selector to query for.
   * @param pageFunction Function to be evaluated in the page context.
   * @param arg Optional argument to pass to
   * [`pageFunction`](https://playwright.dev/docs/api/class-elementhandle#element-handle-eval-on-selector-option-expression).
   */
  $eval<R, Arg, E extends SVGElement | HTMLElement = SVGElement | HTMLElement>(selector: string, pageFunction: PageFunctionOn<E, Arg, R>, arg: Arg): Promise<R>;
  /**
   * **NOTE** This method does not wait for the element to pass actionability checks and therefore can lead to the flaky tests.
   * Use
   * [locator.evaluate(pageFunction[, arg, options])](https://playwright.dev/docs/api/class-locator#locator-evaluate),
   * other [Locator](https://playwright.dev/docs/api/class-locator) helper methods or web-first assertions instead.
   *
   * Returns the return value of
   * [`pageFunction`](https://playwright.dev/docs/api/class-elementhandle#element-handle-eval-on-selector-option-expression).
   *
   * The method finds an element matching the specified selector in the `ElementHandle`s subtree and passes it as a
   * first argument to
   * [`pageFunction`](https://playwright.dev/docs/api/class-elementhandle#element-handle-eval-on-selector-option-expression).
   * If no elements match the selector, the method throws an error.
   *
   * If
   * [`pageFunction`](https://playwright.dev/docs/api/class-elementhandle#element-handle-eval-on-selector-option-expression)
   * returns a [Promise], then
   * [elementHandle.$eval(selector, pageFunction[, arg])](https://playwright.dev/docs/api/class-elementhandle#element-handle-eval-on-selector)
   * would wait for the promise to resolve and return its value.
   *
   * **Usage**
   *
   * ```js
   * const tweetHandle = await page.$('.tweet');
   * expect(await tweetHandle.$eval('.like', node => node.innerText)).toBe('100');
   * expect(await tweetHandle.$eval('.retweets', node => node.innerText)).toBe('10');
   * ```
   *
   * @param selector A selector to query for.
   * @param pageFunction Function to be evaluated in the page context.
   * @param arg Optional argument to pass to
   * [`pageFunction`](https://playwright.dev/docs/api/class-elementhandle#element-handle-eval-on-selector-option-expression).
   */
// … truncated — the full declaration is in node_modules/playwright-core/types/types.d.ts

Locator

Locators are the central piece of Playwright's auto-waiting and retry-ability. In a nutshell, locators represent a way to find element(s) on the page at any moment. A locator can be created with the page.locator(selector[, options]) method.

Learn more about locators.

interface Locator {
  /**
   * Execute JavaScript code in the page, taking the matching element as an argument.
   *
   * **Details**
   *
   * Returns the return value of
   * [`pageFunction`](https://playwright.dev/docs/api/class-locator#locator-evaluate-option-expression), called with the
   * matching element as a first argument, and
   * [`arg`](https://playwright.dev/docs/api/class-locator#locator-evaluate-option-arg) as a second argument.
   *
   * If [`pageFunction`](https://playwright.dev/docs/api/class-locator#locator-evaluate-option-expression) returns a
   * [Promise], this method will wait for the promise to resolve and return its value.
   *
   * If [`pageFunction`](https://playwright.dev/docs/api/class-locator#locator-evaluate-option-expression) throws or
   * rejects, this method throws.
   *
   * **Usage**
   *
   * Passing argument to
   * [`pageFunction`](https://playwright.dev/docs/api/class-locator#locator-evaluate-option-expression):
   *
   * ```js
   * const result = await page.getByTestId('myId').evaluate((element, [x, y]) => {
   *   return element.textContent + ' ' + x * y;
   * }, [7, 8]);
   * console.log(result); // prints "myId text 56"
   * ```
   *
   * @param pageFunction Function to be evaluated in the page context.
   * @param arg Optional argument to pass to
   * [`pageFunction`](https://playwright.dev/docs/api/class-locator#locator-evaluate-option-expression).
   * @param options
   */
  evaluate<R, Arg, E extends SVGElement | HTMLElement = SVGElement | HTMLElement>(pageFunction: PageFunctionOn<E, Arg, R>, arg?: Arg, options?: { timeout?: number, signal?: AbortSignal, exposeFunctions?: boolean }): Promise<R>;
  /**
   * Execute JavaScript code in the page, taking the matching element as an argument, and return a
   * [JSHandle](https://playwright.dev/docs/api/class-jshandle) with the result.
   *
   * **Details**
   *
   * Returns the return value of
   * [`pageFunction`](https://playwright.dev/docs/api/class-locator#locator-evaluate-handle-option-expression) as
   * a[JSHandle](https://playwright.dev/docs/api/class-jshandle), called with the matching element as a first argument,
   * and [`arg`](https://playwright.dev/docs/api/class-locator#locator-eva