Playwright

https://playwright.dev/docs/
Admin
Playwright is a framework that enables reliable end-to-end testing for modern web applications...
Tokens:707,585
Snippets:6,041
Trust Score:9.9
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### install examples

Source: https://playwright.dev/docs/test-cli

Examples of installing browsers: all browsers, only Chromium, specific browsers, and with dependencies. The --with-deps flag installs system dependencies.

```bash
# Install all browsers  
npx playwright install  

# Install only Chromium  
npx playwright install chromium  

# Install specific browsers  
npx playwright install chromium webkit  

# Install browsers with dependencies  
npx playwright install --with-deps  
```

--------------------------------

### Start tracing with screenshots and snapshots

Source: https://playwright.dev/docs/api/class-tracing

Starts tracing with screenshots and snapshots enabled, then performs actions and stops tracing. This is the usage example for the start method.

```javascript
await context.tracing.start({ screenshots: true, snapshots: true });  

const page = await context.newPage();  

await page.goto('https://playwright.dev');  

expect(page.url()).toBe('https://playwright.dev');  

await context.tracing.stop({ path: 'trace.zip' });  
```

--------------------------------

### Custom setup with page.pause()

Source: https://playwright.dev/docs/codegen

Use this snippet to start codegen in a non-standard setup, for example when you need to use browserContext.route(). It launches a headed browser, sets up the context with custom options, and pauses the page to open codegen controls. Ensure the browser is launched with headless: false.

```javascript
const { chromium } = require('@playwright/test');  

(async () => {  
  // Make sure to run headed.  
  const browser = await chromium.launch({ headless: false });  

  // Setup context however you like.  
  const context = await browser.newContext({ /* pass any options */ });  
  await context.route('**/*', route => route.continue());  

  // Pause the page, and start recording manually.  
  const page = await context.newPage();  
  await page.pause();  
})();  
```

--------------------------------

### Global setup example: authenticate and save storage state

Source: https://playwright.dev/docs/test-global-setup-teardown

This global setup function launches a browser, signs in, and saves the storage state to the path specified in the config. It uses baseURL and storageState from the config's first project.

```TypeScript
import { chromium, type FullConfig } from '@playwright/test';  

  
async function globalSetup(config: FullConfig) {  
  const { baseURL, storageState } = config.projects[0].use;  
  const browser = await chromium.launch();  
  const page = await browser.newPage();  
  await page.goto(baseURL!);  
  await page.getByLabel('User Name').fill('user');  
  await page.getByLabel('Password').fill('password');  
  await page.getByText('Sign in').click();  
  await page.context().storageState({ path: storageState as string });  
  await browser.close();  
}  

  
export default globalSetup;  

```

--------------------------------

### Show install help with npx playwright install --help

Source: https://playwright.dev/docs/browsers

Displays help for the install command, including the list of all supported browsers and available options.

```bash
npx playwright install --help
```

--------------------------------

### Install only Chromium on CI

Source: https://playwright.dev/docs/best-practices

Optimize browser downloads on CI by installing only the browsers you need. The commented example shows installing all browsers, while the active command installs only Chromium with dependencies, saving download time and disk space.

```bash
# Instead of installing all browsers

npx playwright install --with-deps

# Install only Chromium

npx playwright install chromium --with-deps
```

--------------------------------

### Capture trace of failures during global setup

Source: https://playwright.dev/docs/test-global-setup-teardown

Global setup that starts tracing, performs authentication, and stops tracing on success or failure. On error, it saves a trace to a different path and rethrows the error.

```TypeScript
import { chromium, type FullConfig } from '@playwright/test';  

  
async function globalSetup(config: FullConfig) {  
  const { baseURL, storageState } = config.projects[0].use;  
  const browser = await chromium.launch();  
  const context = await browser.newContext();  
  const page = await context.newPage();  
  try {  
    await context.tracing.start({ screenshots: true, snapshots: true });  
    await page.goto(baseURL!);  
    await page.getByLabel('User Name').fill('user');  
    await page.getByLabel('Password').fill('password');  
    await page.getByText('Sign in').click();  
    await context.storageState({ path: storageState as string });  
    await context.tracing.stop({  
      path: './test-results/setup-trace.zip',  
    });  
    await browser.close();  
  } catch (error) {  
    await context.tracing.stop({  
      path: './test-results/failed-setup-trace.zip',  
    });  
    await browser.close();  
    throw error;  
  }  
}  

  
export default globalSetup;  

```

--------------------------------

### electronApplication.firstWindow() usage

Source: https://playwright.dev/docs/api/class-electronapplication

Waits for the first application window to be opened and returns it. The example shows launching Electron and then getting the first window.

```javascript
const electronApp = await electron.launch({
  args: ['main.js']
});
const window = await electronApp.firstWindow();
// ...
```

--------------------------------

### Consistent time and timers with install, pauseAt, and fastForward

Source: https://playwright.dev/docs/clock

Use this when timers depend on Date.now and need consistent time progression. The page HTML is the same as the previous example. The test installs the clock at an earlier time, lets the page load, pauses at a specific time, asserts, then fast-forwards and asserts again.

```html
<div id="current-time" data-testid="current-time"></div>  

<script>  

  const renderTime = () => {  

    document.getElementById('current-time').textContent =  

        new Date().toLocaleString();  

  };  

  setInterval(renderTime, 1000);  

</script>  
```

```javascript
// Initialize clock with some time before the test time and let the page load  

// naturally. `Date.now` will progress as the timers fire.  

await page.clock.install({ time: new Date('2024-02-02T08:00:00') });  

await page.goto('http://localhost:3333');  

  

// Pretend that the user closed the laptop lid and opened it again at 10am,  

// Pause the time once reached that point.  

await page.clock.pauseAt(new Date('2024-02-02T10:00:00'));  

  

// Assert the page state.  

await expect(page.getByTestId('current-time')).toHaveText('2/2/2024, 10:00:00 AM');  

  

// Close the laptop lid again and open it at 10:30am.  

await page.clock.fastForward('30:00');  

await expect(page.getByTestId('current-time')).toHaveText('2/2/2024, 10:30:00 AM');  
```

--------------------------------

### WebStorage overview example

Source: https://playwright.dev/docs/api/class-webstorage

Shows basic usage of page.localStorage to set, get, list, remove, and clear items after navigating to a page.

```javascript
await page.goto('https://example.com');  

await page.localStorage.setItem('token', 'abc');  

const token = await page.localStorage.getItem('token');  

const all = await page.localStorage.items();  

await page.localStorage.removeItem('token');  

await page.localStorage.clear();  
```

--------------------------------

### Playwright CLI Quick Reference Commands

Source: https://playwright.dev/docs/getting-started-cli

Quick reference commands for installing the Playwright CLI, installing skills, opening pages, interacting with elements, taking screenshots, getting snapshots, running headed, selecting Firefox, and monitoring sessions.

```bash
npm install -g @playwright/cli@latest
```

```bash
playwright-cli install --skills
```

```bash
playwright-cli open https://example.com
```

```bash
playwright-cli click e15
```

```bash
playwright-cli type "hello world"
```

```bash
playwright-cli screenshot
```

```bash
playwright-cli snapshot
```

```bash
playwright-cli open https://example.com --headed
```

```bash
playwright-cli open --browser=firefox
```

```bash
playwright-cli show
```

--------------------------------

### Install browser and dependencies with npx playwright install --with-deps

Source: https://playwright.dev/docs/browsers

Combines browser installation and OS dependency installation in a single command. The '--with-deps' flag installs dependencies for the specified browser.

```bash
npx playwright install --with-deps chromium
```

--------------------------------

### Example WebView2 test with custom fixture

Source: https://playwright.dev/docs/webview2

Example Playwright test that uses the custom WebView2 fixture. Navigates to https://playwright.dev and asserts that the 'Get Started' text is visible.

```typescript
import { test, expect } from './webView2Test';  

  

test('test WebView2', async ({ page }) => {  

  await page.goto('https://playwright.dev');  

  const getStarted = page.getByText('Get Started');  

  await expect(getStarted).toBeVisible();  

});  
```

--------------------------------

### Example .env file

Source: https://playwright.dev/docs/test-parameterize

Example .env file with STAGING, USER_NAME, and PASSWORD variables.

```plaintext
# .env file  
STAGING=0  
USER_NAME=me  
PASSWORD=secret  

```

--------------------------------

### Test using PlaywrightDevPage (TypeScript)

Source: https://playwright.dev/docs/pom

Example test file (example.spec.ts) that uses the PlaywrightDevPage class. It verifies the table of contents after clicking 'Get started' and checks that the Page Object Model article contains the expected text.

```TypeScript
import { test, expect } from '@playwright/test';  
import { PlaywrightDevPage } from './playwright-dev-page';  

test('getting started should contain table of contents', async ({ page }) => {  
  const playwrightDev = new PlaywrightDevPage(page);  
  await playwrightDev.goto();  
  await playwrightDev.getStarted();  
  await expect(playwrightDev.tocList).toHaveText([  
    `How to install Playwright`,  
    `What's installed`,  
    `How to run the example test`,  
    `How to open the HTML test report`,  
    `Write tests using web-first assertions, fixtures and locators`,  
    `Run single or multiple tests; headed mode`,  
    `Generate tests with Codegen`,  
    `View a trace of your tests`,  
  ]);  
});  

test('should show Page Object Model article', async ({ page }) => {  
  const playwrightDev = new PlaywrightDevPage(page);  
  await playwrightDev.goto();  
  await playwrightDev.pageObjectModel();  
  await expect(page.locator('article')).toContainText('Page Object Model is a common pattern');  
});  
```

--------------------------------

### PlaywrightDevPage page object class (TypeScript)

Source: https://playwright.dev/docs/pom

Defines a PlaywrightDevPage page object class for the Playwright.dev site. It encapsulates locators for the 'Get started' link, the 'Installation' header, the 'Page Object Model' link, and the table of contents, plus methods to navigate and interact with those elements.

```TypeScript
import { expect, type Locator, type Page } from '@playwright/test';  


export class PlaywrightDevPage {  
  readonly page: Page;  
  readonly getStartedLink: Locator;  
  readonly gettingStartedHeader: Locator;  
  readonly pomLink: Locator;  
  readonly tocList: Locator;  

  constructor(page: Page) {  
    this.page = page;  
    this.getStartedLink = page.locator('a', { hasText: 'Get started' });  
    this.gettingStartedHeader = page.locator('h1', { hasText: 'Installation' });  
    this.pomLink = page.locator('li', {  
      hasText: 'Guides',  
    }).locator('a', {  
      hasText: 'Page Object Model',  
    });  
    this.tocList = page.locator('article div.markdown ul > li > a');  
  }  

  async goto() {  
    await this.page.goto('https://playwright.dev');  
  }  

  async getStarted() {  
    await this.getStartedLink.first().click();  
    await expect(this.gettingStartedHeader).toBeVisible();  
  }  

  async pageObjectModel() {  
    await this.getStarted();  
    await this.pomLink.click();  
  }  
}  
```

--------------------------------

### install

Source: https://playwright.dev/docs/clock

Initializes the clock and allows you to control time.

```APIDOC
## install

### Description
Initializes the clock and allows you to control time.

### Method
install

### Parameters
- **options** (object) - Optional - Configuration options for the clock installation.

### Response
Returns a Clock object that provides methods to control time.
```

--------------------------------

### Setup and teardown with beforeAll and afterAll

Source: https://playwright.dev/docs/api-testing

Creates a repository before tests and deletes it after tests using the request fixture. Assumes REPO and USER constants are defined elsewhere.

```typescript
test.beforeAll(async ({ request }) => {  
  // Create a new repository  
  const response = await request.post('/user/repos', {  
    data: {  
      name: REPO  
    }  
  });  
  expect(response.ok()).toBeTruthy();  
});  

test.afterAll(async ({ request }) => {  
  // Delete the repository  
  const response = await request.delete(`/repos/${USER}/${REPO}`);  
  expect(response.ok()).toBeTruthy();  
});  
```

--------------------------------

### Get own properties of a JSHandle with getProperties()

Source: https://playwright.dev/docs/api/class-jshandle

Gets a map of own property names to JSHandle instances. The example retrieves window and document properties and disposes the handle.

```javascript
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();  

```

--------------------------------

### credentials.install()

Source: https://playwright.dev/docs/api/class-credentials

Installs the virtual WebAuthn authenticator into the context, overriding navigator.credentials.create() and navigator.credentials.get() in all current and future pages. Call this before the page first touches navigator.credentials.

```APIDOC
## credentials.install()

### Description
Installs the virtual WebAuthn authenticator into the context, overriding navigator.credentials.create() and navigator.credentials.get() in all current and future pages. Call this before the page first touches navigator.credentials. Required: until credentials.install() is called, no interception is in place and the page sees the platform's native (or absent) WebAuthn behaviour. Seeding credentials with credentials.create() without installing populates the authenticator, but the page will never see those credentials.

### Method
install

### Endpoint
credentials.install()

### Parameters
None

### Returns
Promise<void>

### Usage Example
```
await credentials.install();
```
```

--------------------------------

### testInfo.snapshotPath usage examples

Source: https://playwright.dev/docs/api/class-testinfo

Examples showing how to use testInfo.snapshotPath to get paths for different snapshot kinds (screenshot, aria, snapshot) and with nested path segments.

```javascript
await expect(page).toHaveScreenshot('header.png');  

// Screenshot assertion above expects screenshot at this path:  

const screenshotPath = test.info().snapshotPath('header.png', { kind: 'screenshot' });  

  

await expect(page.getByRole('main')).toMatchAriaSnapshot({ name: 'main.aria.yml' });  

// Aria snapshot assertion above expects snapshot at this path:  

const ariaSnapshotPath = test.info().snapshotPath('main.aria.yml', { kind: 'aria' });  

  

expect('some text').toMatchSnapshot('snapshot.txt');  

// Snapshot assertion above expects snapshot at this path:  

const snapshotPath = test.info().snapshotPath('snapshot.txt');  

  

expect('some text').toMatchSnapshot(['dir', 'subdir', 'snapshot.txt']);  

// Snapshot assertion above expects snapshot at this path:  

const nestedPath = test.info().snapshotPath('dir', 'subdir', 'snapshot.txt');  

```

--------------------------------

### CLI output snapshot example

Source: https://playwright.dev/docs/getting-started-cli

Example CLI output showing the page URL, title, and a link to the snapshot file after each command.

```text
### Page  

- Page URL: https://demo.playwright.dev/todomvc/#/  

- Page Title: React • TodoMVC  

### Snapshot  

[Snapshot](.playwright-cli/page-2026-02-14T19-22-42-679Z.yml)  

```

--------------------------------

### Start Selenium hub and node containers

Source: https://playwright.dev/docs/selenium-grid

Start a Selenium hub and one or more node containers. Set SE_NODE_GRID_URL to the hub IP and configure event bus ports.

```bash
docker run -d -p 4442-4444:4442-4444 --name selenium-hub selenium/hub:4.25.0  

docker run -d -p 5555:5555 \  

    --shm-size="2g" \  

    -e SE_EVENT_BUS_HOST=<selenium-hub-ip> \  

    -e SE_EVENT_BUS_PUBLISH_PORT=4442 \  

    -e SE_EVENT_BUS_SUBSCRIBE_PORT=4443 \  

    -e SE_NODE_GRID_URL="http://<selenium-hub-ip>:4444"  

    selenium/node-chromium:4.25.0  

```

--------------------------------

### Test using storageState from global setup

Source: https://playwright.dev/docs/test-global-setup-teardown

A test that starts already authenticated because the storageState populated by global setup is specified in the config. The test navigates to the root and expects to be signed in.

```TypeScript
import { test } from '@playwright/test';  

  
test('test', async ({ page }) => {  
  await page.goto('/');  
  // You are signed in!  
});  

```

--------------------------------

### Use test.fixme in beforeEach hook to skip setup for mobile

Source: https://playwright.dev/docs/test-annotations

Place test.fixme in the beforeEach hook to avoid running the hook for mobile devices. The test itself still runs, but the setup is skipped. The example uses isMobile to conditionally mark the setup as fixme.

```TypeScript
test.beforeEach(async ({ page, isMobile }) => {
  test.fixme(isMobile, 'Settings page does not work in mobile yet');

  await page.goto('http://localhost:3000/settings');
});

test('user profile', async ({ page }) => {
  await page.getByText('My Profile').click();
  // ...
});
```

--------------------------------

### browserType.launchServer(options)

Source: https://playwright.dev/docs/api/class-browsertype

Launches a browser server with configurable options.

```APIDOC
## browserType.launchServer(options)

### Description
Launches a browser server that returns a BrowserServer instance. This method accepts various options to configure the browser instance, such as arguments, executable path, headless mode, and proxy settings.

### Method
launchServer

### Parameters
#### Options
- **options** (Object) - Optional - Configuration options for launching the browser server.
  - **args** (Array<string>) - Optional - Additional arguments to pass to the browser instance. Use at your own risk.
  - **artifactsDir** (string) - Optional - Directory to save artifacts (traces, videos, downloads, HAR files). Not cleaned up on browser close.
  - **channel** (string) - Optional - Browser distribution channel. Use "chromium" for new headless mode, or "chrome", "chrome-beta", "chrome-dev", "chrome-canary", "msedge", "msedge-beta", "msedge-dev", "msedge-canary" for branded browsers.
  - **chromiumSandbox** (boolean) - Optional - Enable Chromium sandboxing. Defaults to `false`.
  - **downloadsPath** (string) - Optional - Directory for accepted downloads. Temporary directory created if not specified.
  - **env** (Object<string, string | [undefined]>) - Optional - Environment variables.
  - **executablePath** (string) - Optional - Path to a browser executable to run instead of the bundled one.
  - **firefoxUserPrefs** (Object<string, string | number | boolean>) - Optional - Firefox user preferences.
  - **handleSIGHUP** (boolean) - Optional - Close browser process on SIGHUP. Defaults to `true`.
  - **handleSIGINT** (boolean) - Optional - Close browser process on Ctrl-C. Defaults to `true`.
  - **handleSIGTERM** (boolean) - Optional - Close browser process on SIGTERM. Defaults to `true`.
  - **headless** (boolean) - Optional - Run browser in headless mode. Defaults to `true`.
  - **host** (string) - Optional - Host for the web socket. Defaults to `localhost`.
  - **ignoreDefaultArgs** (boolean | Array<string>) - Optional - If `true`, Playwright does not pass its own configuration args. If array, filters out given default arguments.
  - **logger** (Logger) - Optional - Deprecated. Logger sink for Playwright logging.
  - **port** (number) - Optional - Port for the web socket. Defaults to 0 (any available port).
  - **proxy** (Object) - Optional - Network proxy settings.
    - **server** (string) - Proxy server address.
    - **bypass** (string) - Optional - Comma-separated domains to bypass proxy.
    - **username** (string) - Optional - Username for proxy authentication.
    - **password** (string) - Optional - Password for proxy authentication.
  - **timeout** (number) - Optional - Maximum time in milliseconds to wait for browser instance to start. Defaults to `30000`. Pass `0` to disable.
  - **tracesDir** (string) - Optional - Directory to save traces.
  - **wsPath** (string) - Optional - Path at which to serve the Browser Server. Defaults to an unguessable string.

### Returns
- **Promise<BrowserServer>** - A promise that resolves to a BrowserServer instance.

### Usage Example
```js
const browserServer = await browserType.launchServer({
  headless: true,
  args: ['--no-sandbox']
});
```
```

--------------------------------

### frame.frameElement() usage example

Source: https://playwright.dev/docs/api/class-frame

Gets the frame element handle for the current frame, then uses contentFrame() to get the frame back and verifies they are equal. Throws if the frame is detached before frameElement() returns.

```javascript
const frameElement = await frame.frameElement();  
const contentFrame = await frameElement.contentFrame();  
console.log(frame === contentFrame);  // -> true  
```

--------------------------------

### screencast.start

Source: https://playwright.dev/docs/api/class-screencast

Starts the screencast, either saving video to a file or delivering JPEG frames to a callback.

```APIDOC
## screencast.start

### Description
Starts the screencast. When a path is provided, it saves video recording to the specified file. When onFrame is provided, delivers JPEG-encoded frames to the callback. Both can be used together.

### Method
start

### Endpoint
page.screencast.start(options)

### Parameters
#### Options
- **options** (Object) - Optional - Configuration options for the screencast.
  - **onFrame** (function(Object):Promise) - Optional - Callback that receives JPEG-encoded frame data along with the page viewport size at the time of capture.
    - **data** (Buffer) - JPEG-encoded frame data.
    - **timestamp** (number) - The timestamp of when the frame was presented by the browser, in milliseconds since the Unix epoch.
    - **viewportWidth** (number) - Width of the page viewport at the time the frame was captured.
    - **viewportHeight** (number) - Height of the page viewport at the time the frame was captured.
  - **path** (string) - Optional - Path where the video should be saved when the screencast is stopped. When provided, video recording is started.
  - **quality** (number) - Optional - The quality of the image, between 0-100.
  - **size** (Object) - Optional - Specifies the dimensions of screencast frames. The actual frame is scaled to preserve the page's aspect ratio and may be smaller than these bounds. If a screencast is already active (e.g. started by tracing or video recording), the existing configuration takes precedence and the frame size may exceed these bounds or this option may be ignored. If not specified the size will be equal to page viewport scaled down to fit into 800×800.
    - **width** (number) - Max frame width in pixels.
    - **height** (number) - Max frame height in pixels.

### Request Example
```javascript
// Record video
await page.screencast.start({ path: 'video.webm', size: { width: 1280, height: 800 } });

// Capture frames
await page.screencast.start({
  onFrame: ({ data, timestamp, viewportWidth, viewportHeight }) => {
    console.log(`frame size: ${data.length} (${viewportWidth}x${viewportHeight}) at ${timestamp}`);
  },
  size: { width: 800, height: 600 },
});
```

### Response
#### Success Response
- **Promise<Disposable>** - A promise that resolves to a Disposable object.

### Response Example
```javascript
const disposable = await page.screencast.start({ path: 'video.webm' });
```
```

--------------------------------

### context.credentials.install()

Source: https://playwright.dev/docs/api/class-credentials

Installs the virtual authenticator into the browser context, enabling it to answer WebAuthn ceremonies.

```APIDOC
## context.credentials.install()

### Description
Installs the virtual authenticator into the browser context, enabling it to answer WebAuthn ceremonies.

### Method
install

### Parameters
None.

### Request Example
```js
await context.credentials.install();
```

### Response
No return value.
```

--------------------------------

### Get iframe element locator with frameLocator.owner()

Source: https://playwright.dev/docs/api/class-framelocator

Shows how to obtain a FrameLocator from an iframe element and then use owner() to get a Locator pointing to the same iframe element. The example then asserts the locator is visible.

```javascript
const frameLocator = page.locator('iframe[name="embedded"]').contentFrame();  

// ...  

const locator = frameLocator.owner();  

await expect(locator).toBeVisible();  

```

--------------------------------

### Get browser name

Source: https://playwright.dev/docs/api/class-browsertype

Returns the browser name as a string, for example 'chromium', 'webkit', or 'firefox'.

```javascript
browserType.name();
```

--------------------------------

### electron.launch usage examples

Source: https://playwright.dev/docs/api/class-electron

Shows two ways to call electron.launch: with no arguments and with an options object. The options object can include arguments, environment variables, and other settings.

```javascript
await electron.launch();  
```

```javascript
await electron.launch(options);  
```

--------------------------------

### Codegen examples: record actions and generate tests

Source: https://playwright.dev/docs/test-cli

Examples of using npx playwright codegen: start recording with interactive UI, record on a specific site, and generate Python code with --target=python.

```bash
# Start recording with interactive UI  
npx playwright codegen  
  
# Record on specific site  
npx playwright codegen https://playwright.dev  
  
# Generate Python code  
npx playwright codegen --target=python  
```

--------------------------------

### electron.launch

Source: https://playwright.dev/docs/api/class-electron

Launches an Electron application with the given arguments. Returns an ElectronApplication instance.

```APIDOC
## electron.launch

### Description
Launches an Electron application with the specified arguments. Returns an ElectronApplication object that can be used to interact with the app.

### Method
launch

### Parameters
- **args** (string[]) - Required - Command line arguments to pass to the Electron app, typically the main script path.

### Request Example
```js
const electronApp = await electron.launch({ args: ['main.js'] });
```

### Response
Returns an ElectronApplication instance.

```

--------------------------------

### Create context, resize page, and emulate high-DPI (Library)

Source: https://playwright.dev/docs/emulation

Shows how to create a context with a viewport, resize an individual page, and emulate a high-DPI screen with deviceScaleFactor.

```JavaScript
// Create context with given viewport  
const context = await browser.newContext({  
  viewport: { width: 1280, height: 1024 }  
});  
  
// Resize viewport for individual page  
await page.setViewportSize({ width: 1600, height: 1200 });  
  
// Emulate high-DPI  
const context = await browser.newContext({  
  viewport: { width: 2560, height: 1440 },  
  deviceScaleFactor: 2,  
});  

```

--------------------------------

### disposable.dispose()

Source: https://playwright.dev/docs/api/class-disposable

Removes the associated resource. For example, removes the init script installed via page.addInitScript() or browserContext.addInitScript().

```APIDOC
## disposable.dispose()

### Description
Removes the associated resource. For example, removes the init script installed via page.addInitScript() or browserContext.addInitScript().

### Method
dispose

### Endpoint
disposable.dispose

### Parameters
None

### Request Example
```javascript
await disposable.dispose();
```

### Response
#### Success Response
- **Promise<void>** - Resolves when the resource is removed.

#### Response Example
```javascript
await disposable.dispose();
```
```

--------------------------------

### First Playwright test with title and link assertions

Source: https://playwright.dev/docs/writing-tests

Example test file (tests/example.spec.ts) showing two tests: one checks the page title contains 'Playwright', the other clicks a link and expects a heading to be visible. Uses Playwright's test and expect from '@playwright/test'. Add `// @ts-check` at the start of each test file when using JavaScript in VS Code to get automatic type checking.

```typescript
import { test, expect } from '@playwright/test';  

  

test('has title', async ({ page }) => {  
  await page.goto('https://playwright.dev/');  
  
  // Expect a title "to contain" a substring.  
  await expect(page).toHaveTitle(/Playwright/);  
});  
  
  

test('get started link', async ({ page }) => {  
  await page.goto('https://playwright.dev/');  
  
  // Click the get started link.  
  await page.getByRole('link', { name: 'Get started' }).click();  
  
  // Expects page to have a heading with the name of Installation.  
  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();  
});  

```

--------------------------------

### browserType.launchServer

Source: https://playwright.dev/docs/api/class-browsertype

Documentation for the browserType.launchServer method, including its options and usage example.

```APIDOC
## browserType.launchServer

### Description
Launches a browser server that clients can connect to via `browserType.connect()`. Returns a browser app instance with a WebSocket endpoint for later connection.

### Method
launchServer

### Parameters
#### Options (all optional)
- **screen** (Object) - Optional - Emulates consistent window screen size. Contains `width` and `height` numbers. Only used when viewport is set.
- **serviceWorkers** ("allow" | "block") - Optional - Whether to allow sites to register Service Workers. Defaults to `'allow'`.
- **slowMo** (number) - Optional - Slows down Playwright operations by the specified amount of milliseconds.
- **strictSelectors** (boolean) - Optional - Enables strict selectors mode for this context. Defaults to `false`.
- **timeout** (number) - Optional - Maximum time in milliseconds to wait for the browser instance to start. Defaults to `30000` (30 seconds). Pass `0` to disable timeout.
- **timezoneId** (string) - Optional - Changes the timezone of the context. Defaults to the system timezone.
- **tracesDir** (string) - Optional - If specified, traces are saved into this directory.
- **userAgent** (string) - Optional - Specific user agent to use in this context.
- **viewport** (null | Object) - Optional - Emulates consistent viewport for each page. Defaults to 1280x720. Use `null` to disable. Contains `width` and `height` numbers.

### Returns
- **Promise<BrowserContext>** - A promise that resolves to a browser context.

### Usage Example
```javascript
const { chromium } = require('playwright');  // Or 'webkit' or 'firefox'.

(async () => {
  const browserServer = await chromium.launchServer();
  const wsEndpoint = browserServer.wsEndpoint();
  // Use web socket endpoint later to establish a connection.
  const browser = await chromium.connect(wsEndpoint);
  // Close browser instance.
  await browserServer.close();
})();
```
```

--------------------------------

### waitForSelector usage example

Source: https://playwright.dev/docs/api/class-elementhandle

Waits for a selector relative to an element handle. The example sets page content, gets a div element handle, then waits for a span selector with state 'attached'. This method is discouraged; use locator.waitFor() instead.

```javascript
await page.setContent(`<div><span></span></div>`);  

const div = await page.$('div');  

// Waiting for the 'span' selector relative to the div.  

const span = await div.waitForSelector('span', { state: 'attached' });  

```

--------------------------------

### Install Playwright skills with npx playwright init-skills

Source: https://playwright.dev/docs/test-components

Run this command to install the Playwright agent skills, which include the component testing skill. This is the first step to set up the gallery automatically.

```bash
npx playwright init-skills  
```

--------------------------------

### Record video with page.screencast.start()

Source: https://playwright.dev/docs/api/class-screencast

Starts a screencast that records video to a file. The path option specifies the output file, and size sets the maximum frame dimensions. The recording is stopped with screencast.stop().

```javascript
// Record video  

await page.screencast.start({ path: 'video.webm', size: { width: 1280, height: 800 } });  

// ... perform actions ...  

await page.screencast.stop();  


```

--------------------------------

### Authenticate multiple roles in setup project

Source: https://playwright.dev/docs/auth

Setup project that authenticates two roles (admin and user) and saves their storage states to separate files. Replace the login steps with your own. The setup waits for the final URL and a visible button to ensure cookies are set before saving the storage state.

```typescript
import { test as setup, expect } from '@playwright/test';  

const adminFile = 'playwright/.auth/admin.json';  

setup('authenticate as admin', async ({ page }) => {  
  // Perform authentication steps. Replace these actions with your own.  
  await page.goto('https://github.com/login');  
  await page.getByLabel('Username or email address').fill('admin');  
  await page.getByLabel('Password').fill('password');  
  await page.getByRole('button', { name: 'Sign in' }).click();  
  // Wait until the page receives the cookies.  
  //  
  // Sometimes login flow sets cookies in the process of several redirects.  
  // Wait for the final URL to ensure that the cookies are actually set.  
  await page.waitForURL('https://github.com/');  
  // Alternatively, you can wait until the page reaches a state where all cookies are set.  
  await expect(page.getByRole('button', { name: 'View profile and more' })).toBeVisible();  

  // End of authentication steps.  

  await page.context().storageState({ path: adminFile });  
});  

const userFile = 'playwright/.auth/user.json';  

setup('authenticate as user', async ({ page }) => {  
  // Perform authentication steps. Replace these actions with your own.  
  await page.goto('https://github.com/login');  
  await page.getByLabel('Username or email address').fill('user');  
  await page.getByLabel('Password').fill('password');  
  await page.getByRole('button', { name: 'Sign in' }).click();  
  // Wait until the page receives the cookies.  
  //  
  // Sometimes login flow sets cookies in the process of several redirects.  
  // Wait for the final URL to ensure that the cookies are actually set.  
  await page.waitForURL('https://github.com/');  
  // Alternatively, you can wait until the page reaches a state where all cookies are set.  
  await expect(page.getByRole('button', { name: 'View profile and more' })).toBeVisible();  

  // End of authentication steps.  

  await page.context().storageState({ path: userFile });  
});  

```

--------------------------------

### Test with toBeOK assertion

Source: https://playwright.dev/docs/api/class-apiresponseassertions

Example test that performs a GET request and asserts the response is OK using the toBeOK assertion.

```typescript
import { test, expect } from '@playwright/test';  

  

test('navigates to login', async ({ page }) => {  
  // ...  
  const response = await page.request.get('https://playwright.dev');  
  await expect(response).toBeOK();  
});  

```

--------------------------------

### Launch web server with webServer config

Source: https://playwright.dev/docs/release-notes

Configure a web server to launch before tests. The server waits for the given URL to be available, and the URL is passed as `baseURL` when creating a context.

```typescript
import { defineConfig } from '@playwright/test';  

export default defineConfig({  

  webServer: {  

    command: 'npm run start', // command to launch  

    url: 'http://127.0.0.1:3000', // url to await for  

    timeout: 120 * 1000,  

    reuseExistingServer: !process.env.CI,  

  },  

});  

```

--------------------------------

### Playwright test command examples

Source: https://playwright.dev/docs/test-cli

Examples of running Playwright tests with various filters and options, including running all tests, a single file, a folder, a specific line, by title with -g, headed mode, a specific project, and getting help.

```shell
# Run all tests

npx playwright test
  

# Run a single test file

npx playwright test tests/todo-page.spec.ts
  

# Run a set of test files

npx playwright test tests/todo-page/ tests/landing-page/
  

# Run tests at a specific line

npx playwright test my-spec.ts:42
  

# Run tests by title

npx playwright test -g "add a todo item"
  

# Run tests in headed browsers

npx playwright test --headed
  

# Run tests for a specific project

npx playwright test --project=chromium
  

# Get help

npx playwright test --help

```

--------------------------------

### Seed and install a WebAuthn passkey with context.credentials

Source: https://playwright.dev/docs/release-notes

Registers a passkey for a test user and installs it so the page's navigator.credentials.get() ceremony is answered without a real hardware key. Works in all browsers via the new Credentials virtual authenticator.

```javascript
const context = await browser.newContext();  

// Seed a passkey your backend provisioned for a test user.  
await context.credentials.create('example.com', {  
  id: credentialId,  
  userHandle,  
  privateKey,  
  publicKey,  
});  
await context.credentials.install();  

const page = await context.newPage();  
await page.goto('https://example.com/login');  
// The page's navigator.credentials.get() is answered with the seeded passkey.  
```

--------------------------------

### Use playwright-cli without skills

Source: https://playwright.dev/docs/getting-started-cli

Example prompts for using playwright-cli without installed skills, letting the agent discover commands on its own.

```text
Test the "add todo" flow on https://demo.playwright.dev/todomvc using playwright-cli.  

Check playwright-cli --help for available commands.  

```

--------------------------------

### open

Source: https://playwright.dev/docs/api/class-androiddevice

Launches a process in the shell on the device and returns a socket to communicate with the launched process.

```APIDOC
## open

### Description
Launches a process in the shell on the device and returns a socket to communicate with the launched process.

### Method
open

### Endpoint
androidDevice.open(command)

### Parameters
#### Arguments
- **command** (string) - Required - Shell command to execute.

### Returns
Promise<AndroidSocket>
```

--------------------------------

### electronApplication.firstWindow(options?)

Source: https://playwright.dev/docs/api/class-electronapplication

Waits for the first application window to be opened and returns it.

```APIDOC
## electronApplication.firstWindow(options?)

### Description
Convenience method that waits for the first application window to be opened.

### Method
firstWindow

### Arguments
- **options** (Object) - Optional
  - **timeout** (number) - Optional - Maximum time to wait in milliseconds. Defaults to 30000 (30 seconds). Pass 0 to disable timeout.

### Returns
- Promise<Page>
```

--------------------------------

### Create a browser context with device emulation (Library)

Source: https://playwright.dev/docs/emulation

In the library API, use the devices registry to create a new browser context with device parameters. The example launches Chromium and spreads the 'iPhone 13' device parameters into the context options.

```JavaScript
const { chromium, devices } = require('playwright');  
const browser = await chromium.launch();  

const iphone13 = devices['iPhone 13'];  
const context = await browser.newContext({  
  ...iphone13,  
});  
```

--------------------------------

### Stop tracing and get trace data

Source: https://playwright.dev/docs/api/class-browser

Stops tracing and returns a buffer with the trace data. This is typically used after starting tracing with browser.startTracing().

```javascript
await browser.stopTracing();  

```

--------------------------------

### ElectronApplication

Source: https://playwright.dev/docs/api/class-electronapplication

Documentation for the ElectronApplication class, including its methods and a usage example.

```APIDOC
## ElectronApplication

### Description
Represents an Electron application instance. Obtained via `electron.launch()`. Provides methods to control the main Electron process and interact with Electron windows.

### Methods

#### evaluate(pageFunction, arg)
- **pageFunction** (function|string) - Required - Function to be evaluated in the main Electron process. The function receives an object with the `app` property (the result of `require('electron')`).
- **arg** (any) - Optional - Argument to pass to the function.
- **Returns**: Promise<any> - The result of the evaluation.

#### firstWindow()
- **Returns**: Promise<Page> - The first window that the app opens, waiting if necessary.

#### close()
- **Returns**: Promise<void> - Closes the Electron application.

### Example
```javascript
const { _electron: electron } = require('playwright');

(async () => {
  // Launch Electron app.
  const electronApp = await electron.launch({ args: ['main.js'] });

  // Evaluation expression in the Electron context.
  const appPath = await electronApp.evaluate(async ({ app }) => {
    // This runs in the main Electron process, parameter here is always
    // the result of the require('electron') in the main app script.
    return app.getAppPath();
  });
  console.log(appPath);

  // Get the first window that the app opens, wait if necessary.
  const window = await electronApp.firstWindow();
  // Print the title.
  console.log(await window.title());
  // Capture a screenshot.
  await window.screenshot({ path: 'intro.png' });
  // Direct Electron console to Node terminal.
  window.on('console', console.log);
  // Click button.
  await window.click('text=Click me');
  // Exit app.
  await electronApp.close();
})();
```
```

--------------------------------

### Evaluate in the page with locator.evaluateAll

Source: https://playwright.dev/docs/locators

The code inside locator.evaluateAll() runs in the page, you can call any DOM apis there. This example gets the text content of all list items.

```javascript
const rows = page.getByRole('listitem');  

const texts = await rows.evaluateAll(  

    list => list.map(element => element.textContent));  
```

--------------------------------

### on('download')

Source: https://playwright.dev/docs/api/class-page

Event emitted when a download starts.

```APIDOC
## on('download')

### Description
Emitted when attachment download started. User can access basic file operations on downloaded content via the passed Download instance.

### Event Data
- **Download** - The download object.

### Usage
```javascript
page.on('download', data => {});
```
```

--------------------------------

### Get a specific item by text with getByText

Source: https://playwright.dev/docs/locators

Use the page.getByText() method to locate an element in a list by its text content and then click on it. The DOM structure is the same as the previous example.

```html
<ul>  

  <li>apple</li>  

  <li>banana</li>  

  <li>orange</li>  

</ul>  
```

```javascript
await page.getByText('orange').click();  
```

--------------------------------

### request.redirectedFrom() usage with redirect

Source: https://playwright.dev/docs/api/class-request

Shows how to get the original request URL after a redirect. The example navigates to http://example.com and logs the redirectedFrom URL, which is 'http://example.com'.

```javascript
const response = await page.goto('http://example.com');  

console.log(response.request().redirectedFrom().url()); // 'http://example.com'  
```
Tokens:
Raw