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

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

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:

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

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

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

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(\`<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' });
       });
     `
   });

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