playwright 1.46.0

v1.46.0

on Node.js NPM

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:

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 or as a parameter of browser.newContext() and apiRequest.newContext().

--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".

# Only run test files with uncommitted changes
npx playwright test --only-changed

# Only run test files changed relative to the "main" branch
npx playwrigh 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().
• Call router.use(handlers) and pass MSW library request handlers to it.

Here is an example of reusing your existing MSW handlers in the test.

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.

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().
• 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() which retries on the ECONNRESET network error.
• New option to box a fixture to minimize the fixture exposure in test reports and error messages.
• New option to provide a custom fixture title to be used in test reports and error messages.

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