v1.46.0

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