Playwright v1.64.0 — Release Notes & Engineering Impact

## 🧰 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