diff --git a/.github/workflows/roll_browser_into_playwright.yml b/.github/workflows/roll_browser_into_playwright.yml index e24d015cf8..88fae9c031 100644 --- a/.github/workflows/roll_browser_into_playwright.yml +++ b/.github/workflows/roll_browser_into_playwright.yml @@ -3,9 +3,21 @@ name: Roll Browser into Playwright on: repository_dispatch: types: [roll_into_pw] + workflow_dispatch: + inputs: + browser: + description: 'Browser name, e.g. chromium' + required: true + type: string + revision: + description: 'Browser revision without v prefix, e.g. 1234' + required: true + type: string env: ELECTRON_SKIP_BINARY_DOWNLOAD: 1 + BROWSER: ${{ github.event.client_payload.browser || github.event.inputs.browser }} + REVISION: ${{ github.event.client_payload.revision || github.event.inputs.revision }} permissions: contents: write @@ -24,19 +36,19 @@ jobs: run: npx playwright install-deps - name: Roll to new revision run: | - ./utils/roll_browser.js ${{ github.event.client_payload.browser }} ${{ github.event.client_payload.revision }} + ./utils/roll_browser.js $BROWSER $REVISION npm run build - name: Prepare branch id: prepare-branch run: | - BRANCH_NAME="roll-into-pw-${{ github.event.client_payload.browser }}/${{ github.event.client_payload.revision }}" + BRANCH_NAME="roll-into-pw-${BROWSER}/${REVISION}" echo "BRANCH_NAME=$BRANCH_NAME" >> $GITHUB_OUTPUT git config --global user.name github-actions git config --global user.email 41898282+github-actions[bot]@users.noreply.github.com git checkout -b "$BRANCH_NAME" git add . - git commit -m "feat(${{ github.event.client_payload.browser }}): roll to r${{ github.event.client_payload.revision }}" - git push origin $BRANCH_NAME + git commit -m "feat(${BROWSER}): roll to r${REVISION}" + git push origin $BRANCH_NAME --force - name: Create Pull Request uses: actions/github-script@v7 with: @@ -47,7 +59,7 @@ jobs: repo: 'playwright', head: 'microsoft:${{ steps.prepare-branch.outputs.BRANCH_NAME }}', base: 'main', - title: 'feat(${{ github.event.client_payload.browser }}): roll to r${{ github.event.client_payload.revision }}', + title: 'feat(${{ env.BROWSER }}): roll to r${{ env.REVISION }}', }); await github.rest.issues.addLabels({ owner: 'microsoft', diff --git a/README.md b/README.md index e052c8064b..b0e9902352 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # 🎭 Playwright -[![npm version](https://img.shields.io/npm/v/playwright.svg)](https://www.npmjs.com/package/playwright) [![Chromium version](https://img.shields.io/badge/chromium-133.0.6943.27-blue.svg?logo=google-chrome)](https://www.chromium.org/Home) [![Firefox version](https://img.shields.io/badge/firefox-134.0-blue.svg?logo=firefoxbrowser)](https://www.mozilla.org/en-US/firefox/new/) [![WebKit version](https://img.shields.io/badge/webkit-18.2-blue.svg?logo=safari)](https://webkit.org/) [![Join Discord](https://img.shields.io/badge/join-discord-infomational)](https://aka.ms/playwright/discord) +[![npm version](https://img.shields.io/npm/v/playwright.svg)](https://www.npmjs.com/package/playwright) [![Chromium version](https://img.shields.io/badge/chromium-133.0.6943.35-blue.svg?logo=google-chrome)](https://www.chromium.org/Home) [![Firefox version](https://img.shields.io/badge/firefox-134.0-blue.svg?logo=firefoxbrowser)](https://www.mozilla.org/en-US/firefox/new/) [![WebKit version](https://img.shields.io/badge/webkit-18.2-blue.svg?logo=safari)](https://webkit.org/) [![Join Discord](https://img.shields.io/badge/join-discord-infomational)](https://aka.ms/playwright/discord) ## [Documentation](https://playwright.dev) | [API reference](https://playwright.dev/docs/api/class-playwright) @@ -8,7 +8,7 @@ Playwright is a framework for Web Testing and Automation. It allows testing [Chr | | Linux | macOS | Windows | | :--- | :---: | :---: | :---: | -| Chromium 133.0.6943.27 | :white_check_mark: | :white_check_mark: | :white_check_mark: | +| Chromium 133.0.6943.35 | :white_check_mark: | :white_check_mark: | :white_check_mark: | | WebKit 18.2 | :white_check_mark: | :white_check_mark: | :white_check_mark: | | Firefox 134.0 | :white_check_mark: | :white_check_mark: | :white_check_mark: | diff --git a/docs/src/api/class-apirequest.md b/docs/src/api/class-apirequest.md index 2f832e1dd8..feea5b8378 100644 --- a/docs/src/api/class-apirequest.md +++ b/docs/src/api/class-apirequest.md @@ -64,6 +64,25 @@ Methods like [`method: APIRequestContext.get`] take the base URL into considerat - `localStorage` <[Array]<[Object]>> - `name` <[string]> - `value` <[string]> + - `indexedDB` ?<[Array]<[Object]>> indexedDB to set for context + - `name` <[string]> database name + - `version` <[int]> database version + - `stores` <[Array]<[Object]>> + - `name` <[string]> + - `keyPath` ?<[string]> + - `keyPathArray` ?<[Array]<[string]>> + - `autoIncrement` <[boolean]> + - `indexes` <[Array]<[Object]>> + - `name` <[string]> + - `keyPath` ?<[string]> + - `keyPathArray` ?<[Array]<[string]>> + - `unique` <[boolean]> + - `multiEntry` <[boolean]> + - `records` <[Array]<[Object]>> + - `key` ?<[Object]> + - `keyEncoded` ?<[Object]> if `key` is not JSON-serializable, this contains an encoded version that preserves types. + - `value` <[Object]> + - `valueEncoded` ?<[Object]> if `value` is not JSON-serializable, this contains an encoded version that preserves types. Populates context with given storage state. This option can be used to initialize context with logged-in information obtained via [`method: BrowserContext.storageState`] or [`method: APIRequestContext.storageState`]. Either a path to the diff --git a/docs/src/api/class-apirequestcontext.md b/docs/src/api/class-apirequestcontext.md index 40742e2a1f..b8c179de4f 100644 --- a/docs/src/api/class-apirequestcontext.md +++ b/docs/src/api/class-apirequestcontext.md @@ -880,6 +880,25 @@ context cookies from the response. The method will automatically follow redirect - `localStorage` <[Array]<[Object]>> - `name` <[string]> - `value` <[string]> + - `indexedDB` <[Array]<[Object]>> + - `name` <[string]> + - `version` <[int]> + - `stores` <[Array]<[Object]>> + - `name` <[string]> + - `keyPath` ?<[string]> + - `keyPathArray` ?<[Array]<[string]>> + - `autoIncrement` <[boolean]> + - `indexes` <[Array]<[Object]>> + - `name` <[string]> + - `keyPath` ?<[string]> + - `keyPathArray` ?<[Array]<[string]>> + - `unique` <[boolean]> + - `multiEntry` <[boolean]> + - `records` <[Array]<[Object]>> + - `key` ?<[Object]> + - `keyEncoded` ?<[Object]> if `key` is not JSON-serializable, this contains an encoded version that preserves types. + - `value` <[Object]> + - `valueEncoded` ?<[Object]> if `value` is not JSON-serializable, this contains an encoded version that preserves types. Returns storage state for this request context, contains current cookies and local storage snapshot if it was passed to the constructor. diff --git a/docs/src/api/class-browsercontext.md b/docs/src/api/class-browsercontext.md index 85cbc4f62a..0da156b664 100644 --- a/docs/src/api/class-browsercontext.md +++ b/docs/src/api/class-browsercontext.md @@ -1511,8 +1511,27 @@ Whether to emulate network being offline for the browser context. - `localStorage` <[Array]<[Object]>> - `name` <[string]> - `value` <[string]> + - `indexedDB` <[Array]<[Object]>> + - `name` <[string]> + - `version` <[int]> + - `stores` <[Array]<[Object]>> + - `name` <[string]> + - `keyPath` ?<[string]> + - `keyPathArray` ?<[Array]<[string]>> + - `autoIncrement` <[boolean]> + - `indexes` <[Array]<[Object]>> + - `name` <[string]> + - `keyPath` ?<[string]> + - `keyPathArray` ?<[Array]<[string]>> + - `unique` <[boolean]> + - `multiEntry` <[boolean]> + - `records` <[Array]<[Object]>> + - `key` ?<[Object]> + - `keyEncoded` ?<[Object]> if `key` is not JSON-serializable, this contains an encoded version that preserves types. + - `value` <[Object]> + - `valueEncoded` ?<[Object]> if `value` is not JSON-serializable, this contains an encoded version that preserves types. -Returns storage state for this browser context, contains current cookies and local storage snapshot. +Returns storage state for this browser context, contains current cookies, local storage snapshot and IndexedDB snapshot. ## async method: BrowserContext.storageState * since: v1.8 diff --git a/docs/src/api/class-browsertype.md b/docs/src/api/class-browsertype.md index 0d41bb1aa7..29c323f002 100644 --- a/docs/src/api/class-browsertype.md +++ b/docs/src/api/class-browsertype.md @@ -89,13 +89,17 @@ class BrowserTypeExamples * since: v1.8 - returns: <[Browser]> -This method attaches Playwright to an existing browser instance. When connecting to another browser launched via `BrowserType.launchServer` in Node.js, the major and minor version needs to match the client version (1.2.3 → is compatible with 1.2.x). +This method attaches Playwright to an existing browser instance created via `BrowserType.launchServer` in Node.js. + +:::note +The major and minor version of the Playwright instance that connects needs to match the version of Playwright that launches the browser (1.2.3 → is compatible with 1.2.x). +::: ### param: BrowserType.connect.wsEndpoint * since: v1.10 - `wsEndpoint` <[string]> -A browser websocket endpoint to connect to. +A Playwright browser websocket endpoint to connect to. You obtain this endpoint via `BrowserServer.wsEndpoint`. ### option: BrowserType.connect.headers * since: v1.11 @@ -152,6 +156,10 @@ The default browser context is accessible via [`method: Browser.contexts`]. Connecting over the Chrome DevTools Protocol is only supported for Chromium-based browsers. ::: +:::note +This connection is significantly lower fidelity than the Playwright protocol connection via [`method: BrowserType.connect`]. If you are experiencing issues or attempting to use advanced functionality, you probably want to use [`method: BrowserType.connect`]. +::: + **Usage** ```js diff --git a/docs/src/api/class-locator.md b/docs/src/api/class-locator.md index 67464fe3be..9b361a6f0c 100644 --- a/docs/src/api/class-locator.md +++ b/docs/src/api/class-locator.md @@ -155,7 +155,7 @@ Additional locator to match. - returns: <[string]> Captures the aria snapshot of the given element. -Read more about [aria snapshots](../aria-snapshots.md) and [`method: LocatorAssertions.toMatchAriaSnapshot#1`] for the corresponding assertion. +Read more about [aria snapshots](../aria-snapshots.md) and [`method: LocatorAssertions.toMatchAriaSnapshot`] for the corresponding assertion. **Usage** diff --git a/docs/src/api/class-locatorassertions.md b/docs/src/api/class-locatorassertions.md index 8f8233fae4..d7b4463265 100644 --- a/docs/src/api/class-locatorassertions.md +++ b/docs/src/api/class-locatorassertions.md @@ -240,6 +240,24 @@ Expected accessible description. ### option: LocatorAssertions.NotToHaveAccessibleDescription.timeout = %%-csharp-java-python-assertions-timeout-%% * since: v1.44 +## async method: LocatorAssertions.NotToHaveAccessibleErrorMessage +* since: v1.50 +* langs: python + +The opposite of [`method: LocatorAssertions.toHaveAccessibleErrorMessage`]. + +### param: LocatorAssertions.NotToHaveAccessibleErrorMessage.errorMessage +* since: v1.50 +- `errorMessage` <[string]|[RegExp]> + +Expected accessible error message. + +### option: LocatorAssertions.NotToHaveAccessibleErrorMessage.ignoreCase = %%-assertions-ignore-case-%% +* since: v1.50 + +### option: LocatorAssertions.NotToHaveAccessibleErrorMessage.timeout = %%-csharp-java-python-assertions-timeout-%% +* since: v1.50 + ## async method: LocatorAssertions.NotToHaveAccessibleName * since: v1.44 @@ -446,7 +464,7 @@ Expected options currently selected. * since: v1.49 * langs: python -The opposite of [`method: LocatorAssertions.toMatchAriaSnapshot#1`]. +The opposite of [`method: LocatorAssertions.toMatchAriaSnapshot`]. ### param: LocatorAssertions.NotToMatchAriaSnapshot.expected * since: v1.49 @@ -2180,7 +2198,7 @@ Expected options currently selected. * since: v1.23 -## async method: LocatorAssertions.toMatchAriaSnapshot#1 +## async method: LocatorAssertions.toMatchAriaSnapshot * since: v1.49 * langs: - alias-java: matchesAriaSnapshot @@ -2229,14 +2247,14 @@ assertThat(page.locator("body")).matchesAriaSnapshot(""" """); ``` -### param: LocatorAssertions.toMatchAriaSnapshot#1.expected +### param: LocatorAssertions.toMatchAriaSnapshot.expected * since: v1.49 - `expected` -### option: LocatorAssertions.toMatchAriaSnapshot#1.timeout = %%-js-assertions-timeout-%% +### option: LocatorAssertions.toMatchAriaSnapshot.timeout = %%-js-assertions-timeout-%% * since: v1.49 -### option: LocatorAssertions.toMatchAriaSnapshot#1.timeout = %%-csharp-java-python-assertions-timeout-%% +### option: LocatorAssertions.toMatchAriaSnapshot.timeout = %%-csharp-java-python-assertions-timeout-%% * since: v1.49 ## async method: LocatorAssertions.toMatchAriaSnapshot#2 @@ -2245,27 +2263,13 @@ assertThat(page.locator("body")).matchesAriaSnapshot(""" Asserts that the target element matches the given [accessibility snapshot](../aria-snapshots.md). +Snapshot is stored in a separate `.yml` file in a location configured by `expect.toMatchAriaSnapshot.pathTemplate` and/or `snapshotPathTemplate` properties in the configuration file. + **Usage** ```js await expect(page.locator('body')).toMatchAriaSnapshot(); -await expect(page.locator('body')).toMatchAriaSnapshot({ name: 'snapshot' }); -``` - -```python async -await expect(page.locator('body')).to_match_aria_snapshot(path='/path/to/snapshot.yml') -``` - -```python sync -expect(page.locator('body')).to_match_aria_snapshot(path='/path/to/snapshot.yml') -``` - -```csharp -await Expect(page.Locator("body")).ToMatchAriaSnapshotAsync(new { Path = "/path/to/snapshot.yml" }); -``` - -```java -assertThat(page.locator("body")).matchesAriaSnapshot(new LocatorAssertions.MatchesAriaSnapshotOptions().setPath("/path/to/snapshot.yml")); +await expect(page.locator('body')).toMatchAriaSnapshot({ name: 'body.yml' }); ``` ### option: LocatorAssertions.toMatchAriaSnapshot#2.name @@ -2273,7 +2277,7 @@ assertThat(page.locator("body")).matchesAriaSnapshot(new LocatorAssertions.Match * langs: js - `name` <[string]> -Name of the snapshot to store in the snapshot (screenshot) folder corresponding to this test. +Name of the snapshot to store in the snapshot folder corresponding to this test. Generates sequential names if not specified. ### option: LocatorAssertions.toMatchAriaSnapshot#2.timeout = %%-js-assertions-timeout-%% diff --git a/docs/src/api/class-page.md b/docs/src/api/class-page.md index ec58c027b3..b59f2cb3fe 100644 --- a/docs/src/api/class-page.md +++ b/docs/src/api/class-page.md @@ -1309,6 +1309,18 @@ Emulates `'forced-colors'` media feature, supported values are `'active'` and `' * langs: csharp, python - `forcedColors` <[ForcedColors]<"active"|"none"|"null">> +### option: Page.emulateMedia.contrast +* since: v1.51 +* langs: js, java +- `contrast` > + +Emulates `'prefers-contrast'` media feature, supported values are `'no-preference'`, `'more'`. Passing `null` disables contrast emulation. + +### option: Page.emulateMedia.contrast +* since: v1.51 +* langs: csharp, python +- `contrast` <[Contrast]<"no-preference"|"more"|"null">> + ## async method: Page.evalOnSelector * since: v1.9 * discouraged: This method does not wait for the element to pass actionability diff --git a/docs/src/api/class-websocket.md b/docs/src/api/class-websocket.md index 3b3308b885..e33740eaca 100644 --- a/docs/src/api/class-websocket.md +++ b/docs/src/api/class-websocket.md @@ -1,7 +1,9 @@ # class: WebSocket * since: v1.8 -The [WebSocket] class represents websocket connections in the page. +The [WebSocket] class represents WebSocket connections within a page. It provides the ability to inspect and manipulate the data being transmitted and received. + +If you want to intercept or modify WebSocket frames, consider using [WebSocketRoute]. ## event: WebSocket.close * since: v1.8 diff --git a/docs/src/api/params.md b/docs/src/api/params.md index a1f909a4fb..f2d8734336 100644 --- a/docs/src/api/params.md +++ b/docs/src/api/params.md @@ -259,11 +259,30 @@ Specify environment variables that will be visible to the browser. Defaults to ` - `httpOnly` <[boolean]> - `secure` <[boolean]> - `sameSite` <[SameSiteAttribute]<"Strict"|"Lax"|"None">> sameSite flag - - `origins` <[Array]<[Object]>> localStorage to set for context + - `origins` <[Array]<[Object]>> - `origin` <[string]> - - `localStorage` <[Array]<[Object]>> + - `localStorage` <[Array]<[Object]>> localStorage to set for context - `name` <[string]> - `value` <[string]> + - `indexedDB` ?<[Array]<[Object]>> indexedDB to set for context + - `name` <[string]> database name + - `version` <[int]> database version + - `stores` <[Array]<[Object]>> + - `name` <[string]> + - `keyPath` ?<[string]> + - `keyPathArray` ?<[Array]<[string]>> + - `autoIncrement` <[boolean]> + - `indexes` <[Array]<[Object]>> + - `name` <[string]> + - `keyPath` ?<[string]> + - `keyPathArray` ?<[Array]<[string]>> + - `unique` <[boolean]> + - `multiEntry` <[boolean]> + - `records` <[Array]<[Object]>> + - `key` ?<[Object]> + - `keyEncoded` ?<[Object]> if `key` is not JSON-serializable, this contains an encoded version that preserves types. + - `value` <[Object]> + - `valueEncoded` ?<[Object]> if `value` is not JSON-serializable, this contains an encoded version that preserves types. Learn more about [storage state and auth](../auth.md). @@ -673,6 +692,18 @@ Emulates `'forced-colors'` media feature, supported values are `'active'`, `'non Emulates `'forced-colors'` media feature, supported values are `'active'`, `'none'`. See [`method: Page.emulateMedia`] for more details. Passing `'null'` resets emulation to system defaults. Defaults to `'none'`. +## context-option-contrast +* langs: js, java +- `contrast` > + +Emulates `'prefers-contrast'` media feature, supported values are `'no-preference'`, `'more'`. See [`method: Page.emulateMedia`] for more details. Passing `null` resets emulation to system defaults. Defaults to `'no-preference'`. + +## context-option-contrast-csharp-python +* langs: csharp, python +- `contrast` <[ForcedColors]<"no-preference"|"more"|"null">> + +Emulates `'prefers-contrast'` media feature, supported values are `'no-preference'`, `'more'`. See [`method: Page.emulateMedia`] for more details. Passing `'null'` resets emulation to system defaults. Defaults to `'no-preference'`. + ## context-option-logger * langs: js - `logger` <[Logger]> @@ -973,6 +1004,8 @@ between the same pixel in compared images, between zero (strict) and one (lax), - %%-context-option-reducedMotion-csharp-python-%% - %%-context-option-forcedColors-%% - %%-context-option-forcedColors-csharp-python-%% +- %%-context-option-contrast-%% +- %%-context-option-contrast-csharp-python-%% - %%-context-option-logger-%% - %%-context-option-videospath-%% - %%-context-option-videosize-%% @@ -1758,7 +1791,9 @@ await Expect(Page.GetByTitle("Issues count")).toHaveText("25 issues"); - `type` ?<[string]> * langs: js -This option configures a template controlling location of snapshots generated by [`method: PageAssertions.toHaveScreenshot#1`] and [`method: SnapshotAssertions.toMatchSnapshot#1`]. +This option configures a template controlling location of snapshots generated by [`method: PageAssertions.toHaveScreenshot#1`], [`method: LocatorAssertions.toMatchAriaSnapshot#2`] and [`method: SnapshotAssertions.toMatchSnapshot#1`]. + +You can configure templates for each assertion separately in [`property: TestConfig.expect`]. **Usage** @@ -1767,7 +1802,19 @@ import { defineConfig } from '@playwright/test'; export default defineConfig({ testDir: './tests', + + // Single template for all assertions snapshotPathTemplate: '{testDir}/__screenshots__/{testFilePath}/{arg}{ext}', + + // Assertion-specific templates + expect: { + toHaveScreenshot: { + pathTemplate: '{testDir}/__screenshots__{/projectName}/{testFilePath}/{arg}{ext}', + }, + toMatchAriaSnapshot: { + pathTemplate: '{testDir}/__snapshots__/{testFilePath}/{arg}{ext}', + }, + }, }); ``` @@ -1798,22 +1845,22 @@ test.describe('suite', () => { The list of supported tokens: -* `{arg}` - Relative snapshot path **without extension**. These come from the arguments passed to the `toHaveScreenshot()` and `toMatchSnapshot()` calls; if called without arguments, this will be an auto-generated snapshot name. +* `{arg}` - Relative snapshot path **without extension**. This comes from the arguments passed to `toHaveScreenshot()`, `toMatchAriaSnapshot()` or `toMatchSnapshot()`; if called without arguments, this will be an auto-generated snapshot name. * Value: `foo/bar/baz` -* `{ext}` - snapshot extension (with dots) +* `{ext}` - Snapshot extension (with the leading dot). * Value: `.png` * `{platform}` - The value of `process.platform`. * `{projectName}` - Project's file-system-sanitized name, if any. * Value: `''` (empty string). -* `{snapshotDir}` - Project's [`property: TestConfig.snapshotDir`]. +* `{snapshotDir}` - Project's [`property: TestProject.snapshotDir`]. * Value: `/home/playwright/tests` (since `snapshotDir` is not provided in config, it defaults to `testDir`) -* `{testDir}` - Project's [`property: TestConfig.testDir`]. - * Value: `/home/playwright/tests` (absolute path is since `testDir` is resolved relative to directory with config) +* `{testDir}` - Project's [`property: TestProject.testDir`]. + * Value: `/home/playwright/tests` (absolute path since `testDir` is resolved relative to directory with config) * `{testFileDir}` - Directories in relative path from `testDir` to **test file**. * Value: `page` * `{testFileName}` - Test file name with extension. * Value: `page-click.spec.ts` -* `{testFilePath}` - Relative path from `testDir` to **test file** +* `{testFilePath}` - Relative path from `testDir` to **test file**. * Value: `page/page-click.spec.ts` * `{testName}` - File-system-sanitized test title, including parent describes but excluding file name. * Value: `suite-test-should-work` diff --git a/docs/src/aria-snapshots.md b/docs/src/aria-snapshots.md index b52ff82650..25b05164ad 100644 --- a/docs/src/aria-snapshots.md +++ b/docs/src/aria-snapshots.md @@ -6,7 +6,7 @@ import LiteYouTube from '@site/src/components/LiteYouTube'; ## Overview -With the Playwright Snapshot testing you can assert the accessibility tree of a page against a predefined snapshot template. +With Playwright's Snapshot testing you can assert the accessibility tree of a page against a predefined snapshot template. ```js await page.goto('https://playwright.dev/'); @@ -79,12 +79,12 @@ confirms that an input field has the expected value. Assertion tests are specific and generally check the current state of an element or property against an expected, predefined state. They work well for predictable, single-value checks but are limited in scope when testing the -broader structure or variations. +broader structure or variations. **Advantages** - **Clarity**: The intent of the test is explicit and easy to understand. - **Specificity**: Tests focus on particular aspects of functionality, making them more robust - against unrelated changes. + against unrelated changes. - **Debugging**: Failures provide targeted feedback, pointing directly to the problematic aspect. **Disadvantages** @@ -154,7 +154,7 @@ structure of a page, use the [Chrome DevTools Accessibility Pane](https://develo ## Snapshot matching -The [`method: LocatorAssertions.toMatchAriaSnapshot#1`] assertion method in Playwright compares the accessible +The [`method: LocatorAssertions.toMatchAriaSnapshot`] assertion method in Playwright compares the accessible structure of the locator scope with a predefined aria snapshot template, helping validate the page's state against testing requirements. @@ -222,7 +222,7 @@ attributes. ``` In this example, the button role is matched, but the accessible name ("Submit") is not specified, allowing the test to -pass regardless of the button’s label. +pass regardless of the button's label.
@@ -280,12 +280,12 @@ support regex patterns. ## Generating snapshots -Creating aria snapshots in Playwright helps ensure and maintain your application’s structure. +Creating aria snapshots in Playwright helps ensure and maintain your application's structure. You can generate snapshots in various ways depending on your testing setup and workflow. -### 1. Generating snapshots with the Playwright code generator +### Generating snapshots with the Playwright code generator -If you’re using Playwright’s [Code Generator](./codegen.md), generating aria snapshots is streamlined with its +If you're using Playwright's [Code Generator](./codegen.md), generating aria snapshots is streamlined with its interactive interface: - **"Assert snapshot" Action**: In the code generator, you can use the "Assert snapshot" action to automatically create @@ -296,20 +296,18 @@ recorded test flow. aria snapshot for a selected locator, letting you explore, inspect, and verify element roles, attributes, and accessible names to aid snapshot creation and review. -### 2. Updating snapshots with `@playwright/test` and the `--update-snapshots` flag +### Updating snapshots with `@playwright/test` and the `--update-snapshots` flag +* langs: js -When using the Playwright test runner (`@playwright/test`), you can automatically update snapshots by running tests with -the `--update-snapshots` flag: +When using the Playwright test runner (`@playwright/test`), you can automatically update snapshots with the `--update-snapshots` flag, `-u` for short. + +Running tests with the `--update-snapshots` flag will update snapshots that did not match. Matching snapshots will not be updated. ```bash npx playwright test --update-snapshots ``` -This command regenerates snapshots for assertions, including aria snapshots, replacing outdated ones. It’s -useful when application structure changes require new snapshots as a baseline. Note that Playwright will wait for the -maximum expect timeout specified in the test runner configuration to ensure the -page is settled before taking the snapshot. It might be necessary to adjust the `--timeout` if the test hits the timeout -while generating snapshots. +Updating snapshots is useful when application structure changes require new snapshots as a baseline. Note that Playwright will wait for the maximum expect timeout specified in the test runner configuration to ensure the page is settled before taking the snapshot. It might be necessary to adjust the `--timeout` if the test hits the timeout while generating snapshots. #### Empty template for snapshot generation @@ -329,10 +327,40 @@ When updating snapshots, Playwright creates patch files that capture differences applied, and committed to source control, allowing teams to track structural changes over time and ensure updates are consistent with application requirements. -### 3. Using the `Locator.ariaSnapshot` method +The way source code is updated can be changed using the `--update-source-method` flag. There are several options available: + +- **"patch"** (default): Generates a unified diff file that can be applied to the source code using `git apply`. +- **"3way"**: Generates merge conflict markers in your source code, allowing you to choose whether to accept changes. +- **"overwrite"**: Overwrites the source code with the new snapshot values. + +```bash +npx playwright test --update-snapshots --update-source-mode=3way +``` + +#### Snapshots as separate files + +To store your snapshots in a separate file, use the `toMatchAriaSnapshot` method with the `name` option, specifying a `.yml` file extension. + +```js +await expect(page.getByRole('main')).toMatchAriaSnapshot({ name: 'main-snapshot.yml' }); +``` + +By default, snapshots from a test file `example.spec.ts` are placed in the `example.spec.ts-snapshots` directory. As snapshots should be the same across browsers, only one snapshot is saved even if testing with multiple browsers. Should you wish, you can customize the [snapshot path template](./api/class-testconfig#test-config-snapshot-path-template) using the following configuration: + +```js +export default defineConfig({ + expect: { + toMatchAriaSnapshot: { + pathTemplate: '__snapshots__/{testFilePath}/{arg}{ext}', + }, + }, +}); +``` + +### Using the `Locator.ariaSnapshot` method The [`method: Locator.ariaSnapshot`] method allows you to programmatically create a YAML representation of accessible -elements within a locator’s scope, especially helpful for generating snapshots dynamically during test execution. +elements within a locator's scope, especially helpful for generating snapshots dynamically during test execution. **Example**: @@ -361,7 +389,7 @@ var snapshot = await page.Locator("body").AriaSnapshotAsync(); Console.WriteLine(snapshot); ``` -This command outputs the aria snapshot within the specified locator’s scope in YAML format, which you can validate +This command outputs the aria snapshot within the specified locator's scope in YAML format, which you can validate or store as needed. ## Accessibility tree examples diff --git a/docs/src/auth.md b/docs/src/auth.md index a070d2d395..4a3853edf1 100644 --- a/docs/src/auth.md +++ b/docs/src/auth.md @@ -232,7 +232,7 @@ await page.goto('https://github.com/login') # Interact with login form await page.get_by_label("Username or email address").fill("username") await page.get_by_label("Password").fill("password") -await page.page.get_by_role("button", name="Sign in").click() +await page.get_by_role("button", name="Sign in").click() # Continue with the test ``` @@ -266,9 +266,9 @@ existing authentication state instead. Playwright provides a way to reuse the signed-in state in the tests. That way you can log in only once and then skip the log in step for all of the tests. -Web apps use cookie-based or token-based authentication, where authenticated state is stored as [cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies) or in [local storage](https://developer.mozilla.org/en-US/docs/Web/API/Storage). Playwright provides [`method: BrowserContext.storageState`] method that can be used to retrieve storage state from authenticated contexts and then create new contexts with prepopulated state. +Web apps use cookie-based or token-based authentication, where authenticated state is stored as [cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies), in [local storage](https://developer.mozilla.org/en-US/docs/Web/API/Storage) or in [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API). Playwright provides [`method: BrowserContext.storageState`] method that can be used to retrieve storage state from authenticated contexts and then create new contexts with prepopulated state. -Cookies and local storage state can be used across different browsers. They depend on your application's authentication model: some apps might require both cookies and local storage. +Cookies, local storage and IndexedDB state can be used across different browsers. They depend on your application's authentication model which may require some combination of cookies, local storage or IndexedDB. The following code snippet retrieves state from an authenticated context and creates a new context with that state. @@ -583,7 +583,7 @@ test('admin and user', async ({ adminPage, userPage }) => { ### Session storage -Reusing authenticated state covers [cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies) and [local storage](https://developer.mozilla.org/en-US/docs/Web/API/Storage) based authentication. Rarely, [session storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) is used for storing information associated with the signed-in state. Session storage is specific to a particular domain and is not persisted across page loads. Playwright does not provide API to persist session storage, but the following snippet can be used to save/load session storage. +Reusing authenticated state covers [cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies), [local storage](https://developer.mozilla.org/en-US/docs/Web/API/Storage) and [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) based authentication. Rarely, [session storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) is used for storing information associated with the signed-in state. Session storage is specific to a particular domain and is not persisted across page loads. Playwright does not provide API to persist session storage, but the following snippet can be used to save/load session storage. ```js // Get session storage and store as env variable diff --git a/docs/src/ci.md b/docs/src/ci.md index 54e0a7a749..89ce6242fb 100644 --- a/docs/src/ci.md +++ b/docs/src/ci.md @@ -804,7 +804,7 @@ Sharding in CircleCI is indexed with 0 which means that you will need to overrid executor: pw-noble-development parallelism: 4 steps: - - run: SHARD="$((${CIRCLE_NODE_INDEX}+1))"; npx playwright test -- --shard=${SHARD}/${CIRCLE_NODE_TOTAL} + - run: SHARD="$((${CIRCLE_NODE_INDEX}+1))"; npx playwright test --shard=${SHARD}/${CIRCLE_NODE_TOTAL} ``` ### Jenkins diff --git a/docs/src/codegen.md b/docs/src/codegen.md index f0d9a605f5..641383d7b4 100644 --- a/docs/src/codegen.md +++ b/docs/src/codegen.md @@ -325,7 +325,7 @@ pwsh bin/Debug/netX/playwright.ps1 codegen --timezone="Europe/Rome" --geolocatio ### Preserve authenticated state -Run `codegen` with `--save-storage` to save [cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies) and [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) at the end of the session. This is useful to separately record an authentication step and reuse it later when recording more tests. +Run `codegen` with `--save-storage` to save [cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies), [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) data at the end of the session. This is useful to separately record an authentication step and reuse it later when recording more tests. ```bash js npx playwright codegen github.com/microsoft/playwright --save-storage=auth.json @@ -375,7 +375,7 @@ Make sure you only use the `auth.json` locally as it contains sensitive informat #### Load authenticated state -Run with `--load-storage` to consume the previously loaded storage from the `auth.json`. This way, all [cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies) and [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) will be restored, bringing most web apps to the authenticated state without the need to login again. This means you can continue generating tests from the logged in state. +Run with `--load-storage` to consume the previously loaded storage from the `auth.json`. This way, all [cookies](https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies), [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) data will be restored, bringing most web apps to the authenticated state without the need to login again. This means you can continue generating tests from the logged in state. ```bash js npx playwright codegen --load-storage=auth.json github.com/microsoft/playwright diff --git a/docs/src/release-notes-csharp.md b/docs/src/release-notes-csharp.md index dab0fdf34e..7ef4552712 100644 --- a/docs/src/release-notes-csharp.md +++ b/docs/src/release-notes-csharp.md @@ -4,12 +4,43 @@ title: "Release notes" toc_max_heading_level: 2 --- +## Version 1.50 + +### Support for Xunit + +* Support for xUnit 2.8+ via [Microsoft.Playwright.Xunit](https://www.nuget.org/packages/Microsoft.Playwright.Xunit). Follow our [Getting Started](./intro.md) guide to learn more. + +### Miscellaneous + +* Added method [`method: LocatorAssertions.toHaveAccessibleErrorMessage`] to assert the Locator points to an element with a given [aria errormessage](https://w3c.github.io/aria/#aria-errormessage). + +### UI updates + +* New button in Codegen for picking elements to produce aria snapshots. +* Additional details (such as keys pressed) are now displayed alongside action API calls in traces. +* Display of `canvas` content in traces is error-prone. Display is now disabled by default, and can be enabled via the `Display canvas content` UI setting. +* `Call` and `Network` panels now display additional time information. + +### Breaking + +* [`method: LocatorAssertions.toBeEditable`] and [`method: Locator.isEditable`] now throw if the target element is not ``, ``, ``, ` should not report AAA as a child of the textarea. + if (ariaNode.role !== 'textbox' && text) ariaNode.children.push(node.nodeValue || ''); return; } diff --git a/packages/playwright-core/src/server/injected/recorder/pollingRecorder.ts b/packages/playwright-core/src/server/injected/recorder/pollingRecorder.ts index bc96ff2185..86b2babdd9 100644 --- a/packages/playwright-core/src/server/injected/recorder/pollingRecorder.ts +++ b/packages/playwright-core/src/server/injected/recorder/pollingRecorder.ts @@ -34,6 +34,7 @@ export class PollingRecorder implements RecorderDelegate { private _recorder: Recorder; private _embedder: Embedder; private _pollRecorderModeTimer: number | undefined; + private _lastStateJSON: string | undefined; constructor(injectedScript: InjectedScript) { this._recorder = new Recorder(injectedScript); @@ -42,6 +43,7 @@ export class PollingRecorder implements RecorderDelegate { injectedScript.onGlobalListenersRemoved.add(() => this._recorder.installListeners()); const refreshOverlay = () => { + this._lastStateJSON = undefined; this._pollRecorderMode().catch(e => console.log(e)); // eslint-disable-line no-console }; this._embedder.__pw_refreshOverlay = refreshOverlay; @@ -57,13 +59,19 @@ export class PollingRecorder implements RecorderDelegate { this._pollRecorderModeTimer = this._recorder.injectedScript.builtinSetTimeout(() => this._pollRecorderMode(), pollPeriod); return; } - const win = this._recorder.document.defaultView!; - if (win.top !== win) { - // Only show action point in the main frame, since it is relative to the page's viewport. - // Otherwise we'll see multiple action points at different locations. - state.actionPoint = undefined; + + const stringifiedState = JSON.stringify(state); + if (this._lastStateJSON !== stringifiedState) { + this._lastStateJSON = stringifiedState; + const win = this._recorder.document.defaultView!; + if (win.top !== win) { + // Only show action point in the main frame, since it is relative to the page's viewport. + // Otherwise we'll see multiple action points at different locations. + state.actionPoint = undefined; + } + this._recorder.setUIState(state, this); } - this._recorder.setUIState(state, this); + this._pollRecorderModeTimer = this._recorder.injectedScript.builtinSetTimeout(() => this._pollRecorderMode(), pollPeriod); } diff --git a/packages/playwright-core/src/server/injected/roleUtils.ts b/packages/playwright-core/src/server/injected/roleUtils.ts index 5ed6fd7b85..a7b3cd1d4b 100644 --- a/packages/playwright-core/src/server/injected/roleUtils.ts +++ b/packages/playwright-core/src/server/injected/roleUtils.ts @@ -354,27 +354,34 @@ export function getPseudoContent(element: Element, pseudo: '::before' | '::after if (cache?.has(element)) return cache?.get(element) || ''; const pseudoStyle = getElementComputedStyle(element, pseudo); - const content = getPseudoContentImpl(pseudoStyle); + const content = getPseudoContentImpl(element, pseudoStyle); if (cache) cache.set(element, content); return content; } -function getPseudoContentImpl(pseudoStyle: CSSStyleDeclaration | undefined) { +function getPseudoContentImpl(element: Element, pseudoStyle: CSSStyleDeclaration | undefined) { // Note: all browsers ignore display:none and visibility:hidden pseudos. if (!pseudoStyle || pseudoStyle.display === 'none' || pseudoStyle.visibility === 'hidden') return ''; const content = pseudoStyle.content; + let resolvedContent: string | undefined; if ((content[0] === '\'' && content[content.length - 1] === '\'') || (content[0] === '"' && content[content.length - 1] === '"')) { - const unquoted = content.substring(1, content.length - 1); + resolvedContent = content.substring(1, content.length - 1); + } else if (content.startsWith('attr(') && content.endsWith(')')) { + // Firefox does not resolve attribute accessors in content. + const attrName = content.substring('attr('.length, content.length - 1).trim(); + resolvedContent = element.getAttribute(attrName) || ''; + } + if (resolvedContent !== undefined) { // SPEC DIFFERENCE. // Spec says "CSS textual content, without a space", but we account for display // to pass "name_file-label-inline-block-styles-manual.html" const display = pseudoStyle.display || 'inline'; if (display !== 'inline') - return ' ' + unquoted + ' '; - return unquoted; + return ' ' + resolvedContent + ' '; + return resolvedContent; } return ''; } diff --git a/packages/playwright-core/src/server/page.ts b/packages/playwright-core/src/server/page.ts index b4e8fbb504..8ad50d48e4 100644 --- a/packages/playwright-core/src/server/page.ts +++ b/packages/playwright-core/src/server/page.ts @@ -107,6 +107,7 @@ type EmulatedMedia = { colorScheme: types.ColorScheme; reducedMotion: types.ReducedMotion; forcedColors: types.ForcedColors; + contrast: types.Contrast; }; type ExpectScreenshotOptions = ImageComparatorOptions & ScreenshotOptions & { @@ -542,6 +543,8 @@ export class Page extends SdkObject { this._emulatedMedia.reducedMotion = options.reducedMotion; if (options.forcedColors !== undefined) this._emulatedMedia.forcedColors = options.forcedColors; + if (options.contrast !== undefined) + this._emulatedMedia.contrast = options.contrast; await this._delegate.updateEmulateMedia(); } @@ -553,6 +556,7 @@ export class Page extends SdkObject { colorScheme: this._emulatedMedia.colorScheme !== undefined ? this._emulatedMedia.colorScheme : contextOptions.colorScheme ?? 'light', reducedMotion: this._emulatedMedia.reducedMotion !== undefined ? this._emulatedMedia.reducedMotion : contextOptions.reducedMotion ?? 'no-preference', forcedColors: this._emulatedMedia.forcedColors !== undefined ? this._emulatedMedia.forcedColors : contextOptions.forcedColors ?? 'none', + contrast: this._emulatedMedia.contrast !== undefined ? this._emulatedMedia.contrast : contextOptions.contrast ?? 'no-preference', }; } diff --git a/packages/playwright-core/src/server/recorder/recorderCollection.ts b/packages/playwright-core/src/server/recorder/recorderCollection.ts index 162d5d6813..9f28efd930 100644 --- a/packages/playwright-core/src/server/recorder/recorderCollection.ts +++ b/packages/playwright-core/src/server/recorder/recorderCollection.ts @@ -85,7 +85,7 @@ export class RecorderCollection extends EventEmitter { let generateGoto = false; if (!lastAction) generateGoto = true; - else if (lastAction.action.name !== 'click' && lastAction.action.name !== 'press') + else if (lastAction.action.name !== 'click' && lastAction.action.name !== 'press' && lastAction.action.name !== 'fill') generateGoto = true; else if (timestamp - lastAction.startTime > signalThreshold) generateGoto = true; diff --git a/packages/playwright-core/src/server/socksClientCertificatesInterceptor.ts b/packages/playwright-core/src/server/socksClientCertificatesInterceptor.ts index 2517ea24ce..6413cd1ddf 100644 --- a/packages/playwright-core/src/server/socksClientCertificatesInterceptor.ts +++ b/packages/playwright-core/src/server/socksClientCertificatesInterceptor.ts @@ -98,7 +98,7 @@ class SocksProxyConnection { async connect() { if (this.socksProxy.proxyAgentFromOptions) - this.target = await this.socksProxy.proxyAgentFromOptions.connect(new EventEmitter() as any, { host: rewriteToLocalhostIfNeeded(this.host), port: this.port, secureEndpoint: false }); + this.target = await this.socksProxy.proxyAgentFromOptions.callback(new EventEmitter() as any, { host: rewriteToLocalhostIfNeeded(this.host), port: this.port, secureEndpoint: false }); else this.target = await createSocket(rewriteToLocalhostIfNeeded(this.host), this.port); diff --git a/packages/playwright-core/src/server/storageScript.ts b/packages/playwright-core/src/server/storageScript.ts new file mode 100644 index 0000000000..517a1529d3 --- /dev/null +++ b/packages/playwright-core/src/server/storageScript.ts @@ -0,0 +1,171 @@ +/** + * Copyright (c) Microsoft Corporation. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import type * as channels from '@protocol/channels'; +import type { source } from './isomorphic/utilityScriptSerializers'; + +export type Storage = Omit; + +export async function collect(serializers: ReturnType, isFirefox: boolean): Promise { + const idbResult = await Promise.all((await indexedDB.databases()).map(async dbInfo => { + if (!dbInfo.name) + throw new Error('Database name is empty'); + if (!dbInfo.version) + throw new Error('Database version is unset'); + + function idbRequestToPromise(request: T) { + return new Promise((resolve, reject) => { + request.addEventListener('success', () => resolve(request.result)); + request.addEventListener('error', () => reject(request.error)); + }); + } + + function isPlainObject(v: any) { + const ctor = v?.constructor; + if (isFirefox) { + const constructorImpl = ctor?.toString(); + if (constructorImpl.startsWith('function Object() {') && constructorImpl.includes('[native code]')) + return true; + } + + return ctor === Object; + } + + function trySerialize(value: any): { trivial?: any, encoded?: any } { + let trivial = true; + const encoded = serializers.serializeAsCallArgument(value, v => { + const isTrivial = ( + isPlainObject(v) + || Array.isArray(v) + || typeof v === 'string' + || typeof v === 'number' + || typeof v === 'boolean' + || Object.is(v, null) + ); + + if (!isTrivial) + trivial = false; + + return { fallThrough: v }; + }); + if (trivial) + return { trivial: value }; + return { encoded }; + } + + const db = await idbRequestToPromise(indexedDB.open(dbInfo.name)); + const transaction = db.transaction(db.objectStoreNames, 'readonly'); + const stores = await Promise.all([...db.objectStoreNames].map(async storeName => { + const objectStore = transaction.objectStore(storeName); + + const keys = await idbRequestToPromise(objectStore.getAllKeys()); + const records = await Promise.all(keys.map(async key => { + const record: channels.OriginStorage['indexedDB'][0]['stores'][0]['records'][0] = {}; + + if (objectStore.keyPath === null) { + const { encoded, trivial } = trySerialize(key); + if (trivial) + record.key = trivial; + else + record.keyEncoded = encoded; + } + + const value = await idbRequestToPromise(objectStore.get(key)); + const { encoded, trivial } = trySerialize(value); + if (trivial) + record.value = trivial; + else + record.valueEncoded = encoded; + + return record; + })); + + const indexes = [...objectStore.indexNames].map(indexName => { + const index = objectStore.index(indexName); + return { + name: index.name, + keyPath: typeof index.keyPath === 'string' ? index.keyPath : undefined, + keyPathArray: Array.isArray(index.keyPath) ? index.keyPath : undefined, + multiEntry: index.multiEntry, + unique: index.unique, + }; + }); + + return { + name: storeName, + records: records, + indexes, + autoIncrement: objectStore.autoIncrement, + keyPath: typeof objectStore.keyPath === 'string' ? objectStore.keyPath : undefined, + keyPathArray: Array.isArray(objectStore.keyPath) ? objectStore.keyPath : undefined, + }; + })); + + return { + name: dbInfo.name, + version: dbInfo.version, + stores, + }; + })).catch(e => { + throw new Error('Unable to serialize IndexedDB: ' + e.message); + }); + + return { + localStorage: Object.keys(localStorage).map(name => ({ name, value: localStorage.getItem(name)! })), + indexedDB: idbResult, + }; +} + +export async function restore(originState: channels.SetOriginStorage, serializers: ReturnType) { + for (const { name, value } of (originState.localStorage || [])) + localStorage.setItem(name, value); + + await Promise.all((originState.indexedDB ?? []).map(async dbInfo => { + const openRequest = indexedDB.open(dbInfo.name, dbInfo.version); + openRequest.addEventListener('upgradeneeded', () => { + const db = openRequest.result; + for (const store of dbInfo.stores) { + const objectStore = db.createObjectStore(store.name, { autoIncrement: store.autoIncrement, keyPath: store.keyPathArray ?? store.keyPath }); + for (const index of store.indexes) + objectStore.createIndex(index.name, index.keyPathArray ?? index.keyPath!, { unique: index.unique, multiEntry: index.multiEntry }); + } + }); + + function idbRequestToPromise(request: T) { + return new Promise((resolve, reject) => { + request.addEventListener('success', () => resolve(request.result)); + request.addEventListener('error', () => reject(request.error)); + }); + } + + // after `upgradeneeded` finishes, `success` event is fired. + const db = await idbRequestToPromise(openRequest); + const transaction = db.transaction(db.objectStoreNames, 'readwrite'); + await Promise.all(dbInfo.stores.map(async store => { + const objectStore = transaction.objectStore(store.name); + await Promise.all(store.records.map(async record => { + await idbRequestToPromise( + objectStore.add( + record.value ?? serializers.parseEvaluationResultValue(record.valueEncoded), + record.key ?? serializers.parseEvaluationResultValue(record.keyEncoded), + ) + ); + })); + })); + })).catch(e => { + throw new Error('Unable to restore IndexedDB: ' + e.message); + }); +} diff --git a/packages/playwright-core/src/server/trace/recorder/tracing.ts b/packages/playwright-core/src/server/trace/recorder/tracing.ts index c19c0a33d9..fa57a14df1 100644 --- a/packages/playwright-core/src/server/trace/recorder/tracing.ts +++ b/packages/playwright-core/src/server/trace/recorder/tracing.ts @@ -170,10 +170,16 @@ export class Tracing extends SdkObject implements InstrumentationListener, Snaps this._state.recording = true; this._state.callIds.clear(); + // - Browser context network trace is shared across chunks as it contains resources + // used to serve page snapshots, so make a copy with the new name. + // - APIRequestContext network traces are chunk-specific, always start from scratch. + const preserveNetworkResources = this._context instanceof BrowserContext; if (options.name && options.name !== this._state.traceName) - this._changeTraceName(this._state, options.name); + this._changeTraceName(this._state, options.name, preserveNetworkResources); else this._allocateNewTraceFile(this._state); + if (!preserveNetworkResources) + this._fs.writeFile(this._state.networkFile, ''); this._fs.mkdir(path.dirname(this._state.traceFile)); const event: trace.TraceEvent = { @@ -267,14 +273,14 @@ export class Tracing extends SdkObject implements InstrumentationListener, Snaps state.traceFile = path.join(state.tracesDir, `${state.traceName}${suffix}.trace`); } - private _changeTraceName(state: RecordingState, name: string) { + private _changeTraceName(state: RecordingState, name: string, preserveNetworkResources: boolean) { state.traceName = name; state.chunkOrdinal = 0; // Reset ordinal for the new name. this._allocateNewTraceFile(state); - // Network file survives across chunks, so make a copy with the new name. const newNetworkFile = path.join(state.tracesDir, name + '.network'); - this._fs.copyFile(state.networkFile, newNetworkFile); + if (preserveNetworkResources) + this._fs.copyFile(state.networkFile, newNetworkFile); state.networkFile = newNetworkFile; } diff --git a/packages/playwright-core/src/server/trace/viewer/traceViewer.ts b/packages/playwright-core/src/server/trace/viewer/traceViewer.ts index f852f6c996..55cbca1cad 100644 --- a/packages/playwright-core/src/server/trace/viewer/traceViewer.ts +++ b/packages/playwright-core/src/server/trace/viewer/traceViewer.ts @@ -67,6 +67,10 @@ export async function startTraceViewerServer(options?: TraceViewerServerOptions) server.routePrefix('/trace', (request, response) => { const url = new URL('http://localhost' + request.url!); const relativePath = url.pathname.slice('/trace'.length); + if (process.env.PW_HMR) { + // When running in Vite HMR mode, port is hardcoded in build.js + response.appendHeader('Access-Control-Allow-Origin', 'http://localhost:44223'); + } if (relativePath.endsWith('/stall.js')) return true; if (relativePath.startsWith('/file')) { diff --git a/packages/playwright-core/src/server/types.ts b/packages/playwright-core/src/server/types.ts index b58ea5af83..b5603f19e6 100644 --- a/packages/playwright-core/src/server/types.ts +++ b/packages/playwright-core/src/server/types.ts @@ -84,6 +84,8 @@ export type ReducedMotion = 'no-preference' | 'reduce' | 'no-override'; export type ForcedColors = 'active' | 'none' | 'no-override'; +export type Contrast = 'no-preference' | 'more' | 'no-override'; + export type DeviceDescriptor = { userAgent: string, viewport: Size, diff --git a/packages/playwright-core/src/server/webkit/wkPage.ts b/packages/playwright-core/src/server/webkit/wkPage.ts index 15005f589b..4a78642668 100644 --- a/packages/playwright-core/src/server/webkit/wkPage.ts +++ b/packages/playwright-core/src/server/webkit/wkPage.ts @@ -191,8 +191,8 @@ export class WKPage implements PageDelegate { if (contextOptions.userAgent) promises.push(this.updateUserAgent()); const emulatedMedia = this._page.emulatedMedia(); - if (emulatedMedia.media || emulatedMedia.colorScheme || emulatedMedia.reducedMotion || emulatedMedia.forcedColors) - promises.push(WKPage._setEmulateMedia(session, emulatedMedia.media, emulatedMedia.colorScheme, emulatedMedia.reducedMotion, emulatedMedia.forcedColors)); + if (emulatedMedia.media || emulatedMedia.colorScheme || emulatedMedia.reducedMotion || emulatedMedia.forcedColors || emulatedMedia.contrast) + promises.push(WKPage._setEmulateMedia(session, emulatedMedia.media, emulatedMedia.colorScheme, emulatedMedia.reducedMotion, emulatedMedia.forcedColors, emulatedMedia.contrast)); const bootstrapScript = this._calculateBootstrapScript(); if (bootstrapScript.length) promises.push(session.send('Page.setBootstrapScript', { source: bootstrapScript })); @@ -615,7 +615,7 @@ export class WKPage implements PageDelegate { await this._page._onFileChooserOpened(handle); } - private static async _setEmulateMedia(session: WKSession, mediaType: types.MediaType, colorScheme: types.ColorScheme, reducedMotion: types.ReducedMotion, forcedColors: types.ForcedColors): Promise { + private static async _setEmulateMedia(session: WKSession, mediaType: types.MediaType, colorScheme: types.ColorScheme, reducedMotion: types.ReducedMotion, forcedColors: types.ForcedColors, contrast: types.Contrast): Promise { const promises = []; promises.push(session.send('Page.setEmulatedMedia', { media: mediaType === 'no-override' ? '' : mediaType })); let appearance: any = undefined; @@ -639,6 +639,13 @@ export class WKPage implements PageDelegate { case 'no-override': forcedColorsWk = undefined; break; } promises.push(session.send('Page.setForcedColors', { forcedColors: forcedColorsWk })); + let contrastWk: any = undefined; + switch (contrast) { + case 'more': contrastWk = 'More'; break; + case 'no-preference': contrastWk = 'NoPreference'; break; + case 'no-override': contrastWk = undefined; break; + } + promises.push(session.send('Page.overrideUserPreference', { name: 'PrefersContrast', value: contrastWk })); await Promise.all(promises); } @@ -661,7 +668,8 @@ export class WKPage implements PageDelegate { const colorScheme = emulatedMedia.colorScheme; const reducedMotion = emulatedMedia.reducedMotion; const forcedColors = emulatedMedia.forcedColors; - await this._forAllSessions(session => WKPage._setEmulateMedia(session, emulatedMedia.media, colorScheme, reducedMotion, forcedColors)); + const contrast = emulatedMedia.contrast; + await this._forAllSessions(session => WKPage._setEmulateMedia(session, emulatedMedia.media, colorScheme, reducedMotion, forcedColors, contrast)); } async updateEmulatedViewportSize(): Promise { diff --git a/packages/playwright-core/src/utils/network.ts b/packages/playwright-core/src/utils/network.ts index 25d3a11156..b800a8773d 100644 --- a/packages/playwright-core/src/utils/network.ts +++ b/packages/playwright-core/src/utils/network.ts @@ -50,7 +50,7 @@ export function httpRequest(params: HTTPRequestParams, onResponse: (r: http.Inco const proxyURL = getProxyForUrl(params.url); if (proxyURL) { - const parsedProxyURL = new URL(proxyURL); + const parsedProxyURL = url.parse(proxyURL); if (params.url.startsWith('http:')) { options = { path: parsedUrl.href, diff --git a/packages/playwright-core/types/types.d.ts b/packages/playwright-core/types/types.d.ts index 3b7a4411b5..6f7c35e361 100644 --- a/packages/playwright-core/types/types.d.ts +++ b/packages/playwright-core/types/types.d.ts @@ -2565,6 +2565,12 @@ export interface Page { */ colorScheme?: null|"light"|"dark"|"no-preference"; + /** + * Emulates `'prefers-contrast'` media feature, supported values are `'no-preference'`, `'more'`. Passing `null` + * disables contrast emulation. + */ + contrast?: null|"no-preference"|"more"; + /** * Emulates `'forced-colors'` media feature, supported values are `'active'` and `'none'`. Passing `null` disables * forced colors emulation. @@ -9260,7 +9266,8 @@ export interface BrowserContext { setOffline(offline: boolean): Promise; /** - * Returns storage state for this browser context, contains current cookies and local storage snapshot. + * Returns storage state for this browser context, contains current cookies, local storage snapshot and IndexedDB + * snapshot. * @param options */ storageState(options?: { @@ -9301,6 +9308,50 @@ export interface BrowserContext { value: string; }>; + + indexedDB: Array<{ + name: string; + + version: number; + + stores: Array<{ + name: string; + + keyPath?: string; + + keyPathArray?: Array; + + autoIncrement: boolean; + + indexes: Array<{ + name: string; + + keyPath?: string; + + keyPathArray?: Array; + + unique: boolean; + + multiEntry: boolean; + }>; + + records: Array<{ + key?: Object; + + /** + * if `key` is not JSON-serializable, this contains an encoded version that preserves types. + */ + keyEncoded?: Object; + + value: Object; + + /** + * if `value` is not JSON-serializable, this contains an encoded version that preserves types. + */ + valueEncoded?: Object; + }>; + }>; + }>; }>; }>; @@ -9770,6 +9821,13 @@ export interface Browser { */ colorScheme?: null|"light"|"dark"|"no-preference"; + /** + * Emulates `'prefers-contrast'` media feature, supported values are `'no-preference'`, `'more'`. See + * [page.emulateMedia([options])](https://playwright.dev/docs/api/class-page#page-emulate-media) for more details. + * Passing `null` resets emulation to system defaults. Defaults to `'no-preference'`. + */ + contrast?: null|"no-preference"|"more"; + /** * Specify device scale factor (can be thought of as dpr). Defaults to `1`. Learn more about * [emulating devices with device scale factor](https://playwright.dev/docs/emulation#devices). @@ -10049,17 +10107,70 @@ export interface Browser { sameSite: "Strict"|"Lax"|"None"; }>; - /** - * localStorage to set for context - */ origins: Array<{ origin: string; + /** + * localStorage to set for context + */ localStorage: Array<{ name: string; value: string; }>; + + /** + * indexedDB to set for context + */ + indexedDB?: Array<{ + /** + * database name + */ + name: string; + + /** + * database version + */ + version: number; + + stores: Array<{ + name: string; + + keyPath?: string; + + keyPathArray?: Array; + + autoIncrement: boolean; + + indexes: Array<{ + name: string; + + keyPath?: string; + + keyPathArray?: Array; + + unique: boolean; + + multiEntry: boolean; + }>; + + records: Array<{ + key?: Object; + + /** + * if `key` is not JSON-serializable, this contains an encoded version that preserves types. + */ + keyEncoded?: Object; + + value: Object; + + /** + * if `value` is not JSON-serializable, this contains an encoded version that preserves types. + */ + valueEncoded?: Object; + }>; + }>; + }>; }>; }; @@ -12417,7 +12528,7 @@ export interface Locator { /** * Captures the aria snapshot of the given element. Read more about [aria snapshots](https://playwright.dev/docs/aria-snapshots) and - * [expect(locator).toMatchAriaSnapshot(expected[, options])](https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-match-aria-snapshot-1) + * [expect(locator).toMatchAriaSnapshot(expected[, options])](https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-match-aria-snapshot) * for the corresponding assertion. * * **Usage** @@ -14554,6 +14665,11 @@ export interface BrowserType { * * **NOTE** Connecting over the Chrome DevTools Protocol is only supported for Chromium-based browsers. * + * **NOTE** This connection is significantly lower fidelity than the Playwright protocol connection via + * [browserType.connect(wsEndpoint[, options])](https://playwright.dev/docs/api/class-browsertype#browser-type-connect). + * If you are experiencing issues or attempting to use advanced functionality, you probably want to use + * [browserType.connect(wsEndpoint[, options])](https://playwright.dev/docs/api/class-browsertype#browser-type-connect). + * * **Usage** * * ```js @@ -14579,6 +14695,11 @@ export interface BrowserType { * * **NOTE** Connecting over the Chrome DevTools Protocol is only supported for Chromium-based browsers. * + * **NOTE** This connection is significantly lower fidelity than the Playwright protocol connection via + * [browserType.connect(wsEndpoint[, options])](https://playwright.dev/docs/api/class-browsertype#browser-type-connect). + * If you are experiencing issues or attempting to use advanced functionality, you probably want to use + * [browserType.connect(wsEndpoint[, options])](https://playwright.dev/docs/api/class-browsertype#browser-type-connect). + * * **Usage** * * ```js @@ -14593,10 +14714,12 @@ export interface BrowserType { */ connectOverCDP(options: ConnectOverCDPOptions & { wsEndpoint?: string }): Promise; /** - * This method attaches Playwright to an existing browser instance. When connecting to another browser launched via - * `BrowserType.launchServer` in Node.js, the major and minor version needs to match the client version (1.2.3 → is - * compatible with 1.2.x). - * @param wsEndpoint A browser websocket endpoint to connect to. + * This method attaches Playwright to an existing browser instance created via `BrowserType.launchServer` in Node.js. + * + * **NOTE** The major and minor version of the Playwright instance that connects needs to match the version of + * Playwright that launches the browser (1.2.3 → is compatible with 1.2.x). + * + * @param wsEndpoint A Playwright browser websocket endpoint to connect to. You obtain this endpoint via `BrowserServer.wsEndpoint`. * @param options */ connect(wsEndpoint: string, options?: ConnectOptions): Promise; @@ -14607,10 +14730,12 @@ export interface BrowserType { * @deprecated */ /** - * This method attaches Playwright to an existing browser instance. When connecting to another browser launched via - * `BrowserType.launchServer` in Node.js, the major and minor version needs to match the client version (1.2.3 → is - * compatible with 1.2.x). - * @param wsEndpoint A browser websocket endpoint to connect to. + * This method attaches Playwright to an existing browser instance created via `BrowserType.launchServer` in Node.js. + * + * **NOTE** The major and minor version of the Playwright instance that connects needs to match the version of + * Playwright that launches the browser (1.2.3 → is compatible with 1.2.x). + * + * @param wsEndpoint A Playwright browser websocket endpoint to connect to. You obtain this endpoint via `BrowserServer.wsEndpoint`. * @param options */ connect(options: ConnectOptions & { wsEndpoint?: string }): Promise; @@ -14783,6 +14908,13 @@ export interface BrowserType { */ colorScheme?: null|"light"|"dark"|"no-preference"; + /** + * Emulates `'prefers-contrast'` media feature, supported values are `'no-preference'`, `'more'`. See + * [page.emulateMedia([options])](https://playwright.dev/docs/api/class-page#page-emulate-media) for more details. + * Passing `null` resets emulation to system defaults. Defaults to `'no-preference'`. + */ + contrast?: null|"no-preference"|"more"; + /** * Specify device scale factor (can be thought of as dpr). Defaults to `1`. Learn more about * [emulating devices with device scale factor](https://playwright.dev/docs/emulation#devices). @@ -16595,6 +16727,13 @@ export interface AndroidDevice { */ colorScheme?: null|"light"|"dark"|"no-preference"; + /** + * Emulates `'prefers-contrast'` media feature, supported values are `'no-preference'`, `'more'`. See + * [page.emulateMedia([options])](https://playwright.dev/docs/api/class-page#page-emulate-media) for more details. + * Passing `null` resets emulation to system defaults. Defaults to `'no-preference'`. + */ + contrast?: null|"no-preference"|"more"; + /** * Specify device scale factor (can be thought of as dpr). Defaults to `1`. Learn more about * [emulating devices with device scale factor](https://playwright.dev/docs/emulation#devices). @@ -17567,6 +17706,59 @@ export interface APIRequest { value: string; }>; + + /** + * indexedDB to set for context + */ + indexedDB?: Array<{ + /** + * database name + */ + name: string; + + /** + * database version + */ + version: number; + + stores: Array<{ + name: string; + + keyPath?: string; + + keyPathArray?: Array; + + autoIncrement: boolean; + + indexes: Array<{ + name: string; + + keyPath?: string; + + keyPathArray?: Array; + + unique: boolean; + + multiEntry: boolean; + }>; + + records: Array<{ + key?: Object; + + /** + * if `key` is not JSON-serializable, this contains an encoded version that preserves types. + */ + keyEncoded?: Object; + + value: Object; + + /** + * if `value` is not JSON-serializable, this contains an encoded version that preserves types. + */ + valueEncoded?: Object; + }>; + }>; + }>; }>; }; @@ -18376,6 +18568,50 @@ export interface APIRequestContext { value: string; }>; + + indexedDB: Array<{ + name: string; + + version: number; + + stores: Array<{ + name: string; + + keyPath?: string; + + keyPathArray?: Array; + + autoIncrement: boolean; + + indexes: Array<{ + name: string; + + keyPath?: string; + + keyPathArray?: Array; + + unique: boolean; + + multiEntry: boolean; + }>; + + records: Array<{ + key?: Object; + + /** + * if `key` is not JSON-serializable, this contains an encoded version that preserves types. + */ + keyEncoded?: Object; + + value: Object; + + /** + * if `value` is not JSON-serializable, this contains an encoded version that preserves types. + */ + valueEncoded?: Object; + }>; + }>; + }>; }>; }>; @@ -21287,8 +21523,11 @@ export interface WebError { } /** - * The [WebSocket](https://playwright.dev/docs/api/class-websocket) class represents websocket connections in the - * page. + * The [WebSocket](https://playwright.dev/docs/api/class-websocket) class represents WebSocket connections within a + * page. It provides the ability to inspect and manipulate the data being transmitted and received. + * + * If you want to intercept or modify WebSocket frames, consider using + * [WebSocketRoute](https://playwright.dev/docs/api/class-websocketroute). */ export interface WebSocket { /** @@ -21952,6 +22191,13 @@ export interface BrowserContextOptions { */ colorScheme?: null|"light"|"dark"|"no-preference"; + /** + * Emulates `'prefers-contrast'` media feature, supported values are `'no-preference'`, `'more'`. See + * [page.emulateMedia([options])](https://playwright.dev/docs/api/class-page#page-emulate-media) for more details. + * Passing `null` resets emulation to system defaults. Defaults to `'no-preference'`. + */ + contrast?: null|"no-preference"|"more"; + /** * Specify device scale factor (can be thought of as dpr). Defaults to `1`. Learn more about * [emulating devices with device scale factor](https://playwright.dev/docs/emulation#devices). @@ -22198,17 +22444,70 @@ export interface BrowserContextOptions { sameSite: "Strict"|"Lax"|"None"; }>; - /** - * localStorage to set for context - */ origins: Array<{ origin: string; + /** + * localStorage to set for context + */ localStorage: Array<{ name: string; value: string; }>; + + /** + * indexedDB to set for context + */ + indexedDB?: Array<{ + /** + * database name + */ + name: string; + + /** + * database version + */ + version: number; + + stores: Array<{ + name: string; + + keyPath?: string; + + keyPathArray?: Array; + + autoIncrement: boolean; + + indexes: Array<{ + name: string; + + keyPath?: string; + + keyPathArray?: Array; + + unique: boolean; + + multiEntry: boolean; + }>; + + records: Array<{ + key?: Object; + + /** + * if `key` is not JSON-serializable, this contains an encoded version that preserves types. + */ + keyEncoded?: Object; + + value: Object; + + /** + * if `value` is not JSON-serializable, this contains an encoded version that preserves types. + */ + valueEncoded?: Object; + }>; + }>; + }>; }>; }; diff --git a/packages/playwright/bundles/babel/src/babelBundleImpl.ts b/packages/playwright/bundles/babel/src/babelBundleImpl.ts index 54822134ea..d58554b44b 100644 --- a/packages/playwright/bundles/babel/src/babelBundleImpl.ts +++ b/packages/playwright/bundles/babel/src/babelBundleImpl.ts @@ -118,15 +118,15 @@ function isTypeScript(filename: string) { return filename.endsWith('.ts') || filename.endsWith('.tsx') || filename.endsWith('.mts') || filename.endsWith('.cts'); } -export function babelTransform(code: string, filename: string, isModule: boolean, pluginsPrologue: [string, any?][], pluginsEpilogue: [string, any?][]): BabelFileResult { +export function babelTransform(code: string, filename: string, isModule: boolean, pluginsPrologue: [string, any?][], pluginsEpilogue: [string, any?][]): BabelFileResult | null { if (isTransforming) - return {}; + return null; // Prevent reentry while requiring plugins lazily. isTransforming = true; try { const options = babelTransformOptions(isTypeScript(filename), isModule, pluginsPrologue, pluginsEpilogue); - return babel.transform(code, { filename, ...options })!; + return babel.transform(code, { filename, ...options }); } finally { isTransforming = false; } diff --git a/packages/playwright/src/common/config.ts b/packages/playwright/src/common/config.ts index c2dc2d6edf..b55c3d6527 100644 --- a/packages/playwright/src/common/config.ts +++ b/packages/playwright/src/common/config.ts @@ -170,7 +170,7 @@ export class FullProjectInternal { readonly fullyParallel: boolean; readonly expect: Project['expect']; readonly respectGitIgnore: boolean; - readonly snapshotPathTemplate: string; + readonly snapshotPathTemplate: string | undefined; readonly ignoreSnapshots: boolean; id = ''; deps: FullProjectInternal[] = []; @@ -179,8 +179,7 @@ export class FullProjectInternal { constructor(configDir: string, config: Config, fullConfig: FullConfigInternal, projectConfig: Project, configCLIOverrides: ConfigCLIOverrides, packageJsonDir: string) { this.fullConfig = fullConfig; const testDir = takeFirst(pathResolve(configDir, projectConfig.testDir), pathResolve(configDir, config.testDir), fullConfig.configDir); - const defaultSnapshotPathTemplate = '{snapshotDir}/{testFileDir}/{testFileName}-snapshots/{arg}{-projectName}{-snapshotSuffix}{ext}'; - this.snapshotPathTemplate = takeFirst(projectConfig.snapshotPathTemplate, config.snapshotPathTemplate, defaultSnapshotPathTemplate); + this.snapshotPathTemplate = takeFirst(projectConfig.snapshotPathTemplate, config.snapshotPathTemplate); this.project = { grep: takeFirst(projectConfig.grep, config.grep, defaultGrep), diff --git a/packages/playwright/src/common/ipc.ts b/packages/playwright/src/common/ipc.ts index 76ee996216..2e085f5b78 100644 --- a/packages/playwright/src/common/ipc.ts +++ b/packages/playwright/src/common/ipc.ts @@ -109,6 +109,7 @@ export type StepEndPayload = { wallTime: number; // milliseconds since unix epoch error?: TestInfoErrorImpl; suggestedRebaseline?: string; + annotations: { type: string, description?: string }[]; }; export type TestEntry = { diff --git a/packages/playwright/src/common/testType.ts b/packages/playwright/src/common/testType.ts index 58d813a99e..71761b33e1 100644 --- a/packages/playwright/src/common/testType.ts +++ b/packages/playwright/src/common/testType.ts @@ -19,7 +19,7 @@ import { currentlyLoadingFileSuite, currentTestInfo, setCurrentlyLoadingFileSuit import { TestCase, Suite } from './test'; import { wrapFunctionWithLocation } from '../transform/transform'; import type { FixturesWithLocation } from './config'; -import type { Fixtures, TestType, TestDetails } from '../../types/test'; +import type { Fixtures, TestType, TestDetails, TestStepInfo } from '../../types/test'; import type { Location } from '../../types/testReporter'; import { getPackageManagerExecCommand, monotonicTime, raceAgainstDeadline, zones } from 'playwright-core/lib/utils'; import { errors } from 'playwright-core'; @@ -258,22 +258,17 @@ export class TestTypeImpl { suite._use.push({ fixtures, location }); } - async _step(expectation: 'pass'|'skip', title: string, body: () => T | Promise, options: {box?: boolean, location?: Location, timeout?: number } = {}): Promise { + async _step(expectation: 'pass'|'skip', title: string, body: (step: TestStepInfo) => T | Promise, options: {box?: boolean, location?: Location, timeout?: number } = {}): Promise { const testInfo = currentTestInfo(); if (!testInfo) throw new Error(`test.step() can only be called from a test`); - if (expectation === 'skip') { - const step = testInfo._addStep({ category: 'test.step.skip', title, location: options.location, box: options.box }); - step.complete({}); - return undefined as T; - } const step = testInfo._addStep({ category: 'test.step', title, location: options.location, box: options.box }); return await zones.run('stepZone', step, async () => { try { let result: Awaited>> | undefined = undefined; result = await raceAgainstDeadline(async () => { try { - return await body(); + return await step.info._runStepBody(expectation === 'skip', body); } catch (e) { // If the step timed out, the test fixtures will tear down, which in turn // will abort unfinished actions in the step body. Record such errors here. diff --git a/packages/playwright/src/isomorphic/teleReceiver.ts b/packages/playwright/src/isomorphic/teleReceiver.ts index 1d41b793cd..1eb83df623 100644 --- a/packages/playwright/src/isomorphic/teleReceiver.ts +++ b/packages/playwright/src/isomorphic/teleReceiver.ts @@ -109,6 +109,7 @@ export type JsonTestStepEnd = { duration: number; error?: reporterTypes.TestError; attachments?: number[]; // index of JsonTestResultEnd.attachments + annotations?: Annotation[]; }; export type JsonFullResult = { @@ -546,6 +547,10 @@ class TeleTestStep implements reporterTypes.TestStep { get attachments() { return this._endPayload?.attachments?.map(index => this._result.attachments[index]) ?? []; } + + get annotations() { + return this._endPayload?.annotations ?? []; + } } export class TeleTestResult implements reporterTypes.TestResult { diff --git a/packages/playwright/src/isomorphic/types.d.ts b/packages/playwright/src/isomorphic/types.d.ts new file mode 100644 index 0000000000..72c6db3533 --- /dev/null +++ b/packages/playwright/src/isomorphic/types.d.ts @@ -0,0 +1,25 @@ +/** + * Copyright (c) Microsoft Corporation. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +export interface GitCommitInfo { + 'revision.id'?: string; + 'revision.author'?: string; + 'revision.email'?: string; + 'revision.subject'?: string; + 'revision.timestamp'?: number | Date; + 'revision.link'?: string; + 'ci.link'?: string; +} diff --git a/packages/playwright/src/matchers/expect.ts b/packages/playwright/src/matchers/expect.ts index d382a4dbfd..68e52c46c8 100644 --- a/packages/playwright/src/matchers/expect.ts +++ b/packages/playwright/src/matchers/expect.ts @@ -49,8 +49,9 @@ import { toHaveValues, toPass } from './matchers'; +import type { ExpectMatcherStateInternal } from './matchers'; import { toMatchSnapshot, toHaveScreenshot, toHaveScreenshotStepTitle } from './toMatchSnapshot'; -import type { Expect, ExpectMatcherState } from '../../types/test'; +import type { Expect } from '../../types/test'; import { currentTestInfo } from '../common/globals'; import { filteredStackTrace, trimLongString } from '../util'; import { @@ -61,6 +62,7 @@ import { } from '../common/expectBundle'; import { zones } from 'playwright-core/lib/utils'; import { TestInfoImpl } from '../worker/testInfo'; +import type { TestStepInfoImpl } from '../worker/testInfo'; import { ExpectError, isJestError } from './matcherHint'; import { toMatchAriaSnapshot } from './toMatchAriaSnapshot'; @@ -110,13 +112,13 @@ function createMatchers(actual: unknown, info: ExpectMetaInfo, prefix: string[]) return new Proxy(expectLibrary(actual), new ExpectMetaInfoProxyHandler(info, prefix)); } -const getCustomMatchersSymbol = Symbol('get custom matchers'); +const userMatchersSymbol = Symbol('userMatchers'); function qualifiedMatcherName(qualifier: string[], matcherName: string) { return qualifier.join(':') + '$' + matcherName; } -function createExpect(info: ExpectMetaInfo, prefix: string[], customMatchers: Record) { +function createExpect(info: ExpectMetaInfo, prefix: string[], userMatchers: Record) { const expectInstance: Expect<{}> = new Proxy(expectLibrary, { apply: function(target: any, thisArg: any, argumentsList: [unknown, ExpectMessage?]) { const [actual, messageOrOptions] = argumentsList; @@ -130,7 +132,7 @@ function createExpect(info: ExpectMetaInfo, prefix: string[], customMatchers: Re return createMatchers(actual, newInfo, prefix); }, - get: function(target: any, property: string | typeof getCustomMatchersSymbol) { + get: function(target: any, property: string | typeof userMatchersSymbol) { if (property === 'configure') return configure; @@ -139,27 +141,14 @@ function createExpect(info: ExpectMetaInfo, prefix: string[], customMatchers: Re const qualifier = [...prefix, createGuid()]; const wrappedMatchers: any = {}; - const extendedMatchers: any = { ...customMatchers }; for (const [name, matcher] of Object.entries(matchers)) { - wrappedMatchers[name] = function(...args: any[]) { - const { isNot, promise, utils } = this; - const newThis: ExpectMatcherState = { - isNot, - promise, - utils, - timeout: currentExpectTimeout() - }; - (newThis as any).equals = throwUnsupportedExpectMatcherError; - return (matcher as any).call(newThis, ...args); - }; + wrappedMatchers[name] = wrapPlaywrightMatcherToPassNiceThis(matcher); const key = qualifiedMatcherName(qualifier, name); wrappedMatchers[key] = wrappedMatchers[name]; Object.defineProperty(wrappedMatchers[key], 'name', { value: name }); - extendedMatchers[name] = wrappedMatchers[key]; } expectLibrary.extend(wrappedMatchers); - - return createExpect(info, qualifier, extendedMatchers); + return createExpect(info, qualifier, { ...userMatchers, ...matchers }); }; } @@ -169,8 +158,8 @@ function createExpect(info: ExpectMetaInfo, prefix: string[], customMatchers: Re }; } - if (property === getCustomMatchersSymbol) - return customMatchers; + if (property === userMatchersSymbol) + return userMatchers; if (property === 'poll') { return (actual: unknown, messageOrOptions?: ExpectMessage & { timeout?: number, intervals?: number[] }) => { @@ -197,12 +186,53 @@ function createExpect(info: ExpectMetaInfo, prefix: string[], customMatchers: Re newInfo.poll!.intervals = configuration._poll.intervals ?? newInfo.poll!.intervals; } } - return createExpect(newInfo, prefix, customMatchers); + return createExpect(newInfo, prefix, userMatchers); }; return expectInstance; } +// Expect wraps matchers, so there is no way to pass this information to the raw Playwright matcher. +// Rely on sync call sequence to seed each matcher call with the context. +type MatcherCallContext = { + expectInfo: ExpectMetaInfo; + testInfo: TestInfoImpl | null; + step?: TestStepInfoImpl; +}; + +let matcherCallContext: MatcherCallContext | undefined; + +function setMatcherCallContext(context: MatcherCallContext) { + matcherCallContext = context; +} + +function takeMatcherCallContext(): MatcherCallContext { + try { + return matcherCallContext!; + } finally { + matcherCallContext = undefined; + } +} + +const defaultExpectTimeout = 5000; + +function wrapPlaywrightMatcherToPassNiceThis(matcher: any) { + return function(this: any, ...args: any[]) { + const { isNot, promise, utils } = this; + const context = takeMatcherCallContext(); + const timeout = context.expectInfo.timeout ?? context.testInfo?._projectInternal?.expect?.timeout ?? defaultExpectTimeout; + const newThis: ExpectMatcherStateInternal = { + isNot, + promise, + utils, + timeout, + _stepInfo: context.step, + }; + (newThis as any).equals = throwUnsupportedExpectMatcherError; + return matcher.call(newThis, ...args); + }; +} + function throwUnsupportedExpectMatcherError() { throw new Error('It looks like you are using custom expect matchers that are not compatible with Playwright. See https://aka.ms/playwright/expect-compatibility'); } @@ -299,8 +329,7 @@ class ExpectMetaInfoProxyHandler implements ProxyHandler { } return (...args: any[]) => { const testInfo = currentTestInfo(); - // We assume that the matcher will read the current expect timeout the first thing. - setCurrentExpectConfigureTimeout(this._info.timeout); + setMatcherCallContext({ expectInfo: this._info, testInfo }); if (!testInfo) return matcher.call(target, ...args); @@ -329,6 +358,8 @@ class ExpectMetaInfoProxyHandler implements ProxyHandler { const jestError = isJestError(e) ? e : null; const error = jestError ? new ExpectError(jestError, customMessage, stackFrames) : e; if (jestError?.matcherResult.suggestedRebaseline) { + // NOTE: this is a workaround for the fact that we can't pass the suggested rebaseline + // for passing matchers. See toMatchAriaSnapshot for a counterpart. step.complete({ suggestedRebaseline: jestError?.matcherResult.suggestedRebaseline }); return; } @@ -344,6 +375,7 @@ class ExpectMetaInfoProxyHandler implements ProxyHandler { }; try { + setMatcherCallContext({ expectInfo: this._info, testInfo, step: step.info }); const callback = () => matcher.call(target, ...args); const result = zones.run('stepZone', step, callback); if (result instanceof Promise) @@ -360,7 +392,7 @@ class ExpectMetaInfoProxyHandler implements ProxyHandler { async function pollMatcher(qualifiedMatcherName: string, info: ExpectMetaInfo, prefix: string[], ...args: any[]) { const testInfo = currentTestInfo(); const poll = info.poll!; - const timeout = poll.timeout ?? currentExpectTimeout(); + const timeout = poll.timeout ?? info.timeout ?? testInfo?._projectInternal?.expect?.timeout ?? defaultExpectTimeout; const { deadline, timeoutMessage } = testInfo ? testInfo._deadlineForMatcher(timeout) : TestInfoImpl._defaultDeadlineForMatcher(timeout); const result = await pollAgainstDeadline(async () => { @@ -396,22 +428,6 @@ async function pollMatcher(qualifiedMatcherName: string, info: ExpectMetaInfo, p } } -let currentExpectConfigureTimeout: number | undefined; - -function setCurrentExpectConfigureTimeout(timeout: number | undefined) { - currentExpectConfigureTimeout = timeout; -} - -function currentExpectTimeout() { - if (currentExpectConfigureTimeout !== undefined) - return currentExpectConfigureTimeout; - const testInfo = currentTestInfo(); - let defaultExpectTimeout = testInfo?._projectInternal?.expect?.timeout; - if (typeof defaultExpectTimeout === 'undefined') - defaultExpectTimeout = 5000; - return defaultExpectTimeout; -} - function computeArgsSuffix(matcherName: string, args: any[]) { let value = ''; if (matcherName === 'toHaveScreenshot') @@ -424,7 +440,7 @@ export const expect: Expect<{}> = createExpect({}, [], {}).extend(customMatchers export function mergeExpects(...expects: any[]) { let merged = expect; for (const e of expects) { - const internals = e[getCustomMatchersSymbol]; + const internals = e[userMatchersSymbol]; if (!internals) // non-playwright expects mutate the global expect, so we don't need to do anything special continue; merged = merged.extend(internals); diff --git a/packages/playwright/src/matchers/matchers.ts b/packages/playwright/src/matchers/matchers.ts index e426cf9948..be960dd424 100644 --- a/packages/playwright/src/matchers/matchers.ts +++ b/packages/playwright/src/matchers/matchers.ts @@ -24,10 +24,13 @@ import { toMatchText } from './toMatchText'; import { isRegExp, isString, isTextualMimeType, pollAgainstDeadline, serializeExpectedTextValues } from 'playwright-core/lib/utils'; import { currentTestInfo } from '../common/globals'; import { TestInfoImpl } from '../worker/testInfo'; +import type { TestStepInfoImpl } from '../worker/testInfo'; import type { ExpectMatcherState } from '../../types/test'; import { takeFirst } from '../common/config'; import { toHaveURL as toHaveURLExternal } from './toHaveURL'; +export type ExpectMatcherStateInternal = ExpectMatcherState & { _stepInfo?: TestStepInfoImpl }; + export interface LocatorEx extends Locator { _expect(expression: string, options: FrameExpectParams): Promise<{ matches: boolean, received?: any, log?: string[], timedOut?: boolean }>; } diff --git a/packages/playwright/src/matchers/toMatchAriaSnapshot.ts b/packages/playwright/src/matchers/toMatchAriaSnapshot.ts index e4944fbfc1..412a4bf275 100644 --- a/packages/playwright/src/matchers/toMatchAriaSnapshot.ts +++ b/packages/playwright/src/matchers/toMatchAriaSnapshot.ts @@ -49,6 +49,8 @@ export async function toMatchAriaSnapshot( return { pass: !this.isNot, message: () => '', name: 'toMatchAriaSnapshot', expected: '' }; const updateSnapshots = testInfo.config.updateSnapshots; + const pathTemplate = testInfo._projectInternal.expect?.toMatchAriaSnapshot?.pathTemplate; + const defaultTemplate = '{snapshotDir}/{testFileDir}/{testFileName}-snapshots/{arg}{ext}'; const matcherOptions = { isNot: this.isNot, @@ -63,7 +65,7 @@ export async function toMatchAriaSnapshot( timeout = options.timeout ?? this.timeout; } else { if (expectedParam?.name) { - expectedPath = testInfo.snapshotPath(sanitizeFilePathBeforeExtension(expectedParam.name)); + expectedPath = testInfo._resolveSnapshotPath(pathTemplate, defaultTemplate, [sanitizeFilePathBeforeExtension(expectedParam.name)]); } else { let snapshotNames = (testInfo as any)[snapshotNamesSymbol] as SnapshotNames; if (!snapshotNames) { @@ -71,7 +73,7 @@ export async function toMatchAriaSnapshot( (testInfo as any)[snapshotNamesSymbol] = snapshotNames; } const fullTitleWithoutSpec = [...testInfo.titlePath.slice(1), ++snapshotNames.anonymousSnapshotIndex].join(' '); - expectedPath = testInfo.snapshotPath(sanitizeForFilePath(trimLongString(fullTitleWithoutSpec)) + '.yml'); + expectedPath = testInfo._resolveSnapshotPath(pathTemplate, defaultTemplate, [sanitizeForFilePath(trimLongString(fullTitleWithoutSpec)) + '.yml']); } expected = await fs.promises.readFile(expectedPath, 'utf8').catch(() => ''); timeout = expectedParam?.timeout ?? this.timeout; @@ -138,6 +140,14 @@ export async function toMatchAriaSnapshot( return { pass: true, message: () => '', name: 'toMatchAriaSnapshot' }; } else { const suggestedRebaseline = `\`\n${escapeTemplateString(indent(typedReceived.regex, '{indent} '))}\n{indent}\``; + if (updateSnapshots === 'missing') { + const message = 'A snapshot is not provided, generating new baseline.'; + testInfo._hasNonRetriableError = true; + testInfo._failWithError(new Error(message)); + } + // TODO: ideally, we should return "pass: true" here because this matcher passes + // when regenerating baselines. However, we can only access suggestedRebaseline in case + // of an error, so we fail here and workaround it in the expect implementation. return { pass: false, message: () => '', name: 'toMatchAriaSnapshot', suggestedRebaseline }; } } diff --git a/packages/playwright/src/matchers/toMatchSnapshot.ts b/packages/playwright/src/matchers/toMatchSnapshot.ts index 8d16f11fc2..09ca66ab3c 100644 --- a/packages/playwright/src/matchers/toMatchSnapshot.ts +++ b/packages/playwright/src/matchers/toMatchSnapshot.ts @@ -29,8 +29,8 @@ import { colors } from 'playwright-core/lib/utilsBundle'; import fs from 'fs'; import path from 'path'; import { mime } from 'playwright-core/lib/utilsBundle'; -import type { TestInfoImpl } from '../worker/testInfo'; -import type { ExpectMatcherState } from '../../types/test'; +import type { TestInfoImpl, TestStepInfoImpl } from '../worker/testInfo'; +import type { ExpectMatcherStateInternal } from './matchers'; import { matcherHint, type MatcherResult } from './matcherHint'; import type { FullProjectInternal } from '../common/config'; @@ -148,7 +148,8 @@ class SnapshotHelper { outputBasePath = testInfo._getOutputPath(sanitizedName); this.attachmentBaseName = sanitizedName; } - this.expectedPath = testInfo.snapshotPath(...expectedPathSegments); + const defaultTemplate = '{snapshotDir}/{testFileDir}/{testFileName}-snapshots/{arg}{-projectName}{-snapshotSuffix}{ext}'; + this.expectedPath = testInfo._resolveSnapshotPath(configOptions.pathTemplate, defaultTemplate, expectedPathSegments); this.legacyExpectedPath = addSuffixToFilePath(outputBasePath, '-expected'); this.previousPath = addSuffixToFilePath(outputBasePath, '-previous'); this.actualPath = addSuffixToFilePath(outputBasePath, '-actual'); @@ -220,13 +221,13 @@ class SnapshotHelper { return this.createMatcherResult(message, true); } - handleMissing(actual: Buffer | string): ImageMatcherResult { + handleMissing(actual: Buffer | string, step: TestStepInfoImpl | undefined): ImageMatcherResult { const isWriteMissingMode = this.updateSnapshots !== 'none'; if (isWriteMissingMode) writeFileSync(this.expectedPath, actual); - this.testInfo.attachments.push({ name: addSuffixToFilePath(this.attachmentBaseName, '-expected'), contentType: this.mimeType, path: this.expectedPath }); + step?._attachToStep({ name: addSuffixToFilePath(this.attachmentBaseName, '-expected'), contentType: this.mimeType, path: this.expectedPath }); writeFileSync(this.actualPath, actual); - this.testInfo.attachments.push({ name: addSuffixToFilePath(this.attachmentBaseName, '-actual'), contentType: this.mimeType, path: this.actualPath }); + step?._attachToStep({ name: addSuffixToFilePath(this.attachmentBaseName, '-actual'), contentType: this.mimeType, path: this.actualPath }); const message = `A snapshot doesn't exist at ${this.expectedPath}${isWriteMissingMode ? ', writing actual.' : '.'}`; if (this.updateSnapshots === 'all' || this.updateSnapshots === 'changed') { /* eslint-disable no-console */ @@ -248,28 +249,29 @@ class SnapshotHelper { diff: Buffer | string | undefined, header: string, diffError: string, - log: string[] | undefined): ImageMatcherResult { + log: string[] | undefined, + step: TestStepInfoImpl | undefined): ImageMatcherResult { const output = [`${header}${indent(diffError, ' ')}`]; if (expected !== undefined) { // Copy the expectation inside the `test-results/` folder for backwards compatibility, // so that one can upload `test-results/` directory and have all the data inside. writeFileSync(this.legacyExpectedPath, expected); - this.testInfo.attachments.push({ name: addSuffixToFilePath(this.attachmentBaseName, '-expected'), contentType: this.mimeType, path: this.expectedPath }); + step?._attachToStep({ name: addSuffixToFilePath(this.attachmentBaseName, '-expected'), contentType: this.mimeType, path: this.expectedPath }); output.push(`\nExpected: ${colors.yellow(this.expectedPath)}`); } if (previous !== undefined) { writeFileSync(this.previousPath, previous); - this.testInfo.attachments.push({ name: addSuffixToFilePath(this.attachmentBaseName, '-previous'), contentType: this.mimeType, path: this.previousPath }); + step?._attachToStep({ name: addSuffixToFilePath(this.attachmentBaseName, '-previous'), contentType: this.mimeType, path: this.previousPath }); output.push(`Previous: ${colors.yellow(this.previousPath)}`); } if (actual !== undefined) { writeFileSync(this.actualPath, actual); - this.testInfo.attachments.push({ name: addSuffixToFilePath(this.attachmentBaseName, '-actual'), contentType: this.mimeType, path: this.actualPath }); + step?._attachToStep({ name: addSuffixToFilePath(this.attachmentBaseName, '-actual'), contentType: this.mimeType, path: this.actualPath }); output.push(`Received: ${colors.yellow(this.actualPath)}`); } if (diff !== undefined) { writeFileSync(this.diffPath, diff); - this.testInfo.attachments.push({ name: addSuffixToFilePath(this.attachmentBaseName, '-diff'), contentType: this.mimeType, path: this.diffPath }); + step?._attachToStep({ name: addSuffixToFilePath(this.attachmentBaseName, '-diff'), contentType: this.mimeType, path: this.diffPath }); output.push(` Diff: ${colors.yellow(this.diffPath)}`); } @@ -287,7 +289,7 @@ class SnapshotHelper { } export function toMatchSnapshot( - this: ExpectMatcherState, + this: ExpectMatcherStateInternal, received: Buffer | string, nameOrOptions: NameOrSegments | { name?: NameOrSegments } & ImageComparatorOptions = {}, optOptions: ImageComparatorOptions = {} @@ -314,7 +316,7 @@ export function toMatchSnapshot( } if (!fs.existsSync(helper.expectedPath)) - return helper.handleMissing(received); + return helper.handleMissing(received, this._stepInfo); const expected = fs.readFileSync(helper.expectedPath); @@ -343,7 +345,7 @@ export function toMatchSnapshot( const receiver = isString(received) ? 'string' : 'Buffer'; const header = matcherHint(this, undefined, 'toMatchSnapshot', receiver, undefined, undefined); - return helper.handleDifferent(received, expected, undefined, result.diff, header, result.errorMessage, undefined); + return helper.handleDifferent(received, expected, undefined, result.diff, header, result.errorMessage, undefined, this._stepInfo); } export function toHaveScreenshotStepTitle( @@ -359,7 +361,7 @@ export function toHaveScreenshotStepTitle( } export async function toHaveScreenshot( - this: ExpectMatcherState, + this: ExpectMatcherStateInternal, pageOrLocator: Page | Locator, nameOrOptions: NameOrSegments | { name?: NameOrSegments } & ToHaveScreenshotOptions = {}, optOptions: ToHaveScreenshotOptions = {} @@ -424,11 +426,11 @@ export async function toHaveScreenshot( // This can be due to e.g. spinning animation, so we want to show it as a diff. if (errorMessage) { const header = matcherHint(this, locator, 'toHaveScreenshot', receiver, undefined, undefined, timedOut ? timeout : undefined); - return helper.handleDifferent(actual, undefined, previous, diff, header, errorMessage, log); + return helper.handleDifferent(actual, undefined, previous, diff, header, errorMessage, log, this._stepInfo); } // We successfully generated new screenshot. - return helper.handleMissing(actual!); + return helper.handleMissing(actual!, this._stepInfo); } // General case: @@ -459,7 +461,7 @@ export async function toHaveScreenshot( return writeFiles(); const header = matcherHint(this, undefined, 'toHaveScreenshot', receiver, undefined, undefined, timedOut ? timeout : undefined); - return helper.handleDifferent(actual, expectScreenshotOptions.expected, previous, diff, header, errorMessage, log); + return helper.handleDifferent(actual, expectScreenshotOptions.expected, previous, diff, header, errorMessage, log, this._stepInfo); } function writeFileSync(aPath: string, content: Buffer | string) { diff --git a/packages/playwright/src/plugins/gitCommitInfoPlugin.ts b/packages/playwright/src/plugins/gitCommitInfoPlugin.ts index 2244d80a9c..c69d953b62 100644 --- a/packages/playwright/src/plugins/gitCommitInfoPlugin.ts +++ b/packages/playwright/src/plugins/gitCommitInfoPlugin.ts @@ -18,6 +18,7 @@ import { createGuid, spawnAsync } from 'playwright-core/lib/utils'; import type { TestRunnerPlugin } from './'; import type { FullConfig } from '../../types/testReporter'; import type { FullConfigInternal } from '../common/config'; +import type { GitCommitInfo } from '../isomorphic/types'; const GIT_OPERATIONS_TIMEOUT_MS = 1500; @@ -31,38 +32,23 @@ export const gitCommitInfo = (options?: GitCommitInfoPluginOptions): TestRunnerP name: 'playwright:git-commit-info', setup: async (config: FullConfig, configDir: string) => { - const info = { - ...linksFromEnv(), - ...options?.info ? options.info : await gitStatusFromCLI(options?.directory || configDir), - timestamp: Date.now(), - }; - // Normalize dates - const timestamp = info['revision.timestamp']; - if (timestamp instanceof Date) - info['revision.timestamp'] = timestamp.getTime(); + const fromEnv = linksFromEnv(); + const fromCLI = await gitStatusFromCLI(options?.directory || configDir); + const info = { ...fromEnv, ...fromCLI }; + if (info['revision.timestamp'] instanceof Date) + info['revision.timestamp'] = info['revision.timestamp'].getTime(); config.metadata = config.metadata || {}; - Object.assign(config.metadata, info); + config.metadata['git.commit.info'] = info; }, }; }; -export interface GitCommitInfoPluginOptions { - directory?: string; - info?: Info; +interface GitCommitInfoPluginOptions { + directory?: string; } -export interface Info { - 'revision.id'?: string; - 'revision.author'?: string; - 'revision.email'?: string; - 'revision.subject'?: string; - 'revision.timestamp'?: number | Date; - 'revision.link'?: string; - 'ci.link'?: string; -} - -const linksFromEnv = (): Pick => { +function linksFromEnv(): Pick { const out: { 'revision.link'?: string; 'ci.link'?: string; } = {}; // Jenkins: https://www.jenkins.io/doc/book/pipeline/jenkinsfile/#using-environment-variables if (process.env.BUILD_URL) @@ -78,9 +64,9 @@ const linksFromEnv = (): Pick => { if (process.env.GITHUB_SERVER_URL && process.env.GITHUB_REPOSITORY && process.env.GITHUB_RUN_ID) out['ci.link'] = `${process.env.GITHUB_SERVER_URL}/${process.env.GITHUB_REPOSITORY}/actions/runs/${process.env.GITHUB_RUN_ID}`; return out; -}; +} -export const gitStatusFromCLI = async (gitDir: string): Promise => { +async function gitStatusFromCLI(gitDir: string): Promise { const separator = `:${createGuid().slice(0, 4)}:`; const { code, stdout } = await spawnAsync( 'git', @@ -101,4 +87,4 @@ export const gitStatusFromCLI = async (gitDir: string): Promise', 'Host to serve UI on; specifying this option opens UI in a browser tab'], ['--ui-port ', 'Port to serve UI on, 0 for any free port; specifying this option opens UI in a browser tab'], - ['-u, --update-snapshots [mode]', `Update snapshots with actual results. Possible values are 'all', 'changed', 'missing' and 'none'. Not passing defaults to 'missing', passing without value defaults to 'changed'`], + ['-u, --update-snapshots [mode]', `Update snapshots with actual results. Possible values are "all", "changed", "missing", and "none". Running tests without the flag defaults to "missing"; running tests with the flag but without a value defaults to "changed".`], ['--update-source-method ', `Chooses the way source is updated. Possible values are 'overwrite', '3way' and 'patch'. Defaults to 'patch'`], ['-j, --workers ', `Number of concurrent workers or percentage of logical CPU cores, use 1 to run in a single worker (default: 50%)`], ['-x', `Stop after the first failure`], diff --git a/packages/playwright/src/reporters/html.ts b/packages/playwright/src/reporters/html.ts index 1fd7695293..e258f22798 100644 --- a/packages/playwright/src/reporters/html.ts +++ b/packages/playwright/src/reporters/html.ts @@ -517,9 +517,12 @@ class HtmlBuilder { private _createTestStep(dedupedStep: DedupedStep, result: api.TestResult): TestStep { const { step, duration, count } = dedupedStep; - const skipped = dedupedStep.step.category === 'test.step.skip'; + const skipped = dedupedStep.step.annotations?.find(a => a.type === 'skip'); + let title = step.title; + if (skipped) + title = `${title} (skipped${skipped.description ? ': ' + skipped.description : ''})`; const testStep: TestStep = { - title: step.title, + title, startTime: step.startTime.toISOString(), duration, steps: dedupeSteps(step.steps).map(s => this._createTestStep(s, result)), @@ -532,7 +535,7 @@ class HtmlBuilder { location: this._relativeLocation(step.location), error: step.error?.message, count, - skipped + skipped: !!skipped, }; if (step.location) this._stepsInFile.set(step.location.file, testStep); diff --git a/packages/playwright/src/reporters/line.ts b/packages/playwright/src/reporters/line.ts index 96e393c1cf..4ff5221224 100644 --- a/packages/playwright/src/reporters/line.ts +++ b/packages/playwright/src/reporters/line.ts @@ -68,12 +68,12 @@ class LineReporter extends TerminalReporter { } onStepBegin(test: TestCase, result: TestResult, step: TestStep) { - if (step.category === 'test.step') + if (this.screen.isTTY && step.category === 'test.step') this._updateLine(test, result, step); } onStepEnd(test: TestCase, result: TestResult, step: TestStep) { - if (step.category === 'test.step') + if (this.screen.isTTY && step.category === 'test.step') this._updateLine(test, result, step.parent); } diff --git a/packages/playwright/src/reporters/teleEmitter.ts b/packages/playwright/src/reporters/teleEmitter.ts index 0ec92ae9ac..76fc1490a6 100644 --- a/packages/playwright/src/reporters/teleEmitter.ts +++ b/packages/playwright/src/reporters/teleEmitter.ts @@ -256,7 +256,8 @@ export class TeleReporterEmitter implements ReporterV2 { id: (step as any)[this._idSymbol], duration: step.duration, error: step.error, - attachments: step.attachments.map(a => result.attachments.indexOf(a)), + attachments: step.attachments.length ? step.attachments.map(a => result.attachments.indexOf(a)) : undefined, + annotations: step.annotations.length ? step.annotations : undefined, }; } diff --git a/packages/playwright/src/runner/dispatcher.ts b/packages/playwright/src/runner/dispatcher.ts index 534fe7eb4a..9f6367c106 100644 --- a/packages/playwright/src/runner/dispatcher.ts +++ b/packages/playwright/src/runner/dispatcher.ts @@ -321,6 +321,7 @@ class JobDispatcher { duration: -1, steps: [], attachments: [], + annotations: [], location: params.location, }; steps.set(params.stepId, step); @@ -345,6 +346,7 @@ class JobDispatcher { step.error = params.error; if (params.suggestedRebaseline) addSuggestedRebaseline(step.location!, params.suggestedRebaseline); + step.annotations = params.annotations; steps.delete(params.stepId); this._reporter.onStepEnd?.(test, result, step); } diff --git a/packages/playwright/src/runner/rebase.ts b/packages/playwright/src/runner/rebase.ts index 196944fd88..b040761df9 100644 --- a/packages/playwright/src/runner/rebase.ts +++ b/packages/playwright/src/runner/rebase.ts @@ -43,6 +43,10 @@ export function addSuggestedRebaseline(location: Location, suggestedRebaseline: suggestedRebaselines.set(location.file, { location, code: suggestedRebaseline }); } +export function clearSuggestedRebaselines() { + suggestedRebaselines.clear(); +} + export async function applySuggestedRebaselines(config: FullConfigInternal, reporter: InternalReporter) { if (config.config.updateSnapshots === 'none') return; diff --git a/packages/playwright/src/runner/tasks.ts b/packages/playwright/src/runner/tasks.ts index 84cffac573..2d0b57f13a 100644 --- a/packages/playwright/src/runner/tasks.ts +++ b/packages/playwright/src/runner/tasks.ts @@ -34,7 +34,7 @@ import { detectChangedTestFiles } from './vcs'; import type { InternalReporter } from '../reporters/internalReporter'; import { cacheDir } from '../transform/compilationCache'; import type { FullResult } from '../../types/testReporter'; -import { applySuggestedRebaselines } from './rebase'; +import { applySuggestedRebaselines, clearSuggestedRebaselines } from './rebase'; const readDirAsync = promisify(fs.readdir); @@ -284,6 +284,9 @@ export function createLoadTask(mode: 'out-of-process' | 'in-process', options: { export function createApplyRebaselinesTask(): Task { return { title: 'apply rebaselines', + setup: async () => { + clearSuggestedRebaselines(); + }, teardown: async ({ config, reporter }) => { await applySuggestedRebaselines(config, reporter); }, diff --git a/packages/playwright/src/transform/babelBundle.ts b/packages/playwright/src/transform/babelBundle.ts index d2f8b5919a..349b7b9c30 100644 --- a/packages/playwright/src/transform/babelBundle.ts +++ b/packages/playwright/src/transform/babelBundle.ts @@ -20,7 +20,7 @@ export const declare: typeof import('../../bundles/babel/node_modules/@types/bab export const types: typeof import('../../bundles/babel/node_modules/@types/babel__core').types = require('./babelBundleImpl').types; export const traverse: typeof import('../../bundles/babel/node_modules/@types/babel__traverse').default = require('./babelBundleImpl').traverse; export type BabelPlugin = [string, any?]; -export type BabelTransformFunction = (code: string, filename: string, isModule: boolean, pluginsPrefix: BabelPlugin[], pluginsSuffix: BabelPlugin[]) => BabelFileResult; +export type BabelTransformFunction = (code: string, filename: string, isModule: boolean, pluginsPrefix: BabelPlugin[], pluginsSuffix: BabelPlugin[]) => BabelFileResult | null; export const babelTransform: BabelTransformFunction = require('./babelBundleImpl').babelTransform; export type BabelParseFunction = (code: string, filename: string, isModule: boolean) => ParseResult; export const babelParse: BabelParseFunction = require('./babelBundleImpl').babelParse; diff --git a/packages/playwright/src/transform/transform.ts b/packages/playwright/src/transform/transform.ts index 549d83a168..88950670be 100644 --- a/packages/playwright/src/transform/transform.ts +++ b/packages/playwright/src/transform/transform.ts @@ -232,9 +232,10 @@ export function transformHook(originalCode: string, filename: string, moduleUrl? const { babelTransform }: { babelTransform: BabelTransformFunction } = require('./babelBundle'); transformData = new Map(); - const { code, map } = babelTransform(originalCode, filename, !!moduleUrl, pluginsPrologue, pluginsEpilogue); - if (!code) - return { code: '', serializedCache }; + const babelResult = babelTransform(originalCode, filename, !!moduleUrl, pluginsPrologue, pluginsEpilogue); + if (!babelResult?.code) + return { code: originalCode, serializedCache }; + const { code, map } = babelResult; const added = addToCache!(code, map, transformData); return { code, serializedCache: added.serializedCache }; } diff --git a/packages/playwright/src/worker/testInfo.ts b/packages/playwright/src/worker/testInfo.ts index 6e6ab4660c..740f7579bd 100644 --- a/packages/playwright/src/worker/testInfo.ts +++ b/packages/playwright/src/worker/testInfo.ts @@ -17,7 +17,7 @@ import fs from 'fs'; import path from 'path'; import { captureRawStack, monotonicTime, zones, sanitizeForFilePath, stringifyStackFrames } from 'playwright-core/lib/utils'; -import type { TestInfo, TestStatus, FullProject } from '../../types/test'; +import type { TestInfo, TestStatus, FullProject, TestStepInfo } from '../../types/test'; import type { AttachmentPayload, StepBeginPayload, StepEndPayload, TestInfoErrorImpl, WorkerInitParams } from '../common/ipc'; import type { TestCase } from '../common/test'; import { TimeoutManager, TimeoutManagerError, kMaxDeadline } from './timeoutManager'; @@ -31,6 +31,7 @@ import { testInfoError } from './util'; export interface TestStepInternal { complete(result: { error?: Error | unknown, suggestedRebaseline?: string }): void; + info: TestStepInfoImpl attachmentIndices: number[]; stepId: string; title: string; @@ -244,7 +245,7 @@ export class TestInfoImpl implements TestInfo { ?? this._findLastStageStep(this._steps); // If no parent step on stack, assume the current stage as parent. } - _addStep(data: Omit, parentStep?: TestStepInternal): TestStepInternal { + _addStep(data: Omit, parentStep?: TestStepInternal): TestStepInternal { const stepId = `${data.category}@${++this._lastStepId}`; if (data.isStage) { @@ -269,6 +270,7 @@ export class TestInfoImpl implements TestInfo { ...data, steps: [], attachmentIndices, + info: new TestStepInfoImpl(this, stepId), complete: result => { if (step.endWallTime) return; @@ -302,11 +304,12 @@ export class TestInfoImpl implements TestInfo { wallTime: step.endWallTime, error: step.error, suggestedRebaseline: result.suggestedRebaseline, + annotations: step.info.annotations, }; this._onStepEnd(payload); const errorForTrace = step.error ? { name: '', message: step.error.message || '', stack: step.error.stack } : undefined; const attachments = attachmentIndices.map(i => this.attachments[i]); - this._tracing.appendAfterActionForStep(stepId, errorForTrace, attachments); + this._tracing.appendAfterActionForStep(stepId, errorForTrace, attachments, step.info.annotations); } }; const parentStepList = parentStep ? parentStep.steps : this._steps; @@ -414,7 +417,7 @@ export class TestInfoImpl implements TestInfo { step.complete({}); } - private _attach(attachment: TestInfo['attachments'][0], stepId: string | undefined) { + _attach(attachment: TestInfo['attachments'][0], stepId: string | undefined) { const index = this._attachmentsPush(attachment) - 1; if (stepId) { this._stepMap.get(stepId)!.attachmentIndices.push(index); @@ -454,14 +457,15 @@ export class TestInfoImpl implements TestInfo { return sanitizeForFilePath(trimLongString(fullTitleWithoutSpec)); } - snapshotPath(...pathSegments: string[]) { + _resolveSnapshotPath(template: string | undefined, defaultTemplate: string, pathSegments: string[]) { const subPath = path.join(...pathSegments); const parsedSubPath = path.parse(subPath); const relativeTestFilePath = path.relative(this.project.testDir, this._requireFile); const parsedRelativeTestFilePath = path.parse(relativeTestFilePath); const projectNamePathSegment = sanitizeForFilePath(this.project.name); - const snapshotPath = (this._projectInternal.snapshotPathTemplate || '') + const actualTemplate = (template || this._projectInternal.snapshotPathTemplate || defaultTemplate); + const snapshotPath = actualTemplate .replace(/\{(.)?testDir\}/g, '$1' + this.project.testDir) .replace(/\{(.)?snapshotDir\}/g, '$1' + this.project.snapshotDir) .replace(/\{(.)?snapshotSuffix\}/g, this.snapshotSuffix ? '$1' + this.snapshotSuffix : '') @@ -477,6 +481,11 @@ export class TestInfoImpl implements TestInfo { return path.normalize(path.resolve(this._configInternal.configDir, snapshotPath)); } + snapshotPath(...pathSegments: string[]) { + const legacyTemplate = '{snapshotDir}/{testFileDir}/{testFileName}-snapshots/{arg}{-projectName}{-snapshotSuffix}{ext}'; + return this._resolveSnapshotPath(undefined, legacyTemplate, pathSegments); + } + skip(...args: [arg?: any, description?: string]) { this._modifier('skip', args); } @@ -498,6 +507,50 @@ export class TestInfoImpl implements TestInfo { } } +export class TestStepInfoImpl implements TestStepInfo { + annotations: Annotation[] = []; + + private _testInfo: TestInfoImpl; + private _stepId: string; + + constructor(testInfo: TestInfoImpl, stepId: string) { + this._testInfo = testInfo; + this._stepId = stepId; + } + + async _runStepBody(skip: boolean, body: (step: TestStepInfo) => T | Promise) { + if (skip) { + this.annotations.push({ type: 'skip' }); + return undefined as T; + } + try { + return await body(this); + } catch (e) { + if (e instanceof SkipError) + return undefined as T; + throw e; + } + } + + _attachToStep(attachment: TestInfo['attachments'][0]): void { + this._testInfo._attach(attachment, this._stepId); + } + + async attach(name: string, options?: { body?: string | Buffer; contentType?: string; path?: string; }): Promise { + this._attachToStep(await normalizeAndSaveAttachment(this._testInfo.outputPath(), name, options)); + } + + skip(...args: unknown[]) { + // skip(); + // skip(condition: boolean, description: string); + if (args.length > 0 && !args[0]) + return; + const description = args[1] as (string|undefined); + this.annotations.push({ type: 'skip', description }); + throw new SkipError(description); + } +} + export class SkipError extends Error { } diff --git a/packages/playwright/src/worker/testTracing.ts b/packages/playwright/src/worker/testTracing.ts index fde5ea5f3f..e154d6a649 100644 --- a/packages/playwright/src/worker/testTracing.ts +++ b/packages/playwright/src/worker/testTracing.ts @@ -252,19 +252,20 @@ export class TestTracing { parentId, startTime: monotonicTime(), class: 'Test', - method: category, + method: 'step', apiName, params: Object.fromEntries(Object.entries(params || {}).map(([name, value]) => [name, generatePreview(value)])), stack, }); } - appendAfterActionForStep(callId: string, error?: SerializedError['error'], attachments: Attachment[] = []) { + appendAfterActionForStep(callId: string, error?: SerializedError['error'], attachments: Attachment[] = [], annotations?: trace.AfterActionTraceEventAnnotation[]) { this._appendTraceEvent({ type: 'after', callId, endTime: monotonicTime(), attachments: serializeAttachments(attachments), + annotations, error, }); } @@ -277,6 +278,8 @@ export class TestTracing { } function serializeAttachments(attachments: Attachment[]): trace.AfterActionTraceEvent['attachments'] { + if (attachments.length === 0) + return undefined; return attachments.filter(a => a.name !== 'trace').map(a => { return { name: a.name, @@ -335,7 +338,7 @@ async function mergeTraceFiles(fileName: string, temporaryTraceFiles: string[]) // Keep the name for test traces so that the last test trace // that contains most of the information is kept in the trace. // Note the reverse order of the iteration (from new traces to old). - } else if (entry.fileName.match(/[\d-]*trace\./)) { + } else if (entry.fileName.match(/trace\.[a-z]*$/)) { entryName = i + '-' + entry.fileName; } if (entryNames.has(entryName)) { diff --git a/packages/playwright/src/worker/workerMain.ts b/packages/playwright/src/worker/workerMain.ts index b4878ff659..8bd7f3dcd0 100644 --- a/packages/playwright/src/worker/workerMain.ts +++ b/packages/playwright/src/worker/workerMain.ts @@ -105,6 +105,10 @@ export class WorkerMain extends ProcessRunner { override async gracefullyClose() { try { await this._stop(); + if (!this._config) { + // We never set anything up and we can crash on attempting cleanup + return; + } // Ignore top-level errors, they are already inside TestInfo.errors. const fakeTestInfo = new TestInfoImpl(this._config, this._project, this._params, undefined, 0, () => {}, () => {}, () => {}); const runnable = { type: 'teardown' } as const; @@ -190,15 +194,19 @@ export class WorkerMain extends ProcessRunner { if (this._config) return; - this._config = await deserializeConfig(this._params.config); - this._project = this._config.projects.find(p => p.id === this._params.projectId)!; + const config = await deserializeConfig(this._params.config); + const project = config.projects.find(p => p.id === this._params.projectId); + if (!project) + throw new Error(`Project "${this._params.projectId}" not found in the worker process. Make sure project name does not change.`); + this._config = config; + this._project = project; this._poolBuilder = PoolBuilder.createForWorker(this._project); } async runTestGroup(runPayload: RunPayload) { this._runFinished = new ManualPromise(); const entries = new Map(runPayload.entries.map(e => [e.testId, e])); - let fatalUnknownTestIds; + let fatalUnknownTestIds: string[] | undefined; try { await this._loadIfNeeded(); const fileSuite = await loadTestFile(runPayload.file, this._config.config.rootDir); diff --git a/packages/playwright/types/test.d.ts b/packages/playwright/types/test.d.ts index 391d9f56ab..9dbd22e765 100644 --- a/packages/playwright/types/test.d.ts +++ b/packages/playwright/types/test.d.ts @@ -214,6 +214,27 @@ interface TestProject { * [page.screenshot([options])](https://playwright.dev/docs/api/class-page#page-screenshot). */ stylePath?: string|Array; + + /** + * A template controlling location of the screenshots. See + * [testProject.snapshotPathTemplate](https://playwright.dev/docs/api/class-testproject#test-project-snapshot-path-template) + * for details. + */ + pathTemplate?: string; + }; + + /** + * Configuration for the + * [expect(locator).toMatchAriaSnapshot([options])](https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-match-aria-snapshot-2) + * method. + */ + toMatchAriaSnapshot?: { + /** + * A template controlling location of the aria snapshots. See + * [testProject.snapshotPathTemplate](https://playwright.dev/docs/api/class-testproject#test-project-snapshot-path-template) + * for details. + */ + pathTemplate?: string; }; /** @@ -328,6 +349,10 @@ interface TestProject { /** * Project name is visible in the report and during test execution. + * + * **NOTE** Playwright executes the configuration file multiple times. Do not dynamically produce non-stable values in + * your configuration. + * */ name?: string; @@ -404,10 +429,14 @@ interface TestProject { /** * This option configures a template controlling location of snapshots generated by - * [expect(page).toHaveScreenshot(name[, options])](https://playwright.dev/docs/api/class-pageassertions#page-assertions-to-have-screenshot-1) + * [expect(page).toHaveScreenshot(name[, options])](https://playwright.dev/docs/api/class-pageassertions#page-assertions-to-have-screenshot-1), + * [expect(locator).toMatchAriaSnapshot([options])](https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-match-aria-snapshot-2) * and * [expect(value).toMatchSnapshot(name[, options])](https://playwright.dev/docs/api/class-snapshotassertions#snapshot-assertions-to-match-snapshot-1). * + * You can configure templates for each assertion separately in + * [testConfig.expect](https://playwright.dev/docs/api/class-testconfig#test-config-expect). + * * **Usage** * * ```js @@ -416,7 +445,19 @@ interface TestProject { * * export default defineConfig({ * testDir: './tests', + * + * // Single template for all assertions * snapshotPathTemplate: '{testDir}/__screenshots__/{testFilePath}/{arg}{ext}', + * + * // Assertion-specific templates + * expect: { + * toHaveScreenshot: { + * pathTemplate: '{testDir}/__screenshots__{/projectName}/{testFilePath}/{arg}{ext}', + * }, + * toMatchAriaSnapshot: { + * pathTemplate: '{testDir}/__snapshots__/{testFilePath}/{arg}{ext}', + * }, + * }, * }); * ``` * @@ -447,27 +488,27 @@ interface TestProject { * ``` * * The list of supported tokens: - * - `{arg}` - Relative snapshot path **without extension**. These come from the arguments passed to the - * `toHaveScreenshot()` and `toMatchSnapshot()` calls; if called without arguments, this will be an auto-generated - * snapshot name. + * - `{arg}` - Relative snapshot path **without extension**. This comes from the arguments passed to + * `toHaveScreenshot()`, `toMatchAriaSnapshot()` or `toMatchSnapshot()`; if called without arguments, this will be + * an auto-generated snapshot name. * - Value: `foo/bar/baz` - * - `{ext}` - snapshot extension (with dots) + * - `{ext}` - Snapshot extension (with the leading dot). * - Value: `.png` * - `{platform}` - The value of `process.platform`. * - `{projectName}` - Project's file-system-sanitized name, if any. * - Value: `''` (empty string). * - `{snapshotDir}` - Project's - * [testConfig.snapshotDir](https://playwright.dev/docs/api/class-testconfig#test-config-snapshot-dir). + * [testProject.snapshotDir](https://playwright.dev/docs/api/class-testproject#test-project-snapshot-dir). * - Value: `/home/playwright/tests` (since `snapshotDir` is not provided in config, it defaults to `testDir`) * - `{testDir}` - Project's - * [testConfig.testDir](https://playwright.dev/docs/api/class-testconfig#test-config-test-dir). - * - Value: `/home/playwright/tests` (absolute path is since `testDir` is resolved relative to directory with + * [testProject.testDir](https://playwright.dev/docs/api/class-testproject#test-project-test-dir). + * - Value: `/home/playwright/tests` (absolute path since `testDir` is resolved relative to directory with * config) * - `{testFileDir}` - Directories in relative path from `testDir` to **test file**. * - Value: `page` * - `{testFileName}` - Test file name with extension. * - Value: `page-click.spec.ts` - * - `{testFilePath}` - Relative path from `testDir` to **test file** + * - `{testFilePath}` - Relative path from `testDir` to **test file**. * - Value: `page/page-click.spec.ts` * - `{testName}` - File-system-sanitized test title, including parent describes but excluding file name. * - Value: `suite-test-should-work` @@ -991,6 +1032,27 @@ interface TestConfig { * [YIQ color space](https://en.wikipedia.org/wiki/YIQ) and defaults `threshold` value to `0.2`. */ threshold?: number; + + /** + * A template controlling location of the screenshots. See + * [testConfig.snapshotPathTemplate](https://playwright.dev/docs/api/class-testconfig#test-config-snapshot-path-template) + * for details. + */ + pathTemplate?: string; + }; + + /** + * Configuration for the + * [expect(locator).toMatchAriaSnapshot([options])](https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-match-aria-snapshot-2) + * method. + */ + toMatchAriaSnapshot?: { + /** + * A template controlling location of the aria snapshots. See + * [testConfig.snapshotPathTemplate](https://playwright.dev/docs/api/class-testconfig#test-config-snapshot-path-template) + * for details. + */ + pathTemplate?: string; }; /** @@ -1220,7 +1282,12 @@ interface TestConfig { maxFailures?: number; /** - * Metadata that will be put directly to the test report serialized as JSON. + * Metadata contains key-value pairs to be included in the report. For example, HTML report will display it as + * key-value pairs, and JSON report will include metadata serialized as json. + * + * See also + * [testConfig.populateGitInfo](https://playwright.dev/docs/api/class-testconfig#test-config-populate-git-info) that + * populates metadata. * * **Usage** * @@ -1229,7 +1296,7 @@ interface TestConfig { * import { defineConfig } from '@playwright/test'; * * export default defineConfig({ - * metadata: 'acceptance tests', + * metadata: { title: 'acceptance tests' }, * }); * ``` * @@ -1294,8 +1361,11 @@ interface TestConfig { outputDir?: string; /** - * Whether to populate [testConfig.metadata](https://playwright.dev/docs/api/class-testconfig#test-config-metadata) - * with Git info. The metadata will automatically appear in the HTML report and is available in Reporter API. + * Whether to populate `'git.commit.info'` field of the + * [testConfig.metadata](https://playwright.dev/docs/api/class-testconfig#test-config-metadata) with Git commit info + * and CI/CD information. + * + * This information will appear in the HTML and JSON reports and is available in the Reporter API. * * **Usage** * @@ -1486,10 +1556,14 @@ interface TestConfig { /** * This option configures a template controlling location of snapshots generated by - * [expect(page).toHaveScreenshot(name[, options])](https://playwright.dev/docs/api/class-pageassertions#page-assertions-to-have-screenshot-1) + * [expect(page).toHaveScreenshot(name[, options])](https://playwright.dev/docs/api/class-pageassertions#page-assertions-to-have-screenshot-1), + * [expect(locator).toMatchAriaSnapshot([options])](https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-match-aria-snapshot-2) * and * [expect(value).toMatchSnapshot(name[, options])](https://playwright.dev/docs/api/class-snapshotassertions#snapshot-assertions-to-match-snapshot-1). * + * You can configure templates for each assertion separately in + * [testConfig.expect](https://playwright.dev/docs/api/class-testconfig#test-config-expect). + * * **Usage** * * ```js @@ -1498,7 +1572,19 @@ interface TestConfig { * * export default defineConfig({ * testDir: './tests', + * + * // Single template for all assertions * snapshotPathTemplate: '{testDir}/__screenshots__/{testFilePath}/{arg}{ext}', + * + * // Assertion-specific templates + * expect: { + * toHaveScreenshot: { + * pathTemplate: '{testDir}/__screenshots__{/projectName}/{testFilePath}/{arg}{ext}', + * }, + * toMatchAriaSnapshot: { + * pathTemplate: '{testDir}/__snapshots__/{testFilePath}/{arg}{ext}', + * }, + * }, * }); * ``` * @@ -1529,27 +1615,27 @@ interface TestConfig { * ``` * * The list of supported tokens: - * - `{arg}` - Relative snapshot path **without extension**. These come from the arguments passed to the - * `toHaveScreenshot()` and `toMatchSnapshot()` calls; if called without arguments, this will be an auto-generated - * snapshot name. + * - `{arg}` - Relative snapshot path **without extension**. This comes from the arguments passed to + * `toHaveScreenshot()`, `toMatchAriaSnapshot()` or `toMatchSnapshot()`; if called without arguments, this will be + * an auto-generated snapshot name. * - Value: `foo/bar/baz` - * - `{ext}` - snapshot extension (with dots) + * - `{ext}` - Snapshot extension (with the leading dot). * - Value: `.png` * - `{platform}` - The value of `process.platform`. * - `{projectName}` - Project's file-system-sanitized name, if any. * - Value: `''` (empty string). * - `{snapshotDir}` - Project's - * [testConfig.snapshotDir](https://playwright.dev/docs/api/class-testconfig#test-config-snapshot-dir). + * [testProject.snapshotDir](https://playwright.dev/docs/api/class-testproject#test-project-snapshot-dir). * - Value: `/home/playwright/tests` (since `snapshotDir` is not provided in config, it defaults to `testDir`) * - `{testDir}` - Project's - * [testConfig.testDir](https://playwright.dev/docs/api/class-testconfig#test-config-test-dir). - * - Value: `/home/playwright/tests` (absolute path is since `testDir` is resolved relative to directory with + * [testProject.testDir](https://playwright.dev/docs/api/class-testproject#test-project-test-dir). + * - Value: `/home/playwright/tests` (absolute path since `testDir` is resolved relative to directory with * config) * - `{testFileDir}` - Directories in relative path from `testDir` to **test file**. * - Value: `page` * - `{testFileName}` - Test file name with extension. * - Value: `page-click.spec.ts` - * - `{testFilePath}` - Relative path from `testDir` to **test file** + * - `{testFilePath}` - Relative path from `testDir` to **test file**. * - Value: `page/page-click.spec.ts` * - `{testName}` - File-system-sanitized test title, including parent describes but excluding file name. * - Value: `suite-test-should-work` @@ -5729,7 +5815,7 @@ export interface TestType { * @param body Step body. * @param options */ - (title: string, body: () => T | Promise, options?: { box?: boolean, location?: Location, timeout?: number }): Promise; + (title: string, body: (step: TestStepInfo) => T | Promise, options?: { box?: boolean, location?: Location, timeout?: number }): Promise; /** * Mark a test step as "skip" to temporarily disable its execution, useful for steps that are currently failing and * planned for a near-term fix. Playwright will not run the step. @@ -5753,7 +5839,7 @@ export interface TestType { * @param body Step body. * @param options */ - skip(title: string, body: () => any | Promise, options?: { box?: boolean, location?: Location, timeout?: number }): Promise; + skip(title: string, body: (step: TestStepInfo) => any | Promise, options?: { box?: boolean, location?: Location, timeout?: number }): Promise; } /** * `expect` function can be used to create test assertions. Read more about [test assertions](https://playwright.dev/docs/test-assertions). @@ -8720,19 +8806,22 @@ interface LocatorAssertions { /** * Asserts that the target element matches the given [accessibility snapshot](https://playwright.dev/docs/aria-snapshots). * + * Snapshot is stored in a separate `.yml` file in a location configured by `expect.toMatchAriaSnapshot.pathTemplate` + * and/or `snapshotPathTemplate` properties in the configuration file. + * * **Usage** * * ```js * await expect(page.locator('body')).toMatchAriaSnapshot(); - * await expect(page.locator('body')).toMatchAriaSnapshot({ name: 'snapshot' }); + * await expect(page.locator('body')).toMatchAriaSnapshot({ name: 'body.yml' }); * ``` * * @param options */ toMatchAriaSnapshot(options?: { /** - * Name of the snapshot to store in the snapshot (screenshot) folder corresponding to this test. Generates sequential - * names if not specified. + * Name of the snapshot to store in the snapshot folder corresponding to this test. Generates sequential names if not + * specified. */ name?: string; @@ -9485,6 +9574,105 @@ export interface TestInfoError { value?: string; } +/** + * `TestStepInfo` contains information about currently running test step. It is passed as an argument to the step + * function. `TestStepInfo` provides utilities to control test step execution. + * + * ```js + * import { test, expect } from '@playwright/test'; + * + * test('basic test', async ({ page, browserName }, TestStepInfo) => { + * await test.step('check some behavior', async step => { + * await step.skip(browserName === 'webkit', 'The feature is not available in WebKit'); + * // ... rest of the step code + * await page.check('input'); + * }); + * }); + * ``` + * + */ +export interface TestStepInfo { + /** + * Attach a value or a file from disk to the current test step. Some reporters show test step attachments. Either + * [`path`](https://playwright.dev/docs/api/class-teststepinfo#test-step-info-attach-option-path) or + * [`body`](https://playwright.dev/docs/api/class-teststepinfo#test-step-info-attach-option-body) must be specified, + * but not both. Calling this method will attribute the attachment to the step, as opposed to + * [testInfo.attach(name[, options])](https://playwright.dev/docs/api/class-testinfo#test-info-attach) which stores + * all attachments at the test level. + * + * For example, you can attach a screenshot to the test step: + * + * ```js + * import { test, expect } from '@playwright/test'; + * + * test('basic test', async ({ page }) => { + * await page.goto('https://playwright.dev'); + * await test.step('check page rendering', async step => { + * const screenshot = await page.screenshot(); + * await step.attach('screenshot', { body: screenshot, contentType: 'image/png' }); + * }); + * }); + * ``` + * + * Or you can attach files returned by your APIs: + * + * ```js + * import { test, expect } from '@playwright/test'; + * import { download } from './my-custom-helpers'; + * + * test('basic test', async ({}) => { + * await test.step('check download behavior', async step => { + * const tmpPath = await download('a'); + * await step.attach('downloaded', { path: tmpPath }); + * }); + * }); + * ``` + * + * **NOTE** + * [testStepInfo.attach(name[, options])](https://playwright.dev/docs/api/class-teststepinfo#test-step-info-attach) + * automatically takes care of copying attached files to a location that is accessible to reporters. You can safely + * remove the attachment after awaiting the attach call. + * + * @param name Attachment name. The name will also be sanitized and used as the prefix of file name when saving to disk. + * @param options + */ + attach(name: string, options?: { + /** + * Attachment body. Mutually exclusive with + * [`path`](https://playwright.dev/docs/api/class-teststepinfo#test-step-info-attach-option-path). + */ + body?: string|Buffer; + + /** + * Content type of this attachment to properly present in the report, for example `'application/json'` or + * `'image/png'`. If omitted, content type is inferred based on the + * [`path`](https://playwright.dev/docs/api/class-teststepinfo#test-step-info-attach-option-path), or defaults to + * `text/plain` for [string] attachments and `application/octet-stream` for [Buffer] attachments. + */ + contentType?: string; + + /** + * Path on the filesystem to the attached file. Mutually exclusive with + * [`body`](https://playwright.dev/docs/api/class-teststepinfo#test-step-info-attach-option-body). + */ + path?: string; + }): Promise; + + /** + * Unconditionally skip the currently running step. Test step is immediately aborted. This is similar to + * [test.step.skip(title, body[, options])](https://playwright.dev/docs/api/class-test#test-step-skip). + */ + skip(): void; + + /** + * Conditionally skips the currently running step with an optional description. This is similar to + * [test.step.skip(title, body[, options])](https://playwright.dev/docs/api/class-test#test-step-skip). + * @param condition A skip condition. Test step is skipped when the condition is `true`. + * @param description Optional description that will be reflected in a test report. + */ + skip(condition: boolean, description?: string): void; +} + /** * `WorkerInfo` contains information about the worker that is running tests and is available to worker-scoped * fixtures. `WorkerInfo` is a subset of [TestInfo](https://playwright.dev/docs/api/class-testinfo) that is available diff --git a/packages/playwright/types/testReporter.d.ts b/packages/playwright/types/testReporter.d.ts index 3f3a43984e..9662faee73 100644 --- a/packages/playwright/types/testReporter.d.ts +++ b/packages/playwright/types/testReporter.d.ts @@ -691,6 +691,21 @@ export interface TestStep { */ titlePath(): Array; + /** + * The list of annotations applicable to the current test step. + */ + annotations: Array<{ + /** + * Annotation type, for example `'skip'`. + */ + type: string; + + /** + * Optional description. + */ + description?: string; + }>; + /** * The list of files or buffers attached in the step execution through * [testInfo.attach(name[, options])](https://playwright.dev/docs/api/class-testinfo#test-info-attach). diff --git a/packages/protocol/src/channels.d.ts b/packages/protocol/src/channels.d.ts index f197aefe12..761425e994 100644 --- a/packages/protocol/src/channels.d.ts +++ b/packages/protocol/src/channels.d.ts @@ -274,9 +274,40 @@ export type NameValue = { value: string, }; +export type IndexedDBDatabase = { + name: string, + version: number, + stores: { + name: string, + autoIncrement: boolean, + keyPath?: string, + keyPathArray?: string[], + records: { + key?: any, + keyEncoded?: any, + value?: any, + valueEncoded?: any, + }[], + indexes: { + name: string, + keyPath?: string, + keyPathArray?: string[], + multiEntry: boolean, + unique: boolean, + }[], + }[], +}; + +export type SetOriginStorage = { + origin: string, + localStorage: NameValue[], + indexedDB?: IndexedDBDatabase[], +}; + export type OriginStorage = { origin: string, localStorage: NameValue[], + indexedDB: IndexedDBDatabase[], }; export type SerializedError = { @@ -594,7 +625,7 @@ export type LocalUtilsNewRequestParams = { timeout?: number, storageState?: { cookies?: NetworkCookie[], - origins?: OriginStorage[], + origins?: SetOriginStorage[], }, tracesDir?: string, }; @@ -625,7 +656,7 @@ export type LocalUtilsNewRequestOptions = { timeout?: number, storageState?: { cookies?: NetworkCookie[], - origins?: OriginStorage[], + origins?: SetOriginStorage[], }, tracesDir?: string, }; @@ -757,7 +788,7 @@ export type PlaywrightNewRequestParams = { timeout?: number, storageState?: { cookies?: NetworkCookie[], - origins?: OriginStorage[], + origins?: SetOriginStorage[], }, tracesDir?: string, }; @@ -788,7 +819,7 @@ export type PlaywrightNewRequestOptions = { timeout?: number, storageState?: { cookies?: NetworkCookie[], - origins?: OriginStorage[], + origins?: SetOriginStorage[], }, tracesDir?: string, }; @@ -1153,6 +1184,7 @@ export type BrowserTypeLaunchPersistentContextParams = { reducedMotion?: 'reduce' | 'no-preference' | 'no-override', forcedColors?: 'active' | 'none' | 'no-override', acceptDownloads?: 'accept' | 'deny' | 'internal-browser-default', + contrast?: 'no-preference' | 'more' | 'no-override', baseURL?: string, recordVideo?: { dir: string, @@ -1233,6 +1265,7 @@ export type BrowserTypeLaunchPersistentContextOptions = { reducedMotion?: 'reduce' | 'no-preference' | 'no-override', forcedColors?: 'active' | 'none' | 'no-override', acceptDownloads?: 'accept' | 'deny' | 'internal-browser-default', + contrast?: 'no-preference' | 'more' | 'no-override', baseURL?: string, recordVideo?: { dir: string, @@ -1348,6 +1381,7 @@ export type BrowserNewContextParams = { reducedMotion?: 'reduce' | 'no-preference' | 'no-override', forcedColors?: 'active' | 'none' | 'no-override', acceptDownloads?: 'accept' | 'deny' | 'internal-browser-default', + contrast?: 'no-preference' | 'more' | 'no-override', baseURL?: string, recordVideo?: { dir: string, @@ -1367,7 +1401,7 @@ export type BrowserNewContextParams = { }, storageState?: { cookies?: SetNetworkCookie[], - origins?: OriginStorage[], + origins?: SetOriginStorage[], }, mockingProxyBaseURL?: string, }; @@ -1415,6 +1449,7 @@ export type BrowserNewContextOptions = { reducedMotion?: 'reduce' | 'no-preference' | 'no-override', forcedColors?: 'active' | 'none' | 'no-override', acceptDownloads?: 'accept' | 'deny' | 'internal-browser-default', + contrast?: 'no-preference' | 'more' | 'no-override', baseURL?: string, recordVideo?: { dir: string, @@ -1434,7 +1469,7 @@ export type BrowserNewContextOptions = { }, storageState?: { cookies?: SetNetworkCookie[], - origins?: OriginStorage[], + origins?: SetOriginStorage[], }, mockingProxyBaseURL?: string, }; @@ -1485,6 +1520,7 @@ export type BrowserNewContextForReuseParams = { reducedMotion?: 'reduce' | 'no-preference' | 'no-override', forcedColors?: 'active' | 'none' | 'no-override', acceptDownloads?: 'accept' | 'deny' | 'internal-browser-default', + contrast?: 'no-preference' | 'more' | 'no-override', baseURL?: string, recordVideo?: { dir: string, @@ -1504,7 +1540,7 @@ export type BrowserNewContextForReuseParams = { }, storageState?: { cookies?: SetNetworkCookie[], - origins?: OriginStorage[], + origins?: SetOriginStorage[], }, }; export type BrowserNewContextForReuseOptions = { @@ -1551,6 +1587,7 @@ export type BrowserNewContextForReuseOptions = { reducedMotion?: 'reduce' | 'no-preference' | 'no-override', forcedColors?: 'active' | 'none' | 'no-override', acceptDownloads?: 'accept' | 'deny' | 'internal-browser-default', + contrast?: 'no-preference' | 'more' | 'no-override', baseURL?: string, recordVideo?: { dir: string, @@ -1570,7 +1607,7 @@ export type BrowserNewContextForReuseOptions = { }, storageState?: { cookies?: SetNetworkCookie[], - origins?: OriginStorage[], + origins?: SetOriginStorage[], }, }; export type BrowserNewContextForReuseResult = { @@ -2187,12 +2224,14 @@ export type PageEmulateMediaParams = { colorScheme?: 'dark' | 'light' | 'no-preference' | 'no-override', reducedMotion?: 'reduce' | 'no-preference' | 'no-override', forcedColors?: 'active' | 'none' | 'no-override', + contrast?: 'no-preference' | 'more' | 'no-override', }; export type PageEmulateMediaOptions = { media?: 'screen' | 'print' | 'no-override', colorScheme?: 'dark' | 'light' | 'no-preference' | 'no-override', reducedMotion?: 'reduce' | 'no-preference' | 'no-override', forcedColors?: 'active' | 'none' | 'no-override', + contrast?: 'no-preference' | 'more' | 'no-override', }; export type PageEmulateMediaResult = void; export type PageExposeBindingParams = { @@ -4885,6 +4924,7 @@ export type AndroidDeviceLaunchBrowserParams = { reducedMotion?: 'reduce' | 'no-preference' | 'no-override', forcedColors?: 'active' | 'none' | 'no-override', acceptDownloads?: 'accept' | 'deny' | 'internal-browser-default', + contrast?: 'no-preference' | 'more' | 'no-override', baseURL?: string, recordVideo?: { dir: string, @@ -4949,6 +4989,7 @@ export type AndroidDeviceLaunchBrowserOptions = { reducedMotion?: 'reduce' | 'no-preference' | 'no-override', forcedColors?: 'active' | 'none' | 'no-override', acceptDownloads?: 'accept' | 'deny' | 'internal-browser-default', + contrast?: 'no-preference' | 'more' | 'no-override', baseURL?: string, recordVideo?: { dir: string, diff --git a/packages/protocol/src/protocol.yml b/packages/protocol/src/protocol.yml index c50d69492a..bd07e501ce 100644 --- a/packages/protocol/src/protocol.yml +++ b/packages/protocol/src/protocol.yml @@ -222,6 +222,54 @@ NameValue: name: string value: string +IndexedDBDatabase: + type: object + properties: + name: string + version: number + stores: + type: array + items: + type: object + properties: + name: string + autoIncrement: boolean + keyPath: string? + keyPathArray: + type: array? + items: string + records: + type: array + items: + type: object + properties: + key: json? + keyEncoded: json? + value: json? + valueEncoded: json? + indexes: + type: array + items: + type: object + properties: + name: string + keyPath: string? + keyPathArray: + type: array? + items: string + multiEntry: boolean + unique: boolean + +SetOriginStorage: + type: object + properties: + origin: string + localStorage: + type: array + items: NameValue + indexedDB: + type: array? + items: IndexedDBDatabase OriginStorage: type: object @@ -230,7 +278,9 @@ OriginStorage: localStorage: type: array items: NameValue - + indexedDB: + type: array + items: IndexedDBDatabase SerializedError: type: object @@ -508,6 +558,12 @@ ContextOptions: - accept - deny - internal-browser-default + contrast: + type: enum? + literals: + - no-preference + - more + - no-override baseURL: string? recordVideo: type: object? @@ -572,7 +628,7 @@ NewRequestParameters: items: NetworkCookie origins: type: array? - items: OriginStorage + items: SetOriginStorage tracesDir: string? @@ -1037,7 +1093,7 @@ Browser: items: SetNetworkCookie origins: type: array? - items: OriginStorage + items: SetOriginStorage mockingProxyBaseURL: string? returns: context: BrowserContext @@ -1060,7 +1116,7 @@ Browser: items: SetNetworkCookie origins: type: array? - items: OriginStorage + items: SetOriginStorage returns: context: BrowserContext @@ -1471,6 +1527,12 @@ Page: - active - none - no-override + contrast: + type: enum? + literals: + - no-preference + - more + - no-override flags: snapshot: true diff --git a/packages/trace-viewer/src/sw/traceModel.ts b/packages/trace-viewer/src/sw/traceModel.ts index 602ff4e075..8230824f5d 100644 --- a/packages/trace-viewer/src/sw/traceModel.ts +++ b/packages/trace-viewer/src/sw/traceModel.ts @@ -43,7 +43,7 @@ export class TraceModel { const ordinals: string[] = []; let hasSource = false; for (const entryName of await this._backend.entryNames()) { - const match = entryName.match(/(.+)\.trace/); + const match = entryName.match(/(.+)\.trace$/); if (match) ordinals.push(match[1] || ''); if (entryName.includes('src@')) diff --git a/packages/trace-viewer/src/sw/traceModernizer.ts b/packages/trace-viewer/src/sw/traceModernizer.ts index 80f98762db..6b4b268cb2 100644 --- a/packages/trace-viewer/src/sw/traceModernizer.ts +++ b/packages/trace-viewer/src/sw/traceModernizer.ts @@ -126,6 +126,7 @@ export class TraceModernizer { existing!.result = event.result; existing!.error = event.error; existing!.attachments = event.attachments; + existing!.annotations = event.annotations; if (event.point) existing!.point = event.point; break; diff --git a/packages/trace-viewer/src/ui/actionList.tsx b/packages/trace-viewer/src/ui/actionList.tsx index 2c6932bd45..4f3a8128e8 100644 --- a/packages/trace-viewer/src/ui/actionList.tsx +++ b/packages/trace-viewer/src/ui/actionList.tsx @@ -120,7 +120,7 @@ export const renderAction = ( const parameterString = actionParameterDisplayString(action, sdkLanguage || 'javascript'); - const isSkipped = action.class === 'Test' && action.method === 'test.step.skip'; + const isSkipped = action.class === 'Test' && action.method === 'step' && action.annotations?.some(a => a.type === 'skip'); let time: string = ''; if (action.endTime) time = msToString(action.endTime - action.startTime); diff --git a/packages/trace-viewer/src/ui/callTab.tsx b/packages/trace-viewer/src/ui/callTab.tsx index 1c78920f86..88d836acd6 100644 --- a/packages/trace-viewer/src/ui/callTab.tsx +++ b/packages/trace-viewer/src/ui/callTab.tsx @@ -40,18 +40,12 @@ export const CallTab: React.FunctionComponent<{ const startTimeMillis = action.startTime - startTimeOffset; const startTime = msToString(startTimeMillis); - const duration = action.endTime ? msToString(action.endTime - action.startTime) : 'Timed Out'; - return (
{action.apiName}
- { - <> -
Time
- - - - } +
Time
+ + { !!paramKeys.length && <>
Parameters
@@ -78,6 +72,15 @@ type Property = { text: string; }; +function renderDuration(action: ActionTraceEventInContext): string { + if (action.endTime) + return msToString(action.endTime - action.startTime); + else if (!!action.error) + return 'Timed Out'; + else + return 'Running'; +} + function renderProperty(property: Property) { let text = property.text.replace(/\n/g, '↵'); if (property.type === 'string') diff --git a/packages/trace-viewer/src/ui/modelUtil.ts b/packages/trace-viewer/src/ui/modelUtil.ts index 8badcbd87e..01af841748 100644 --- a/packages/trace-viewer/src/ui/modelUtil.ts +++ b/packages/trace-viewer/src/ui/modelUtil.ts @@ -258,6 +258,8 @@ function mergeActionsAndUpdateTimingSameTrace(contexts: ContextEntry[]): ActionT existing.error = action.error; if (action.attachments) existing.attachments = action.attachments; + if (action.annotations) + existing.annotations = action.annotations; if (action.parentId) existing.parentId = nonPrimaryIdToPrimaryId.get(action.parentId) ?? action.parentId; // For the events that are present in the test runner context, always take diff --git a/packages/trace/src/trace.ts b/packages/trace/src/trace.ts index 81fc4ab428..6c9c7be1a0 100644 --- a/packages/trace/src/trace.ts +++ b/packages/trace/src/trace.ts @@ -86,6 +86,11 @@ export type AfterActionTraceEventAttachment = { base64?: string; }; +export type AfterActionTraceEventAnnotation = { + type: string, + description?: string +}; + export type AfterActionTraceEvent = { type: 'after', callId: string; @@ -93,6 +98,7 @@ export type AfterActionTraceEvent = { afterSnapshot?: string; error?: SerializedError['error']; attachments?: AfterActionTraceEventAttachment[]; + annotations?: AfterActionTraceEventAnnotation[]; result?: any; point?: Point; }; diff --git a/tests/assets/to-do-notifications/LICENSE b/tests/assets/to-do-notifications/LICENSE new file mode 100644 index 0000000000..3bbbc1ee92 --- /dev/null +++ b/tests/assets/to-do-notifications/LICENSE @@ -0,0 +1,116 @@ +CC0 1.0 Universal + +Statement of Purpose + +The laws of most jurisdictions throughout the world automatically confer +exclusive Copyright and Related Rights (defined below) upon the creator and +subsequent owner(s) (each and all, an "owner") of an original work of +authorship and/or a database (each, a "Work"). + +Certain owners wish to permanently relinquish those rights to a Work for the +purpose of contributing to a commons of creative, cultural and scientific +works ("Commons") that the public can reliably and without fear of later +claims of infringement build upon, modify, incorporate in other works, reuse +and redistribute as freely as possible in any form whatsoever and for any +purposes, including without limitation commercial purposes. These owners may +contribute to the Commons to promote the ideal of a free culture and the +further production of creative, cultural and scientific works, or to gain +reputation or greater distribution for their Work in part through the use and +efforts of others. + +For these and/or other purposes and motivations, and without any expectation +of additional consideration or compensation, the person associating CC0 with a +Work (the "Affirmer"), to the extent that he or she is an owner of Copyright +and Related Rights in the Work, voluntarily elects to apply CC0 to the Work +and publicly distribute the Work under its terms, with knowledge of his or her +Copyright and Related Rights in the Work and the meaning and intended legal +effect of CC0 on those rights. + +1. Copyright and Related Rights. A Work made available under CC0 may be +protected by copyright and related or neighboring rights ("Copyright and +Related Rights"). Copyright and Related Rights include, but are not limited +to, the following: + + i. the right to reproduce, adapt, distribute, perform, display, communicate, + and translate a Work; + + ii. moral rights retained by the original author(s) and/or performer(s); + + iii. publicity and privacy rights pertaining to a person's image or likeness + depicted in a Work; + + iv. rights protecting against unfair competition in regards to a Work, + subject to the limitations in paragraph 4(a), below; + + v. rights protecting the extraction, dissemination, use and reuse of data in + a Work; + + vi. database rights (such as those arising under Directive 96/9/EC of the + European Parliament and of the Council of 11 March 1996 on the legal + protection of databases, and under any national implementation thereof, + including any amended or successor version of such directive); and + + vii. other similar, equivalent or corresponding rights throughout the world + based on applicable law or treaty, and any national implementations thereof. + +2. Waiver. To the greatest extent permitted by, but not in contravention of, +applicable law, Affirmer hereby overtly, fully, permanently, irrevocably and +unconditionally waives, abandons, and surrenders all of Affirmer's Copyright +and Related Rights and associated claims and causes of action, whether now +known or unknown (including existing as well as future claims and causes of +action), in the Work (i) in all territories worldwide, (ii) for the maximum +duration provided by applicable law or treaty (including future time +extensions), (iii) in any current or future medium and for any number of +copies, and (iv) for any purpose whatsoever, including without limitation +commercial, advertising or promotional purposes (the "Waiver"). Affirmer makes +the Waiver for the benefit of each member of the public at large and to the +detriment of Affirmer's heirs and successors, fully intending that such Waiver +shall not be subject to revocation, rescission, cancellation, termination, or +any other legal or equitable action to disrupt the quiet enjoyment of the Work +by the public as contemplated by Affirmer's express Statement of Purpose. + +3. Public License Fallback. Should any part of the Waiver for any reason be +judged legally invalid or ineffective under applicable law, then the Waiver +shall be preserved to the maximum extent permitted taking into account +Affirmer's express Statement of Purpose. In addition, to the extent the Waiver +is so judged Affirmer hereby grants to each affected person a royalty-free, +non transferable, non sublicensable, non exclusive, irrevocable and +unconditional license to exercise Affirmer's Copyright and Related Rights in +the Work (i) in all territories worldwide, (ii) for the maximum duration +provided by applicable law or treaty (including future time extensions), (iii) +in any current or future medium and for any number of copies, and (iv) for any +purpose whatsoever, including without limitation commercial, advertising or +promotional purposes (the "License"). The License shall be deemed effective as +of the date CC0 was applied by Affirmer to the Work. Should any part of the +License for any reason be judged legally invalid or ineffective under +applicable law, such partial invalidity or ineffectiveness shall not +invalidate the remainder of the License, and in such case Affirmer hereby +affirms that he or she will not (i) exercise any of his or her remaining +Copyright and Related Rights in the Work or (ii) assert any associated claims +and causes of action with respect to the Work, in either case contrary to +Affirmer's express Statement of Purpose. + +4. Limitations and Disclaimers. + + a. No trademark or patent rights held by Affirmer are waived, abandoned, + surrendered, licensed or otherwise affected by this document. + + b. Affirmer offers the Work as-is and makes no representations or warranties + of any kind concerning the Work, express, implied, statutory or otherwise, + including without limitation warranties of title, merchantability, fitness + for a particular purpose, non infringement, or the absence of latent or + other defects, accuracy, or the present or absence of errors, whether or not + discoverable, all to the greatest extent permissible under applicable law. + + c. Affirmer disclaims responsibility for clearing rights of other persons + that may apply to the Work or any use thereof, including without limitation + any person's Copyright and Related Rights in the Work. Further, Affirmer + disclaims responsibility for obtaining any necessary consents, permissions + or other rights required for any use of the Work. + + d. Affirmer understands and acknowledges that Creative Commons is not a + party to this document and has no duty or obligation with respect to this + CC0 or use of the Work. + +For more information, please see + \ No newline at end of file diff --git a/tests/assets/to-do-notifications/README.md b/tests/assets/to-do-notifications/README.md new file mode 100644 index 0000000000..5bd8b1d38c --- /dev/null +++ b/tests/assets/to-do-notifications/README.md @@ -0,0 +1 @@ +Source: https://github.com/mdn/dom-examples/tree/main/to-do-notifications diff --git a/tests/assets/to-do-notifications/index.html b/tests/assets/to-do-notifications/index.html new file mode 100644 index 0000000000..e9cd52c7b8 --- /dev/null +++ b/tests/assets/to-do-notifications/index.html @@ -0,0 +1,108 @@ + + + + + + + To-do list with Notifications + + + + +

To-do list

+ +
+ +
    + +
+ +
+ +
+

Add new to-do item.

+ +
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
    + +
+ + +
+ + + \ No newline at end of file diff --git a/tests/assets/to-do-notifications/manifest.webapp b/tests/assets/to-do-notifications/manifest.webapp new file mode 100644 index 0000000000..fe48e2e423 --- /dev/null +++ b/tests/assets/to-do-notifications/manifest.webapp @@ -0,0 +1,18 @@ +{ + "version": "0.1", + "name": "To-do list", + "description": "Store to-do items on your device, and be notified when the deadlines are up.", + "launch_path": "/to-do-notifications/index.html", + "icons": { + "128": "/to-do-notifications/img/icon-128.png" + }, + "developer": { + "name": "Chris Mills", + "url": "http://chrisdavidmills.github.io/to-do-notifications/" + }, + "permissions": { + "desktop-notification": { + "description": "Needed for creating system notifications." + } + } +} \ No newline at end of file diff --git a/tests/assets/to-do-notifications/scripts/todo.js b/tests/assets/to-do-notifications/scripts/todo.js new file mode 100644 index 0000000000..2e3cfae210 --- /dev/null +++ b/tests/assets/to-do-notifications/scripts/todo.js @@ -0,0 +1,354 @@ +window.onload = () => { + const MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; + + // Hold an instance of a db object for us to store the IndexedDB data in + let db; + + // Create a reference to the notifications list in the bottom of the app; we will write database messages into this list by + // appending list items as children of this element + const note = document.getElementById('notifications'); + + // All other UI elements we need for the app + const taskList = document.getElementById('task-list'); + const taskForm = document.getElementById('task-form'); + const title = document.getElementById('title'); + const hours = document.getElementById('deadline-hours'); + const minutes = document.getElementById('deadline-minutes'); + const day = document.getElementById('deadline-day'); + const month = document.getElementById('deadline-month'); + const year = document.getElementById('deadline-year'); + const notificationBtn = document.getElementById('enable'); + + // Do an initial check to see what the notification permission state is + if (Notification.permission === 'denied' || Notification.permission === 'default') { + notificationBtn.style.display = 'block'; + } else { + notificationBtn.style.display = 'none'; + } + + note.appendChild(createListItem('App initialised.')); + + // Let us open our database + const DBOpenRequest = window.indexedDB.open('toDoList', 4); + + // Register two event handlers to act on the database being opened successfully, or not + DBOpenRequest.onerror = (event) => { + note.appendChild(createListItem('Error loading database.')); + }; + + DBOpenRequest.onsuccess = (event) => { + note.appendChild(createListItem('Database initialised.')); + + // Store the result of opening the database in the db variable. This is used a lot below + db = DBOpenRequest.result; + + // Run the displayData() function to populate the task list with all the to-do list data already in the IndexedDB + displayData(); + }; + + // This event handles the event whereby a new version of the database needs to be created + // Either one has not been created before, or a new version number has been submitted via the + // window.indexedDB.open line above + //it is only implemented in recent browsers + DBOpenRequest.onupgradeneeded = (event) => { + db = event.target.result; + + db.onerror = (event) => { + note.appendChild(createListItem('Error loading database.')); + }; + + // Create an objectStore for this database + const objectStore = db.createObjectStore('toDoList', { keyPath: 'taskTitle' }); + + // Define what data items the objectStore will contain + objectStore.createIndex('hours', 'hours', { unique: false }); + objectStore.createIndex('minutes', 'minutes', { unique: false }); + objectStore.createIndex('day', 'day', { unique: false }); + objectStore.createIndex('month', 'month', { unique: false }); + objectStore.createIndex('year', 'year', { unique: false }); + + objectStore.createIndex('notified', 'notified', { unique: false }); + + note.appendChild(createListItem('Object store created.')); + }; + + function displayData() { + // First clear the content of the task list so that you don't get a huge long list of duplicate stuff each time + // the display is updated. + while (taskList.firstChild) { + taskList.removeChild(taskList.lastChild); + } + + // Open our object store and then get a cursor list of all the different data items in the IDB to iterate through + const objectStore = db.transaction('toDoList').objectStore('toDoList'); + objectStore.openCursor().onsuccess = (event) => { + const cursor = event.target.result; + // Check if there are no (more) cursor items to iterate through + if (!cursor) { + // No more items to iterate through, we quit. + note.appendChild(createListItem('Entries all displayed.')); + return; + } + + // Check which suffix the deadline day of the month needs + const { hours, minutes, day, month, year, notified, taskTitle } = cursor.value; + const ordDay = ordinal(day); + + // Build the to-do list entry and put it into the list item. + const toDoText = `${taskTitle} — ${hours}:${minutes}, ${month} ${ordDay} ${year}.`; + const listItem = createListItem(toDoText); + + if (notified === 'yes') { + listItem.style.textDecoration = 'line-through'; + listItem.style.color = 'rgba(255, 0, 0, 0.5)'; + } + + // Put the item item inside the task list + taskList.appendChild(listItem); + + // Create a delete button inside each list item, + const deleteButton = document.createElement('button'); + listItem.appendChild(deleteButton); + deleteButton.textContent = 'X'; + + // Set a data attribute on our delete button to associate the task it relates to. + deleteButton.setAttribute('data-task', taskTitle); + + // Associate action (deletion) when clicked + deleteButton.onclick = (event) => { + deleteItem(event); + }; + + // continue on to the next item in the cursor + cursor.continue(); + }; + }; + + // Add listener for clicking the submit button + taskForm.addEventListener('submit', addData, false); + + function addData(e) { + // Prevent default, as we don't want the form to submit in the conventional way + e.preventDefault(); + + // Stop the form submitting if any values are left empty. + // This should never happen as there is the required attribute + if (title.value === '' || hours.value === null || minutes.value === null || day.value === '' || month.value === '' || year.value === null) { + note.appendChild(createListItem('Data not submitted — form incomplete.')); + return; + } + + // Grab the values entered into the form fields and store them in an object ready for being inserted into the IndexedDB + const newItem = [ + { taskTitle: title.value, hours: hours.value, minutes: minutes.value, day: day.value, month: month.value, year: year.value, notified: 'no' }, + ]; + + // Open a read/write DB transaction, ready for adding the data + const transaction = db.transaction(['toDoList'], 'readwrite'); + + // Report on the success of the transaction completing, when everything is done + transaction.oncomplete = () => { + note.appendChild(createListItem('Transaction completed: database modification finished.')); + + // Update the display of data to show the newly added item, by running displayData() again. + displayData(); + }; + + // Handler for any unexpected error + transaction.onerror = () => { + note.appendChild(createListItem(`Transaction not opened due to error: ${transaction.error}`)); + }; + + // Call an object store that's already been added to the database + const objectStore = transaction.objectStore('toDoList'); + console.log(objectStore.indexNames); + console.log(objectStore.keyPath); + console.log(objectStore.name); + console.log(objectStore.transaction); + console.log(objectStore.autoIncrement); + + // Make a request to add our newItem object to the object store + const objectStoreRequest = objectStore.add(newItem[0]); + objectStoreRequest.onsuccess = (event) => { + + // Report the success of our request + // (to detect whether it has been succesfully + // added to the database, you'd look at transaction.oncomplete) + note.appendChild(createListItem('Request successful.')); + + // Clear the form, ready for adding the next entry + title.value = ''; + hours.value = null; + minutes.value = null; + day.value = 01; + month.value = 'January'; + year.value = 2020; + }; + }; + + function deleteItem(event) { + // Retrieve the name of the task we want to delete + const dataTask = event.target.getAttribute('data-task'); + + // Open a database transaction and delete the task, finding it by the name we retrieved above + const transaction = db.transaction(['toDoList'], 'readwrite'); + transaction.objectStore('toDoList').delete(dataTask); + + // Report that the data item has been deleted + transaction.oncomplete = () => { + // Delete the parent of the button, which is the list item, so it is no longer displayed + event.target.parentNode.parentNode.removeChild(event.target.parentNode); + note.appendChild(createListItem(`Task "${dataTask}" deleted.`)); + }; + }; + + // Check whether the deadline for each task is up or not, and responds appropriately + function checkDeadlines() { + // First of all check whether notifications are enabled or denied + if (Notification.permission === 'denied' || Notification.permission === 'default') { + notificationBtn.style.display = 'block'; + } else { + notificationBtn.style.display = 'none'; + } + + // Grab the current time and date + const now = new Date(); + + // From the now variable, store the current minutes, hours, day of the month, month, year and seconds + const minuteCheck = now.getMinutes(); + const hourCheck = now.getHours(); + const dayCheck = now.getDate(); // Do not use getDay() that returns the day of the week, 1 to 7 + const monthCheck = now.getMonth(); + const yearCheck = now.getFullYear(); // Do not use getYear() that is deprecated. + + // Open a new transaction + const objectStore = db.transaction(['toDoList'], 'readwrite').objectStore('toDoList'); + + // Open a cursor to iterate through all the data items in the IndexedDB + objectStore.openCursor().onsuccess = (event) => { + const cursor = event.target.result; + if (!cursor) return; + const { hours, minutes, day, month, year, notified, taskTitle } = cursor.value; + + // convert the month names we have installed in the IDB into a month number that JavaScript will understand. + // The JavaScript date object creates month values as a number between 0 and 11. + const monthNumber = MONTHS.indexOf(month); + if (monthNumber === -1) throw new Error('Incorrect month entered in database.'); + + // Check if the current hours, minutes, day, month and year values match the stored values for each task. + // The parseInt() function transforms the value from a string to a number for comparison + // (taking care of leading zeros, and removing spaces and underscores from the string). + let matched = parseInt(hours) === hourCheck; + matched &&= parseInt(minutes) === minuteCheck; + matched &&= parseInt(day) === dayCheck; + matched &&= parseInt(monthNumber) === monthCheck; + matched &&= parseInt(year) === yearCheck; + if (matched && notified === 'no') { + // If the numbers all do match, run the createNotification() function to create a system notification + // but only if the permission is set + if (Notification.permission === 'granted') { + createNotification(taskTitle); + } + } + + // Move on to the next cursor item + cursor.continue(); + }; + }; + + // Ask for permission when the 'Enable notifications' button is clicked + function askNotificationPermission() { + // Function to actually ask the permissions + function handlePermission(permission) { + // Whatever the user answers, we make sure Chrome stores the information + if (!Reflect.has(Notification, 'permission')) { + Notification.permission = permission; + } + + // Set the button to shown or hidden, depending on what the user answers + if (Notification.permission === 'denied' || Notification.permission === 'default') { + notificationBtn.style.display = 'block'; + } else { + notificationBtn.style.display = 'none'; + } + }; + + // Check if the browser supports notifications + if (!Reflect.has(window, 'Notification')) { + console.log('This browser does not support notifications.'); + } else { + if (checkNotificationPromise()) { + Notification.requestPermission().then(handlePermission); + } else { + Notification.requestPermission(handlePermission); + } + } + }; + + // Check whether browser supports the promise version of requestPermission() + // Safari only supports the old callback-based version + function checkNotificationPromise() { + try { + Notification.requestPermission().then(); + } catch(e) { + return false; + } + + return true; + }; + + // Wire up notification permission functionality to 'Enable notifications' button + notificationBtn.addEventListener('click', askNotificationPermission); + + function createListItem(contents) { + const listItem = document.createElement('li'); + listItem.textContent = contents; + return listItem; + }; + + // Create a notification with the given title + function createNotification(title) { + // Create and show the notification + const img = '/to-do-notifications/img/icon-128.png'; + const text = `HEY! Your task "${title}" is now overdue.`; + const notification = new Notification('To do list', { body: text, icon: img }); + + // We need to update the value of notified to 'yes' in this particular data object, so the + // notification won't be set off on it again + + // First open up a transaction + const objectStore = db.transaction(['toDoList'], 'readwrite').objectStore('toDoList'); + + // Get the to-do list object that has this title as its title + const objectStoreTitleRequest = objectStore.get(title); + + objectStoreTitleRequest.onsuccess = () => { + // Grab the data object returned as the result + const data = objectStoreTitleRequest.result; + + // Update the notified value in the object to 'yes' + data.notified = 'yes'; + + // Create another request that inserts the item back into the database + const updateTitleRequest = objectStore.put(data); + + // When this new request succeeds, run the displayData() function again to update the display + updateTitleRequest.onsuccess = () => { + displayData(); + }; + }; + }; + + // Using a setInterval to run the checkDeadlines() function every second + setInterval(checkDeadlines, 1000); +} + +// Helper function returning the day of the month followed by an ordinal (st, nd, or rd) +function ordinal(day) { + const n = day.toString(); + const last = n.slice(-1); + if (last === '1' && n !== '11') return `${n}st`; + if (last === '2' && n !== '12') return `${n}nd`; + if (last === '3' && n !== '13') return `${n}rd`; + return `${n}th`; +}; \ No newline at end of file diff --git a/tests/assets/to-do-notifications/style/style.css b/tests/assets/to-do-notifications/style/style.css new file mode 100644 index 0000000000..c08ff299ac --- /dev/null +++ b/tests/assets/to-do-notifications/style/style.css @@ -0,0 +1,248 @@ +/* Basic set up + sizing for containers */ + +html, +body { + margin: 0; +} + +html { + width: 100%; + height: 100%; + font-size: 10px; + font-family: Georgia, "Times New Roman", Times, serif; + background: #111; +} + +body { + width: 50rem; + position: relative; + background: #d88; + margin: 0 auto; + border-left: 2px solid #d33; + border-right: 2px solid #d33; +} + +h1, +h2 { + text-align: center; + background: #d88; + font-family: Arial, Helvetica, sans-serif; +} + +h1 { + font-size: 6rem; + margin: 0; + background: #d66; +} + +h2 { + font-size: 2.4rem; +} + +/* Bottom toolbar styling */ + +#toolbar { + position: relative; + height: 6rem; + width: 100%; + background: #d66; + border-top: 2px solid #d33; + border-bottom: 2px solid #d33; +} + +#enable, +input[type="submit"] { + line-height: 1.8; + font-size: 1.3rem; + border-radius: 5px; + border: 1px solid black; + color: black; + text-shadow: 1px 1px 1px black; + border: 1px solid rgba(0, 0, 0, 0.1); + box-shadow: + inset 0px 5px 3px rgba(255, 255, 255, 0.2), + inset 0px -5px 3px rgba(0, 0, 0, 0.2); +} + +#enable { + position: absolute; + bottom: 0.3rem; + right: 0.3rem; +} + +#notifications { + margin: 0; + position: relative; + padding: 0.3rem; + background: #ddd; + position: absolute; + top: 0rem; + left: 0rem; + height: 5.4rem; + width: 50%; + overflow: auto; + line-height: 1.2; +} + +#notifications li { + margin-left: 1.5rem; +} + +/* New item form styling */ + +.form-box { + background: #d66; + width: 85%; + padding: 1rem; + margin: 2rem auto; + box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); +} + +form div { + margin-bottom: 1rem; +} + +form .full-width { + margin: 1rem auto 2rem; + width: 100%; +} + +form .half-width { + width: 50%; + float: left; +} + +form .third-width { + width: 33%; + float: left; +} + +form div label { + width: 10rem; + float: left; + padding-right: 1rem; + font-size: 1.6rem; + line-height: 1.6; +} + +form .full-width input { + width: 30rem; +} + +form .half-width input { + width: 8.75rem; +} + +form .third-width select { + width: 13.5rem; +} + +form div input[type="submit"] { + clear: both; + width: 20rem; + display: block; + height: 3rem; + margin: 0 auto; + position: relative; + top: 0.5rem; +} + +/* || tasks box */ + +.task-box { + width: 85%; + padding: 1rem; + margin: 2rem auto; + font-size: 1.8rem; +} + +.task-box ul { + margin: 0; + padding: 0; +} + +.task-box li { + list-style-type: none; + padding: 1rem; + border-bottom: 2px solid #d33; +} + +.task-box li:last-child { + border-bottom: none; +} + +.task-box li:last-child { + margin-bottom: 0rem; +} + +.task-box button { + margin-left: 2rem; + font-size: 1.6rem; + border: 1px solid #eee; + border-radius: 5px; + box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.5) 1px 1px 1px black; +} + +/* setting cursor for interactive controls */ + +button, +input[type="submit"], +select { + cursor: pointer; +} + +/* media query for small screens */ + +@media (max-width: 32rem) { + body { + width: 100%; + border-left: none; + border-right: none; + } + + form div { + clear: both; + } + + form .full-width { + margin: 1rem auto; + } + + form .half-width { + width: 100%; + float: none; + } + + form .third-width { + width: 100%; + float: none; + } + + form div label { + width: 36%; + padding-left: 1rem; + } + + form input, + form select, + form label { + line-height: 2.5rem; + font-size: 2rem; + } + + form .full-width input { + width: 50%; + } + + form .half-width input { + width: 50%; + } + + form .third-width select { + width: 50%; + } + + #enable { + right: 1rem; + } +} \ No newline at end of file diff --git a/tests/config/proxy.ts b/tests/config/proxy.ts index 7efe389b12..94f2b57ed7 100644 --- a/tests/config/proxy.ts +++ b/tests/config/proxy.ts @@ -138,7 +138,7 @@ export async function setupSocksForwardingServer({ const socksProxy = new SocksProxy(); socksProxy.setPattern('*'); socksProxy.addListener(SocksProxy.Events.SocksRequested, async (payload: SocksSocketRequestedPayload) => { - if (!['127.0.0.1', '0:0:0:0:0:0:0:1', 'fake-localhost-127-0-0-1.nip.io', 'localhost'].includes(payload.host) || payload.port !== allowedTargetPort) { + if (!['127.0.0.1', 'fake-localhost-127-0-0-1.nip.io', 'localhost'].includes(payload.host) || payload.port !== allowedTargetPort) { socksProxy.sendSocketError({ uid: payload.uid, error: 'ECONNREFUSED' }); return; } diff --git a/tests/library/browsercontext-storage-state.spec.ts b/tests/library/browsercontext-storage-state.spec.ts index d71657d1be..4b003a6c81 100644 --- a/tests/library/browsercontext-storage-state.spec.ts +++ b/tests/library/browsercontext-storage-state.spec.ts @@ -40,12 +40,14 @@ it('should capture local storage', async ({ contextFactory }) => { name: 'name2', value: 'value2' }], + indexedDB: [], }, { origin: 'https://www.example.com', localStorage: [{ name: 'name1', value: 'value1' }], + indexedDB: [], }]); }); @@ -81,9 +83,25 @@ it('should round-trip through the file', async ({ contextFactory }, testInfo) => route.fulfill({ body: '' }).catch(() => {}); }); await page1.goto('https://www.example.com'); - await page1.evaluate(() => { + await page1.evaluate(async () => { localStorage['name1'] = 'value1'; document.cookie = 'username=John Doe'; + + await new Promise((resolve, reject) => { + const openRequest = indexedDB.open('db', 42); + openRequest.onupgradeneeded = () => { + openRequest.result.createObjectStore('store'); + + }; + openRequest.onsuccess = () => { + const request = openRequest.result.transaction('store', 'readwrite') + .objectStore('store') + .put({ name: 'foo', date: new Date(0) }, 'bar'); + request.addEventListener('success', resolve); + request.addEventListener('error', reject); + }; + }); + return document.cookie; }); @@ -102,6 +120,18 @@ it('should round-trip through the file', async ({ contextFactory }, testInfo) => expect(localStorage).toEqual({ name1: 'value1' }); const cookie = await page2.evaluate('document.cookie'); expect(cookie).toEqual('username=John Doe'); + const idbValue = await page2.evaluate(() => new Promise((resolve, reject) => { + const openRequest = indexedDB.open('db', 42); + openRequest.addEventListener('success', () => { + const db = openRequest.result; + const transaction = db.transaction('store', 'readonly'); + const getRequest = transaction.objectStore('store').get('bar'); + getRequest.addEventListener('success', () => resolve(getRequest.result)); + getRequest.addEventListener('error', () => reject(getRequest.error)); + }); + openRequest.addEventListener('error', () => reject(openRequest.error)); + })); + expect(idbValue).toEqual({ name: 'foo', date: new Date(0) }); await context2.close(); }); @@ -316,3 +346,94 @@ it('should roundtrip local storage in third-party context', async ({ page, conte expect(localStorage).toEqual({ name1: 'value1' }); await context2.close(); }); + +it('should support IndexedDB', async ({ page, server, contextFactory }) => { + await page.goto(server.PREFIX + '/to-do-notifications/index.html'); + await page.getByLabel('Task title').fill('Pet the cat'); + await page.getByLabel('Hours').fill('1'); + await page.getByLabel('Mins').fill('1'); + await page.getByText('Add Task').click(); + + const storageState = await page.context().storageState(); + expect(storageState.origins).toEqual([ + { + origin: server.PREFIX, + localStorage: [], + indexedDB: [ + { + name: 'toDoList', + version: 4, + stores: [ + { + name: 'toDoList', + autoIncrement: false, + keyPath: 'taskTitle', + records: [ + { + value: { + day: '01', + hours: '1', + minutes: '1', + month: 'January', + notified: 'no', + taskTitle: 'Pet the cat', + year: '2025', + }, + }, + ], + indexes: [ + { + name: 'day', + keyPath: 'day', + multiEntry: false, + unique: false, + }, + { + name: 'hours', + keyPath: 'hours', + multiEntry: false, + unique: false, + }, + { + name: 'minutes', + keyPath: 'minutes', + multiEntry: false, + unique: false, + }, + { + name: 'month', + keyPath: 'month', + multiEntry: false, + unique: false, + }, + { + name: 'notified', + keyPath: 'notified', + multiEntry: false, + unique: false, + }, + { + name: 'year', + keyPath: 'year', + multiEntry: false, + unique: false, + }, + ], + }, + ], + }, + ], + }, + ]); + + const context = await contextFactory({ storageState }); + expect(await context.storageState()).toEqual(storageState); + + const recreatedPage = await context.newPage(); + await recreatedPage.goto(server.PREFIX + '/to-do-notifications/index.html'); + await expect(recreatedPage.locator('#task-list')).toMatchAriaSnapshot(` + - list: + - listitem: + - text: /Pet the cat/ + `); +}); diff --git a/tests/library/browsercontext-viewport.spec.ts b/tests/library/browsercontext-viewport.spec.ts index 09fade8d91..1a9a1a27ba 100644 --- a/tests/library/browsercontext-viewport.spec.ts +++ b/tests/library/browsercontext-viewport.spec.ts @@ -19,6 +19,7 @@ import { devices } from '@playwright/test'; import { contextTest as it, expect } from '../config/browserTest'; import { browserTest } from '../config/browserTest'; import { verifyViewport } from '../config/utils'; +import { deviceDescriptors } from 'packages/playwright-core/lib/server/deviceDescriptors'; it('should get the proper default viewport size', async ({ page, server }) => { await verifyViewport(page, 1280, 720); @@ -46,6 +47,14 @@ it('should return correct outerWidth and outerHeight', async ({ page }) => { expect(size.outerHeight >= size.innerHeight).toBeTruthy(); }); +it('landscape viewport should have width larger than height', async () => { + for (const device in deviceDescriptors) { + const configuration = deviceDescriptors[device]; + if (device.includes('landscape') || device.includes('Landscape')) + expect(configuration.viewport.width).toBeGreaterThan(configuration.viewport.height); + } +}); + it('should emulate device width', async ({ page, server }) => { expect(page.viewportSize()).toEqual({ width: 1280, height: 720 }); await page.setViewportSize({ width: 300, height: 300 }); diff --git a/tests/library/browsertype-connect.spec.ts b/tests/library/browsertype-connect.spec.ts index 367c0eabfc..9c81581de5 100644 --- a/tests/library/browsertype-connect.spec.ts +++ b/tests/library/browsertype-connect.spec.ts @@ -53,7 +53,8 @@ const test = playwrightTest.extend({ const server = createHttpServer((req: http.IncomingMessage, res: http.ServerResponse) => { res.end('from-dummy-server'); }); - await new Promise(resolve => server.listen(0, resolve)); + // Only listen on IPv4 to check that we don't try to connect to it via IPv6. + await new Promise(resolve => server.listen(0, '127.0.0.1', resolve)); await use((server.address() as net.AddressInfo).port); await new Promise(resolve => server.close(resolve)); }, @@ -792,9 +793,23 @@ for (const kind of ['launchServer', 'run-server'] as const) { const remoteServer = await startRemoteServer(kind); const browser = await connect(remoteServer.wsEndpoint(), { _exposeNetwork: '*' } as any, dummyServerPort); const page = await browser.newPage(); - await page.goto(`http://127.0.0.1:${examplePort}/foo.html`); - expect(await page.content()).toContain('from-dummy-server'); - expect(reachedOriginalTarget).toBe(false); + { + await page.setContent('empty'); + await page.goto(`http://127.0.0.1:${examplePort}/foo.html`); + expect(await page.content()).toContain('from-dummy-server'); + expect(reachedOriginalTarget).toBe(false); + } + { + await page.setContent('empty'); + await page.goto(`http://localhost:${examplePort}/foo.html`); + expect(await page.content()).toContain('from-dummy-server'); + expect(reachedOriginalTarget).toBe(false); + } + { + const error = await page.goto(`http://[::1]:${examplePort}/foo.html`).catch(() => 'failed'); + expect(error).toBe('failed'); + expect(reachedOriginalTarget).toBe(false); + } }); test('should proxy ipv6 localhost requests @smoke', async ({ startRemoteServer, server, browserName, connect, platform, ipV6ServerPort }, testInfo) => { @@ -809,15 +824,26 @@ for (const kind of ['launchServer', 'run-server'] as const) { const remoteServer = await startRemoteServer(kind); const browser = await connect(remoteServer.wsEndpoint(), { exposeNetwork: '*' }, ipV6ServerPort); const page = await browser.newPage(); - await page.goto(`http://[::1]:${examplePort}/foo.html`); - expect(await page.content()).toContain('from-ipv6-server'); - const page2 = await browser.newPage(); - await page2.goto(`http://localhost:${examplePort}/foo.html`); - expect(await page2.content()).toContain('from-ipv6-server'); - expect(reachedOriginalTarget).toBe(false); + { + await page.setContent('empty'); + await page.goto(`http://[::1]:${examplePort}/foo.html`); + expect(await page.content()).toContain('from-ipv6-server'); + expect(reachedOriginalTarget).toBe(false); + } + { + await page.setContent('empty'); + await page.goto(`http://localhost:${examplePort}/foo.html`); + expect(await page.content()).toContain('from-ipv6-server'); + expect(reachedOriginalTarget).toBe(false); + } + { + const error = await page.goto(`http://127.0.0.1:${examplePort}/foo.html`).catch(() => 'failed'); + expect(error).toBe('failed'); + expect(reachedOriginalTarget).toBe(false); + } }); - test('should proxy localhost requests from fetch api', async ({ startRemoteServer, server, browserName, connect, channel, platform, dummyServerPort }, workerInfo) => { + test('should proxy requests from fetch api', async ({ startRemoteServer, server, browserName, connect, channel, platform, dummyServerPort }, workerInfo) => { test.skip(browserName === 'webkit' && platform === 'darwin', 'no localhost proxying'); let reachedOriginalTarget = false; @@ -829,10 +855,54 @@ for (const kind of ['launchServer', 'run-server'] as const) { const remoteServer = await startRemoteServer(kind); const browser = await connect(remoteServer.wsEndpoint(), { exposeNetwork: '*' }, dummyServerPort); const page = await browser.newPage(); - const response = await page.request.get(`http://127.0.0.1:${examplePort}/foo.html`); - expect(response.status()).toBe(200); - expect(await response.text()).toContain('from-dummy-server'); - expect(reachedOriginalTarget).toBe(false); + { + const response = await page.request.get(`http://localhost:${examplePort}/foo.html`); + expect(response.status()).toBe(200); + expect(await response.text()).toContain('from-dummy-server'); + expect(reachedOriginalTarget).toBe(false); + } + { + const response = await page.request.get(`http://127.0.0.1:${examplePort}/foo.html`); + expect(response.status()).toBe(200); + expect(await response.text()).toContain('from-dummy-server'); + expect(reachedOriginalTarget).toBe(false); + } + { + const error = await page.request.get(`http://[::1]:${examplePort}/foo.html`).catch(e => 'failed'); + expect(error).toBe('failed'); + expect(reachedOriginalTarget).toBe(false); + } + }); + + test('should proxy requests from fetch api over ipv6', async ({ startRemoteServer, server, browserName, connect, channel, platform, ipV6ServerPort }, workerInfo) => { + test.skip(browserName === 'webkit' && platform === 'darwin', 'no localhost proxying'); + + let reachedOriginalTarget = false; + server.setRoute('/foo.html', async (req, res) => { + reachedOriginalTarget = true; + res.end(''); + }); + const examplePort = 20_000 + workerInfo.workerIndex * 3; + const remoteServer = await startRemoteServer(kind); + const browser = await connect(remoteServer.wsEndpoint(), { exposeNetwork: '*' }, ipV6ServerPort); + const page = await browser.newPage(); + { + const response = await page.request.get(`http://localhost:${examplePort}/foo.html`); + expect(response.status()).toBe(200); + expect(await response.text()).toContain('from-ipv6-server'); + expect(reachedOriginalTarget).toBe(false); + } + { + const response = await page.request.get(`http://[::1]:${examplePort}/foo.html`); + expect(response.status()).toBe(200); + expect(await response.text()).toContain('from-ipv6-server'); + expect(reachedOriginalTarget).toBe(false); + } + { + const error = await page.request.get(`http://127.0.0.1:${examplePort}/foo.html`).catch(e => 'failed'); + expect(error).toBe('failed'); + expect(reachedOriginalTarget).toBe(false); + } }); test('should proxy local.playwright requests', async ({ connect, server, dummyServerPort, startRemoteServer }, workerInfo) => { diff --git a/tests/library/capabilities.spec.ts b/tests/library/capabilities.spec.ts index 03ff1d7feb..29328f3f80 100644 --- a/tests/library/capabilities.spec.ts +++ b/tests/library/capabilities.spec.ts @@ -429,6 +429,22 @@ it('should not crash when clicking a label with a ', { expect(fileChooser.page()).toBe(page); }); +it('should not crash when clicking a color input', { + annotation: { + type: 'issue', + description: 'https://github.com/microsoft/playwright/issues/33864' + } +}, async ({ page, browserMajorVersion, browserName }) => { + it.skip(browserName === 'firefox' && browserMajorVersion < 135); + + await page.setContent(''); + const input = page.locator('input'); + + await expect(input).toBeVisible(); + await input.click(); + await expect(input).toBeVisible(); +}); + it('should not auto play audio', { annotation: { type: 'issue', diff --git a/tests/library/client-certificates.spec.ts b/tests/library/client-certificates.spec.ts index 648fef0d75..108dde2edc 100644 --- a/tests/library/client-certificates.spec.ts +++ b/tests/library/client-certificates.spec.ts @@ -390,7 +390,7 @@ test.describe('browser', () => { }); expect(connectHosts).toEqual([]); await page.goto(serverURL); - const host = browserName === 'webkit' && isMac ? '0:0:0:0:0:0:0:1' : '127.0.0.1'; + const host = browserName === 'webkit' && isMac ? 'localhost' : '127.0.0.1'; expect(connectHosts).toEqual([`${host}:${serverPort}`]); await expect(page.getByTestId('message')).toHaveText('Hello Alice, your certificate was issued by localhost!'); await page.close(); diff --git a/tests/library/defaultbrowsercontext-2.spec.ts b/tests/library/defaultbrowsercontext-2.spec.ts index a54f4ee15a..af244f6e78 100644 --- a/tests/library/defaultbrowsercontext-2.spec.ts +++ b/tests/library/defaultbrowsercontext-2.spec.ts @@ -51,6 +51,12 @@ it('should support forcedColors option', async ({ launchPersistent, browserName expect(await page.evaluate(() => matchMedia('(forced-colors: none)').matches)).toBe(false); }); +it('should support contrast option', async ({ launchPersistent }) => { + const { page } = await launchPersistent({ contrast: 'more' }); + expect.soft(await page.evaluate(() => matchMedia('(prefers-contrast: more)').matches)).toBe(true); + expect.soft(await page.evaluate(() => matchMedia('(prefers-contrast: no-preference)').matches)).toBe(false); +}); + it('should support timezoneId option', async ({ launchPersistent, browserName }) => { const { page } = await launchPersistent({ locale: 'en-US', timezoneId: 'America/Jamaica' }); expect(await page.evaluate(() => new Date(1479579154987).toString())).toBe('Sat Nov 19 2016 13:12:34 GMT-0500 (Eastern Standard Time)'); diff --git a/tests/library/global-fetch-cookie.spec.ts b/tests/library/global-fetch-cookie.spec.ts index 67845f8b8e..f2f522a619 100644 --- a/tests/library/global-fetch-cookie.spec.ts +++ b/tests/library/global-fetch-cookie.spec.ts @@ -351,7 +351,26 @@ it('should preserve local storage on import/export of storage state', async ({ p localStorage: [{ name: 'name1', value: 'value1' - }] + }], + indexedDB: [ + { + name: 'db', + version: 5, + stores: [ + { + name: 'store', + keyPath: 'id', + autoIncrement: false, + indexes: [], + records: [ + { + value: { id: 'foo', name: 'John Doe' } + } + ], + } + ] + } + ], }, ] }; diff --git a/tests/library/har.spec.ts b/tests/library/har.spec.ts index 88419e742c..6d920d133a 100644 --- a/tests/library/har.spec.ts +++ b/tests/library/har.spec.ts @@ -24,9 +24,9 @@ import type { Log } from '../../packages/trace/src/har'; import { parseHar } from '../config/utils'; const { createHttp2Server } = require('../../packages/playwright-core/lib/utils'); -async function pageWithHar(contextFactory: (options?: BrowserContextOptions) => Promise, testInfo: any, options: { outputPath?: string, proxy?: BrowserContextOptions['proxy'] } & Partial> = {}) { +async function pageWithHar(contextFactory: (options?: BrowserContextOptions) => Promise, testInfo: any, options: { outputPath?: string } & Partial> = {}) { const harPath = testInfo.outputPath(options.outputPath || 'test.har'); - const context = await contextFactory({ recordHar: { path: harPath, ...options }, ignoreHTTPSErrors: true, proxy: options.proxy }); + const context = await contextFactory({ recordHar: { path: harPath, ...options }, ignoreHTTPSErrors: true }); const page = await context.newPage(); return { page, @@ -861,38 +861,6 @@ it('should respect minimal mode for API Requests', async ({ contextFactory, serv expect(entry.response.bodySize).toBe(-1); }); -it('should include timings when using http proxy', async ({ contextFactory, server, proxyServer }, testInfo) => { - proxyServer.forwardTo(server.PORT, { allowConnectRequests: true }); - const { page, getLog } = await pageWithHar(contextFactory, testInfo, { proxy: { server: `localhost:${proxyServer.PORT}` } }); - const response = await page.request.get(server.EMPTY_PAGE); - expect(proxyServer.connectHosts).toEqual([`localhost:${server.PORT}`]); - await expect(response).toBeOK(); - const log = await getLog(); - expect(log.entries[0].timings.connect).toBeGreaterThan(0); -}); - -it('should include timings when using socks proxy', async ({ contextFactory, server, socksPort }, testInfo) => { - const { page, getLog } = await pageWithHar(contextFactory, testInfo, { proxy: { server: `socks5://localhost:${socksPort}` } }); - const response = await page.request.get(server.EMPTY_PAGE); - expect(await response.text()).toContain('Served by the SOCKS proxy'); - await expect(response).toBeOK(); - const log = await getLog(); - expect(log.entries[0].timings.connect).toBeGreaterThan(0); -}); - -it('should not have connect and dns timings when socket is reused', async ({ contextFactory, server }, testInfo) => { - const { page, getLog } = await pageWithHar(contextFactory, testInfo); - await page.request.get(server.EMPTY_PAGE); - await page.request.get(server.EMPTY_PAGE); - - const log = await getLog(); - expect(log.entries).toHaveLength(2); - const request2 = log.entries[1]; - expect.soft(request2.timings.connect).toBe(-1); - expect.soft(request2.timings.dns).toBe(-1); - expect.soft(request2.timings.blocked).toBeGreaterThan(0); -}); - it('should include redirects from API request', async ({ contextFactory, server }, testInfo) => { server.setRedirect('/redirect-me', '/simple.json'); const { page, getLog } = await pageWithHar(contextFactory, testInfo); diff --git a/tests/library/inspector/cli-codegen-1.spec.ts b/tests/library/inspector/cli-codegen-1.spec.ts index 6936aeee41..aa52daffa9 100644 --- a/tests/library/inspector/cli-codegen-1.spec.ts +++ b/tests/library/inspector/cli-codegen-1.spec.ts @@ -778,6 +778,70 @@ await page.GetByText("link").ClickAsync();`); expect(page.url()).toContain('about:blank#foo'); }); + test('should attribute navigation to press/fill', async ({ openRecorder }) => { + const { page, recorder } = await openRecorder(); + + await recorder.setContentAndWait(``); + + const locator = await recorder.hoverOverElement('input'); + expect(locator).toBe(`getByRole('textbox')`); + await recorder.trustedClick(); + await expect.poll(() => page.locator('input').evaluate(e => e === document.activeElement)).toBeTruthy(); + const [, sources] = await Promise.all([ + page.waitForNavigation(), + recorder.waitForOutput('JavaScript', '.fill'), + recorder.trustedPress('h'), + ]); + + expect.soft(sources.get('JavaScript')!.text).toContain(` + await page.goto('about:blank'); + await page.getByRole('textbox').click(); + await page.getByRole('textbox').fill('h'); + + // --------------------- + await context.close();`); + + expect.soft(sources.get('Playwright Test')!.text).toContain(` + await page.goto('about:blank'); + await page.getByRole('textbox').click(); + await page.getByRole('textbox').fill('h'); +});`); + + expect.soft(sources.get('Java')!.text).toContain(` + page.navigate(\"about:blank\"); + page.getByRole(AriaRole.TEXTBOX).click(); + page.getByRole(AriaRole.TEXTBOX).fill(\"h\"); + }`); + + expect.soft(sources.get('Python')!.text).toContain(` + page.goto("about:blank") + page.get_by_role("textbox").click() + page.get_by_role("textbox").fill("h") + + # --------------------- + context.close()`); + + expect.soft(sources.get('Python Async')!.text).toContain(` + await page.goto("about:blank") + await page.get_by_role("textbox").click() + await page.get_by_role("textbox").fill("h") + + # --------------------- + await context.close()`); + + expect.soft(sources.get('Pytest')!.text).toContain(` + page.goto("about:blank") + page.get_by_role("textbox").click() + page.get_by_role("textbox").fill("h")`); + + expect.soft(sources.get('C#')!.text).toContain(` +await page.GotoAsync("about:blank"); +await page.GetByRole(AriaRole.Textbox).ClickAsync(); +await page.GetByRole(AriaRole.Textbox).FillAsync("h");`); + + expect(page.url()).toContain('about:blank#foo'); + }); + test('should ignore AltGraph', async ({ openRecorder, browserName }) => { test.skip(browserName === 'firefox', 'The TextInputProcessor in Firefox does not work with AltGraph.'); const { recorder } = await openRecorder(); diff --git a/tests/library/inspector/inspectorTest.ts b/tests/library/inspector/inspectorTest.ts index b94bfc09a0..f5e3631b3a 100644 --- a/tests/library/inspector/inspectorTest.ts +++ b/tests/library/inspector/inspectorTest.ts @@ -218,6 +218,10 @@ export class Recorder { await this.page.mouse.up(options); } + async trustedPress(text: string) { + await this.page.keyboard.press(text); + } + async trustedDblclick() { await this.page.mouse.down(); await this.page.mouse.up(); diff --git a/tests/library/role-utils.spec.ts b/tests/library/role-utils.spec.ts index 2b5792d0f1..1b625a106a 100644 --- a/tests/library/role-utils.spec.ts +++ b/tests/library/role-utils.spec.ts @@ -495,6 +495,21 @@ test('should not include hidden pseudo into accessible name', async ({ page }) = expect.soft(await getNameAndRole(page, 'a')).toEqual({ role: 'link', name: 'hello hello' }); }); +test('should resolve pseudo content from attr', async ({ page }) => { + await page.setContent(` + + +
world
+ + `); + expect(await getNameAndRole(page, 'a')).toEqual({ role: 'link', name: 'hello world' }); +}); + test('should ignore invalid aria-labelledby', async ({ page }) => { await page.setContent(`