Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 11 additions & 30 deletions dotnet/docs/api/class-browsertype.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -37,42 +37,19 @@ class BrowserTypeExamples

<font size="2" style={{position: "relative", top: "-20px"}}>Added before v1.9</font><x-search>browserType.ConnectAsync</x-search>

This method attaches Playwright to an existing browser instance. When connecting to another browser launched via `BrowserType.launchServer` in Node.js, the major and minor version needs to match the client version (1.2.3 → is compatible with 1.2.x).
This method attaches Playwright to an existing browser instance created via `BrowserType.launchServer` in Node.js.

:::note

The major and minor version of the Playwright instance that connects needs to match the version of Playwright that launches the browser (1.2.3 → is compatible with 1.2.x).
:::

**Usage**

```csharp
await BrowserType.ConnectAsync(wsEndpoint, options);
await BrowserType.ConnectAsync();
```

**Arguments**
- `wsEndpoint` [string] <font size="2">Added in: v1.10</font><a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="browser-type-connect-option-ws-endpoint"/><a href="#browser-type-connect-option-ws-endpoint" class="list-anchor">#</a>

A browser websocket endpoint to connect to.
- `options` `BrowserTypeConnectOptions?` *(optional)*
- `ExposeNetwork` [string]? *(optional)* <font size="2">Added in: v1.37</font><a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="browser-type-connect-option-expose-network"/><a href="#browser-type-connect-option-expose-network" class="list-anchor">#</a>

This option exposes network available on the connecting client to the browser being connected to. Consists of a list of rules separated by comma.

Available rules:
1. Hostname pattern, for example: `example.com`, `*.org:99`, `x.*.y.com`, `*foo.org`.
1. IP literal, for example: `127.0.0.1`, `0.0.0.0:99`, `[::1]`, `[0:0::1]:99`.
1. `<loopback>` that matches local loopback interfaces: `localhost`, `*.localhost`, `127.0.0.1`, `[::1]`.

Some common examples:
1. `"*"` to expose all network.
1. `"<loopback>"` to expose localhost network.
1. `"*.test.internal-domain,*.staging.internal-domain,<loopback>"` to expose test/staging deployments and localhost.
- `Headers` [IDictionary]?&lt;[string], [string]&gt; *(optional)* <font size="2">Added in: v1.11</font><a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="browser-type-connect-option-headers"/><a href="#browser-type-connect-option-headers" class="list-anchor">#</a>

Additional HTTP headers to be sent with web socket connect request. Optional.
- `SlowMo` [float]? *(optional)* <font size="2">Added in: v1.10</font><a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="browser-type-connect-option-slow-mo"/><a href="#browser-type-connect-option-slow-mo" class="list-anchor">#</a>

Slows down Playwright operations by the specified amount of milliseconds. Useful so that you can see what is going on. Defaults to 0.
- `Timeout` [float]? *(optional)* <font size="2">Added in: v1.10</font><a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="browser-type-connect-option-timeout"/><a href="#browser-type-connect-option-timeout" class="list-anchor">#</a>

Maximum time in milliseconds to wait for the connection to be established. Defaults to `0` (no timeout).

**Returns**
- [Browser]<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="browser-type-connect-return"/><a href="#browser-type-connect-return" class="list-anchor">#</a>

Expand All @@ -91,6 +68,10 @@ The default browser context is accessible via [Browser.Contexts](/api/class-brow
Connecting over the Chrome DevTools Protocol is only supported for Chromium-based browsers.
:::

:::note
This connection is significantly lower fidelity than the Playwright protocol connection via [BrowserType.ConnectAsync()](/api/class-browsertype.mdx#browser-type-connect). If you are experiencing issues or attempting to use advanced functionality, you probably want to use [BrowserType.ConnectAsync()](/api/class-browsertype.mdx#browser-type-connect).
:::

**Usage**

```csharp
Expand Down
2 changes: 1 addition & 1 deletion dotnet/docs/api/class-locator.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ var button = page.GetByRole(AriaRole.Button).And(page.GetByTitle("Subscribe"));

<font size="2" style={{position: "relative", top: "-20px"}}>Added in: v1.49</font><x-search>locator.AriaSnapshotAsync</x-search>

Captures the aria snapshot of the given element. Read more about [aria snapshots](../aria-snapshots.mdx) and [Expect(Locator).ToMatchAriaSnapshotAsync()](/api/class-locatorassertions.mdx#locator-assertions-to-match-aria-snapshot-1) for the corresponding assertion.
Captures the aria snapshot of the given element. Read more about [aria snapshots](../aria-snapshots.mdx) and [Expect(Locator).ToMatchAriaSnapshotAsync()](/api/class-locatorassertions.mdx#locator-assertions-to-match-aria-snapshot) for the corresponding assertion.

**Usage**

Expand Down
8 changes: 4 additions & 4 deletions dotnet/docs/api/class-locatorassertions.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -811,7 +811,7 @@ await Expect(locator).ToHaveValuesAsync(new Regex[] { new Regex("R"), new Regex(

---

### ToMatchAriaSnapshotAsync {#locator-assertions-to-match-aria-snapshot-1}
### ToMatchAriaSnapshotAsync {#locator-assertions-to-match-aria-snapshot}

<font size="2" style={{position: "relative", top: "-20px"}}>Added in: v1.49</font><x-search>locatorAssertions.ToMatchAriaSnapshotAsync</x-search>

Expand All @@ -828,14 +828,14 @@ await Expect(page.Locator("body")).ToMatchAriaSnapshotAsync(@"
```

**Arguments**
- `expected` [string]<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="locator-assertions-to-match-aria-snapshot-1-option-expected"/><a href="#locator-assertions-to-match-aria-snapshot-1-option-expected" class="list-anchor">#</a>
- `expected` [string]<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="locator-assertions-to-match-aria-snapshot-option-expected"/><a href="#locator-assertions-to-match-aria-snapshot-option-expected" class="list-anchor">#</a>
- `options` `LocatorAssertionsToMatchAriaSnapshotOptions?` *(optional)*
- `Timeout` [float]? *(optional)*<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="locator-assertions-to-match-aria-snapshot-1-option-timeout"/><a href="#locator-assertions-to-match-aria-snapshot-1-option-timeout" class="list-anchor">#</a>
- `Timeout` [float]? *(optional)*<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="locator-assertions-to-match-aria-snapshot-option-timeout"/><a href="#locator-assertions-to-match-aria-snapshot-option-timeout" class="list-anchor">#</a>

Time to retry the assertion for in milliseconds. Defaults to `5000`.

**Returns**
- [void]<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="locator-assertions-to-match-aria-snapshot-1-return"/><a href="#locator-assertions-to-match-aria-snapshot-1-return" class="list-anchor">#</a>
- [void]<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="locator-assertions-to-match-aria-snapshot-return"/><a href="#locator-assertions-to-match-aria-snapshot-return" class="list-anchor">#</a>

---

Expand Down
42 changes: 11 additions & 31 deletions dotnet/docs/aria-snapshots.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import LiteYouTube from '@site/src/components/LiteYouTube';

## Overview

With the Playwright Snapshot testing you can assert the accessibility tree of a page against a predefined snapshot template.
With Playwright's Snapshot testing you can assert the accessibility tree of a page against a predefined snapshot template.

```csharp
await page.GotoAsync("https://playwright.dev/");
Expand All @@ -31,11 +31,11 @@ Snapshot testing and assertion testing serve different purposes in test automati

### Assertion testing

Assertion testing is a targeted approach where you assert specific values or conditions about elements or components. For instance, with Playwright, [Expect(Locator).ToHaveTextAsync()](/api/class-locatorassertions.mdx#locator-assertions-to-have-text) verifies that an element contains the expected text, and [Expect(Locator).ToHaveValueAsync()](/api/class-locatorassertions.mdx#locator-assertions-to-have-value) confirms that an input field has the expected value. Assertion tests are specific and generally check the current state of an element or property against an expected, predefined state. They work well for predictable, single-value checks but are limited in scope when testing the broader structure or variations.
Assertion testing is a targeted approach where you assert specific values or conditions about elements or components. For instance, with Playwright, [Expect(Locator).ToHaveTextAsync()](/api/class-locatorassertions.mdx#locator-assertions-to-have-text) verifies that an element contains the expected text, and [Expect(Locator).ToHaveValueAsync()](/api/class-locatorassertions.mdx#locator-assertions-to-have-value) confirms that an input field has the expected value. Assertion tests are specific and generally check the current state of an element or property against an expected, predefined state. They work well for predictable, single-value checks but are limited in scope when testing the broader structure or variations.

**Advantages**
- **Clarity**: The intent of the test is explicit and easy to understand.
- **Specificity**: Tests focus on particular aspects of functionality, making them more robust against unrelated changes.
- **Specificity**: Tests focus on particular aspects of functionality, making them more robust against unrelated changes.
- **Debugging**: Failures provide targeted feedback, pointing directly to the problematic aspect.

**Disadvantages**
Expand Down Expand Up @@ -88,7 +88,7 @@ These values are derived from ARIA attributes or calculated based on HTML semant

## Snapshot matching

The [Expect(Locator).ToMatchAriaSnapshotAsync()](/api/class-locatorassertions.mdx#locator-assertions-to-match-aria-snapshot-1) assertion method in Playwright compares the accessible structure of the locator scope with a predefined aria snapshot template, helping validate the page's state against testing requirements.
The [Expect(Locator).ToMatchAriaSnapshotAsync()](/api/class-locatorassertions.mdx#locator-assertions-to-match-aria-snapshot) assertion method in Playwright compares the accessible structure of the locator scope with a predefined aria snapshot template, helping validate the page's state against testing requirements.

For the following DOM:

Expand Down Expand Up @@ -123,7 +123,7 @@ You can perform partial matches on nodes by omitting attributes or accessible na
- button
```

In this example, the button role is matched, but the accessible name ("Submit") is not specified, allowing the test to pass regardless of the buttons label.
In this example, the button role is matched, but the accessible name ("Submit") is not specified, allowing the test to pass regardless of the button's label.

<hr/>

Expand Down Expand Up @@ -178,37 +178,17 @@ Regular expressions allow flexible matching for elements with dynamic or variabl

## Generating snapshots

Creating aria snapshots in Playwright helps ensure and maintain your applications structure. You can generate snapshots in various ways depending on your testing setup and workflow.
Creating aria snapshots in Playwright helps ensure and maintain your application's structure. You can generate snapshots in various ways depending on your testing setup and workflow.

### 1. Generating snapshots with the Playwright code generator
### Generating snapshots with the Playwright code generator

If youre using Playwrights [Code Generator](./codegen.mdx), generating aria snapshots is streamlined with its interactive interface:
If you're using Playwright's [Code Generator](./codegen.mdx), generating aria snapshots is streamlined with its interactive interface:
- **"Assert snapshot" Action**: In the code generator, you can use the "Assert snapshot" action to automatically create a snapshot assertion for the selected elements. This is a quick way to capture the aria snapshot as part of your recorded test flow.
- **"Aria snapshot" Tab**: The "Aria snapshot" tab within the code generator interface visually represents the aria snapshot for a selected locator, letting you explore, inspect, and verify element roles, attributes, and accessible names to aid snapshot creation and review.

### 2. Updating snapshots with `@playwright/test` and the `--update-snapshots` flag
### Using the `Locator.ariaSnapshot` method

When using the Playwright test runner (`@playwright/test`), you can automatically update snapshots by running tests with the `--update-snapshots` flag:

```bash
npx playwright test --update-snapshots
```

This command regenerates snapshots for assertions, including aria snapshots, replacing outdated ones. It’s useful when application structure changes require new snapshots as a baseline. Note that Playwright will wait for the maximum expect timeout specified in the test runner configuration to ensure the page is settled before taking the snapshot. It might be necessary to adjust the `--timeout` if the test hits the timeout while generating snapshots.

#### Empty template for snapshot generation

Passing an empty string as the template in an assertion generates a snapshot on-the-fly:

Note that Playwright will wait for the maximum expect timeout specified in the test runner configuration to ensure the page is settled before taking the snapshot. It might be necessary to adjust the `--timeout` if the test hits the timeout while generating snapshots.

#### Snapshot patch files

When updating snapshots, Playwright creates patch files that capture differences. These patch files can be reviewed, applied, and committed to source control, allowing teams to track structural changes over time and ensure updates are consistent with application requirements.

### 3. Using the `Locator.ariaSnapshot` method

The [Locator.AriaSnapshotAsync()](/api/class-locator.mdx#locator-aria-snapshot) method allows you to programmatically create a YAML representation of accessible elements within a locator’s scope, especially helpful for generating snapshots dynamically during test execution.
The [Locator.AriaSnapshotAsync()](/api/class-locator.mdx#locator-aria-snapshot) method allows you to programmatically create a YAML representation of accessible elements within a locator's scope, especially helpful for generating snapshots dynamically during test execution.

**Example**:

Expand All @@ -217,7 +197,7 @@ var snapshot = await page.Locator("body").AriaSnapshotAsync();
Console.WriteLine(snapshot);
```

This command outputs the aria snapshot within the specified locators scope in YAML format, which you can validate or store as needed.
This command outputs the aria snapshot within the specified locator's scope in YAML format, which you can validate or store as needed.

## Accessibility tree examples

Expand Down
2 changes: 1 addition & 1 deletion dotnet/docs/release-notes.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import HTMLCard from '@site/src/components/HTMLCard';

### Aria snapshots

New assertion [Expect(Locator).ToMatchAriaSnapshotAsync()](/api/class-locatorassertions.mdx#locator-assertions-to-match-aria-snapshot-1) verifies page structure by comparing to an expected accessibility tree, represented as YAML.
New assertion [Expect(Locator).ToMatchAriaSnapshotAsync()](/api/class-locatorassertions.mdx#locator-assertions-to-match-aria-snapshot) verifies page structure by comparing to an expected accessibility tree, represented as YAML.

```csharp
await page.GotoAsync("https://playwright.dev");
Expand Down
42 changes: 11 additions & 31 deletions java/docs/api/class-browsertype.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -35,43 +35,19 @@ public class Example {

<font size="2" style={{position: "relative", top: "-20px"}}>Added before v1.9</font><x-search>browserType.connect</x-search>

This method attaches Playwright to an existing browser instance. When connecting to another browser launched via `BrowserType.launchServer` in Node.js, the major and minor version needs to match the client version (1.2.3 → is compatible with 1.2.x).
This method attaches Playwright to an existing browser instance created via `BrowserType.launchServer` in Node.js.

:::note

The major and minor version of the Playwright instance that connects needs to match the version of Playwright that launches the browser (1.2.3 → is compatible with 1.2.x).
:::

**Usage**

```java
BrowserType.connect(wsEndpoint);
BrowserType.connect(wsEndpoint, options);
BrowserType.connect();
```

**Arguments**
- `wsEndpoint` [String] <font size="2">Added in: v1.10</font><a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="browser-type-connect-option-ws-endpoint"/><a href="#browser-type-connect-option-ws-endpoint" class="list-anchor">#</a>

A browser websocket endpoint to connect to.
- `options` `BrowserType.ConnectOptions` *(optional)*
- `setExposeNetwork` [String] *(optional)* <font size="2">Added in: v1.37</font><a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="browser-type-connect-option-expose-network"/><a href="#browser-type-connect-option-expose-network" class="list-anchor">#</a>

This option exposes network available on the connecting client to the browser being connected to. Consists of a list of rules separated by comma.

Available rules:
1. Hostname pattern, for example: `example.com`, `*.org:99`, `x.*.y.com`, `*foo.org`.
1. IP literal, for example: `127.0.0.1`, `0.0.0.0:99`, `[::1]`, `[0:0::1]:99`.
1. `<loopback>` that matches local loopback interfaces: `localhost`, `*.localhost`, `127.0.0.1`, `[::1]`.

Some common examples:
1. `"*"` to expose all network.
1. `"<loopback>"` to expose localhost network.
1. `"*.test.internal-domain,*.staging.internal-domain,<loopback>"` to expose test/staging deployments and localhost.
- `setHeaders` [Map]&lt;[String], [String]&gt; *(optional)* <font size="2">Added in: v1.11</font><a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="browser-type-connect-option-headers"/><a href="#browser-type-connect-option-headers" class="list-anchor">#</a>

Additional HTTP headers to be sent with web socket connect request. Optional.
- `setSlowMo` [double] *(optional)* <font size="2">Added in: v1.10</font><a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="browser-type-connect-option-slow-mo"/><a href="#browser-type-connect-option-slow-mo" class="list-anchor">#</a>

Slows down Playwright operations by the specified amount of milliseconds. Useful so that you can see what is going on. Defaults to 0.
- `setTimeout` [double] *(optional)* <font size="2">Added in: v1.10</font><a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="browser-type-connect-option-timeout"/><a href="#browser-type-connect-option-timeout" class="list-anchor">#</a>

Maximum time in milliseconds to wait for the connection to be established. Defaults to `0` (no timeout).

**Returns**
- [Browser]<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="browser-type-connect-return"/><a href="#browser-type-connect-return" class="list-anchor">#</a>

Expand All @@ -90,6 +66,10 @@ The default browser context is accessible via [Browser.contexts()](/api/class-br
Connecting over the Chrome DevTools Protocol is only supported for Chromium-based browsers.
:::

:::note
This connection is significantly lower fidelity than the Playwright protocol connection via [BrowserType.connect()](/api/class-browsertype.mdx#browser-type-connect). If you are experiencing issues or attempting to use advanced functionality, you probably want to use [BrowserType.connect()](/api/class-browsertype.mdx#browser-type-connect).
:::

**Usage**

```java
Expand Down
2 changes: 1 addition & 1 deletion java/docs/api/class-locator.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ Locator button = page.getByRole(AriaRole.BUTTON).and(page.getByTitle("Subscribe"

<font size="2" style={{position: "relative", top: "-20px"}}>Added in: v1.49</font><x-search>locator.ariaSnapshot</x-search>

Captures the aria snapshot of the given element. Read more about [aria snapshots](../aria-snapshots.mdx) and [assertThat(locator).matchesAriaSnapshot()](/api/class-locatorassertions.mdx#locator-assertions-to-match-aria-snapshot-1) for the corresponding assertion.
Captures the aria snapshot of the given element. Read more about [aria snapshots](../aria-snapshots.mdx) and [assertThat(locator).matchesAriaSnapshot()](/api/class-locatorassertions.mdx#locator-assertions-to-match-aria-snapshot) for the corresponding assertion.

**Usage**

Expand Down
Loading
Loading