feat(roll): roll to ToT Playwright (roll/next-09-12-25)

dotnet/docs/docker.mdx

@@ -109,6 +109,24 @@ This makes `hostmachine` point to the host's localhost. Your tests should use `h
 When running tests remotely, ensure the Playwright version in your tests matches the version running in the Docker container.
 :::
 
+### Connecting using noVNC and GitHub Codespaces
+
+For Docker and GitHub Codespaces environments, you can view and generate tests using the `noVNC` viewer built into the Docker image. In order for the VNC webviewer to be accessible outside of the container, you can enable the `desktop-lite` feature and specify the `webPort` in your `.devcontainer/devcontainer.json` file: 
+
+```json
+{
+  "image": "mcr.microsoft.com/playwright:v1.57.0",
+  "forwardPorts": [6080],
+  "features": {
+    "desktop-lite": {
+      "webPort": "6080"
+    }
+  }
+}
+```
+
+Once this is enabled you can open the port specified in a new browser tab and you will have access to the `noVNC` web viewer. This will enable you to record tests, pick selectors, and use codegen directly on your container.
+
 ## Image tags
 
 See [all available image tags].

java/docs/clock.mdx

@@ -59,7 +59,7 @@ Often you only need to fake `Date.now` while keeping the timers going. That way
 ```
 
 ```java
-SimpleDateFormat format = new SimpleDateFormat("yyy-MM-dd'T'HH:mm:ss");
+SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss");
 page.clock().setFixedTime(format.parse("2024-02-02T10:00:00"));
 page.navigate("http://localhost:3333");
 Locator locator = page.getByTestId("current-time");
@@ -87,7 +87,7 @@ Sometimes your timers depend on `Date.now` and are confused when the `Date.now`
 ```java
 // Initialize clock with some time before the test time and let the page load
 // naturally. `Date.now` will progress as the timers fire.
-SimpleDateFormat format = new SimpleDateFormat("yyy-MM-dd'T'HH:mm:ss");
+SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss");
 page.clock().install(new Clock.InstallOptions().setTime(format.parse("2024-02-02T08:00:00")));
 page.navigate("http://localhost:3333");
 Locator locator = page.getByTestId("current-time");
@@ -162,7 +162,7 @@ In rare cases, you may want to tick through time manually, firing all timers and
 ```
 
 ```java
-SimpleDateFormat format = new SimpleDateFormat("yyy-MM-dd'T'HH:mm:ss");
+SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss");
 // Initialize clock with a specific time, let the page load naturally.
 page.clock().install(new Clock.InstallOptions()
     .setTime(format.parse("2024-02-02T08:00:00")));

java/docs/docker.mdx

@@ -117,6 +117,24 @@ This makes `hostmachine` point to the host's localhost. Your tests should use `h
 When running tests remotely, ensure the Playwright version in your tests matches the version running in the Docker container.
 :::
 
+### Connecting using noVNC and GitHub Codespaces
+
+For Docker and GitHub Codespaces environments, you can view and generate tests using the `noVNC` viewer built into the Docker image. In order for the VNC webviewer to be accessible outside of the container, you can enable the `desktop-lite` feature and specify the `webPort` in your `.devcontainer/devcontainer.json` file: 
+
+```json
+{
+  "image": "mcr.microsoft.com/playwright:v1.57.0",
+  "forwardPorts": [6080],
+  "features": {
+    "desktop-lite": {
+      "webPort": "6080"
+    }
+  }
+}
+```
+
+Once this is enabled you can open the port specified in a new browser tab and you will have access to the `noVNC` web viewer. This will enable you to record tests, pick selectors, and use codegen directly on your container.
+
 ## Image tags
 
 See [all available image tags].

java/docs/input.mdx

@@ -22,7 +22,7 @@ page.getByRole(AriaRole.TEXTBOX).fill("Peter");
 page.getByLabel("Birth date").fill("2020-02-02");
 
 // Time input
-page.getByLabel("Appointment time").fill("13-15");
+page.getByLabel("Appointment time").fill("13:15");
 
 // Local datetime input
 page.getByLabel("Local time").fill("2020-03-02T05:15");
@@ -37,7 +37,7 @@ Using [Locator.setChecked()](/api/class-locator.mdx#locator-set-checked) is the
 page.getByLabel("I agree to the terms above").check();
 
 // Assert the checked state
-assertTrue(page.getByLabel("Subscribe to newsletter")).isChecked();
+assertThat(page.getByLabel("Subscribe to newsletter")).isChecked();
 
 // Select the radio button
 page.getByLabel("XL").check();

java/docs/locators.mdx

@@ -878,7 +878,7 @@ rowLocator
         .setHas(page.getByRole(
             AriaRole.BUTTON,
             new Page.GetByRoleOptions().setName("Say goodbye"))))
-    .screenshot(new Page.ScreenshotOptions().setPath("screenshot.png"));
+    .screenshot(new Locator.ScreenshotOptions().setPath(Paths.get("screenshot.png")));
 ```
 
 You should now have a "screenshot.png" file in your project's root directory.

nodejs/docs/api/class-browser.mdx

@@ -168,6 +168,24 @@ If directly using this method to create [BrowserContext]s, it is best practice t
   - `acceptDownloads` [boolean] *(optional)*<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="browser-new-context-option-accept-downloads"/><a href="#browser-new-context-option-accept-downloads" class="list-anchor">#</a>
 
     Whether to automatically download all the attachments. Defaults to `true` where all the downloads are accepted.
+  - `agent` [Object] *(optional)* <font size="2">Added in: v1.58</font><a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="browser-new-context-option-agent"/><a href="#browser-new-context-option-agent" class="list-anchor">#</a>
+    - `provider` [string]
+
+      LLM provider to use.
+    - `model` [string]
+
+      Model identifier within provider.
+    - `cacheFile` [string] *(optional)*
+
+      Cache file to use/generate code for performed actions into. Cache is not used if not specified (default).
+    - `cacheMode` ['force'] | ['ignore'] | ['auto'] *(optional)*
+
+      Cache control, defaults to 'auto'.
+    - `secrets` [Object]&lt;[string], [string]&gt; *(optional)*
+
+      Secrets to hide from the LLM.
+
+    Agent settings for [page.perform()](/api/class-page.mdx#page-perform) and [page.extract()](/api/class-page.mdx#page-extract).
   - `baseURL` [string] *(optional)*<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="browser-new-context-option-base-url"/><a href="#browser-new-context-option-base-url" class="list-anchor">#</a>
 
     When using [page.goto()](/api/class-page.mdx#page-goto), [page.route()](/api/class-page.mdx#page-route), [page.waitForURL()](/api/class-page.mdx#page-wait-for-url), [page.waitForRequest()](/api/class-page.mdx#page-wait-for-request), or [page.waitForResponse()](/api/class-page.mdx#page-wait-for-response) it takes the base URL in consideration by using the [`URL()`](https://developer.mozilla.org/en-US/docs/Web/API/URL/URL) constructor for building the corresponding URL. Unset by default. Examples:

nodejs/docs/api/class-page.mdx

@@ -701,6 +701,36 @@ const crypto = require('crypto');
 
 ---
 
+### extract {#page-extract}
+
+<font size="2" style={{position: "relative", top: "-20px"}}>Added in: v1.58</font><x-search>page.extract</x-search>
+
+Extract information from the page using the agentic loop, return it in a given Zod format.
+
+**Usage**
+
+```js
+await page.extract('List of items in the cart', z.object({
+  title: z.string().describe('Item title to extract'),
+  price: z.string().describe('Item price to extract'),
+}).array());
+```
+
+**Arguments**
+- `query` [string]<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="page-extract-option-query"/><a href="#page-extract-option-query" class="list-anchor">#</a>
+
+  Task to perform using agentic loop.
+- `schema` [z.ZodSchema]<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="page-extract-option-schema"/><a href="#page-extract-option-schema" class="list-anchor">#</a>
+- `options` [Object] *(optional)*
+  - `maxTurns` [number] *(optional)*<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="page-extract-option-max-turns"/><a href="#page-extract-option-max-turns" class="list-anchor">#</a>
+
+    Maximum number of agentic steps to take while extracting the information.
+
+**Returns**
+- [Promise]&lt;[Object]&gt;<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="page-extract-return"/><a href="#page-extract-return" class="list-anchor">#</a>
+
+---
+
 ### frame {#page-frame}
 
 <font size="2" style={{position: "relative", top: "-20px"}}>Added before v1.9</font><x-search>page.frame</x-search>
@@ -1485,6 +1515,35 @@ The [format](/api/class-page.mdx#page-pdf-option-format) options are:
 
 ---
 
+### perform {#page-perform}
+
+<font size="2" style={{position: "relative", top: "-20px"}}>Added in: v1.58</font><x-search>page.perform</x-search>
+
+Perform action using agentic loop.
+
+**Usage**
+
+```js
+await page.perform('Click submit button');
+```
+
+**Arguments**
+- `task` [string]<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="page-perform-option-task"/><a href="#page-perform-option-task" class="list-anchor">#</a>
+
+  Task to perform using agentic loop.
+- `options` [Object] *(optional)*
+  - `key` [string] *(optional)*<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="page-perform-option-key"/><a href="#page-perform-option-key" class="list-anchor">#</a>
+
+    All the agentic actions are converted to the Playwright calls and are cached. By default, they are cached globally with the `task` as a key. This option allows controlling the cache key explicitly.
+  - `maxTurns` [number] *(optional)*<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="page-perform-option-max-turns"/><a href="#page-perform-option-max-turns" class="list-anchor">#</a>
+
+    Maximum number of agentic steps to take while performing this action.
+
+**Returns**
+- [Promise]&lt;[void]&gt;<a aria-hidden="true" tabIndex="-1" class="list-anchor-link" id="page-perform-return"/><a href="#page-perform-return" class="list-anchor">#</a>
+
+---
+
 ### reload {#page-reload}
 
 <font size="2" style={{position: "relative", top: "-20px"}}>Added before v1.9</font><x-search>page.reload</x-search>

nodejs/docs/api/class-testoptions.mdx

@@ -92,6 +92,38 @@ Learn more about [various timeouts](../test-timeouts.mdx).
 
 ---
 
+### agent {#test-options-agent}
+
+<font size="2" style={{position: "relative", top: "-20px"}}>Added in: v1.58</font><x-search>testOptions.agent</x-search>
+
+Agent settings for [page.perform()](/api/class-page.mdx#page-perform) and [page.extract()](/api/class-page.mdx#page-extract).
+
+**Usage**
+
+```js
+testOptions.agent
+```
+
+**Type**
+- [Object]
+  - `provider` [string]
+
+    LLM provider to use.
+  - `model` [string]
+
+    Model identifier within provider.
+  - `cacheFile` [string] *(optional)*
+
+    Cache file to use/generate code for performed actions into. Cache is not used if not specified (default).
+  - `cacheMode` ['force'] | ['ignore'] | ['auto'] *(optional)*
+
+    Cache control, defaults to 'auto'.
+  - `secrets` [Object]&lt;[string], [string]&gt; *(optional)*
+
+    Secrets to hide from the LLM.
+
+---
+
 ### baseURL {#test-options-base-url}
 
 <font size="2" style={{position: "relative", top: "-20px"}}>Added in: v1.10</font><x-search>testOptions.baseURL</x-search>

nodejs/docs/docker.mdx

@@ -115,6 +115,24 @@ This makes `hostmachine` point to the host's localhost. Your tests should use `h
 When running tests remotely, ensure the Playwright version in your tests matches the version running in the Docker container.
 :::
 
+### Connecting using noVNC and GitHub Codespaces
+
+For Docker and GitHub Codespaces environments, you can view and generate tests using the `noVNC` viewer built into the Docker image. In order for the VNC webviewer to be accessible outside of the container, you can enable the `desktop-lite` feature and specify the `webPort` in your `.devcontainer/devcontainer.json` file: 
+
+```json
+{
+  "image": "mcr.microsoft.com/playwright:v1.57.0",
+  "forwardPorts": [6080],
+  "features": {
+    "desktop-lite": {
+      "webPort": "6080"
+    }
+  }
+}
+```
+
+Once this is enabled you can open the port specified in a new browser tab and you will have access to the `noVNC` web viewer. This will enable you to record tests, pick selectors, and use codegen directly on your container.
+
 ## Image tags
 
 See [all available image tags].

nodejs/docs/test-ui-mode.mdx

@@ -127,7 +127,7 @@ npx playwright test --ui-port=8080 --ui-host=0.0.0.0
 ```
 
 :::note
-Be aware that when specifying the `--ui-host=0.0.0.0` flag, UI Mode with your traces, the passwords and secrets is accessible from other machines inside your network. In the case of GitHub Codespaces, the ports are only accessible from your account by default.
+Be aware that when specifying the `--ui-host=0.0.0.0` flag, UI Mode with your traces, the passwords and secrets are accessible from other machines inside your network. In the case of GitHub Codespaces, the ports are only accessible from your account by default.
 :::
 
 

python/docs/ci.mdx

@@ -83,7 +83,7 @@ jobs:
     name: 'Playwright Tests'
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright/python:v1.56.0-noble
+      image: mcr.microsoft.com/playwright/python:v1.57.0-noble
       options: --user 1001
     steps:
       - uses: actions/checkout@v5
@@ -173,7 +173,7 @@ trigger:
 
 pool:
   vmImage: ubuntu-latest
-container: mcr.microsoft.com/playwright/python:v1.56.0-noble
+container: mcr.microsoft.com/playwright/python:v1.57.0-noble
 
 steps:
 - task: UsePythonVersion@0
@@ -197,7 +197,7 @@ Running Playwright on CircleCI is very similar to running on GitHub Actions. In
 executors:
   pw-noble-development:
     docker:
-      - image: mcr.microsoft.com/playwright/python:v1.56.0-noble
+      - image: mcr.microsoft.com/playwright/python:v1.57.0-noble
 ```
 
 Note: When using the docker agent definition, you are specifying the resource class of where playwright runs to the 'medium' tier [here](https://circleci.com/docs/configuration-reference?#docker-execution-environment). The default behavior of Playwright is to set the number of workers to the detected core count (2 in the case of the medium tier). Overriding the number of workers to greater than this number will cause unnecessary timeouts and failures.
@@ -208,7 +208,7 @@ Jenkins supports Docker agents for pipelines. Use the [Playwright Docker image](
 
 ```groovy
 pipeline {
-   agent { docker { image 'mcr.microsoft.com/playwright/python:v1.56.0-noble' } }
+   agent { docker { image 'mcr.microsoft.com/playwright/python:v1.57.0-noble' } }
    stages {
       stage('e2e-tests') {
          steps {
@@ -225,7 +225,7 @@ pipeline {
 Bitbucket Pipelines can use public [Docker images as build environments](https://confluence.atlassian.com/bitbucket/use-docker-images-as-build-environments-792298897.html). To run Playwright tests on Bitbucket, use our public Docker image ([see Dockerfile](./docker.mdx)).
 
 ```yml
-image: mcr.microsoft.com/playwright/python:v1.56.0-noble
+image: mcr.microsoft.com/playwright/python:v1.57.0-noble
 ```
 
 ### GitLab CI
@@ -238,7 +238,7 @@ stages:
 
 tests:
   stage: test
-  image: mcr.microsoft.com/playwright/python:v1.56.0-noble
+  image: mcr.microsoft.com/playwright/python:v1.57.0-noble
   script:
   ...
 ```