Playwright v1.46.0 — Release Notes & Engineering Impact

## TLS Client Certificates Playwright now allows to supply client-side certificates, so that server can verify them, as specified by TLS Client Authentication. When client certificates are specified, all browser traffic is routed through a proxy that establishes the secure TLS connection, provides client certificates to the server and validates server certificates. The following snippet sets up a client certificate for `https://example.com`: ```ts import { defineConfig } from '@playwright/test'; export default defineConfig({ // ... use: { clientCertificates: [{ origin: 'https://example.com', certPath: './cert.pem', keyPath: './key.pem', passphrase: 'mysecretpassword', }], }, // ... }); ``` You can also provide client certificates to a particular [test project](https://playwright.dev/docs/api/class-testproject#test-project-use) or as a parameter of [browser.newContext()](https://playwright.dev/docs/api/class-browser#browser-new-context) and [apiRequest.newContext()](https://playwright.dev/docs/api/class-apirequest#api-request-new-context). ## `--only-changed` cli option New CLI option `--only-changed` allows to only run test files that have been changed since the last git commit or from a specific git "ref". ```sh # Only run test files with uncommitted changes npx playwright test --only-changed # Only run test files changed relative to the "main" branch npx playwright test --only-changed=main ``` ## Component Testing: New `router` fixture This release introduces an experimental `router` fixture to intercept and handle network requests in component testing. There are two ways to use the router fixture: - Call `router.route(url, handler)` that behaves similarly to [page.route()](https://playwright.dev/docs/api/class-page#page-route). - Call `router.use(handlers)` and pass [MSW library](https://mswjs.io) request handlers to it. Here is an example of reusing your existing MSW handlers in the test. ```ts import { handlers } from '@src/mocks/handlers'; test.beforeEach(async ({ router }) => { // install common handlers before each test await router.use(...handlers); }); test('example test', async ({ mount }) => { // test as usual, your handlers are active // ... }); ``` This fixture is only available in [component tests](https://playwright.dev/docs/test-components#handling-network-requests). ## UI Mode / Trace Viewer Updates - Test annotations are now shown in UI mode. - Content of text attachments is now rendered inline in the attachments pane. - New setting to show/hide routing actions like [route.continue()](https://playwright.dev/docs/api/class-route#route-continue). - Request method and status are shown in the network details tab. - New button to copy source file location to clipboard. - Metadata pane now displays the `baseURL`. ## Miscellaneous - New `maxRetries` option in [apiRequestContext.fetch()](https://playwright.dev/docs/api/class-apirequestcontext#api-request-context-fetch) which retries on the `ECONNRESET` network error. - New option to [box a fixture](https://playwright.dev/docs/test-fixtures#box-fixtures) to minimize the fixture exposure in test reports and error messages. - New option to provide a [custom fixture title](https://playwright.dev/docs/test-fixtures#custom-fixture-title) to be used in test reports and error messages. ## Possibly breaking change Fixture values that are array of objects, when specified in the `test.use()` block, may require being wrapped into a fixture tuple. This is best seen on the example: ```ts import { test as base } from '@playwright/test'; // Define an option fixture that has an "array of objects" value type User = { name: string, password: string }; const test = base.extend<{ users: User[] }>({ users: [ [], { option: true } ], }); // Specify option value in the test.use block. test.use({ // WRONG: this syntax may not work for you users: [ { name: 'John Doe', password: 'secret' }, { name: 'John Smith', password: 's3cr3t' }, ], // CORRECT: this syntax will work. Note extra [] around the value, and the "scope" property. users: [[ { name: 'John Doe', password: 'secret' }, { name: 'John Smith', password: 's3cr3t' }, ], { scope: 'test' }], }); test('example test', async () => { // ... }); ``` ## Browser Versions - Chromium 128.0.6613.18 - Mozilla Firefox 128.0 - WebKit 18.0 This version was also tested against the following stable channels: - Google Chrome 127 - Microsoft Edge 127