Playwright config update, move snapshots to their own folder (#1334)

Author: renrizzolo

playwright.config.ts

@@ -1,9 +1,9 @@
-import { PlaywrightTestConfig, devices } from '@playwright/test';
+import { PlaywrightTestConfig, defineConfig } from '@playwright/test';
 
 // Prevent Vite from attempting to clear the screen
 process.stdout.isTTY = false;
 
-const config: PlaywrightTestConfig = {
+const config: PlaywrightTestConfig = defineConfig({
   testMatch: '**/*.playwright.ts',
   updateSnapshots: 'none',
   expect: {
@@ -12,6 +12,10 @@ const config: PlaywrightTestConfig = {
       maxDiffPixelRatio: 0.02,
     },
   },
+  snapshotDir: 'tests/e2e/snapshots',
+  // put all snapshots in one directory
+  // https://playwright.dev/docs/api/class-testconfig#test-config-snapshot-path-template
+  snapshotPathTemplate: '{snapshotDir}/{arg}-{projectName}-{platform}{ext}',
   projects: [
     {
       name: 'Desktop - Chromium',
@@ -42,6 +46,8 @@ const config: PlaywrightTestConfig = {
       // test name. We omit the project name here to keep snapshot names tidy.
       name: '',
       grep: /@agnostic/,
+      // put css snapshots in test filename subdirectories
+      snapshotPathTemplate: '{testFileDir}/{testFileName}-snapshots/{arg}{ext}',
       use: {
         browserName: 'chromium',
         channel: 'chrome',
@@ -52,6 +58,6 @@ const config: PlaywrightTestConfig = {
       },
     },
   ],
-};
+});
 
 export default config;

tests/e2e/fixture.ts

@@ -2,7 +2,6 @@ import { test as base } from '@playwright/test';
 
 type TestFixtures = {
   port: number;
-  _autoSnapshotSuffix: void;
 };
 
 let testCounter = 0;
@@ -12,18 +11,6 @@ const test = base.extend<TestFixtures>({
     const portRange = 100 * workerInfo.workerIndex;
     await use(9000 + portRange + testCounter++);
   },
-
-  // Workaround from https://github.com/microsoft/playwright/issues/11134
-  // Removes the platform suffix from platform agnostic snapshots.
-  _autoSnapshotSuffix: [
-    async ({}, use, testInfo) => {
-      if (testInfo.title.includes('@agnostic')) {
-        testInfo.snapshotSuffix = '';
-      }
-      await use();
-    },
-    { auto: true },
-  ],
 });
 
 export default test;