Playwright

https://github.com/microsoft/playwright
Admin
Playwright is a framework for Web Testing and Automation, enabling cross-browser testing of...
Tokens:1,246,545
Snippets:9,947
Trust Score:9.9
License:Apache-2.0
Update:6 hours ago
Show doc for...
Tokens:
Raw
### Install browsers and dependencies using playwright install

Source: https://github.com/microsoft/playwright/blob/main/docs/src/test-cli-js.md

Examples for installing all supported browsers, specific browsers like Chromium or WebKit, and installing browsers alongside required OS 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
```

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

### Install Firefox beta and run BiDi tests with BIDI_FFPATH

Source: https://github.com/microsoft/playwright/blob/main/tests/bidi/README.md

Installs the Firefox beta channel in the project root and executes the BiDi test suite against the installed custom binary path.

```sh
npx -y @puppeteer/browsers install firefox@beta
```

```sh
BIDI_FFPATH='/Users/myself/playwright/firefox/mac_arm-beta_138.0b5/Firefox.app/Contents/MacOS/firefox' npm run biditest -- --project='moz-firefox-*'
```

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

### Control time with page.clock.install, pause_at, and fast_forward

Source: https://github.com/microsoft/playwright/blob/main/docs/src/release-notes-python.md

Use the Clock API to install a fixed time, pause at a specific moment, and fast-forward. This example verifies time-related behavior by asserting the displayed time.

```python
# Initialize clock with some time before the test time and let the page load
# naturally. `Date.now` will progress as the timers fire.
page.clock.install(time=datetime.datetime(2024, 2, 2, 8, 0, 0))
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.
page.clock.pause_at(datetime.datetime(2024, 2, 2, 10, 0, 0))

# Assert the page state.
expect(page.get_by_test_id("current-time")).to_have_text("2/2/2024, 10:00:00 AM")

# Close the laptop lid again and open it at 10:30am.
page.clock.fast_forward("30:00")
expect(page.get_by_test_id("current-time")).to_have_text("2/2/2024, 10:30:00 AM")
```

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

### Capture trace on failures during global setup

Source: https://github.com/microsoft/playwright/blob/main/docs/src/test-global-setup-teardown-js.md

Wraps globalSetup actions in a try...catch block to start and stop Playwright tracing, ensuring failed setups save a trace file before throwing.

```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;
```

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

### List supported browsers using Python CLI

Source: https://github.com/microsoft/playwright/blob/main/docs/src/browsers.md

Run the install command with the --help flag to view all supported browser installation options.

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

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

### List supported browsers using Node.js CLI

Source: https://github.com/microsoft/playwright/blob/main/docs/src/browsers.md

Run the install command with the --help flag to view all supported browser installation options.

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

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

### Install a different .NET SDK version using dotnet-install.sh

Source: https://github.com/microsoft/playwright/blob/main/docs/src/docker.md

Uses the official .NET install script to install a specified .NET SDK channel into `/usr/share/dotnet`.

```bash
curl -sSL https://dot.net/v1/dotnet-install.sh | bash /dev/stdin --install-dir /usr/share/dotnet --channel 9.0

```

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

### Setup and teardown with autouse fixtures in test_example.py

Source: https://github.com/microsoft/playwright/blob/main/docs/src/writing-tests-python.md

Defines a function-scoped autouse fixture that runs setup before each test and teardown after each test.

```python
import pytest
from playwright.sync_api import Page, expect

@pytest.fixture(scope="function", autouse=True)
def before_each_after_each(page: Page):
    
    print("before the test runs")

    # Go to the starting url before each test.
    page.goto("https://playwright.dev/")
    yield
    
    print("after the test runs")

def test_main_navigation(page: Page):
    # Assertions use the expect API.
    expect(page).to_have_url("https://playwright.dev/")
```

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

### Record trace in NUnit using BrowserContext.Tracing

Source: https://github.com/microsoft/playwright/blob/main/docs/src/trace-viewer-intro-csharp.md

Start tracing in the SetUp hook with screenshots, snapshots, and sources enabled, and save the trace file in TearDown.

```csharp
namespace PlaywrightTests;

[Parallelizable(ParallelScope.Self)]
[TestFixture]
public class Tests : PageTest
{
    [SetUp]
    public async Task Setup()
    {
        await Context.Tracing.StartAsync(new()
        {
            Title = $"{TestContext.CurrentContext.Test.ClassName}.{TestContext.CurrentContext.Test.Name}",
            Screenshots = true,
            Snapshots = true,
            Sources = true
        });
    }

    [TearDown]
    public async Task TearDown()
    {
        await Context.Tracing.StopAsync(new()
        {
            Path = Path.Combine(
                TestContext.CurrentContext.WorkDirectory,
                "playwright-traces",
                $"{TestContext.CurrentContext.Test.ClassName}.{TestContext.CurrentContext.Test.Name}.zip"
            )
        });
    }

    [Test]
    public async Task GetStartedLink()
    {
        // ..
    }
}
```

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

### Define setup project in playwright.config.ts

Source: https://github.com/microsoft/playwright/blob/main/docs/src/test-global-setup-teardown-js.md

Configure a setup project matching the setup test file using testMatch in the Playwright configuration.

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

export default defineConfig({
  testDir: './tests',
  // ...
  projects: [
    {
      name: 'setup db',
      testMatch: /global\.setup\.ts/,
    },
    // {
    //   other project
    // }
  ]
});
```

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

### Set up WebView2Test base class and example test in C#

Source: https://github.com/microsoft/playwright/blob/main/docs/src/webview2.md

Defines a custom Playwright test fixture that launches the WebView2 executable with CDP debugging enabled and connects to it, followed by an example test class inheriting from it. Use this setup to automate and assert against WebView2 desktop applications in .NET.

```csharp
using System.Diagnostics;
using Microsoft.Playwright;
using Microsoft.Playwright.Xunit.v3;

namespace PlaywrightTests;

public class WebView2Test : PlaywrightTest
{
    public IBrowser Browser { get; internal set; } = null!;
    public IBrowserContext Context { get; internal set; } = null!;
    public IPage Page { get; internal set; } = null!;
    private Process? _webView2Process = null;
    private string _userDataDir = null!;
    private string _executablePath = Path.Join(Directory.GetCurrentDirectory(), @"..\..\..\..\webview2-app\bin\Debug\net8.0-windows\webview2.exe");

    public override async Task InitializeAsync()
    {
        await base.InitializeAsync();
        var cdpPort = 10000 + WorkerIndex;
        Assert.True(File.Exists(_executablePath), "Make sure that the executable exists");
        _userDataDir = Path.Join(Path.GetTempPath(), $"playwright-webview2-tests/user-data-dir-{WorkerIndex}");
        // WebView2 does some lazy cleanups on shutdown so we can't clean it up after each test
        if (Directory.Exists(_userDataDir))
        {
            Directory.Delete(_userDataDir, true);
        }
        _webView2Process = Process.Start(new ProcessStartInfo(_executablePath)
        {
            EnvironmentVariables =
        {
            ["WEBVIEW2_ADDITIONAL_BROWSER_ARGUMENTS"] = $"--remote-debugging-port={cdpPort}",
            ["WEBVIEW2_USER_DATA_FOLDER"] = _userDataDir,
        },
            RedirectStandardOutput = true,
        });
        while (!_webView2Process!.HasExited)
        {
            var output = await _webView2Process!.StandardOutput.ReadLineAsync();
            if (_webView2Process!.HasExited)
            {
                throw new Exception("WebView2 process exited unexpectedly");
            }
            if (output != null && output.Contains("WebView2 initialized"))
            {
                break;
            }
        }
        var cdpAddress = $"http://127.0.0.1:{cdpPort}";
        Browser = await Playwright.Chromium.ConnectOverCDPAsync(cdpAddress);
        Context = Browser.Contexts[0];
        Page = Context.Pages[0];
    }

    public override async Task DisposeAsync()
    {
        _webView2Process!.Kill(true);
        await Browser.CloseAsync();
        await base.DisposeAsync();
    }
}
```

```csharp
using Microsoft.Playwright;
using Microsoft.Playwright.Xunit.v3;

namespace PlaywrightTests;

public class ExampleTest : WebView2Test
{
    [Fact]
    public async Task HomepageHasPlaywrightInTitleAndGetStartedLinkLinkingtoTheIntroPage()
    {
        await Page.GotoAsync("https://playwright.dev");
        var getStarted = Page.GetByText("Get Started");
        await Expect(getStarted).ToBeVisibleAsync();
    }
}
```

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

### Install dependencies and run build in watch mode

Source: https://github.com/microsoft/playwright/blob/main/CONTRIBUTING.md

Install clean dependencies via npm ci, run the continuous watch build, and install required browsers. Note that watch mode automatically regenerates certain files.

```bash
npm ci
npm run watch
npx playwright install
```

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

### List supported browsers using PowerShell (.NET)

Source: https://github.com/microsoft/playwright/blob/main/docs/src/browsers.md

Run the PowerShell install script with the --help flag to view all supported browser installation options.

```bash
pwsh bin/Debug/netX/playwright.ps1 install --help
```

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

### Install default browsers using Node.js CLI

Source: https://github.com/microsoft/playwright/blob/main/docs/src/browsers.md

Run the install command without arguments to download the default set of supported browser binaries.

```bash
npx playwright install
```

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

### Authenticate multiple roles in setup and apply via test.use

Source: https://github.com/microsoft/playwright/blob/main/docs/src/auth.md

Use when you have multiple roles across tests and accounts can be reused. Authenticate each role in the setup project to generate storage state JSON files, then set storageState on test files or describe blocks instead of the global config.

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

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

test.use({ storageState: 'playwright/.auth/admin.json' });

test('admin test', async ({ page }) => {
  // page is authenticated as admin
});

test.describe(() => {
  test.use({ storageState: 'playwright/.auth/user.json' });

  test('user test', async ({ page }) => {
    // page is authenticated as a user
  });
});
```

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

### Quick start with playwright-cli

Source: https://github.com/microsoft/playwright/blob/main/packages/playwright-core/src/tools/skills/playwright-cli/SKILL.md

Demonstrates opening a browser, navigating to a page, interacting with elements using snapshot references, taking a screenshot, and closing the browser.

```bash
# open new browser
playwright-cli open
# navigate to a page
playwright-cli goto https://playwright.dev
# interact with the page using refs from the snapshot
playwright-cli click e15
playwright-cli type "page.click"
playwright-cli press Enter
# take a screenshot (rarely used, as snapshot is more common)
playwright-cli screenshot
# close the browser
playwright-cli close
```

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

### Start seed test and attach playwright-cli

Source: https://github.com/microsoft/playwright/blob/main/packages/playwright-core/src/tools/skills/playwright-cli/references/test-generation.md

Starts the Playwright test seed in background debug mode and attaches playwright-cli to the active session. Always run scenarios sequentially through the test seed to preserve setup state.

```bash
PLAYWRIGHT_HTML_OPEN=never npx playwright test <seed-file> --debug=cli   # background
playwright-cli attach tw-XXXX
# resume
```

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

### Install Playwright with uv

Source: https://github.com/microsoft/playwright/blob/main/docs/src/library-python.md

Updates uv, adds Playwright to the environment, and installs the required browser binaries.

```bash
uv self update
uv add playwright
playwright install
```

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

### Credentials.install

Source: https://github.com/microsoft/playwright/blob/main/docs/src/api/class-credentials.md

Installs the virtual authenticator into the browser context. After installation, the page's WebAuthn API calls (navigator.credentials.create() and navigator.credentials.get()) will be handled by the virtual authenticator using the stored credentials.

```APIDOC
## Credentials.install

### Description
Installs the virtual authenticator into the browser context. Once installed, WebAuthn ceremonies in the page will be answered using the credentials managed by this instance.

### Method
`install`

### Parameters
None.

### Returns
- Promise<void> - Resolves when the authenticator is installed.

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

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

### Create a page, navigate, and take a screenshot

Source: https://github.com/microsoft/playwright/blob/main/docs/src/api/class-page.md

This example launches a WebKit browser, creates a new context and page, navigates to 'https://example.com', and saves a screenshot as 'screenshot.png'. It demonstrates the basic workflow for interacting with a page.

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

```java
import com.microsoft.playwright.*;

public class Example {
  public static void main(String[] args) {
    try (Playwright playwright = Playwright.create()) {
      BrowserType webkit = playwright.webkit();
      Browser browser = webkit.launch();
      BrowserContext context = browser.newContext();
      Page page = context.newPage();
      page.navigate("https://example.com");
      page.screenshot(new Page.ScreenshotOptions().setPath(Paths.get("screenshot.png")));
      browser.close();
    }
  }
}
```

```python
import asyncio
from playwright.async_api import async_playwright, Playwright

async def run(playwright: Playwright):
    webkit = playwright.webkit
    browser = await webkit.launch()
    context = await browser.new_context()
    page = await context.new_page()
    await page.goto("https://example.com")
    await page.screenshot(path="screenshot.png")
    await browser.close()

async def main():
    async with async_playwright() as playwright:
        await run(playwright)
asyncio.run(main())
```

```python
from playwright.sync_api import sync_playwright, Playwright

def run(playwright: Playwright):
    webkit = playwright.webkit
    browser = webkit.launch()
    context = browser.new_context()
    page = context.new_page()
    page.goto("https://example.com")
    page.screenshot(path="screenshot.png")
    browser.close()

with sync_playwright() as playwright:
    run(playwright)
```

```csharp
using Microsoft.Playwright;
using System.Threading.Tasks;

class PageExamples
{
    public static async Task Run()
    {
        using var playwright = await Playwright.CreateAsync();
        await using var browser = await playwright.Webkit.LaunchAsync();
        var page = await browser.NewPageAsync();
        await page.GotoAsync("https://www.theverge.com");
        await page.ScreenshotAsync(new() { Path = "theverge.png" });
    }
}
```

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

### Credentials.InstallAsync

Source: https://github.com/microsoft/playwright/blob/main/docs/src/api/class-credentials.md

Installs the created credentials into the browser context, making them available for passkey authentication flows such as navigator.credentials.get().

```APIDOC
## Credentials.InstallAsync

### Description
Installs the credentials created via `Credentials.CreateAsync()` into the browser context. After installation, the virtual authenticator is active and passkey operations will resolve using the installed credentials.

### Method
`InstallAsync`

### Parameters
None.

### Example
```csharp
await context.Credentials.InstallAsync();
```
```

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

### Managing setup and teardown without fixtures using hooks and Page Object Model

Source: https://github.com/microsoft/playwright/blob/main/docs/src/test-fixtures-js.md

Illustrates the traditional approach to test environment setup using `beforeEach` and `afterEach` lifecycle hooks with a `TodoPage` Page Object Model class (`todo-page.ts` and `todo.spec.ts`).

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

export class TodoPage {
  private readonly inputBox: Locator;
  private readonly todoItems: Locator;

  constructor(public readonly page: Page) {
    this.inputBox = this.page.locator('input.new-todo');
    this.todoItems = this.page.getByTestId('todo-item');
  }

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

  async addToDo(text: string) {
    await this.inputBox.fill(text);
    await this.inputBox.press('Enter');
  }

  async remove(text: string) {
    const todo = this.todoItems.filter({ hasText: text });
    await todo.hover();
    await todo.getByLabel('Delete').click();
  }

  async removeAll() {
    while ((await this.todoItems.count()) > 0) {
      await this.todoItems.first().hover();
      await this.todoItems.getByLabel('Delete').first().click();
    }
  }
}
```

```javascript
const { test } = require('@playwright/test');
const { TodoPage } = require('./todo-page');

test.describe('todo tests', () => {
  let todoPage;

  test.beforeEach(async ({ page }) => {
    todoPage = new TodoPage(page);
    await todoPage.goto();
    await todoPage.addToDo('item1');
    await todoPage.addToDo('item2');
  });

  test.afterEach(async () => {
    await todoPage.removeAll();
  });

  test('should add an item', async () => {
    await todoPage.addToDo('my item');
    // ...
  });

  test('should remove an item', async () => {
    await todoPage.remove('item1');
    // ...
  });
});
```

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

### Example file structure for snapshot path tokens

Source: https://github.com/microsoft/playwright/blob/main/docs/src/api/params.md

Shows a typical project layout with a config file and a test file, used to illustrate how tokens like {testFilePath} and {testFileDir} are resolved.

```text
playwright.config.ts
tests/
└── page/
    └── page-click.spec.ts
```

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

### Install browsers in CI configuration

Source: https://github.com/microsoft/playwright/blob/main/docs/src/release-notes-js.md

Run `npx playwright install --with-deps` after `npm ci` to explicitly download browsers in CI pipelines. This migration is recommended starting in Playwright v1.38 when using the `playwright` package.

```yml
- run: npm ci
- run: npx playwright install --with-deps
```

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

### List supported browsers using Java CLI

Source: https://github.com/microsoft/playwright/blob/main/docs/src/browsers.md

Pass the --help flag via Maven CLI execution to view all supported browser installation options.

```bash
mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="install --help"
```

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

### Record user actions and generate tests with playwright codegen

Source: https://github.com/microsoft/playwright/blob/main/docs/src/test-cli-js.md

Examples demonstrating how to start recording with the interactive UI, target a specific URL, and generate test code for 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
```

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

### Default Playwright project scaffold

Source: https://github.com/microsoft/playwright/blob/main/docs/src/intro-js.md

Displays the files and directories created by Playwright upon installation, including the central configuration file and example tests.

```bash
playwright.config.ts         # Test configuration
package.json
package-lock.json            # Or yarn.lock / pnpm-lock.yaml
tests/
  example.spec.ts            # Minimal example test
```

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

### async method: Credentials.install

Source: https://github.com/microsoft/playwright/blob/main/docs/src/api/class-credentials.md

Installs the virtual WebAuthn authenticator into the context, overriding navigator.credentials.create() and navigator.credentials.get() in all current and future pages. Must be called before the page first touches navigator.credentials; until then no interception is in place and the page sees the platform's native (or absent) WebAuthn behaviour.

```APIDOC
## async method: 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
async method: Credentials.install

### Since
v1.61

### Parameters
None documented.

### Returns
None documented.
```

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

### Disposable.close

Source: https://github.com/microsoft/playwright/blob/main/docs/src/api/class-disposable.md

Removes the associated resource in Python. For example, removes an init script installed via Page.addInitScript or BrowserContext.addInitScript.

```APIDOC
## async method: Disposable.close()

* **Languages:** Python
* **Since:** v1.59

### Description
Removes the associated resource. For example, removes the init script installed via `Page.addInitScript` or `BrowserContext.addInitScript`.
```

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

### Initialize skills and prompt coding agent for component testing setup

Source: https://github.com/microsoft/playwright/blob/main/docs/src/test-components-js.md

Install Playwright skills and instruct your coding agent to set up component testing. The agent configures the gallery, Playwright config, and creates an initial story and test.

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

```txt
Set up component testing using the playwright-component-testing skill.
```

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

### Syntax for playwright install, install-deps, and uninstall

Source: https://github.com/microsoft/playwright/blob/main/docs/src/test-cli-js.md

Command syntax for installing browsers, installing system dependencies, and uninstalling browsers required by Playwright.

```bash
npx playwright install [options] [browser...]
npx playwright install-deps [options] [browser...]
npx playwright uninstall
```

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

### Seed and install a WebAuthn passkey

Source: https://github.com/microsoft/playwright/blob/main/docs/src/release-notes-python.md

Create a Credentials virtual authenticator via BrowserContext.Credentials, seed a passkey provisioned for a test user, and install it. The page's navigator.credentials.get() is then answered with the seeded passkey.

```csharp
var context = await browser.NewContextAsync();

// Seed a passkey your backend provisioned for a test user.
await context.Credentials.CreateAsync("example.com",
    id: credentialId,
    userHandle: userHandle,
    privateKey: privateKey,
    publicKey: publicKey
);
await context.Credentials.InstallAsync();

var page = await context.NewPageAsync();
await page.GotoAsync("https://example.com/login");
// The page's navigator.credentials.get() is answered with the seeded passkey.
```

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

### context.tracing.start

Source: https://github.com/microsoft/playwright/blob/main/docs/src/api/class-tracing.md

Starts recording a trace. Call this before performing actions you want captured in the trace. Options such as screenshots and snapshots can be enabled.

```APIDOC
## context.tracing.start

### Description
Starts recording a trace. Start recording a trace before performing actions so that browser operations and network activity are captured.

### Method
`context.tracing.start(options)`

### Parameters
- **screenshots** (boolean) - Optional - Whether to capture screenshots during tracing.
- **snapshots** (boolean) - Optional - Whether to capture DOM snapshots during tracing.

### Example
```js
const browser = await chromium.launch();
const context = await browser.newContext();
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' });
```
```

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

### Create console project and install Playwright dependencies

Source: https://github.com/microsoft/playwright/blob/main/docs/src/library-csharp.md

Initializes a new .NET console project, installs the Microsoft.Playwright package, builds the application, and downloads required browser binaries.

```bash
# Create project
dotnet new console -n PlaywrightDemo
cd PlaywrightDemo

# Add project dependency
dotnet add package Microsoft.Playwright
# Build the project
dotnet build
# Install required browsers - replace netX with actual output folder name, e.g. net8.0.
pwsh bin/Debug/netX/playwright.ps1 install

# If the pwsh command does not work (throws TypeNotFound), make sure to use an up-to-date version of PowerShell.
dotnet tool update --global PowerShell
```

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

### Disposable.dispose

Source: https://github.com/microsoft/playwright/blob/main/docs/src/api/class-disposable.md

Removes the associated resource in JavaScript. For example, removes an init script installed via Page.addInitScript or BrowserContext.addInitScript.

```APIDOC
## async method: Disposable.dispose()

* **Languages:** JavaScript
* **Since:** v1.59

### Description
Removes the associated resource. For example, removes the init script installed via `Page.addInitScript` or `BrowserContext.addInitScript`.
```

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

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

Source: https://github.com/microsoft/playwright/blob/main/docs/src/release-notes-java.md

Use the Credentials virtual authenticator to register passkeys and answer navigator.credentials.create()/get() ceremonies without real hardware, in all browsers. Seed a passkey your backend provisioned for a test user, then call install() before navigating.

```java
BrowserContext context = browser.newContext();

// Seed a passkey your backend provisioned for a test user.
context.credentials().create("example.com", new Credentials.CreateOptions()
    .setId(credentialId)
    .setUserHandle(userHandle)
    .setPrivateKey(privateKey)
    .setPublicKey(publicKey));
context.credentials().install();

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

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

### Start Selenium Hub and Node Docker containers

Source: https://github.com/microsoft/playwright/blob/main/docs/src/selenium-grid.md

Starts the Selenium Hub container and a Chromium node container configured with event bus ports and node grid URL pointing to the hub IP.

```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
```

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

### Capture a credential and save to file in JavaScript

Source: https://github.com/microsoft/playwright/blob/main/docs/src/api/class-credentials.md

In a setup test, let the app register a passkey, then read it back with context.credentials.get() and save it to a JSON file for reuse.

```javascript
// setup test: let the app register a passkey, then save the storage state with it.
const context = await browser.newContext();
await context.credentials.install();

const page = await context.newPage();
await page.goto('https://example.com/register');
await page.getByRole('button', { name: 'Create a passkey' }).click();

// Read back the passkey the page registered — it includes the private key.
const [credential] = await context.credentials.get({ rpId: 'example.com' });
fs.writeFileSync('playwright/.auth/passkey.json', JSON.stringify(credential));
```

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

### Bootstrap new Playwright project with npm

Source: https://github.com/microsoft/playwright/blob/main/packages/playwright-core/src/tools/skills/playwright-cli/references/test-generation.md

Initializes a new Playwright installation with default project settings when no existing installation is found in the workspace.

```bash
npm init playwright@latest
```

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

### Record trace in NUnit using BrowserContext.Tracing

Source: https://github.com/microsoft/playwright/blob/main/docs/src/trace-viewer.md

Configures trace recording in NUnit using [SetUp] to start tracing with screenshots, snapshots, and sources, and [TearDown] to save the resulting zip archive.

```csharp
namespace PlaywrightTests;

[Parallelizable(ParallelScope.Self)]
[TestFixture]
public class Tests : PageTest
{
    [SetUp]
    public async Task Setup()
    {
        await Context.Tracing.StartAsync(new()
        {
            Title = TestContext.CurrentContext.Test.ClassName + "." + TestContext.CurrentContext.Test.Name,
            Screenshots = true,
            Snapshots = true,
            Sources = true
        });
    }

    [TearDown]
    public async Task TearDown()
    {
        // This will produce e.g.:
        // bin/Debug/net8.0/playwright-traces/PlaywrightTests.Tests.Test1.zip
        await Context.Tracing.StopAsync(new()
        {
            Path = Path.Combine(
                TestContext.CurrentContext.WorkDirectory,
                "playwright-traces",
                $"{TestContext.CurrentContext.Test.ClassName}.{TestContext.CurrentContext.Test.Name}.zip"
            )
        });
    }

    [Test]
    public async Task TestYourOnlineShop()
    {
        // ..
    }
}
```

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

### Install playwright-cli globally

Source: https://github.com/microsoft/playwright/blob/main/docs/src/getting-started-cli.md

Installs the Playwright CLI tool globally using npm and verifies the installation with the help command.

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

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

### Install skills globally across projects

Source: https://github.com/microsoft/playwright/blob/main/docs/src/getting-started-cli.md

Installs skills into the home directory (~/.claude/skills or ~/.agents/skills) to share them across all projects.

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

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

### Convert FrameLocator to Locator with FrameLocator.Owner

Source: https://github.com/microsoft/playwright/blob/main/docs/src/release-notes-csharp.md

Use FrameLocator.Owner to get the iframe element as a Locator. The example checks that the iframe is visible.

```csharp
var frameLocator = page.FrameLocator("iframe[name='embedded']");
// ...
var locator = frameLocator.Owner;
await Expect(locator).ToBeVisibleAsync();
```

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

### Browser.disconnected

Source: https://github.com/microsoft/playwright/blob/main/docs/src/api/class-browser.md

Event emitted when the Browser gets disconnected from the browser application, for example because the browser application closed or crashed, or because Browser.close was called.

```APIDOC
## event: Browser.disconnected

### Description
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` method was called.

### Event
Browser.disconnected

### Parameters
- **browser** (Browser) - The browser that was disconnected.

### Since
v1.8
```

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

### Bind a browser with Browser.bind

Source: https://github.com/microsoft/playwright/blob/main/docs/src/release-notes-csharp.md

Start a browser and bind it to a session so other clients can connect. Use BindAsync with a session name and options like WorkspaceDir.

```csharp
var serverInfo = await browser.BindAsync("my-session", new() {
    WorkspaceDir = "/my/project",
});
```

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

### Seed a captured passkey with Credentials in JavaScript

Source: https://github.com/microsoft/playwright/blob/main/docs/src/api/class-credentials.md

Reads the saved passkey from playwright/.auth/passkey.json, creates it in the context, and installs credentials so navigator.credentials.get() resolves the captured passkey and the app starts already signed in.

```javascript
// later test: seed the captured passkey so the app starts already enrolled.
const credential = JSON.parse(fs.readFileSync('playwright/.auth/passkey.json', 'utf8'));
const context = await browser.newContext();
await context.credentials.create(credential.rpId, credential);
await context.credentials.install();

const page = await context.newPage();
await page.goto('https://example.com/login');
// navigator.credentials.get() resolves the captured passkey — already signed in.
```

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

### Complete GitHub API testing example with Playwright in C#

Source: https://github.com/microsoft/playwright/blob/main/docs/src/api-testing-csharp.md

Sets up an IAPIRequestContext with GitHub API headers and credentials in InitializeAsync, manages test repository lifecycle, and validates issue creation via GET and POST requests.

```csharp
using System.Text.Json;
using Microsoft.Playwright;
using Microsoft.Playwright.Xunit.v3;

namespace PlaywrightTests;

public class TestGitHubAPI : PlaywrightTest
{
    static string REPO = "test-repo-2";
    static string USER = Environment.GetEnvironmentVariable("GITHUB_USER");
    static string? API_TOKEN = Environment.GetEnvironmentVariable("GITHUB_API_TOKEN");

    private IAPIRequestContext Request = null!;

    [Fact]
    public async Task ShouldCreateBugReport()
    {
        var data = new Dictionary<string, string>
        {
            { "title", "[Bug] report 1" },
            { "body", "Bug description" }
        };
        var newIssue = await Request.PostAsync("/repos/" + USER + "/" + REPO + "/issues", new() { DataObject = data });
        await Expect(newIssue).ToBeOKAsync();

        var issues = await Request.GetAsync("/repos/" + USER + "/" + REPO + "/issues");
        await Expect(newIssue).ToBeOKAsync();
        var issuesJsonResponse = await issues.JsonAsync();
        JsonElement? issue = null;
        foreach (JsonElement issueObj in issuesJsonResponse?.EnumerateArray())
        {
            if (issueObj.TryGetProperty("title", out var title) == true)
            {
                if (title.GetString() == "[Bug] report 1")
                {
                    issue = issueObj;
                }
            }
        }
        Assert.NotNull(issue);
        Assert.Equal("Bug description", issue?.GetProperty("body").GetString());
    }

    [Fact]
    public async Task ShouldCreateFeatureRequests()
    {
        var data = new Dictionary<string, string>
        {
            { "title", "[Feature] request 1" },
            { "body", "Feature description" }
        };
        var newIssue = await Request.PostAsync("/repos/" + USER + "/" + REPO + "/issues", new() { DataObject = data });
        await Expect(newIssue).ToBeOKAsync();

        var issues = await Request.GetAsync("/repos/" + USER + "/" + REPO + "/issues");
        await Expect(newIssue).ToBeOKAsync();
        var issuesJsonResponse = await issues.JsonAsync();

        JsonElement? issue = null;
        foreach (JsonElement issueObj in issuesJsonResponse?.EnumerateArray())
        {
            if (issueObj.TryGetProperty("title", out var title) == true)
            {
                if (title.GetString() == "[Feature] request 1")
                {
                    issue = issueObj;
                }
            }
        }
        Assert.NotNull(issue);
        Assert.Equal("Feature description", issue?.GetProperty("body").GetString());
    }

    public override async Task InitializeAsync()
    {
        await base.InitializeAsync();
        await CreateAPIRequestContext();
        await CreateTestRepository();
    }

    private async Task CreateAPIRequestContext()
    {
        var headers = new Dictionary<string, string>
        {
            // We set this header per GitHub guidelines.
            { "Accept", "application/vnd.github.v3+json" },
            // Add authorization token to all requests.
            // Assuming personal access token available in the environment.
            { "Authorization", "token " + API_TOKEN }
        };

        Request = await Playwright.APIRequest.NewContextAsync(new()
        {
            // All requests we send go to this API endpoint.
            BaseURL = "https://api.github.com",
            ExtraHTTPHeaders = headers,
        });
    }

    private async Task CreateTestRepository()
    {
        var resp = await Request.PostAsync("/user/repos", new()
        {
            DataObject = new Dictionary<string, string>()
            {
                ["name"] = REPO,
            },
        });
        await Expect(resp).ToBeOKAsync();
    }

    public override async Task DisposeAsync()
    {
        await DeleteTestRepository();
        await Request.DisposeAsync();
        await base.DisposeAsync();
    }

    private async Task DeleteTestRepository()
    {
        var resp = await Request.DeleteAsync("/repos/" + USER + "/" + REPO);
        await Expect(resp).ToBeOKAsync();
    }
}
```

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

### Install default browsers using Python CLI

Source: https://github.com/microsoft/playwright/blob/main/docs/src/browsers.md

Run the Playwright install command to download the default set of supported browser binaries.

```bash
playwright install
```

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

### Iterate all matching elements with Locator.all

Source: https://github.com/microsoft/playwright/blob/main/docs/src/release-notes-python.md

Use Locator.all to get every element matching a locator and act on each one. The example checks all checkboxes returned by get_by_role.

```python
# Check all checkboxes!
checkboxes = page.get_by_role("checkbox")
for checkbox in checkboxes.all():
  checkbox.check()
```

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

### Screencast.start

Source: https://github.com/microsoft/playwright/blob/main/docs/src/api/class-screencast.md

Starts the screencast. When 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. Returns a Disposable.

```APIDOC
## Screencast.start

### Description

Starts the screencast. When `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

`async method: Screencast.start`

### Parameters

#### Options

- **fps** (int) - Optional - Frame rate of the video recording in frames per second. Only used together with `path`. Defaults to `25`.
- **onFrame** (function) - Optional - Callback that receives JPEG-encoded frame data along with the page viewport size at the time of capture. The callback receives an object with:
  - **data** (Buffer) - JPEG-encoded frame data.
  - **timestamp** (float) - The timestamp of when the frame was presented by the browser, in milliseconds since the Unix epoch.
  - **viewportWidth** (int) - Width of the page viewport at the time the frame was captured.
  - **viewportHeight** (int) - Height of the page viewport at the time the frame was captured.
- **path** (path) - Optional - Path where the video should be saved when the screencast is stopped. When provided, video recording is started.
- **quality** (int) - 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, the existing configuration takes precedence. If not specified, the size will be equal to page viewport scaled down to fit into 800×800.
  - **width** (int) - Max frame width in pixels.
  - **height** (int) - Max frame height in pixels.

### Returns

- **Disposable** - A disposable object to manage the screencast session.

### Example

```js
// Record video
await page.screencast.start({ path: 'video.webm', size: { width: 1280, height: 800 } });
// ... perform actions ...
await page.screencast.stop();
```

```js
// 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 },
});
// ... perform actions ...
await page.screencast.stop();
```
```

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

### Capture ARIA snapshot of a link element

Source: https://github.com/microsoft/playwright/blob/main/docs/src/api/class-locator.md

Use ariaSnapshot() on a locator to get the ARIA snapshot of the matched element. The example uses getByRole to locate a link.

```javascript
await page.getByRole('link').ariaSnapshot();
```

```java
page.getByRole(AriaRole.LINK).ariaSnapshot();
```

```python
await page.get_by_role("link").aria_snapshot()
```

```python
page.get_by_role("link").aria_snapshot()
```

```csharp
await page.GetByRole(AriaRole.Link).AriaSnapshotAsync();
```

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

### Set up and tear down repositories with beforeAll and afterAll

Source: https://github.com/microsoft/playwright/blob/main/docs/src/api-testing-js.md

Creates a repository before running tests and deletes it afterwards using test.beforeAll and test.afterAll hooks with the request fixture.

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

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

### Start Screencast and Save Video to File

Source: https://github.com/microsoft/playwright/blob/main/docs/src/api/class-screencast.md

Starts a screencast that records video to the specified file path. Call stop() to finalize the recording.

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

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

### Set viewport size in Python (async)

Source: https://github.com/microsoft/playwright/blob/main/docs/src/api/class-page.md

Creates a new page, sets its viewport to 640x480, and navigates to example.com. Use this to ensure the page loads with the desired viewport size.

```python
page = await browser.new_page()
await page.set_viewport_size({"width": 640, "height": 480})
await page.goto("https://example.com")
```

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

### Start and stop tracing in Java

Source: https://github.com/microsoft/playwright/blob/main/docs/src/api/class-tracing.md

Launch Chromium, start tracing with screenshots and snapshots via Tracing.StartOptions, navigate to playwright.dev, then stop tracing with Tracing.StopOptions and save to trace.zip.

```java
Browser browser = chromium.launch();
BrowserContext context = browser.newContext();
context.tracing().start(new Tracing.StartOptions()
  .setScreenshots(true)
  .setSnapshots(true));
Page page = context.newPage();
page.navigate("https://playwright.dev");
context.tracing().stop(new Tracing.StopOptions()
  .setPath(Paths.get("trace.zip")));
```

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

### Get FrameLocator from Locator using ContentFrame in C#

Source: https://github.com/microsoft/playwright/blob/main/docs/src/api/class-locator.md

Use when you have a Locator for an iframe and need to interact with its content. The example locates an iframe by name and clicks a button inside the frame.

```csharp
var locator = Page.Locator("iframe[name=\"embedded\"]");
// ...
var frameLocator = locator.ContentFrame;
await frameLocator.GetByRole(AriaRole.Button).ClickAsync();
```

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

### Install Playwright browser dependencies in C#

Source: https://github.com/microsoft/playwright/blob/main/docs/src/ci.md

Builds the .NET project and runs the Playwright PowerShell installation script to set up browser dependencies.

```bash
dotnet build
pwsh bin/Debug/netX/playwright.ps1 install --with-deps
```

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

### Install only Chromium headless shell in C#

Source: https://github.com/microsoft/playwright/blob/main/docs/src/browsers.md

Executes the PowerShell installation script in .NET to install only the headless shell and required dependencies.

```bash
# only running tests headlessly
pwsh bin/Debug/netX/playwright.ps1 install --with-deps --only-shell
```

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

### Get FrameLocator from Locator using contentFrame in Java

Source: https://github.com/microsoft/playwright/blob/main/docs/src/api/class-locator.md

Use when you have a Locator for an iframe and need to interact with its content. The example locates an iframe by name and clicks a button inside the frame.

```java
Locator locator = page.locator("iframe[name=\"embedded\"]");
// ...
FrameLocator frameLocator = locator.contentFrame();
frameLocator.getByRole(AriaRole.BUTTON).click();
```

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

### Set viewport size in Python (sync)

Source: https://github.com/microsoft/playwright/blob/main/docs/src/api/class-page.md

Creates a new page, sets its viewport to 640x480, and navigates to example.com. Use this to ensure the page loads with the desired viewport size.

```python
page = browser.new_page()
page.set_viewport_size({"width": 640, "height": 480})
page.goto("https://example.com")
```

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

### Get FrameLocator from Locator using contentFrame in JavaScript

Source: https://github.com/microsoft/playwright/blob/main/docs/src/api/class-locator.md

Use when you have a Locator for an iframe and need to interact with its content. The example locates an iframe by name and clicks a button inside the frame.

```javascript
const locator = page.locator('iframe[name="embedded"]');
// ...
const frameLocator = locator.contentFrame();
await frameLocator.getByRole('button').click();
```

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

### Install Microsoft Edge via PowerShell (C#)

Source: https://github.com/microsoft/playwright/blob/main/docs/src/browsers.md

Runs the Playwright PowerShell installation script to install Microsoft Edge in .NET environments.

```bash
pwsh bin/Debug/netX/playwright.ps1 install msedge
```

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

### Install default browsers using PowerShell (.NET)

Source: https://github.com/microsoft/playwright/blob/main/docs/src/browsers.md

Run the PowerShell CLI script to download the default set of supported browser binaries.

```bash
pwsh bin/Debug/netX/playwright.ps1 install
```