feat(roll): roll to ToT Playwright (roll/26-07-24)

nodejs/docs/ci-intro.mdx

@@ -119,7 +119,7 @@ jobs:
 
 ### Fail-Fast
 
-Even with sharding enabled, large test suites can take very long to execute. Running changed tests first on PRs will give you a faster feedback loop and use less CI resources.
+Even with sharding enabled, large test suites can take very long to execute. Running changed test files first on PRs will give you a faster feedback loop and use less CI resources.
 
 ```yml title=".github/workflows/playwright.yml"
 name: Playwright Tests

nodejs/docs/release-notes.mdx

@@ -9,6 +9,83 @@ import HTMLCard from '@site/src/components/HTMLCard';
 
 import LiteYouTube from '@site/src/components/LiteYouTube';
 
+## Version 1.46
+
+### TLS Client Certificates
+
+Playwright now allows to supply client-side certificates, so that server can verify them, as specified by TLS Client Authentication.
+
+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](./api/class-testproject#test-project-use) or as a parameter of [browser.newContext()](/api/class-browser.mdx#browser-new-context) and [apiRequest.newContext()](/api/class-apirequest.mdx#api-request-new-context).
+
+### 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()](/api/class-page.mdx#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](./test-components#handling-network-requests).
+
+### Test runner
+- New CLI option `--only-changed` to only run test files that have been changed since the last commit or from a specific git "ref".
+- New option to [box a fixture](./test-fixtures#box-fixtures) to minimize the fixture exposure in test reports and error messages.
+- New option to provide a [custom fixture title](./test-fixtures#custom-fixture-title) to be used in test reports and error messages.
+
+### UI Mode / Trace Viewer Updates
+- New testing options pane in the UI mode to control test execution, for example "single worker" or "headed browser".
+- 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.
+- Content of text attachments is now rendered inline in the attachments pane.
+- Metadata pane now displays the `baseURL`.
+
+### Miscellaneous
+- New `maxRetries` option in [apiRequestContext.fetch()](/api/class-apirequestcontext.mdx#api-request-context-fetch) which retries on the `ECONNRESET` network error.
+- Improved link rendering inside annotations and attachments in the html report.
+
+### Browser Versions
+- Chromium 128.0.6613.7
+- Mozilla Firefox 128.0
+- WebKit 18.0
+
+This version was also tested against the following stable channels:
+- Google Chrome 127
+- Microsoft Edge 127
+
 ## Version 1.45
 
 <LiteYouTube id="54_aC-rVKHg" title="Playwright 1.45" />

nodejs/docs/test-cli.mdx

@@ -108,7 +108,7 @@ Complete set of Playwright Test options is available in the [configuration file]
 | `--max-failures <N>` or `-x`| Stop after the first `N` test failures. Passing `-x` stops after the first failure.|
 | `--no-deps` | Ignore the dependencies between projects and behave as if they were not specified. |
 | `--output <dir>` | Directory for artifacts produced by tests, defaults to `test-results`. |
-| `--only-changed [ref]` | Only run tests that have been changed between working tree and "ref". Defaults to running all uncommitted changes with ref=HEAD. Only supports Git. |
+| `--only-changed [ref]` | Only run test files that have been changed between working tree and "ref". Defaults to running all uncommitted changes with ref=HEAD. Only supports Git. |
 | `--pass-with-no-tests` | Allows the test suite to pass when no files are found. |
 | `--project <name>` | Only run tests from the specified [projects](./test-projects.mdx), supports '*' wildcard. Defaults to running all projects defined in the configuration file.|
 | `--quiet` | Whether to suppress stdout and stderr from the tests. |

nodejs/docs/test-fixtures.mdx

@@ -690,26 +690,30 @@ test('passes', async ({ database, page, a11y }) => {
 
 ## Box fixtures
 
-You can minimize the fixture exposure to the reporters UI and error messages via boxing it:
+Usually, custom fixtures are reported as separate steps in in the UI mode, Trace Viewer and various test reports. They also appear in error messages from the test runner. For frequently-used fixtures, this can mean lots of noise. You can stop the fixtures steps from being shown in the UI by "boxing" it.
 
 ```js
 import { test as base } from '@playwright/test';
 
 export const test = base.extend({
-  _helperFixture: [async ({}, use, testInfo) => {
+  helperFixture: [async ({}, use, testInfo) => {
+    // ...
   }, { box: true }],
 });
 ```
 
+This is useful for non-interesting helper fixtures. For example, an [automatic](./test-fixtures.mdx#automatic-fixtures) fixture that sets up some common data can be safely hidden from a test report.
+
 ## Custom fixture title
 
-You can assign a custom title to a fixture to be used in error messages and in the reporters UI:
+Instead of the usual fixture name, you can give fixtures a custom title that will be shown in test reports and error messages.
 
 ```js
 import { test as base } from '@playwright/test';
 
 export const test = base.extend({
-  _innerFixture: [async ({}, use, testInfo) => {
+  innerFixture: [async ({}, use, testInfo) => {
+    // ...
   }, { title: 'my fixture' }],
 });
 ```