Update Playwright configuration to conditionally use Chromatic reporter in CI and adjust GitHub Actions workflow for test results directory structure

Author: cheungaryk

.github/workflows/chromatic.yml

@@ -16,7 +16,7 @@ jobs:
         # ⚠️ See your package manager's documentation for the correct command to install dependencies in a CI environment.
         run: npm ci
       - name: Create test results directory
-        run: mkdir -p test-results
+        run: mkdir -p test-results/chromatic-archives
       - name: Run Playwright tests
         run: |
           # Create Docker config directory to avoid permission warning
@@ -53,10 +53,15 @@ jobs:
         with:
           name: test-results
           path: ./test-results
+      - name: Create chromatic-archives directory if missing
+        run: |
+          mkdir -p ./test-results/chromatic-archives
+          # List contents to debug
+          ls -la ./test-results/ || echo "test-results directory is empty or missing"
       - name: Run Chromatic
         uses: chromaui/action@latest
         with:
           playwright: true
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
         env:
-          CHROMATIC_ARCHIVE_LOCATION: ./test-results
+          CHROMATIC_ARCHIVE_LOCATION: ./test-results/chromatic-archives

playwright.config.js

@@ -15,11 +15,17 @@ module.exports = defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: [
-    ['html'],
-    ['json', { outputFile: 'test-results/results.json' }],
-    ['junit', { outputFile: 'test-results/junit.xml' }]
-  ],
+  reporter: process.env.CI
+    ? [
+        ['@chromatic-com/playwright', { outputDir: 'test-results/chromatic-archives' }],
+        ['json', { outputFile: 'test-results/results.json' }],
+        ['junit', { outputFile: 'test-results/junit.xml' }]
+      ]
+    : [
+        ['html'],
+        ['json', { outputFile: 'test-results/results.json' }],
+        ['junit', { outputFile: 'test-results/junit.xml' }]
+      ],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */