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
51 changes: 51 additions & 0 deletions dotnet/docs/api/class-browser.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,40 @@ await browser.CloseAsync();

## Methods

### BindAsync {#browser-bind}

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

Binds the browser to a named pipe or web socket, making it available for other clients to connect to.

**Usage**

```csharp
await Browser.BindAsync(title, options);
```

**Arguments**
- `title` [string]<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="browser-bind-option-title"/><a href="#browser-bind-option-title" class="list-anchor">#</a>

Title of the browser server, used for identification.
- `options` `BrowserBindOptions?` *(optional)*
- `Host` [string]? *(optional)*<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="browser-bind-option-host"/><a href="#browser-bind-option-host" class="list-anchor">#</a>

Host to bind the web socket server to. When specified, a web socket server is created instead of a named pipe.
- `Port` [int]? *(optional)*<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="browser-bind-option-port"/><a href="#browser-bind-option-port" class="list-anchor">#</a>

Port to bind the web socket server to. When specified, a web socket server is created instead of a named pipe. Use `0` to let the OS pick an available port.
- `WorkspaceDir` [string]? *(optional)*<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="browser-bind-option-workspace-dir"/><a href="#browser-bind-option-workspace-dir" class="list-anchor">#</a>

Working directory associated with this browser server.

**Returns**
- Bind<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="browser-bind-return"/><a href="#browser-bind-return" class="list-anchor">#</a>
- `endpoint` [string]


---

### BrowserType {#browser-browser-type}

<font size="2" style={{position: "relative", top: "-20px"}}>Added in: v1.23</font><x-search>browser.BrowserType</x-search>
Expand Down Expand Up @@ -587,6 +621,23 @@ await Browser.NewPageAsync(options);

---

### UnbindAsync {#browser-unbind}

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

Unbinds the browser server previously bound with [Browser.BindAsync()](/api/class-browser.mdx#browser-bind).

**Usage**

```csharp
await Browser.UnbindAsync();
```

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

---

### Version {#browser-version}

<font size="2" style={{position: "relative", top: "-20px"}}>Added before v1.9</font><x-search>browser.Version</x-search>
Expand Down
46 changes: 46 additions & 0 deletions dotnet/docs/api/class-screencast.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,23 @@ Interface for capturing screencast frames from a page.

## Methods

### HideActionsAsync {#screencast-hide-actions}

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

Removes action decorations.

**Usage**

```csharp
await Screencast.HideActionsAsync();
```

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

---

### HideOverlaysAsync {#screencast-hide-overlays}

<font size="2" style={{position: "relative", top: "-20px"}}>Added in: v1.59</font><x-search>screencast.HideOverlaysAsync</x-search>
Expand All @@ -31,6 +48,35 @@ await Screencast.HideOverlaysAsync();

---

### ShowActionsAsync {#screencast-show-actions}

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

Enables visual annotations on interacted elements. Returns a disposable that stops showing actions when disposed.

**Usage**

```csharp
await Screencast.ShowActionsAsync(options);
```

**Arguments**
- `options` `ScreencastShowActionsOptions?` *(optional)*
- `Duration` [float]? *(optional)*<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="screencast-show-actions-option-duration"/><a href="#screencast-show-actions-option-duration" class="list-anchor">#</a>

How long each annotation is displayed in milliseconds. Defaults to `500`.
- `FontSize` [int]? *(optional)*<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="screencast-show-actions-option-font-size"/><a href="#screencast-show-actions-option-font-size" class="list-anchor">#</a>

Font size of the action title in pixels. Defaults to `24`.
- `Position` `enum AnnotatePosition { TopLeft, Top, TopRight, BottomLeft, Bottom, BottomRight }?` *(optional)*<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="screencast-show-actions-option-position"/><a href="#screencast-show-actions-option-position" class="list-anchor">#</a>

Position of the action title overlay. Defaults to `"top-right"`.

**Returns**
- [Disposable]<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="screencast-show-actions-return"/><a href="#screencast-show-actions-return" class="list-anchor">#</a>

---

### ShowChapterAsync {#screencast-show-chapter}

<font size="2" style={{position: "relative", top: "-20px"}}>Added in: v1.59</font><x-search>screencast.ShowChapterAsync</x-search>
Expand Down
82 changes: 68 additions & 14 deletions dotnet/docs/release-notes.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,15 @@ import LiteYouTube from '@site/src/components/LiteYouTube';

### 🎬 Screencast

New [Page.Screencast](/api/class-page.mdx#page-screencast) API provides a unified interface for capturing page content — both as video recordings and as real-time frame streams.
New [Page.Screencast](/api/class-page.mdx#page-screencast) API provides a unified interface for capturing page content — both as video recordings, annotations, overlays, and a real-time frame stream.

<center>

<img src="https://raw.githubusercontent.com/microsoft/playwright/main/docs/src/images/release-notes-1.59-screencast-demo.gif" alt="Demo" width="500" height="313" />

**Video recording** — record video with precise start/stop control, as an alternative to the [RecordVideoDir](/api/class-browser.mdx#browser-new-context-option-record-video-dir) option:
</center>

**Screencast recording** — record video with precise start/stop control, as an alternative to the [RecordVideoDir](/api/class-browser.mdx#browser-new-context-option-record-video-dir) option:

```csharp
await page.Screencast.StartAsync(new() { Path = "video.webm" });
Expand All @@ -36,13 +40,10 @@ await page.Screencast.StartAsync(new() {
**Action annotations** — enable built-in visual annotations that highlight interacted elements and display action titles during recording:

```csharp
await page.Screencast.StartAsync(new() {
Path = "video.webm",
Annotate = new() { Position = "top-right" },
});
await page.Screencast.ShowActionsAsync(new() { Position = "top-right" });
```

The `Annotate` option accepts `Position` (`"top-left"`, `"top"`, `"top-right"`, `"bottom-left"`, `"bottom"`, `"bottom-right"`), `Duration` (ms per annotation), and `FontSize` (px).
`ShowActionsAsync` accepts `Position` (`"top-left"`, `"top"`, `"top-right"`, `"bottom-left"`, `"bottom"`, `"bottom-right"`), `Duration` (ms per annotation), and `FontSize` (px). Returns a disposable to stop showing actions.

**Visual overlays** — add chapter titles and custom HTML overlays on top of the page for richer narration:

Expand All @@ -58,10 +59,8 @@ await page.Screencast.ShowOverlayAsync("<div style=\"color: red\">Recording</div
**Agentic video receipts** — coding agents can produce video evidence of their work. After completing a task, an agent can record a walkthrough video with rich annotations for human review:

```csharp
await page.Screencast.StartAsync(new() {
Path = "receipt.webm",
Annotate = new() { Position = "top-right" },
});
await page.Screencast.StartAsync(new() { Path = "receipt.webm" });
await page.Screencast.ShowActionsAsync(new() { Position = "top-right" });

await page.Screencast.ShowChapterAsync("Verifying checkout flow", new() {
Description = "Added coupon code support per ticket #1234",
Expand Down Expand Up @@ -92,7 +91,8 @@ The resulting video serves as a receipt: chapter titles provide context, action
#### Screencast
- [Page.Screencast](/api/class-page.mdx#page-screencast) provides video recording, real-time frame streaming, and overlay management.
- Methods [Screencast.StartAsync()](/api/class-screencast.mdx#screencast-start) and [Screencast.StopAsync()](/api/class-screencast.mdx#screencast-stop) for recording and frame capture.
- Methods [Screencast.ShowChapterAsync()](/api/class-screencast.mdx#screencast-show-chapter) and [Screencast.ShowOverlayAsync()](/api/class-screencast.mdx#screencast-show-overlay) for visual annotations.
- Methods [Screencast.ShowActionsAsync()](/api/class-screencast.mdx#screencast-show-actions) and [Screencast.HideActionsAsync()](/api/class-screencast.mdx#screencast-hide-actions) for action annotations.
- Methods [Screencast.ShowChapterAsync()](/api/class-screencast.mdx#screencast-show-chapter) and [Screencast.ShowOverlayAsync()](/api/class-screencast.mdx#screencast-show-overlay) for visual overlays.
- Methods [Screencast.ShowOverlaysAsync()](/api/class-screencast.mdx#screencast-show-overlays) and [Screencast.HideOverlaysAsync()](/api/class-screencast.mdx#screencast-hide-overlays) for overlay visibility control.

#### Storage, Console and Errors
Expand All @@ -106,17 +106,71 @@ The resulting video serves as a receipt: chapter titles provide context, action
- Method [BrowserContext.IsClosed](/api/class-browsercontext.mdx#browser-context-is-closed).
- Method [Request.ExistingResponse](/api/class-request.mdx#request-existing-response) returns the response without waiting.
- Method [Response.HttpVersionAsync()](/api/class-response.mdx#response-http-version) returns the HTTP version used by the response.
- Event [CdpSession.Close](/api/class-cdpsession.mdx#cdp-session-event-close) for CDP sessions.
- Option `Live` in [Tracing.StartAsync()](/api/class-tracing.mdx#tracing-start) for real-time trace updates.
- Option `ArtifactsDir` in [BrowserType.LaunchAsync()](/api/class-browsertype.mdx#browser-type-launch) to configure the artifacts directory.

### 🔗 Interoperability

New [Browser.BindAsync()](/api/class-browser.mdx#browser-bind) API makes a launched browser available for `playwright-cli`, `@playwright/mcp`, and other clients to connect to.

**Bind a browser** — start a browser and bind it so others can connect:

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

**Connect from playwright-cli**

```bash
playwright-cli attach my-session
```

**Connect from playwright/mcp**

```bash
@playwright/mcp --endpoint=my-session
```

**Connect from another client**

```csharp
var browser = await chromium.ConnectAsync(serverInfo.Endpoint);
```

Pass `Host` and `Port` options to bind over WebSocket instead of a named pipe:

```csharp
var serverInfo = await browser.BindAsync("my-session", new() {
Host = "localhost",
Port = 0,
});
// serverInfo.Endpoint is a ws:// URL
```

Call [Browser.UnbindAsync()](/api/class-browser.mdx#browser-unbind) to stop accepting new connections.

### 📊 Observability

Run `playwright-cli show` to open the Dashboard that lists all bound browsers, their status, and workspace.

<center>

<img src="https://raw.githubusercontent.com/microsoft/playwright/main/docs/src/images/release-notes-1.59-dashboard.gif" alt="Demo" width="1169" height="835" />

</center>
- `playwright-cli` binds all of its browsers automatically, so you can see what your agents are doing.
- Pass `PLAYWRIGHT_DASHBOARD=1` env variable to see all `@playwright/test` browsers in the dashboard.

### Breaking Changes ⚠️
- Removed macOS 14 support for WebKit. We recommend upgrading your macOS version, or keeping an older Playwright version.

### Browser Versions
- Chromium 147.0.7727.15
- Mozilla Firefox 148.0.2
- WebKit 26.0
- WebKit 26.4

This version was also tested against the following stable channels:
- Google Chrome 146
Expand Down
Binary file added images/release-notes-1.59-dashboard.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
52 changes: 52 additions & 0 deletions java/docs/api/class-browser.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,41 @@ public class Example {

## Methods

### bind {#browser-bind}

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

Binds the browser to a named pipe or web socket, making it available for other clients to connect to.

**Usage**

```java
Browser.bind(title);
Browser.bind(title, options);
```

**Arguments**
- `title` [String]<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="browser-bind-option-title"/><a href="#browser-bind-option-title" class="list-anchor">#</a>

Title of the browser server, used for identification.
- `options` `Browser.BindOptions` *(optional)*
- `setHost` [String] *(optional)*<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="browser-bind-option-host"/><a href="#browser-bind-option-host" class="list-anchor">#</a>

Host to bind the web socket server to. When specified, a web socket server is created instead of a named pipe.
- `setPort` [int] *(optional)*<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="browser-bind-option-port"/><a href="#browser-bind-option-port" class="list-anchor">#</a>

Port to bind the web socket server to. When specified, a web socket server is created instead of a named pipe. Use `0` to let the OS pick an available port.
- `setWorkspaceDir` [String] *(optional)*<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="browser-bind-option-workspace-dir"/><a href="#browser-bind-option-workspace-dir" class="list-anchor">#</a>

Working directory associated with this browser server.

**Returns**
- Bind<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="browser-bind-return"/><a href="#browser-bind-return" class="list-anchor">#</a>
- `endpoint` [String]


---

### browserType {#browser-browser-type}

<font size="2" style={{position: "relative", top: "-20px"}}>Added in: v1.23</font><x-search>browser.browserType</x-search>
Expand Down Expand Up @@ -654,6 +689,23 @@ Browser.stopTracing();

---

### unbind {#browser-unbind}

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

Unbinds the browser server previously bound with [Browser.bind()](/api/class-browser.mdx#browser-bind).

**Usage**

```java
Browser.unbind();
```

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

---

### version {#browser-version}

<font size="2" style={{position: "relative", top: "-20px"}}>Added before v1.9</font><x-search>browser.version</x-search>
Expand Down
47 changes: 47 additions & 0 deletions java/docs/api/class-screencast.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,23 @@ Interface for capturing screencast frames from a page.

## Methods

### hideActions {#screencast-hide-actions}

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

Removes action decorations.

**Usage**

```java
Screencast.hideActions();
```

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

---

### hideOverlays {#screencast-hide-overlays}

<font size="2" style={{position: "relative", top: "-20px"}}>Added in: v1.59</font><x-search>screencast.hideOverlays</x-search>
Expand All @@ -31,6 +48,36 @@ Screencast.hideOverlays();

---

### showActions {#screencast-show-actions}

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

Enables visual annotations on interacted elements. Returns a disposable that stops showing actions when disposed.

**Usage**

```java
Screencast.showActions();
Screencast.showActions(options);
```

**Arguments**
- `options` `Screencast.ShowActionsOptions` *(optional)*
- `setDuration` [double] *(optional)*<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="screencast-show-actions-option-duration"/><a href="#screencast-show-actions-option-duration" class="list-anchor">#</a>

How long each annotation is displayed in milliseconds. Defaults to `500`.
- `setFontSize` [int] *(optional)*<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="screencast-show-actions-option-font-size"/><a href="#screencast-show-actions-option-font-size" class="list-anchor">#</a>

Font size of the action title in pixels. Defaults to `24`.
- `setPosition` `enum AnnotatePosition { TOP_LEFT, TOP, TOP_RIGHT, BOTTOM_LEFT, BOTTOM, BOTTOM_RIGHT }` *(optional)*<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="screencast-show-actions-option-position"/><a href="#screencast-show-actions-option-position" class="list-anchor">#</a>

Position of the action title overlay. Defaults to `"top-right"`.

**Returns**
- [Disposable]<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="screencast-show-actions-return"/><a href="#screencast-show-actions-return" class="list-anchor">#</a>

---

### showChapter {#screencast-show-chapter}

<font size="2" style={{position: "relative", top: "-20px"}}>Added in: v1.59</font><x-search>screencast.showChapter</x-search>
Expand Down
Loading
Loading