diff --git a/docs/src/api/class-locatorassertions.md b/docs/src/api/class-locatorassertions.md index 26b487d0ff..59618d0fbf 100644 --- a/docs/src/api/class-locatorassertions.md +++ b/docs/src/api/class-locatorassertions.md @@ -2263,13 +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 `.snapshot.yml` file in a location configured by `expect.toMatchAriaSnapshot.pathTemplate` and/or `snapshotPathTemplate` properties in the configuration file. +Snapshot is stored in a separate `.aria.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: 'body.snapshot.yml' }); +await expect(page.locator('body')).toMatchAriaSnapshot({ name: 'body.aria.yml' }); ``` ### option: LocatorAssertions.toMatchAriaSnapshot#2.name diff --git a/docs/src/aria-snapshots.md b/docs/src/aria-snapshots.md index 0467cf3878..2bbfd8a654 100644 --- a/docs/src/aria-snapshots.md +++ b/docs/src/aria-snapshots.md @@ -339,10 +339,10 @@ 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 `.snapshot.yml` file extension. +To store your snapshots in a separate file, use the `toMatchAriaSnapshot` method with the `name` option, specifying a `.aria.yml` file extension. ```js -await expect(page.getByRole('main')).toMatchAriaSnapshot({ name: 'main.snapshot.yml' }); +await expect(page.getByRole('main')).toMatchAriaSnapshot({ name: 'main.aria.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: diff --git a/packages/playwright/src/index.ts b/packages/playwright/src/index.ts index 68b29bf3d6..255a96e309 100644 --- a/packages/playwright/src/index.ts +++ b/packages/playwright/src/index.ts @@ -628,7 +628,7 @@ class ArtifactsRecorder { await page.screenshot({ ...screenshotOptions, timeout: 5000, path, caret: 'initial' }); }); - this._pageSnapshotRecorder = new SnapshotRecorder(this, pageSnapshot, 'pageSnapshot', 'text/plain', '.snapshot.yml', async (page, path) => { + this._pageSnapshotRecorder = new SnapshotRecorder(this, pageSnapshot, 'pageSnapshot', 'text/yaml', '.aria.yml', async (page, path) => { const ariaSnapshot = await page.locator('body').ariaSnapshot({ timeout: 5000 }); await fs.promises.writeFile(path, ariaSnapshot); }); diff --git a/packages/playwright/src/matchers/toMatchAriaSnapshot.ts b/packages/playwright/src/matchers/toMatchAriaSnapshot.ts index 0c76a97c68..ea38793882 100644 --- a/packages/playwright/src/matchers/toMatchAriaSnapshot.ts +++ b/packages/playwright/src/matchers/toMatchAriaSnapshot.ts @@ -70,7 +70,7 @@ export async function toMatchAriaSnapshot( timeout = options.timeout ?? this.timeout; } else { if (expectedParam?.name) { - const ext = expectedParam.name!.endsWith('.snapshot.yml') ? '.snapshot.yml' : undefined; + const ext = expectedParam.name!.endsWith('.aria.yml') ? '.aria.yml' : undefined; expectedPath = testInfo._resolveSnapshotPath(pathTemplate, defaultTemplate, [sanitizeFilePathBeforeExtension(expectedParam.name, ext)]); } else { let snapshotNames = (testInfo as any)[snapshotNamesSymbol] as SnapshotNames; @@ -79,8 +79,8 @@ export async function toMatchAriaSnapshot( (testInfo as any)[snapshotNamesSymbol] = snapshotNames; } const fullTitleWithoutSpec = [...testInfo.titlePath.slice(1), ++snapshotNames.anonymousSnapshotIndex].join(' '); - expectedPath = testInfo._resolveSnapshotPath(pathTemplate, defaultTemplate, [sanitizeForFilePath(trimLongString(fullTitleWithoutSpec))], '.snapshot.yml'); - // in 1.51, we changed the default template to use .snapshot.yml extension + expectedPath = testInfo._resolveSnapshotPath(pathTemplate, defaultTemplate, [sanitizeForFilePath(trimLongString(fullTitleWithoutSpec))], '.aria.yml'); + // in 1.51, we changed the default template to use .aria.yml extension // for backwards compatibility, we check for the legacy .yml extension if (!(await fileExistsAsync(expectedPath))) { const legacyPath = testInfo._resolveSnapshotPath(pathTemplate, defaultTemplate, [sanitizeForFilePath(trimLongString(fullTitleWithoutSpec))], '.yml'); diff --git a/packages/playwright/types/test.d.ts b/packages/playwright/types/test.d.ts index bdb45169b6..d9f54a5e1a 100644 --- a/packages/playwright/types/test.d.ts +++ b/packages/playwright/types/test.d.ts @@ -8793,14 +8793,14 @@ interface LocatorAssertions { /** * Asserts that the target element matches the given [accessibility snapshot](https://playwright.dev/docs/aria-snapshots). * - * Snapshot is stored in a separate `.snapshot.yml` file in a location configured by + * Snapshot is stored in a separate `.aria.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: 'body.snapshot.yml' }); + * await expect(page.locator('body')).toMatchAriaSnapshot({ name: 'body.aria.yml' }); * ``` * * @param options diff --git a/tests/playwright-test/aria-snapshot-file.spec.ts b/tests/playwright-test/aria-snapshot-file.spec.ts index f02ae3b26b..9ccc37e3c0 100644 --- a/tests/playwright-test/aria-snapshot-file.spec.ts +++ b/tests/playwright-test/aria-snapshot-file.spec.ts @@ -22,14 +22,14 @@ test.describe.configure({ mode: 'parallel' }); test('should match snapshot with name', async ({ runInlineTest }, testInfo) => { const result = await runInlineTest({ - 'a.spec.ts-snapshots/test.snapshot.yml': ` + 'a.spec.ts-snapshots/test.aria.yml': ` - heading "hello world" `, 'a.spec.ts': ` import { test, expect } from '@playwright/test'; test('test', async ({ page }) => { await page.setContent(\`

hello world

\`); - await expect(page.locator('body')).toMatchAriaSnapshot({ name: 'test.snapshot.yml' }); + await expect(page.locator('body')).toMatchAriaSnapshot({ name: 'test.aria.yml' }); }); ` }); @@ -43,66 +43,66 @@ test('should generate multiple missing', async ({ runInlineTest }, testInfo) => import { test, expect } from '@playwright/test'; test('test', async ({ page }) => { await page.setContent(\`

hello world

\`); - await expect(page.locator('body')).toMatchAriaSnapshot({ name: 'test-1.snapshot.yml' }); + await expect(page.locator('body')).toMatchAriaSnapshot({ name: 'test-1.aria.yml' }); await page.setContent(\`

hello world 2

\`); - await expect(page.locator('body')).toMatchAriaSnapshot({ name: 'test-2.snapshot.yml' }); + await expect(page.locator('body')).toMatchAriaSnapshot({ name: 'test-2.aria.yml' }); }); ` }); expect(result.exitCode).toBe(1); - expect(result.output).toContain(`A snapshot doesn't exist at a.spec.ts-snapshots${path.sep}test-1.snapshot.yml, writing actual`); - expect(result.output).toContain(`A snapshot doesn't exist at a.spec.ts-snapshots${path.sep}test-2.snapshot.yml, writing actual`); - const snapshot1 = await fs.promises.readFile(testInfo.outputPath('a.spec.ts-snapshots/test-1.snapshot.yml'), 'utf8'); + expect(result.output).toContain(`A snapshot doesn't exist at a.spec.ts-snapshots${path.sep}test-1.aria.yml, writing actual`); + expect(result.output).toContain(`A snapshot doesn't exist at a.spec.ts-snapshots${path.sep}test-2.aria.yml, writing actual`); + const snapshot1 = await fs.promises.readFile(testInfo.outputPath('a.spec.ts-snapshots/test-1.aria.yml'), 'utf8'); expect(snapshot1).toBe('- heading "hello world" [level=1]'); - const snapshot2 = await fs.promises.readFile(testInfo.outputPath('a.spec.ts-snapshots/test-2.snapshot.yml'), 'utf8'); + const snapshot2 = await fs.promises.readFile(testInfo.outputPath('a.spec.ts-snapshots/test-2.aria.yml'), 'utf8'); expect(snapshot2).toBe('- heading "hello world 2" [level=1]'); }); test('should rebaseline all', async ({ runInlineTest }, testInfo) => { const result = await runInlineTest({ - 'a.spec.ts-snapshots/test-1.snapshot.yml': ` + 'a.spec.ts-snapshots/test-1.aria.yml': ` - heading "foo" `, - 'a.spec.ts-snapshots/test-2.snapshot.yml': ` + 'a.spec.ts-snapshots/test-2.aria.yml': ` - heading "bar" `, 'a.spec.ts': ` import { test, expect } from '@playwright/test'; test('test', async ({ page }) => { await page.setContent(\`

hello world

\`); - await expect(page.locator('body')).toMatchAriaSnapshot({ name: 'test-1.snapshot.yml' }); + await expect(page.locator('body')).toMatchAriaSnapshot({ name: 'test-1.aria.yml' }); await page.setContent(\`

hello world 2

\`); - await expect(page.locator('body')).toMatchAriaSnapshot({ name: 'test-2.snapshot.yml' }); + await expect(page.locator('body')).toMatchAriaSnapshot({ name: 'test-2.aria.yml' }); }); ` }, { 'update-snapshots': 'all' }); expect(result.exitCode).toBe(0); - expect(result.output).toContain(`A snapshot is generated at a.spec.ts-snapshots${path.sep}test-1.snapshot.yml`); - expect(result.output).toContain(`A snapshot is generated at a.spec.ts-snapshots${path.sep}test-2.snapshot.yml`); - const snapshot1 = await fs.promises.readFile(testInfo.outputPath('a.spec.ts-snapshots/test-1.snapshot.yml'), 'utf8'); + expect(result.output).toContain(`A snapshot is generated at a.spec.ts-snapshots${path.sep}test-1.aria.yml`); + expect(result.output).toContain(`A snapshot is generated at a.spec.ts-snapshots${path.sep}test-2.aria.yml`); + const snapshot1 = await fs.promises.readFile(testInfo.outputPath('a.spec.ts-snapshots/test-1.aria.yml'), 'utf8'); expect(snapshot1).toBe('- heading "hello world" [level=1]'); - const snapshot2 = await fs.promises.readFile(testInfo.outputPath('a.spec.ts-snapshots/test-2.snapshot.yml'), 'utf8'); + const snapshot2 = await fs.promises.readFile(testInfo.outputPath('a.spec.ts-snapshots/test-2.aria.yml'), 'utf8'); expect(snapshot2).toBe('- heading "hello world 2" [level=1]'); }); test('should not rebaseline matching', async ({ runInlineTest }, testInfo) => { const result = await runInlineTest({ - 'a.spec.ts-snapshots/test.snapshot.yml': ` + 'a.spec.ts-snapshots/test.aria.yml': ` - heading "hello world" `, 'a.spec.ts': ` import { test, expect } from '@playwright/test'; test('test', async ({ page }) => { await page.setContent(\`

hello world

\`); - await expect(page.locator('body')).toMatchAriaSnapshot({ name: 'test.snapshot.yml' }); + await expect(page.locator('body')).toMatchAriaSnapshot({ name: 'test.aria.yml' }); }); ` }, { 'update-snapshots': 'changed' }); expect(result.exitCode).toBe(0); - const snapshot1 = await fs.promises.readFile(testInfo.outputPath('a.spec.ts-snapshots/test.snapshot.yml'), 'utf8'); + const snapshot1 = await fs.promises.readFile(testInfo.outputPath('a.spec.ts-snapshots/test.aria.yml'), 'utf8'); expect(snapshot1.trim()).toBe('- heading "hello world"'); }); @@ -120,11 +120,11 @@ test('should generate snapshot name', async ({ runInlineTest }, testInfo) => { }); expect(result.exitCode).toBe(1); - expect(result.output).toContain(`A snapshot doesn't exist at a.spec.ts-snapshots${path.sep}test-name-1.snapshot.yml, writing actual`); - expect(result.output).toContain(`A snapshot doesn't exist at a.spec.ts-snapshots${path.sep}test-name-2.snapshot.yml, writing actual`); - const snapshot1 = await fs.promises.readFile(testInfo.outputPath('a.spec.ts-snapshots/test-name-1.snapshot.yml'), 'utf8'); + expect(result.output).toContain(`A snapshot doesn't exist at a.spec.ts-snapshots${path.sep}test-name-1.aria.yml, writing actual`); + expect(result.output).toContain(`A snapshot doesn't exist at a.spec.ts-snapshots${path.sep}test-name-2.aria.yml, writing actual`); + const snapshot1 = await fs.promises.readFile(testInfo.outputPath('a.spec.ts-snapshots/test-name-1.aria.yml'), 'utf8'); expect(snapshot1).toBe('- heading "hello world" [level=1]'); - const snapshot2 = await fs.promises.readFile(testInfo.outputPath('a.spec.ts-snapshots/test-name-2.snapshot.yml'), 'utf8'); + const snapshot2 = await fs.promises.readFile(testInfo.outputPath('a.spec.ts-snapshots/test-name-2.aria.yml'), 'utf8'); expect(snapshot2).toBe('- heading "hello world 2" [level=1]'); }); @@ -161,13 +161,13 @@ for (const updateSnapshots of ['all', 'changed', 'missing', 'none']) { await expect(page.locator('body')).toMatchAriaSnapshot({ timeout: 1 }); }); `, - 'a.spec.ts-snapshots/test-1.snapshot.yml': '- heading "Old content" [level=1]', + 'a.spec.ts-snapshots/test-1.aria.yml': '- heading "Old content" [level=1]', }); const rebase = updateSnapshots === 'all' || updateSnapshots === 'changed'; expect(result.exitCode).toBe(rebase ? 0 : 1); if (rebase) { - const snapshotOutputPath = testInfo.outputPath('a.spec.ts-snapshots/test-1.snapshot.yml'); + const snapshotOutputPath = testInfo.outputPath('a.spec.ts-snapshots/test-1.aria.yml'); expect(result.output).toContain(`A snapshot is generated at`); const data = fs.readFileSync(snapshotOutputPath); expect(data.toString()).toBe('- heading "New content" [level=1]'); @@ -187,7 +187,7 @@ test('should respect timeout', async ({ runInlineTest }, testInfo) => { await expect(page.locator('body')).toMatchAriaSnapshot({ timeout: 1 }); }); `, - 'a.spec.ts-snapshots/test-1.snapshot.yml': '- heading "new world" [level=1]', + 'a.spec.ts-snapshots/test-1.aria.yml': '- heading "new world" [level=1]', }); expect(result.exitCode).toBe(1); @@ -201,14 +201,14 @@ test('should respect config.snapshotPathTemplate', async ({ runInlineTest }, tes snapshotPathTemplate: 'my-snapshots/{testFilePath}/{arg}{ext}', }; `, - 'my-snapshots/dir/a.spec.ts/test.snapshot.yml': ` + 'my-snapshots/dir/a.spec.ts/test.aria.yml': ` - heading "hello world" `, 'dir/a.spec.ts': ` import { test, expect } from '@playwright/test'; test('test', async ({ page }) => { await page.setContent(\`

hello world

\`); - await expect(page.locator('body')).toMatchAriaSnapshot({ name: 'test.snapshot.yml' }); + await expect(page.locator('body')).toMatchAriaSnapshot({ name: 'test.aria.yml' }); }); ` }); @@ -228,17 +228,17 @@ test('should respect config.expect.toMatchAriaSnapshot.pathTemplate', async ({ r }, }; `, - 'my-snapshots/dir/a.spec.ts/test.snapshot.yml': ` + 'my-snapshots/dir/a.spec.ts/test.aria.yml': ` - heading "wrong one" `, - 'actual-snapshots/dir/a.spec.ts/test.snapshot.yml': ` + 'actual-snapshots/dir/a.spec.ts/test.aria.yml': ` - heading "hello world" `, 'dir/a.spec.ts': ` import { test, expect } from '@playwright/test'; test('test', async ({ page }) => { await page.setContent(\`

hello world

\`); - await expect(page.locator('body')).toMatchAriaSnapshot({ name: 'test.snapshot.yml' }); + await expect(page.locator('body')).toMatchAriaSnapshot({ name: 'test.aria.yml' }); }); ` }); diff --git a/tests/playwright-test/playwright.artifacts.spec.ts b/tests/playwright-test/playwright.artifacts.spec.ts index d54fe5265c..195c20dc02 100644 --- a/tests/playwright-test/playwright.artifacts.spec.ts +++ b/tests/playwright-test/playwright.artifacts.spec.ts @@ -435,29 +435,29 @@ test('should work with pageSnapshot: on', async ({ runInlineTest }, testInfo) => expect(listFiles(testInfo.outputPath('test-results'))).toEqual([ '.last-run.json', 'artifacts-failing', - ' test-failed-1.snapshot.yml', + ' test-failed-1.aria.yml', 'artifacts-own-context-failing', - ' test-failed-1.snapshot.yml', + ' test-failed-1.aria.yml', 'artifacts-own-context-passing', - ' test-finished-1.snapshot.yml', + ' test-finished-1.aria.yml', 'artifacts-passing', - ' test-finished-1.snapshot.yml', + ' test-finished-1.aria.yml', 'artifacts-persistent-failing', - ' test-failed-1.snapshot.yml', + ' test-failed-1.aria.yml', 'artifacts-persistent-passing', - ' test-finished-1.snapshot.yml', + ' test-finished-1.aria.yml', 'artifacts-shared-shared-failing', - ' test-failed-1.snapshot.yml', - ' test-failed-2.snapshot.yml', + ' test-failed-1.aria.yml', + ' test-failed-2.aria.yml', 'artifacts-shared-shared-passing', - ' test-finished-1.snapshot.yml', - ' test-finished-2.snapshot.yml', + ' test-finished-1.aria.yml', + ' test-finished-2.aria.yml', 'artifacts-two-contexts', - ' test-finished-1.snapshot.yml', - ' test-finished-2.snapshot.yml', + ' test-finished-1.aria.yml', + ' test-finished-2.aria.yml', 'artifacts-two-contexts-failing', - ' test-failed-1.snapshot.yml', - ' test-failed-2.snapshot.yml', + ' test-failed-1.aria.yml', + ' test-failed-2.aria.yml', ]); }); @@ -475,16 +475,16 @@ test('should work with pageSnapshot: only-on-failure', async ({ runInlineTest }, expect(listFiles(testInfo.outputPath('test-results'))).toEqual([ '.last-run.json', 'artifacts-failing', - ' test-failed-1.snapshot.yml', + ' test-failed-1.aria.yml', 'artifacts-own-context-failing', - ' test-failed-1.snapshot.yml', + ' test-failed-1.aria.yml', 'artifacts-persistent-failing', - ' test-failed-1.snapshot.yml', + ' test-failed-1.aria.yml', 'artifacts-shared-shared-failing', - ' test-failed-1.snapshot.yml', - ' test-failed-2.snapshot.yml', + ' test-failed-1.aria.yml', + ' test-failed-2.aria.yml', 'artifacts-two-contexts-failing', - ' test-failed-1.snapshot.yml', - ' test-failed-2.snapshot.yml', + ' test-failed-1.aria.yml', + ' test-failed-2.aria.yml', ]); });