yujunjun/playwright
1
0
Fork 0
mirror of https://github.com/microsoft/playwright.git synced 2025-06-26 21:40:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: change recommended snapshot extension to .aria.yml (#34963)

Browse Source
This commit is contained in:
Simon Knott 2025-02-28 10:03:39 +01:00 committed by GitHub
parent 44712fb8eb
commit 2573a80893
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 62 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/src/api/class-locatorassertions.md
View File

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

4
docs/src/aria-snapshots.md
View File

@ -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:

2
packages/playwright/src/index.ts
View File

@ -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);
});

6
packages/playwright/src/matchers/toMatchAriaSnapshot.ts
View File

@ -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');

4
packages/playwright/types/test.d.ts vendored
View File

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

62
tests/playwright-test/aria-snapshot-file.spec.ts
View File

@ -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(\`<h1>hello world</h1>\`);
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(\`<h1>hello world</h1>\`);
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(\`<h1>hello world 2</h1>\`);
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(\`<h1>hello world</h1>\`);
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(\`<h1>hello world 2</h1>\`);
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(\`<h1>hello world</h1>\`);
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(\`<h1>hello world</h1>\`);
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(\`<h1>hello world</h1>\`);
await expect(page.locator('body')).toMatchAriaSnapshot({ name: 'test.snapshot.yml' });
await expect(page.locator('body')).toMatchAriaSnapshot({ name: 'test.aria.yml' });
});
`
});

42
tests/playwright-test/playwright.artifacts.spec.ts
View File

@ -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',
]);
});