New page.webmcp and frame.webmcp give access to the tools that a page registers through the experimental WebMCP browser API, so you can test them like any other part of your app:
New style option takes CSS declarations for the point marker, the target highlight and the action title. It replaces the fontSize option, which is now deprecated.
The cursor stays visible at the last action point, survives navigations and travels along a natural, eased path.
Videos are encoded with VP9 instead of VP8, which takes less CPU and produces smaller files of the same or better
quality.
New testProject.default option keeps a project in the config without running it by default. You can configure every browser you care about, and let a plain npx playwright test run just your favourite one:
npx playwright test# runs chromium only
npx playwright test --project=firefox # runs firefox
npx playwright test --project="*"# runs all three, for example on CI
New --shuffle command line option schedules tests in a random order, which helps to find tests that accidentally depend on each other.
npx playwright test --shuffle
# Running 42 tests using 4 workers, shuffle seed 271828182# ...# Pass the seed to reproduce the same order.
npx playwright test --shuffle 271828182
Relative locators such as locator.nth() or locator.first() are resolved inside each parent
separately, which makes column-like queries straightforward:
// The third cell of every row, not the third cell in the table.
constthirdColumn=page.getByRole('cell').nth(2).within(page.getByRole('row'));awaitexpect(thirdColumn).toHaveText(['Apple','Banana','Cherry']);
New option signCount sets the initial signature counter of a virtual credential. credentials.create() and credentials.get() return the current signCount, and it is saved and restored together with the credentials in the storage state.
New fullConfig.filteredProjects lists the projects that were selected to run after applying the --project filter. It is available in global setup and reporters.
screen property is now forwarded from the device descriptors. If you use ...devices['Desktop Chrome'] and alike, window.screen and media queries now see the emulated screen size. You can opt-out by explicitly setting screen to undefined:
JSX in your test files now follows your tsconfig.json. Playwright compiles JSX in test files according to the jsx, jsxFactory, jsxFragmentFactory and jsxImportSourcetsconfig options, and defaults to the automatic runtime from react/jsx-runtime.
--update-snapshots=missing now passes the test run. Tests that only create missing snapshots now pass in the 'missing' mode of testConfig.updateSnapshots, so that CI can generate new snapshots and verify the existing ones in a single run. The mode used when the option is not specified is now called 'default' and behaves as before: missing snapshots are written and the test fails.
Elements inside hidden iframes are considered hidden. Elements inside an iframe that is not visible, for example with visibility: hidden, are now considered hidden by actions, locator.isVisible() and expect(locator).toBeVisible().
Browser Versions
Chromium 156.0.8078.4
Mozilla Firefox 157.0
WebKit 27.2
This version was also tested against the following stable channels:
Tests that access a shared resource — an external service, a global account setting — can now declare a named lock.
Tests that share a lock name never run concurrently, across files, workers and projects, while
everything else keeps running in parallel:
test('update user settings',{lock:'user-settings'},async({page})=>{// never runs at the same time as other tests holding 'user-settings'
});
A test can hold multiple locks, and test.describe() accepts a lock for the whole group.
Learn more about test locks.
🪟 Locate across frames
page.frameLocator() and frame.frameLocator() called without a selector search in any frame of the
subtree, so you no longer need to locate the iframe first:
// Finds the button in any frame on the page.
awaitpage.frameLocator().getByRole('button').click();
The rest of the locator resolves inside a single frame, just like a regular locator, and an error is thrown when it
matches elements in several frames.
👁️ Visible-only locators
New locator.visible() returns a locator that matches only visible elements. It is the recommended
replacement for the :visible CSS pseudo-class:
awaitpage.locator('button').visible().click();
🧾 Step params and subtitles
Steps now carry structured data for reporters. Playwright API steps report the target locator and call arguments,
and test.step() accepts subtitle and params options for your own steps:
Reporters receive them via testStep.subtitle and testStep.params. For Playwright API
steps, the subtitle is the locator or the navigation url — for example, Click with subtitle getByRole('button').
Both are rendered next to the step title in the trace viewer and the HTML report.
🖼️ Aria and screen snapshots in traces
The snapshots option of tracing.start() and the testOptions.trace fixture option now accept an
object selecting what to capture on every action:
With aria and screen snapshots recorded, the new Display Aria mode in the trace viewer shows the action screenshot
side by side with the aria snapshot, and hovering an aria node highlights it on the screenshot.
New APIs
Browser and Context
httpCredentials now also accepts an array of credentials. The first entry matching the request origin is used, and entries without an origin match any request.
New option opfs includes the origin private file system in the storage state, so it can be persisted and restored into later contexts.
New --add-reporter command line option appends a reporter on top of the ones configured in playwright.config, instead of replacing them like --reporter does.
New omitTags option for the list, line, dot, github and junit reporters suppresses the tags that are automatically appended to test titles.
Command line
npx playwright install --no-remove keeps the browsers of other Playwright installations instead of removing them.
npx playwright codegen --http-credentials records against pages behind HTTP authentication.
Miscellaneous
New built-in perfetto reporter writes a Trace Event Format file for the Perfetto UI or chrome://tracing, rendering the test run as a timeline with a lane per worker.
The HTML report renders a duration waterfall next to test steps.
Announcements
⚠️ The experimental @playwright/experimental-ct-react, @playwright/experimental-ct-react17 and @playwright/experimental-ct-vue packages will no longer be updated. Follow the migration guide to move to the stories model introduced in 1.62. Story ids passed to fixtures.mount() can now be typed through the generated Stories registry.
⚠️ Ubuntu 20.04 is not supported anymore.
🐧 On Linux arm64, Playwright now downloads the Chrome for Testing build of Chromium, the same build used on all other platforms.
Browser Versions
Chromium 153.0.8010.12
Mozilla Firefox 155.0
WebKit 26.6
This version was also tested against the following stable channels:
Component testing moves to a stories and galleries model.
A story wraps your component in one specific scenario — hard-coded props, mock data, providers — and a gallery page that you serve renders stories on demand.
The new fixtures.mount() fixture navigates to the gallery, mounts a story by id, and returns a Locator scoped to the story's root element:
test('click should expand',async({mount})=>{constcomponent=awaitmount('components/Expandable/Stateful');awaitcomponent.getByRole('button').click();awaitexpect(component.getByTestId('expanded')).toHaveValue('true');});
Pass a story type as a template argument to type-check its props, and use update(props) / unmount() on the returned locator to re-render or tear down within a test.
🛑 Cancel operations with AbortSignal
Most operations and web-first assertions now accept a signal option that takes an AbortSignal, letting you cancel long-running actions, navigations, waits, and assertions:
// Visual comparisons store the golden snapshot as lossless WebP.
awaitexpect(page).toHaveScreenshot('homepage.webp');// Standalone screenshots can trade quality for size with lossy WebP.
awaitpage.screenshot({path:'homepage.webp',quality:50});
🧩 Custom test filtering with Reporter.preprocess()
New reporter.preprocess() hook runs after the configuration is resolved and before reporter.onBegin(), letting a reporter mark individual tests as skipped, excluded, fixed, or failing through a TestRun object:
New testConfig.retryStrategy controls when failed tests are retried.
The default 'immediate' retries as soon as a worker is free; 'isolated' runs all retries at the end, one by one in a single worker, to minimize interference with the rest of the suite:
New option credentials includes the context's virtual WebAuthn Credentials (passkeys) in the storage state, so they can be persisted and re-seeded into later contexts.
Actions
New scroll option ("auto" | "none") on actions to opt out of Playwright's automatic scroll-into-view.
Network
New apiResponse.timing() returns resource timing information for an API response.
Evaluation
New locator.waitForFunction() waits until a function — called with the matching element — returns a truthy value.
page.evaluate() and related methods now accept functions as evaluate arguments.
This MR contains the following updates:
| Package | Change | [Age](https://docs.renovatebot.com/merge-confidence/) | [Confidence](https://docs.renovatebot.com/merge-confidence/) |
|---|---|---|---|
| [@playwright/test](https://playwright.dev) ([source](https://github.com/microsoft/playwright)) | [`1.61.1` → `1.64.0`](https://renovatebot.com/diffs/npm/@playwright%2ftest/1.61.1/1.64.0) |  |  |
---
### Release Notes
<details>
<summary>microsoft/playwright (@​playwright/test)</summary>
### [`v1.64.0`](https://github.com/microsoft/playwright/releases/tag/v1.64.0)
[Compare Source](https://github.com/microsoft/playwright/compare/v1.63.0...v1.64.0)
#### 🧰 WebMCP
New [page.webmcp](https://playwright.dev/docs/api/class-page#page-webmcp) and [frame.webmcp](https://playwright.dev/docs/api/class-frame#frame-webmcp) give access to the tools that a page registers through the experimental [WebMCP](https://playwright.dev/docs/api/class-webmcp) browser API, so you can test them like any other part of your app:
```js
const browser = await chromium.launch({ args: ['--enable-features=WebMCP'] });
const page = await browser.newPage();
await page.goto('https://example.com');
for (const tool of await page.webmcp.tools())
console.log(tool.name, tool.description);
const result = await page.webmcp.callTool('add', { a: 2, b: 40 });
console.log(result.content[0].text); // "42"
```
[Playwright MCP](https://playwright.dev/docs/getting-started-mcp) also supports WebMCP by default, with page-defined tools offered to the agent as `webmcp_<tool>`. Pass `--no-webmcp` to opt out.
[`playwright-cli`](https://playwright.dev/docs/getting-started-cli) exposes them as well:
```bash
playwright-cli webmcp-list
playwright-cli webmcp-call search_catalog --params '{"query":"cats"}'
```
#### 🎬 Better videos
Videos can now be recorded at a custom frame rate, and the decorations for actions are styled with plain CSS:
```js
// playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
video: {
mode: 'on',
size: { width: 1920, height: 1080 },
fps: 60,
show: {
actions: {
style: {
point: 'width: 20px; height: 20px; border-radius: 50%; background: red',
highlight: 'outline: 2px solid #​333; background: rgba(0, 128, 255, .15)',
title: 'font-size: 16px',
},
},
},
},
},
});
```
- New `fps` option in [testOptions.video](https://playwright.dev/docs/api/class-testoptions#test-options-video), [`recordVideo`](https://playwright.dev/docs/api/class-browser#browser-new-context-option-record-video) and
[screencast.start()](https://playwright.dev/docs/api/class-screencast#screencast-start). Firefox and WebKit currently capture up to 25 frames per second.
- New [`style`](https://playwright.dev/docs/api/class-screencast#screencast-show-actions-option-style) option takes CSS declarations for the `point` marker, the target
`highlight` and the action `title`. It replaces the `fontSize` option, which is now deprecated.
- The cursor stays visible at the last action point, survives navigations and travels along a natural, eased path.
- Videos are encoded with VP9 instead of VP8, which takes less CPU and produces smaller files of the same or better
quality.
- All video options are also available in [Playwright MCP](https://playwright.dev/docs/getting-started-mcp) and [`playwright-cli`](https://playwright.dev/docs/getting-started-cli).
#### 🎯 Test runner
- New [testProject.default](https://playwright.dev/docs/api/class-testproject#test-project-default) option keeps a project in the config without running it by default. You can configure every browser you care about, and let a plain `npx playwright test` run just your favourite one:
```js
// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
projects: [
{ name: 'chromium', use: devices['Desktop Chrome'] },
{ name: 'firefox', use: devices['Desktop Firefox'], default: false },
{ name: 'webkit', use: devices['Desktop Safari'], default: false },
],
});
```
```bash
npx playwright test # runs chromium only
npx playwright test --project=firefox # runs firefox
npx playwright test --project="*" # runs all three, for example on CI
```
- New `--shuffle` command line option schedules tests in a random order, which helps to find tests that accidentally depend on each other.
```bash
npx playwright test --shuffle
# Running 42 tests using 4 workers, shuffle seed 271828182
# ...
# Pass the seed to reproduce the same order.
npx playwright test --shuffle 271828182
```
- New `lock` option in [test.describe.configure()](https://playwright.dev/docs/api/class-test#test-describe-configure) adds [test locks](https://playwright.dev/docs/test-parallel#test-locks) to all tests in a file or a group:
```js
test.describe.configure({ lock: 'user-settings' });
```
- New `type` option of `toHaveScreenshot` in [testConfig.expect](https://playwright.dev/docs/api/class-testconfig#test-config-expect) stores all unnamed screenshots as WebP:
```js
// playwright.config.ts
export default defineConfig({
expect: {
toHaveScreenshot: { type: 'webp' },
},
});
```
#### 🪆 Locator.within()
New [locator.within()](https://playwright.dev/docs/api/class-locator#locator-within) combines two locators that you already have, reading in the natural order —
"this button, within that dialog":
```js
const saveButton = page.getByRole('button', { name: 'Save' });
const dialog = page.getByTestId('settings-dialog');
await saveButton.within(dialog).click();
```
Relative locators such as [locator.nth()](https://playwright.dev/docs/api/class-locator#locator-nth) or [locator.first()](https://playwright.dev/docs/api/class-locator#locator-first) are resolved inside each parent
separately, which makes column-like queries straightforward:
```js
// The third cell of every row, not the third cell in the table.
const thirdColumn = page.getByRole('cell').nth(2).within(page.getByRole('row'));
await expect(thirdColumn).toHaveText(['Apple', 'Banana', 'Cherry']);
```
#### New APIs
- New [page.getByRef()](https://playwright.dev/docs/api/class-page#page-get-by-ref) locates an element by its aria ref, such as `e2`, reported by [page.ariaSnapshot()](https://playwright.dev/docs/api/class-page#page-aria-snapshot) in the `'ai'` mode.
- New option [`includeShadow`](https://playwright.dev/docs/api/class-page#page-content-option-include-shadow) in [page.content()](https://playwright.dev/docs/api/class-page#page-content) and [frame.content()](https://playwright.dev/docs/api/class-frame#frame-content) serializes open shadow roots as [declarative shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM#declaratively_with_html).
- New option [`signCount`](https://playwright.dev/docs/api/class-credentials#credentials-create-option-sign-count) sets the initial signature counter of a virtual credential. [credentials.create()](https://playwright.dev/docs/api/class-credentials#credentials-create) and [credentials.get()](https://playwright.dev/docs/api/class-credentials#credentials-get) return the current `signCount`, and it is saved and restored together with the credentials in the storage state.
- New [fullConfig.filteredProjects](https://playwright.dev/docs/api/class-fullconfig#full-config-filtered-projects) lists the projects that were selected to run after applying the `--project` filter. It is available in global setup and reporters.
- New [apiRequestContext.addCookies()](https://playwright.dev/docs/api/class-apirequestcontext#api-request-context-add-cookies), [apiRequestContext.cookies()](https://playwright.dev/docs/api/class-apirequestcontext#api-request-context-cookies) and [apiRequestContext.clearCookies()](https://playwright.dev/docs/api/class-apirequestcontext#api-request-context-clear-cookies) manage cookies of a request context, mirroring the [BrowserContext](https://playwright.dev/docs/api/class-browsercontext) methods:
```js
await request.addCookies([{ name: 'session-id', value: '42', url: 'https://example.com' }]);
console.log(await request.cookies('https://example.com'));
await request.clearCookies({ name: 'session-id' });
```
#### Breaking changes ⚠️
- `screen` property is now forwarded from the [device descriptors](https://playwright.dev/docs/emulation#devices). If you use `...devices['Desktop Chrome']` and alike, `window.screen` and media queries now see the emulated screen size. You can opt-out by explicitly setting `screen` to `undefined`:
```js
// playwright.config.ts
export default defineConfig({
use: {
...devices['Desktop Chrome'],
screen: undefined,
},
});
```
- JSX in your test files now follows your `tsconfig.json`. Playwright compiles JSX in test files according to the `jsx`, `jsxFactory`, `jsxFragmentFactory` and `jsxImportSource` [tsconfig options](https://playwright.dev/docs/test-typescript#tsconfig-jsx-options), and defaults to the automatic runtime from `react/jsx-runtime`.
- `--update-snapshots=missing` now passes the test run. Tests that only create missing snapshots now pass in the `'missing'` mode of [testConfig.updateSnapshots](https://playwright.dev/docs/api/class-testconfig#test-config-update-snapshots), so that CI can generate new snapshots and verify the existing ones in a single run. The mode used when the option is not specified is now called `'default'` and behaves as before: missing snapshots are written and the test fails.
- Elements inside hidden iframes are considered hidden. Elements inside an iframe that is not visible, for example with `visibility: hidden`, are now considered hidden by actions, [locator.isVisible()](https://playwright.dev/docs/api/class-locator#locator-is-visible) and [expect(locator).toBeVisible()](https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-be-visible).
#### Browser Versions
- Chromium 156.0.8078.4
- Mozilla Firefox 157.0
- WebKit 27.2
This version was also tested against the following stable channels:
- Google Chrome 155
- Microsoft Edge 155
### [`v1.63.0`](https://github.com/microsoft/playwright/releases/tag/v1.63.0)
[Compare Source](https://github.com/microsoft/playwright/compare/v1.62.1...v1.63.0)
#### 🔒 Test locks
Tests that access a shared resource — an external service, a global account setting — can now declare a named `lock`.
Tests that share a lock name never run concurrently, across files, workers and [projects](https://playwright.dev/docs/test-projects), while
everything else keeps running in parallel:
```js
test('update user settings', { lock: 'user-settings' }, async ({ page }) => {
// never runs at the same time as other tests holding 'user-settings'
});
```
A test can hold multiple locks, and [test.describe()](https://playwright.dev/docs/api/class-test#test-describe) accepts a `lock` for the whole group.
Learn more about [test locks](https://playwright.dev/docs/test-parallel#test-locks).
#### 🪟 Locate across frames
[page.frameLocator()](https://playwright.dev/docs/api/class-page#page-frame-locator) and [frame.frameLocator()](https://playwright.dev/docs/api/class-frame#frame-frame-locator) called without a selector search in any frame of the
subtree, so you no longer need to locate the iframe first:
```js
// Finds the button in any frame on the page.
await page.frameLocator().getByRole('button').click();
```
The rest of the locator resolves inside a single frame, just like a regular locator, and an error is thrown when it
matches elements in several frames.
#### 👁️ Visible-only locators
New [locator.visible()](https://playwright.dev/docs/api/class-locator#locator-visible) returns a locator that matches only visible elements. It is the recommended
replacement for the `:visible` CSS pseudo-class:
```js
await page.locator('button').visible().click();
```
#### 🧾 Step params and subtitles
Steps now carry structured data for reporters. Playwright API steps report the target locator and call arguments,
and [test.step()](https://playwright.dev/docs/api/class-test#test-step) accepts `subtitle` and `params` options for your own steps:
```js
await test.step('Login', async () => {
// ...
}, { subtitle: 'as admin', params: { user: 'admin' } });
```
Reporters receive them via [testStep.subtitle](https://playwright.dev/docs/api/class-teststep#test-step-subtitle) and [testStep.params](https://playwright.dev/docs/api/class-teststep#test-step-params). For Playwright API
steps, the subtitle is the locator or the navigation url — for example, `Click` with subtitle `getByRole('button')`.
Both are rendered next to the step title in the trace viewer and the HTML report.
#### 🖼️ Aria and screen snapshots in traces
The `snapshots` option of [tracing.start()](https://playwright.dev/docs/api/class-tracing#tracing-start) and the [testOptions.trace](https://playwright.dev/docs/api/class-testoptions#test-options-trace) fixture option now accept an
object selecting what to capture on every action:
```js
// playwright.config.ts
export default defineConfig({
use: {
trace: {
mode: 'on',
snapshots: { dom: true, aria: true, screen: true }
},
},
});
```
With aria and screen snapshots recorded, the new **Display Aria** mode in the trace viewer shows the action screenshot
side by side with the aria snapshot, and hovering an aria node highlights it on the screenshot.
#### New APIs
##### Browser and Context
- [`httpCredentials`](https://playwright.dev/docs/api/class-browser#browser-new-context-option-http-credentials) now also accepts an array of credentials. The first entry matching the request origin is used, and entries without an origin match any request.
- New option [`opfs`](https://playwright.dev/docs/api/class-browsercontext#browser-context-storage-state-option-opfs) includes the [origin private file system](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API/Origin_private_file_system) in the storage state, so it can be persisted and restored into later contexts.
- New events [page.on('dialogclosed')](https://playwright.dev/docs/api/class-page#page-event-dialog-closed) and [browserContext.on('dialogclosed')](https://playwright.dev/docs/api/class-browsercontext#browser-context-event-dialog-closed) are emitted when a JavaScript dialog is accepted, dismissed or closed by the user.
##### Locators
- New [locator.ariaSnapshotJSON()](https://playwright.dev/docs/api/class-locator#locator-aria-snapshot-json) and [page.ariaSnapshotJSON()](https://playwright.dev/docs/api/class-page#page-aria-snapshot-json) return the aria snapshot as a JSON value instead of YAML markup, with `mode`, `depth` and `boxes` options.
- [apiRequestContext.get()](https://playwright.dev/docs/api/class-apirequestcontext#api-request-context-get) and other request methods accept a type argument that types the response `json()`:
```js
const response = await request.get<User>('/api/users/42');
const user = await response.json(); // typed as User
```
##### Test runner
- New standalone [testOptions.reducedMotion](https://playwright.dev/docs/api/class-testoptions#test-options-reduced-motion), [testOptions.forcedColors](https://playwright.dev/docs/api/class-testoptions#test-options-forced-colors) and [testOptions.contrast](https://playwright.dev/docs/api/class-testoptions#test-options-contrast) options.
- New `--add-reporter` command line option appends a reporter on top of the ones configured in `playwright.config`, instead of replacing them like `--reporter` does.
- New `omitTags` option for the `list`, `line`, `dot`, `github` and `junit` reporters suppresses the tags that are automatically appended to test titles.
##### Command line
- `npx playwright install --no-remove` keeps the browsers of other Playwright installations instead of removing them.
- `npx playwright codegen --http-credentials` records against pages behind HTTP authentication.
##### Miscellaneous
- New built-in [`perfetto`](https://playwright.dev/docs/test-reporters#perfetto-reporter) reporter writes a Trace Event Format file for the [Perfetto UI](https://ui.perfetto.dev) or `chrome://tracing`, rendering the test run as a timeline with a lane per worker.
- The HTML report renders a duration waterfall next to test steps.
#### Announcements
- ⚠️ The experimental `@playwright/experimental-ct-react`, `@playwright/experimental-ct-react17` and `@playwright/experimental-ct-vue` packages will no longer be updated. Follow the [migration guide](https://playwright.dev/docs/test-components#migration-from-the-experimental-packages) to move to the stories model introduced in 1.62. Story ids passed to [fixtures.mount()](https://playwright.dev/docs/api/class-fixtures#fixtures-mount) can now be typed through the generated `Stories` registry.
- ⚠️ Ubuntu 20.04 is not supported anymore.
- 🐧 On Linux arm64, Playwright now downloads the [Chrome for Testing](https://developer.chrome.com/blog/chrome-for-testing) build of Chromium, the same build used on all other platforms.
#### Browser Versions
- Chromium 153.0.8010.12
- Mozilla Firefox 155.0
- WebKit 26.6
This version was also tested against the following stable channels:
- Google Chrome 153
- Microsoft Edge 153
### [`v1.62.1`](https://github.com/microsoft/playwright/releases/tag/v1.62.1)
[Compare Source](https://github.com/microsoft/playwright/compare/v1.62.0...v1.62.1)
##### Bug Fixes
- [#​41989](https://github.com/microsoft/playwright/issues/41989) \[Regression]: tsconfig "extends" bare specifier isn't resolved via node_modules walk-up like tsc (fatal since 1.62)
- [#​41998](https://github.com/microsoft/playwright/issues/41998) \[Regression]: directory-form tsconfig project references ("path": "../pkg") fail to resolve (fatal since 1.62)
- [#​41985](https://github.com/microsoft/playwright/issues/41985) Accessibility snapshot drops button name when text is nested inside spans with aria-hidden SVG
- [#​42000](https://github.com/microsoft/playwright/issues/42000) \[Regression]: page.evaluate() arg of a branded primitive type (string & { brand }) no longer type-checks since 1.62
- [#​42013](https://github.com/microsoft/playwright/issues/42013) \[BUG]Image-type actionable elements are not presented in the snapshot.
### [`v1.62.0`](https://github.com/microsoft/playwright/releases/tag/v1.62.0)
[Compare Source](https://github.com/microsoft/playwright/compare/v1.61.1...v1.62.0)
#### 🧱 New component testing model
[Component testing](https://playwright.dev/docs/test-components) moves to a **stories and galleries** model.
A **story** wraps your component in one specific scenario — hard-coded props, mock data, providers — and a **gallery** page that you serve renders stories on demand.
The new [fixtures.mount()](https://playwright.dev/docs/api/class-fixtures#fixtures-mount) fixture navigates to the gallery, mounts a story by id, and returns a [Locator](https://playwright.dev/docs/api/class-locator) scoped to the story's root element:
```js
test('click should expand', async ({ mount }) => {
const component = await mount('components/Expandable/Stateful');
await component.getByRole('button').click();
await expect(component.getByTestId('expanded')).toHaveValue('true');
});
```
Pass a story type as a template argument to type-check its props, and use `update(props)` / `unmount()` on the returned locator to re-render or tear down within a test.
#### 🛑 Cancel operations with AbortSignal
Most operations and web-first assertions now accept a `signal` option that takes an [`AbortSignal`](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal), letting you cancel long-running actions, navigations, waits, and assertions:
```js
const controller = new AbortController();
setTimeout(() => controller.abort(), 1000);
await page.getByRole('button', { name: 'Submit' }).click({ signal: controller.signal });
await expect(page.getByText('Done')).toBeVisible({ signal: controller.signal });
```
Providing a signal does not disable the default timeout; pass `timeout: 0` to disable it.
#### 🖼️ WebP screenshots
[expect(page).toHaveScreenshot()](https://playwright.dev/docs/api/class-pageassertions#page-assertions-to-have-screenshot-1) and [expect(locator).toHaveScreenshot()](https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-have-screenshot-1) can now store snapshots in the WebP format — just give the snapshot a `.webp` name:
```js
// Visual comparisons store the golden snapshot as lossless WebP.
await expect(page).toHaveScreenshot('homepage.webp');
// Standalone screenshots can trade quality for size with lossy WebP.
await page.screenshot({ path: 'homepage.webp', quality: 50 });
```
[page.screenshot()](https://playwright.dev/docs/api/class-page#page-screenshot) and \[locator.screenshot() (<https://playwright.dev/docs/api/class-locator#locator-screenshot>) also accept `webp` as a `type`, where quality `100` (the default) is lossless and lower values use lossy compression.
#### 🧩 Custom test filtering with Reporter.preprocess()
New [reporter.preprocess()](https://playwright.dev/docs/api/class-reporter#reporter-preprocess) hook runs after the configuration is resolved and before [reporter.onBegin()](https://playwright.dev/docs/api/class-reporter#reporter-on-begin), letting a reporter mark individual tests as skipped, excluded, fixed, or failing through a [TestRun](https://playwright.dev/docs/api/class-testrun) object:
```js
class MyReporter {
async preprocess({ config, suite, testRun }) {
for (const test of suite.allTests()) {
if (shouldSkip(test))
testRun.skip(test);
}
}
}
```
#### 🔁 Isolated retries
New [testConfig.retryStrategy](https://playwright.dev/docs/api/class-testconfig#test-config-retry-strategy) controls when failed tests are retried.
The default `'immediate'` retries as soon as a worker is free; `'isolated'` runs all retries at the end, one by one in a single worker, to minimize interference with the rest of the suite:
```js
// playwright.config.ts
export default defineConfig({
retries: 2,
retryStrategy: 'isolated',
});
```
#### New APIs
##### Browser and Context
- New option [`credentials`](https://playwright.dev/docs/api/class-browsercontext#browser-context-storage-state-option-credentials) includes the context's virtual WebAuthn [Credentials](https://playwright.dev/docs/api/class-credentials) (passkeys) in the storage state, so they can be persisted and re-seeded into later contexts.
##### Actions
- New `scroll` option (`"auto"` | `"none"`) on actions to opt out of Playwright's automatic scroll-into-view.
##### Network
- New [apiResponse.timing()](https://playwright.dev/docs/api/class-apiresponse#api-response-timing) returns resource timing information for an API response.
##### Evaluation
- New [locator.waitForFunction()](https://playwright.dev/docs/api/class-locator#locator-wait-for-function) waits until a function — called with the matching element — returns a truthy value.
- [page.evaluate()](https://playwright.dev/docs/api/class-page#page-evaluate) and related methods now accept functions as evaluate arguments.
- [page.addInitScript()](https://playwright.dev/docs/api/class-page#page-add-init-script) / [browserContext.addInitScript()](https://playwright.dev/docs/api/class-browsercontext#browser-context-add-init-script) now accept functions as init-script arguments.
##### Command line & MCP
- Playwright now bundles the [Playwright MCP](https://playwright.dev/docs/getting-started-mcp) server and [`playwright-cli`](https://playwright.dev/docs/getting-started-cli), runnable via `npx playwright mcp` and `npx playwright cli`.
##### Reporters
- The HTML report's **Merge files** grouping — previously only a UI toggle — can now be enabled from the config with the new `mergeFiles` reporter option:
```js
// playwright.config.ts
export default defineConfig({
reporter: [['html', { mergeFiles: true }]],
});
```
#### Announcements
- ⚠️ Debian 11 is not supported anymore.
#### Browser Versions
- Chromium 151.0.7922.34
- Mozilla Firefox 153.0
- WebKit 26.5
This version was also tested against the following stable channels:
- Google Chrome 151
- Microsoft Edge 151
</details>
---
### Configuration
📅 **Schedule**: (UTC)
- Branch creation
- At any time (no schedule defined)
- Automerge
- At any time (no schedule defined)
🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.
♻ **Rebasing**: Whenever MR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 **Ignore**: Close this MR and you won't be reminded about this update again.
---
- [ ] <!-- rebase-check -->If you want to rebase/retry this MR, check this box
---
This MR has been generated by [Mend Renovate CLI](https://github.com/renovatebot/renovate).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiI0NC4xMzIuNiIsInVwZGF0ZWRJblZlciI6IjQ0LjE0NS4xIiwidGFyZ2V0QnJhbmNoIjoibWFpbiIsImxhYmVscyI6W119-->
changed title from chore(deps): update dependency @playwright/test to v1.63.0 to chore(deps): update dependency @playwright/test to v1.64.0
<p>changed title from <code class="idiff">chore(deps): update dependency @playwright/test to v1.6<span class="idiff left right deletion">3</span>.0</code> to <code class="idiff">chore(deps): update dependency @playwright/test to v1.6<span class="idiff left right addition">4</span>.0</code></p>
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
This MR contains the following updates:
1.61.1→1.64.0Release Notes
microsoft/playwright (@playwright/test)
v1.64.0Compare Source
🧰 WebMCP
New page.webmcp and frame.webmcp give access to the tools that a page registers through the experimental WebMCP browser API, so you can test them like any other part of your app:
Playwright MCP also supports WebMCP by default, with page-defined tools offered to the agent as
webmcp_<tool>. Pass--no-webmcpto opt out.playwright-cliexposes them as well:🎬 Better videos
Videos can now be recorded at a custom frame rate, and the decorations for actions are styled with plain CSS:
fpsoption in testOptions.video,recordVideoandscreencast.start(). Firefox and WebKit currently capture up to 25 frames per second.
styleoption takes CSS declarations for thepointmarker, the targethighlightand the actiontitle. It replaces thefontSizeoption, which is now deprecated.quality.
playwright-cli.🎯 Test runner
New testProject.default option keeps a project in the config without running it by default. You can configure every browser you care about, and let a plain
npx playwright testrun just your favourite one:New
--shufflecommand line option schedules tests in a random order, which helps to find tests that accidentally depend on each other.New
lockoption in test.describe.configure() adds test locks to all tests in a file or a group:New
typeoption oftoHaveScreenshotin testConfig.expect stores all unnamed screenshots as WebP:🪆 Locator.within()
New locator.within() combines two locators that you already have, reading in the natural order —
"this button, within that dialog":
Relative locators such as locator.nth() or locator.first() are resolved inside each parent
separately, which makes column-like queries straightforward:
New APIs
New page.getByRef() locates an element by its aria ref, such as
e2, reported by page.ariaSnapshot() in the'ai'mode.New option
includeShadowin page.content() and frame.content() serializes open shadow roots as declarative shadow DOM.New option
signCountsets the initial signature counter of a virtual credential. credentials.create() and credentials.get() return the currentsignCount, and it is saved and restored together with the credentials in the storage state.New fullConfig.filteredProjects lists the projects that were selected to run after applying the
--projectfilter. It is available in global setup and reporters.New apiRequestContext.addCookies(), apiRequestContext.cookies() and apiRequestContext.clearCookies() manage cookies of a request context, mirroring the BrowserContext methods:
Breaking changes ⚠️
screenproperty is now forwarded from the device descriptors. If you use...devices['Desktop Chrome']and alike,window.screenand media queries now see the emulated screen size. You can opt-out by explicitly settingscreentoundefined:JSX in your test files now follows your
tsconfig.json. Playwright compiles JSX in test files according to thejsx,jsxFactory,jsxFragmentFactoryandjsxImportSourcetsconfig options, and defaults to the automatic runtime fromreact/jsx-runtime.--update-snapshots=missingnow passes the test run. Tests that only create missing snapshots now pass in the'missing'mode of testConfig.updateSnapshots, so that CI can generate new snapshots and verify the existing ones in a single run. The mode used when the option is not specified is now called'default'and behaves as before: missing snapshots are written and the test fails.Elements inside hidden iframes are considered hidden. Elements inside an iframe that is not visible, for example with
visibility: hidden, are now considered hidden by actions, locator.isVisible() and expect(locator).toBeVisible().Browser Versions
This version was also tested against the following stable channels:
v1.63.0Compare Source
🔒 Test locks
Tests that access a shared resource — an external service, a global account setting — can now declare a named
lock.Tests that share a lock name never run concurrently, across files, workers and projects, while
everything else keeps running in parallel:
A test can hold multiple locks, and test.describe() accepts a
lockfor the whole group.Learn more about test locks.
🪟 Locate across frames
page.frameLocator() and frame.frameLocator() called without a selector search in any frame of the
subtree, so you no longer need to locate the iframe first:
The rest of the locator resolves inside a single frame, just like a regular locator, and an error is thrown when it
matches elements in several frames.
👁️ Visible-only locators
New locator.visible() returns a locator that matches only visible elements. It is the recommended
replacement for the
:visibleCSS pseudo-class:🧾 Step params and subtitles
Steps now carry structured data for reporters. Playwright API steps report the target locator and call arguments,
and test.step() accepts
subtitleandparamsoptions for your own steps:Reporters receive them via testStep.subtitle and testStep.params. For Playwright API
steps, the subtitle is the locator or the navigation url — for example,
Clickwith subtitlegetByRole('button').Both are rendered next to the step title in the trace viewer and the HTML report.
🖼️ Aria and screen snapshots in traces
The
snapshotsoption of tracing.start() and the testOptions.trace fixture option now accept anobject selecting what to capture on every action:
With aria and screen snapshots recorded, the new Display Aria mode in the trace viewer shows the action screenshot
side by side with the aria snapshot, and hovering an aria node highlights it on the screenshot.
New APIs
Browser and Context
httpCredentialsnow also accepts an array of credentials. The first entry matching the request origin is used, and entries without an origin match any request.opfsincludes the origin private file system in the storage state, so it can be persisted and restored into later contexts.Locators
mode,depthandboxesoptions.json():Test runner
--add-reportercommand line option appends a reporter on top of the ones configured inplaywright.config, instead of replacing them like--reporterdoes.omitTagsoption for thelist,line,dot,githubandjunitreporters suppresses the tags that are automatically appended to test titles.Command line
npx playwright install --no-removekeeps the browsers of other Playwright installations instead of removing them.npx playwright codegen --http-credentialsrecords against pages behind HTTP authentication.Miscellaneous
perfettoreporter writes a Trace Event Format file for the Perfetto UI orchrome://tracing, rendering the test run as a timeline with a lane per worker.Announcements
@playwright/experimental-ct-react,@playwright/experimental-ct-react17and@playwright/experimental-ct-vuepackages will no longer be updated. Follow the migration guide to move to the stories model introduced in 1.62. Story ids passed to fixtures.mount() can now be typed through the generatedStoriesregistry.Browser Versions
This version was also tested against the following stable channels:
v1.62.1Compare Source
Bug Fixes
v1.62.0Compare Source
🧱 New component testing model
Component testing moves to a stories and galleries model.
A story wraps your component in one specific scenario — hard-coded props, mock data, providers — and a gallery page that you serve renders stories on demand.
The new fixtures.mount() fixture navigates to the gallery, mounts a story by id, and returns a Locator scoped to the story's root element:
Pass a story type as a template argument to type-check its props, and use
update(props)/unmount()on the returned locator to re-render or tear down within a test.🛑 Cancel operations with AbortSignal
Most operations and web-first assertions now accept a
signaloption that takes anAbortSignal, letting you cancel long-running actions, navigations, waits, and assertions:Providing a signal does not disable the default timeout; pass
timeout: 0to disable it.🖼️ WebP screenshots
expect(page).toHaveScreenshot() and expect(locator).toHaveScreenshot() can now store snapshots in the WebP format — just give the snapshot a
.webpname:page.screenshot() and [locator.screenshot() (https://playwright.dev/docs/api/class-locator#locator-screenshot) also accept
webpas atype, where quality100(the default) is lossless and lower values use lossy compression.🧩 Custom test filtering with Reporter.preprocess()
New reporter.preprocess() hook runs after the configuration is resolved and before reporter.onBegin(), letting a reporter mark individual tests as skipped, excluded, fixed, or failing through a TestRun object:
🔁 Isolated retries
New testConfig.retryStrategy controls when failed tests are retried.
The default
'immediate'retries as soon as a worker is free;'isolated'runs all retries at the end, one by one in a single worker, to minimize interference with the rest of the suite:New APIs
Browser and Context
credentialsincludes the context's virtual WebAuthn Credentials (passkeys) in the storage state, so they can be persisted and re-seeded into later contexts.Actions
scrolloption ("auto"|"none") on actions to opt out of Playwright's automatic scroll-into-view.Network
Evaluation
Command line & MCP
playwright-cli, runnable vianpx playwright mcpandnpx playwright cli.Reporters
mergeFilesreporter option:Announcements
Browser Versions
This version was also tested against the following stable channels:
Configuration
📅 Schedule: (UTC)
🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.
♻ Rebasing: Whenever MR becomes conflicted, or you tick the rebase/retry checkbox.
🔕 Ignore: Close this MR and you won't be reminded about this update again.
This MR has been generated by Mend Renovate CLI.
mentioned in issue #25
added 1 commit
ae67b358- chore(deps): update dependency @playwright/test to v1.64.0Compare with previous version
changed title from
chore(deps): update dependency @playwright/test to v1.63.0tochore(deps): update dependency @playwright/test to v1.64.0changed the description
Preserved GitLab !4 history: source attribution, exact timestamps, discussion grouping and review positions. Historical diff snapshots: 3; visible source notes: 4.
gitlab-49-mergerequest-4.md (SHA-256
9f4f9872227d8fd8c7bd18682c91f6edc8a84484eebe82660985886e312f3af2)gitlab-49-mergerequest-4.json (SHA-256
5f9487773858fb1b34c695b768f2e49f8881469e64a679030dc52bf44b4f5796)Old CI job execution and reports are omitted. Original source files and rollback backups remain protected.
View command line instructions
Checkout
From your project repository, check out a new branch and test the changes.