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
2 changes: 1 addition & 1 deletion dotnet/docs/actionability.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ Playwright includes auto-retrying assertions that remove flakiness by waiting un
| [Expect(Locator).ToHaveAttributeAsync()](/api/class-locatorassertions.mdx#locator-assertions-to-have-attribute) | Element has a DOM attribute |
| [Expect(Locator).ToHaveClassAsync()](/api/class-locatorassertions.mdx#locator-assertions-to-have-class) | Element has a class property |
| [Expect(Locator).ToHaveCountAsync()](/api/class-locatorassertions.mdx#locator-assertions-to-have-count) | List has exact number of children |
| [Expect(Locator).ToHaveCSSAsync()](/api/class-locatorassertions.mdx#locator-assertions-to-have-css) | Element has CSS property |
| [Expect(Locator).ToHaveCSSAsync()](/api/class-locatorassertions.mdx#locator-assertions-to-have-css-1) | Element has CSS property |
| [Expect(Locator).ToHaveIdAsync()](/api/class-locatorassertions.mdx#locator-assertions-to-have-id) | Element has an ID |
| [Expect(Locator).ToHaveJSPropertyAsync()](/api/class-locatorassertions.mdx#locator-assertions-to-have-js-property) | Element has a JavaScript property |
| [Expect(Locator).ToHaveTextAsync()](/api/class-locatorassertions.mdx#locator-assertions-to-have-text) | Element matches text |
Expand Down
23 changes: 23 additions & 0 deletions dotnet/docs/api/class-browsercontext.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -890,6 +890,29 @@ await BrowserContext.SetOfflineAsync(offline);

---

### SetStorageStateAsync {#browser-context-set-storage-state}

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

Clears the existing cookies, local storage and IndexedDB entries for all origins and sets the new storage state.

**Usage**

```csharp
// Load storage state from a file and apply it to the context.
await context.SetStorageStateAsync("state.json");
```

**Arguments**
- `storageStatePath` [string]<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="browser-context-set-storage-state-option-storage-state"/><a href="#browser-context-set-storage-state-option-storage-state" class="list-anchor">#</a>

Populates context with given storage state. This option can be used to initialize context with logged-in information obtained via [BrowserContext.StorageStateAsync()](/api/class-browsercontext.mdx#browser-context-storage-state). Path to the file with saved storage state.

**Returns**
- [void]<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="browser-context-set-storage-state-return"/><a href="#browser-context-set-storage-state-return" class="list-anchor">#</a>

---

### StorageStateAsync {#browser-context-storage-state}

<font size="2" style={{position: "relative", top: "-20px"}}>Added before v1.9</font><x-search>browserContext.StorageStateAsync</x-search>
Expand Down
10 changes: 5 additions & 5 deletions dotnet/docs/api/class-locatorassertions.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -609,7 +609,7 @@ await Expect(locator).ToHaveCountAsync(3);

---

### ToHaveCSSAsync {#locator-assertions-to-have-css}
### ToHaveCSSAsync {#locator-assertions-to-have-css-1}

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

Expand All @@ -623,19 +623,19 @@ await Expect(locator).ToHaveCSSAsync("display", "flex");
```

**Arguments**
- `name` [string] <font size="2">Added in: v1.18</font><a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="locator-assertions-to-have-css-option-name"/><a href="#locator-assertions-to-have-css-option-name" class="list-anchor">#</a>
- `name` [string] <font size="2">Added in: v1.18</font><a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="locator-assertions-to-have-css-1-option-name"/><a href="#locator-assertions-to-have-css-1-option-name" class="list-anchor">#</a>

CSS property name.
- `value` [string] | [Regex] <font size="2">Added in: v1.18</font><a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="locator-assertions-to-have-css-option-value"/><a href="#locator-assertions-to-have-css-option-value" class="list-anchor">#</a>
- `value` [string] | [Regex] <font size="2">Added in: v1.18</font><a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="locator-assertions-to-have-css-1-option-value"/><a href="#locator-assertions-to-have-css-1-option-value" class="list-anchor">#</a>

CSS property value.
- `options` `LocatorAssertionsToHaveCSSOptions?` *(optional)*
- `Timeout` [float]? *(optional)* <font size="2">Added in: v1.18</font><a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="locator-assertions-to-have-css-option-timeout"/><a href="#locator-assertions-to-have-css-option-timeout" class="list-anchor">#</a>
- `Timeout` [float]? *(optional)* <font size="2">Added in: v1.18</font><a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="locator-assertions-to-have-css-1-option-timeout"/><a href="#locator-assertions-to-have-css-1-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-have-css-return"/><a href="#locator-assertions-to-have-css-return" class="list-anchor">#</a>
- [void]<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="locator-assertions-to-have-css-1-return"/><a href="#locator-assertions-to-have-css-1-return" class="list-anchor">#</a>

---

Expand Down
4 changes: 2 additions & 2 deletions dotnet/docs/api/class-page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -2590,7 +2590,7 @@ Page.Url

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

Video object associated with this page.
Video object associated with this page. Can be used to control video recording with [Video.StartAsync()](/api/class-video.mdx#video-start) and [Video.StopAsync()](/api/class-video.mdx#video-stop), or to access the video file when using the `recordVideo` context option.

**Usage**

Expand All @@ -2599,7 +2599,7 @@ Page.Video
```

**Returns**
- [Video]?<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="page-video-return"/><a href="#page-video-return" class="list-anchor">#</a>
- [Video]<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="page-video-return"/><a href="#page-video-return" class="list-anchor">#</a>

---

Expand Down
62 changes: 62 additions & 0 deletions dotnet/docs/api/class-video.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,14 @@ When browser context is created with the `recordVideo` option, each page has a v
Console.WriteLine(await page.Video.GetPathAsync());
```

Alternatively, you can use [Video.StartAsync()](/api/class-video.mdx#video-start) and [Video.StopAsync()](/api/class-video.mdx#video-stop) to record video manually. This approach is mutually exclusive with the `recordVideo` option.

```csharp
await page.Video.StartAsync();
// ... perform actions ...
await page.Video.StopAsync(new() { Path = "video.webm" });
```


---

Expand Down Expand Up @@ -72,6 +80,60 @@ await Video.SaveAsAsync(path);
**Returns**
- [void]<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="video-save-as-return"/><a href="#video-save-as-return" class="list-anchor">#</a>

---

### StartAsync {#video-start}

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

Starts video recording. This method is mutually exclusive with the `recordVideo` context option.

**Usage**

```csharp
await page.Video.StartAsync();
// ... perform actions ...
await page.Video.StopAsync(new() { Path = "video.webm" });
```

**Arguments**
- `options` `VideoStartOptions?` *(optional)*
- `Size` Size? *(optional)*<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="video-start-option-size"/><a href="#video-start-option-size" class="list-anchor">#</a>
- `Width` [int]

Video frame width.
- `Height` [int]

Video frame height.

Optional dimensions of the recorded video. If not specified the size will be equal to page viewport scaled down to fit into 800x800. Actual picture of the page will be scaled down if necessary to fit the specified size.

**Returns**
- [void]<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="video-start-return"/><a href="#video-start-return" class="list-anchor">#</a>

---

### StopAsync {#video-stop}

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

Stops video recording started with [Video.StartAsync()](/api/class-video.mdx#video-start) and either saves or discards the video file.

**Usage**

```csharp
await Video.StopAsync(options);
```

**Arguments**
- `options` `VideoStopOptions?` *(optional)*
- `Path` [string]? *(optional)*<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="video-stop-option-path"/><a href="#video-stop-option-path" class="list-anchor">#</a>

Path where the video should be saved.

**Returns**
- [void]<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="video-stop-return"/><a href="#video-stop-return" class="list-anchor">#</a>


[APIRequest]: /api/class-apirequest.mdx "APIRequest"
[APIRequestContext]: /api/class-apirequestcontext.mdx "APIRequestContext"
Expand Down
79 changes: 0 additions & 79 deletions dotnet/docs/other-locators.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -222,85 +222,6 @@ Alternatively, if you cannot find a suitable locator for the parent element, use
var parent = page.GetByText("Hello").Locator("xpath=..");
```

## React locator

:::note

React locator is experimental and prefixed with `_`. The functionality might change in future.
:::

React locator allows finding elements by their component name and property values. The syntax is very similar to [CSS attribute selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) and supports all CSS attribute selector operators.

In React locator, component names are transcribed with **CamelCase**.

```csharp
await page.Locator("_react=BookItem").ClickAsync();
```

More examples:
- match by **component**: `_react=BookItem`
- match by component and **exact property value**, case-sensitive: `_react=BookItem[author = "Steven King"]`
- match by property value only, **case-insensitive**: `_react=[author = "steven king" i]`
- match by component and **truthy property value**: `_react=MyButton[enabled]`
- match by component and **boolean value**: `_react=MyButton[enabled = false]`
- match by property **value substring**: `_react=[author *= "King"]`
- match by component and **multiple properties**: `_react=BookItem[author *= "king" i][year = 1990]`
- match by **nested** property value: `_react=[some.nested.value = 12]`
- match by component and property value **prefix**: `_react=BookItem[author ^= "Steven"]`
- match by component and property value **suffix**: `_react=BookItem[author $= "Steven"]`
- match by component and **key**: `_react=BookItem[key = '2']`
- match by property value **regex**: `_react=[author = /Steven(\\s+King)?/i]`

To find React element names in a tree use [React DevTools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi).

:::note

React locator supports React 15 and above.
:::

:::note
React locator, as well as [React DevTools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi), only work against **unminified** application builds.
:::

## Vue locator

:::note

Vue locator is experimental and prefixed with `_`. The functionality might change in future.
:::

Vue locator allows finding elements by their component name and property values. The syntax is very similar to [CSS attribute selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) and supports all CSS attribute selector operators.

In Vue locator, component names are transcribed with **kebab-case**.

```csharp
await page.Locator("_vue=book-item").ClickAsync();
```

More examples:
- match by **component**: `_vue=book-item`
- match by component and **exact property value**, case-sensitive: `_vue=book-item[author = "Steven King"]`
- match by property value only, **case-insensitive**: `_vue=[author = "steven king" i]`
- match by component and **truthy property value**: `_vue=my-button[enabled]`
- match by component and **boolean value**: `_vue=my-button[enabled = false]`
- match by property **value substring**: `_vue=[author *= "King"]`
- match by component and **multiple properties**: `_vue=book-item[author *= "king" i][year = 1990]`
- match by **nested** property value: `_vue=[some.nested.value = 12]`
- match by component and property value **prefix**: `_vue=book-item[author ^= "Steven"]`
- match by component and property value **suffix**: `_vue=book-item[author $= "Steven"]`
- match by property value **regex**: `_vue=[author = /Steven(\\s+King)?/i]`

To find Vue element names in a tree use [Vue DevTools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en).

:::note

Vue locator supports Vue2 and above.
:::

:::note
Vue locator, as well as [Vue DevTools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi), only work against **unminified** application builds.
:::

## XPath locator

:::warning
Expand Down
4 changes: 2 additions & 2 deletions dotnet/docs/release-notes.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -1514,7 +1514,7 @@ await locator.ClickAsync();

Learn more in the [documentation](./api/class-locator).

#### 🧩 Experimental [**React**](./other-locators.mdx#react-locator) and [**Vue**](./other-locators.mdx#vue-locator) selector engines
#### 🧩 Experimental [**React**](./other-locators.mdx) and [**Vue**](./other-locators.mdx) selector engines

React and Vue selectors allow selecting elements by its component name and/or property values. The syntax is very similar to [attribute selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) and supports all attribute selector operators.

Expand All @@ -1523,7 +1523,7 @@ await page.Locator("_react=SubmitButton[enabled=true]").ClickAsync();
await page.Locator("_vue=submit-button[enabled=true]").ClickAsync();
```

Learn more in the [react selectors documentation](./other-locators.mdx#react-locator) and the [vue selectors documentation](./other-locators.mdx#vue-locator).
Learn more in the [react selectors documentation](./other-locators.mdx) and the [vue selectors documentation](./other-locators.mdx).

#### ✨ New [**`nth`**](./other-locators.mdx#n-th-element-locator) and [**`visible`**](./other-locators.mdx#css-matching-only-visible-elements) selector engines
- [`nth`](./other-locators.mdx#n-th-element-locator) selector engine is equivalent to the `:nth-match` pseudo class, but could be combined with other selector engines.
Expand Down
2 changes: 1 addition & 1 deletion dotnet/docs/test-assertions.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import HTMLCard from '@site/src/components/HTMLCard';
| [Expect(Locator).ToHaveAttributeAsync()](/api/class-locatorassertions.mdx#locator-assertions-to-have-attribute) | Element has a DOM attribute |
| [Expect(Locator).ToHaveClassAsync()](/api/class-locatorassertions.mdx#locator-assertions-to-have-class) | Element has a class property |
| [Expect(Locator).ToHaveCountAsync()](/api/class-locatorassertions.mdx#locator-assertions-to-have-count) | List has exact number of children |
| [Expect(Locator).ToHaveCSSAsync()](/api/class-locatorassertions.mdx#locator-assertions-to-have-css) | Element has CSS property |
| [Expect(Locator).ToHaveCSSAsync()](/api/class-locatorassertions.mdx#locator-assertions-to-have-css-1) | Element has CSS property |
| [Expect(Locator).ToHaveIdAsync()](/api/class-locatorassertions.mdx#locator-assertions-to-have-id) | Element has an ID |
| [Expect(Locator).ToHaveJSPropertyAsync()](/api/class-locatorassertions.mdx#locator-assertions-to-have-js-property) | Element has a JavaScript property |
| [Expect(Locator).ToHaveRoleAsync()](/api/class-locatorassertions.mdx#locator-assertions-to-have-role) | Element has a specific [ARIA role](https://www.w3.org/TR/wai-aria-1.2/#roles) |
Expand Down
2 changes: 1 addition & 1 deletion java/docs/actionability.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ Playwright includes auto-retrying assertions that remove flakiness by waiting un
| [assertThat(locator).hasAttribute()](/api/class-locatorassertions.mdx#locator-assertions-to-have-attribute) | Element has a DOM attribute |
| [assertThat(locator).hasClass()](/api/class-locatorassertions.mdx#locator-assertions-to-have-class) | Element has a class property |
| [assertThat(locator).hasCount()](/api/class-locatorassertions.mdx#locator-assertions-to-have-count) | List has exact number of children |
| [assertThat(locator).hasCSS()](/api/class-locatorassertions.mdx#locator-assertions-to-have-css) | Element has CSS property |
| [assertThat(locator).hasCSS()](/api/class-locatorassertions.mdx#locator-assertions-to-have-css-1) | Element has CSS property |
| [assertThat(locator).hasId()](/api/class-locatorassertions.mdx#locator-assertions-to-have-id) | Element has an ID |
| [assertThat(locator).hasJSProperty()](/api/class-locatorassertions.mdx#locator-assertions-to-have-js-property) | Element has a JavaScript property |
| [assertThat(locator).hasText()](/api/class-locatorassertions.mdx#locator-assertions-to-have-text) | Element matches text |
Expand Down
23 changes: 23 additions & 0 deletions java/docs/api/class-browsercontext.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -787,6 +787,29 @@ BrowserContext.setOffline(offline);

---

### setStorageState {#browser-context-set-storage-state}

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

Clears the existing cookies, local storage and IndexedDB entries for all origins and sets the new storage state.

**Usage**

```java
// Load storage state from a file and apply it to the context.
context.setStorageState(Paths.get("state.json"));
```

**Arguments**
- `storageStatePath` [Path]<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="browser-context-set-storage-state-option-storage-state"/><a href="#browser-context-set-storage-state-option-storage-state" class="list-anchor">#</a>

Populates context with given storage state. This option can be used to initialize context with logged-in information obtained via [BrowserContext.storageState()](/api/class-browsercontext.mdx#browser-context-storage-state). Path to the file with saved storage state.

**Returns**
- [void]<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="browser-context-set-storage-state-return"/><a href="#browser-context-set-storage-state-return" class="list-anchor">#</a>

---

### storageState {#browser-context-storage-state}

<font size="2" style={{position: "relative", top: "-20px"}}>Added before v1.9</font><x-search>browserContext.storageState</x-search>
Expand Down
Loading