enable chromatic<>playwright instegration

Author: pettinarip

.github/workflows/chromatic.yml

@@ -2,7 +2,6 @@
 
 # Workflow name
 name: Chromatic Publish and Testing
-
 # Event for the workflow
 on:
   pull_request:
@@ -18,6 +17,10 @@ on:
       - ".storybook/**/*"
       - "tailwind.config.ts"
       - "src/styles/**/*"
+    branches-ignore:
+      - "master"
+      - "staging"
+      - "e2e-tests" # TODO: remove e2e-tests (testing branch)
 
 # List of jobs
 jobs:
@@ -39,7 +42,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 20
-          cache: 'pnpm'
+          cache: "pnpm"
       - name: Install deps
         # 👇 Install dependencies with the same package manager used in the project (replace it as needed), e.g. yarn, npm, pnpm
         run: pnpm install

.github/workflows/playwright.yml

@@ -5,7 +5,7 @@ on:
   pull_request:
     branches: [master, staging, e2e-tests] # TODO: remove e2e-tests (testing branch)
 jobs:
-  test:
+  playwright:
     runs-on: ubuntu-latest
     env:
       CI: true
@@ -48,3 +48,33 @@ jobs:
           name: playwright-report
           path: tests/e2e/__report__/
           retention-days: 7
+
+  chromatic:
+    name: Run Chromatic
+    needs: playwright
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22.12.0
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Download Playwright test results
+        uses: actions/download-artifact@v4
+        with:
+          name: playwright-report
+          path: tests/e2e/__report__/
+
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          playwright: true
+          projectToken: fee8e66c9916
+        env: CHROMATIC_ARCHIVE_LOCATION=tests/e2e/__results__

.gitignore

@@ -63,4 +63,5 @@ src/data/crowdin/bucketsAwaitingReviewReport.csv
 
 # Storybook
 build-storybook.log
+build-archive.log
 storybook-static

package.json

@@ -16,7 +16,7 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "build-storybook:chromatic": "storybook build --test",
-    "chromatic": "chromatic --project-token fee8e66c9916",
+    "chromatic": "CHROMATIC_ARCHIVE_LOCATION=tests/e2e/__results__ chromatic --project-token fee8e66c9916",
     "crowdin-clean": "rm -rf .crowdin && mkdir .crowdin",
     "crowdin-import": "ts-node src/scripts/crowdin-import.ts",
     "markdown-checker": "ts-node -O '{ \"module\": \"commonjs\" }' src/scripts/markdownChecker.ts",
@@ -97,6 +97,7 @@
     "yaml-loader": "^0.8.0"
   },
   "devDependencies": {
+    "@chromatic-com/playwright": "^0.12.4",
     "@chromatic-com/storybook": "1.5.0",
     "@netlify/plugin-nextjs": "^5.10.0",
     "@playwright/test": "^1.52.0",
@@ -121,8 +122,9 @@
     "@typescript-eslint/eslint-plugin": "^6.19.0",
     "@typescript-eslint/parser": "^6.19.0",
     "autoprefixer": "^10.4.19",
-    "chromatic": "10.9.6",
+    "chromatic": "12.0.0",
     "decompress": "^4.2.1",
+    "dotenv": "^16.5.0",
     "eslint": "^8.45.0",
     "eslint-config-next": "^14.2.2",
     "eslint-config-prettier": "9.1.0",

playwright.config.ts

@@ -1,21 +1,23 @@
+import type { ChromaticConfig } from "@chromatic-com/playwright"
 import { defineConfig, devices } from "@playwright/test"
 
 import "dotenv/config"
 
-export default defineConfig({
+export default defineConfig<ChromaticConfig>({
   testDir: "./tests/e2e",
   outputDir: "./tests/e2e/__results__",
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
   workers: process.env.CI ? 1 : undefined,
-  reporter: process.env.CI
-    ? "dot"
-    : [["html", { outputFolder: "./tests/e2e/__report__" }]],
+  reporter: [["html", { outputFolder: "./tests/e2e/__report__" }]],
   use: {
     baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL || "http://localhost:3000",
     trace: "on-first-retry",
     screenshot: "only-on-failure",
+
+    // chromatic settings
+    disableAutoSnapshot: true,
   },
   projects: [
     /* Test against desktop browsers */