feat(roll): roll to ToT Playwright (roll/next-31-03-26)

dotnet/docs/release-notes.mdx

@@ -13,7 +13,12 @@ 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, annotations, overlays, and a real-time frame stream.
+New [Page.Screencast](/api/class-page.mdx#page-screencast) API provides a unified interface for capturing page content with:
+- Screencast recordings
+- Action annotations
+- Visual overlays
+- Real-time frame capture
+- Agentic video receipts
 
 <center>
 
@@ -29,14 +34,6 @@ await page.Screencast.StartAsync(new() { Path = "video.webm" });
 await page.Screencast.StopAsync();
 ```
 
-**Real-time frame capture** — stream JPEG-encoded frames for custom processing like thumbnails, live previews, AI vision, and more:
-
-```csharp
-await page.Screencast.StartAsync(new() {
-    OnFrame = frame => SendToVisionModel(frame.Data),
-});
-```
-
 **Action annotations** — enable built-in visual annotations that highlight interacted elements and display action titles during recording:
 
 ```csharp
@@ -56,6 +53,14 @@ await page.Screencast.ShowChapterAsync("Adding TODOs", new() {
 await page.Screencast.ShowOverlayAsync("<div style=\"color: red\">Recording</div>");
 ```
 
+**Real-time frame capture** — stream JPEG-encoded frames for custom processing like thumbnails, live previews, AI vision, and more:
+
+```csharp
+await page.Screencast.StartAsync(new() {
+    OnFrame = frame => SendToVisionModel(frame.Data),
+});
+```
+
 **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
@@ -116,25 +121,25 @@ New [Browser.BindAsync()](/api/class-browser.mdx#browser-bind) API makes a launc
 **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**
+**Connect from playwright-cli** — connect to the running browser from your favorite coding agent.
 
 ```bash
 playwright-cli attach my-session
+playwright-cli -s my-session snapshot
 ```
 
-**Connect from playwright/mcp**
+**Connect from @playwright/mcp** — or point your MCP server to the running browser.
 
 ```bash
 @playwright/mcp --endpoint=my-session
 ```
 
-**Connect from another client**
+**Connect from a Playwright client** — use API to connect to the browser. Multiple clients at a time are supported!
 
 ```csharp
 var browser = await chromium.ConnectAsync(serverInfo.Endpoint);
@@ -154,11 +159,14 @@ Call [Browser.UnbindAsync()](/api/class-browser.mdx#browser-unbind) to stop acce
 
 ### 📊 Observability
 
-Run `playwright-cli show` to open the Dashboard that lists all bound browsers, their status, and workspace.
+Run `playwright-cli show` to open the Dashboard that lists all the bound browsers, their statuses, and allows interacting with them:
+- See what your agent is doing on the background browsers
+- Click into the sessions for manual interventions
+- Open DevTools to inspect pages from the background browsers.
 
 <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" />
+<img src="https://raw.githubusercontent.com/microsoft/playwright/main/docs/src/images/release-notes-1.59-dashboard.png" alt="Demo" width="1169" height="835" />
 
 </center>
 - `playwright-cli` binds all of its browsers automatically, so you can see what your agents are doing.

java/docs/release-notes.mdx

@@ -13,7 +13,12 @@ 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, annotations, overlays, and a real-time frame stream.
+New [Page.screencast()](/api/class-page.mdx#page-screencast) API provides a unified interface for capturing page content with:
+- Screencast recordings
+- Action annotations
+- Visual overlays
+- Real-time frame capture
+- Agentic video receipts
 
 <center>
 
@@ -29,13 +34,6 @@ page.screencast().start(new Screencast.StartOptions().setPath(Paths.get("video.w
 page.screencast().stop();
 ```
 
-**Real-time frame capture** — stream JPEG-encoded frames for custom processing like thumbnails, live previews, AI vision, and more:
-
-```java
-page.screencast().start(new Screencast.StartOptions()
-    .setOnFrame(frame -> sendToVisionModel(frame.data)));
-```
-
 **Action annotations** — enable built-in visual annotations that highlight interacted elements and display action titles during recording:
 
 ```java
@@ -55,6 +53,13 @@ page.screencast().showChapter("Adding TODOs",
 page.screencast().showOverlay("<div style=\"color: red\">Recording</div>");
 ```
 
+**Real-time frame capture** — stream JPEG-encoded frames for custom processing like thumbnails, live previews, AI vision, and more:
+
+```java
+page.screencast().start(new Screencast.StartOptions()
+    .setOnFrame(frame -> sendToVisionModel(frame.data)));
+```
+
 **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:
 
 ```java
@@ -116,24 +121,24 @@ New [Browser.bind()](/api/class-browser.mdx#browser-bind) API makes a launched b
 **Bind a browser** — start a browser and bind it so others can connect:
 
 ```java
-Browser browser = chromium.launch();
 Browser.BindResult serverInfo = browser.bind("my-session",
     new Browser.BindOptions().setWorkspaceDir("/my/project"));
 ```
 
-**Connect from playwright-cli**
+**Connect from playwright-cli** — connect to the running browser from your favorite coding agent.
 
 ```bash
 playwright-cli attach my-session
+playwright-cli -s my-session snapshot
 ```
 
-**Connect from playwright/mcp**
+**Connect from @playwright/mcp** — or point your MCP server to the running browser.
 
 ```bash
 @playwright/mcp --endpoint=my-session
 ```
 
-**Connect from another client**
+**Connect from a Playwright client** — use API to connect to the browser. Multiple clients at a time are supported!
 
 ```java
 Browser browser = chromium.connect(serverInfo.endpoint);
@@ -151,11 +156,14 @@ Call [Browser.unbind()](/api/class-browser.mdx#browser-unbind) to stop accepting
 
 ### 📊 Observability
 
-Run `playwright-cli show` to open the Dashboard that lists all bound browsers, their status, and workspace.
+Run `playwright-cli show` to open the Dashboard that lists all the bound browsers, their statuses, and allows interacting with them:
+- See what your agent is doing on the background browsers
+- Click into the sessions for manual interventions
+- Open DevTools to inspect pages from the background browsers.
 
 <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" />
+<img src="https://raw.githubusercontent.com/microsoft/playwright/main/docs/src/images/release-notes-1.59-dashboard.png" alt="Demo" width="1169" height="835" />
 
 </center>
 - `playwright-cli` binds all of its browsers automatically, so you can see what your agents are doing.

nodejs/docs/release-notes.mdx

@@ -13,7 +13,12 @@ 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, annotations, overlays, and a real-time frame stream.
+New [page.screencast](/api/class-page.mdx#page-screencast) API provides a unified interface for capturing page content with:
+- Screencast recordings
+- Action annotations
+- Visual overlays
+- Real-time frame capture
+- Agentic video receipts
 
 <center>
 
@@ -29,15 +34,6 @@ await page.screencast.start({ path: 'video.webm' });
 await page.screencast.stop();
 ```
 
-**Real-time frame capture** — stream JPEG-encoded frames for custom processing like thumbnails, live previews, AI vision, and more:
-
-```js
-await page.screencast.start({
-  onFrame: ({ data }) => sendToVisionModel(data),
-  size: { width: 800, height: 600 },
-});
-```
-
 **Action annotations** — enable built-in visual annotations that highlight interacted elements and display action titles during recording:
 
 ```js
@@ -74,6 +70,15 @@ await page.screencast.showChapter('Adding TODOs', {
 await page.screencast.showOverlay('<div style="color: red">Recording</div>');
 ```
 
+**Real-time frame capture** — stream JPEG-encoded frames for custom processing like thumbnails, live previews, AI vision, and more:
+
+```js
+await page.screencast.start({
+  onFrame: ({ data }) => sendToVisionModel(data),
+  size: { width: 800, height: 600 },
+});
+```
+
 **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:
 
 ```js
@@ -105,26 +110,25 @@ New [browser.bind()](/api/class-browser.mdx#browser-bind) API makes a launched b
 **Bind a browser** — start a browser and bind it so others can connect:
 
 ```js
-const browser = await chromium.launch();
 const { endpoint } = await browser.bind('my-session', {
   workspaceDir: '/my/project',
 });
 ```
 
-**Connect from playwright-cli**
+**Connect from playwright-cli** — connect to the running browser from your favorite coding agent.
 
 ```bash
 playwright-cli attach my-session
 playwright-cli -s my-session snapshot
 ```
 
-**Connect from playwright/mcp**
+**Connect from @playwright/mcp** — or point your MCP server to the running browser.
 
 ```bash
 @playwright/mcp --endpoint=my-session
 ```
 
-**Connect from another client**
+**Connect from a Playwright client** — use API to connect to the browser. Multiple clients at a time are supported!
 
 ```js
 const browser = await chromium.connect(endpoint);
@@ -144,11 +148,14 @@ Call [browser.unbind()](/api/class-browser.mdx#browser-unbind) to stop accepting
 
 ### 📊 Observability
 
-Run `playwright-cli show` to open the Dashboard that lists all bound browsers, their status, and workspace.
+Run `playwright-cli show` to open the Dashboard that lists all the bound browsers, their statuses, and allows interacting with them:
+- See what your agent is doing on the background browsers
+- Click into the sessions for manual interventions
+- Open DevTools to inspect pages from the background browsers.
 
 <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" />
+<img src="https://raw.githubusercontent.com/microsoft/playwright/main/docs/src/images/release-notes-1.59-dashboard.png" alt="Demo" width="1169" height="835" />
 
 </center>
 - `playwright-cli` binds all of its browsers automatically, so you can see what your agents are doing.

python/docs/release-notes.mdx

@@ -13,7 +13,12 @@ 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, annotations, overlays, and a real-time frame stream.
+New [page.screencast](/api/class-page.mdx#page-screencast) API provides a unified interface for capturing page content with:
+- Screencast recordings
+- Action annotations
+- Visual overlays
+- Real-time frame capture
+- Agentic video receipts
 
 <center>
 
@@ -29,14 +34,6 @@ page.screencast.start(path="video.webm")
 page.screencast.stop()
 ```
 
-**Real-time frame capture** — stream JPEG-encoded frames for custom processing like thumbnails, live previews, AI vision, and more:
-
-```python
-page.screencast.start(
-    on_frame=lambda frame: send_to_vision_model(frame["data"]),
-)
-```
-
 **Action annotations** — enable built-in visual annotations that highlight interacted elements and display action titles during recording:
 
 ```python
@@ -56,6 +53,14 @@ page.screencast.show_chapter("Adding TODOs",
 page.screencast.show_overlay('<div style="color: red">Recording</div>')
 ```
 
+**Real-time frame capture** — stream JPEG-encoded frames for custom processing like thumbnails, live previews, AI vision, and more:
+
+```python
+page.screencast.start(
+    on_frame=lambda frame: send_to_vision_model(frame["data"]),
+)
+```
+
 **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:
 
 ```python
@@ -116,25 +121,25 @@ New [browser.bind()](/api/class-browser.mdx#browser-bind) API makes a launched b
 **Bind a browser** — start a browser and bind it so others can connect:
 
 ```python
-browser = await chromium.launch()
 server_info = await browser.bind("my-session",
     workspace_dir="/my/project",
 )
 ```
 
-**Connect from playwright-cli**
+**Connect from playwright-cli** — connect to the running browser from your favorite coding agent.
 
 ```bash
 playwright-cli attach my-session
+playwright-cli -s my-session snapshot
 ```
 
-**Connect from playwright/mcp**
+**Connect from @playwright/mcp** — or point your MCP server to the running browser.
 
 ```bash
 @playwright/mcp --endpoint=my-session
 ```
 
-**Connect from another client**
+**Connect from a Playwright client** — use API to connect to the browser. Multiple clients at a time are supported!
 
 ```python
 browser = await chromium.connect(server_info["endpoint"])
@@ -154,11 +159,14 @@ Call [browser.unbind()](/api/class-browser.mdx#browser-unbind) to stop accepting
 
 ### 📊 Observability
 
-Run `playwright-cli show` to open the Dashboard that lists all bound browsers, their status, and workspace.
+Run `playwright-cli show` to open the Dashboard that lists all the bound browsers, their statuses, and allows interacting with them:
+- See what your agent is doing on the background browsers
+- Click into the sessions for manual interventions
+- Open DevTools to inspect pages from the background browsers.
 
 <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" />
+<img src="https://raw.githubusercontent.com/microsoft/playwright/main/docs/src/images/release-notes-1.59-dashboard.png" alt="Demo" width="1169" height="835" />
 
 </center>
 - `playwright-cli` binds all of its browsers automatically, so you can see what your agents are doing.