feat: Visual Regression Testing

.github/actions/setup-playwright/action.yml

@@ -0,0 +1,31 @@
+name: Setup Playwright
+description: Setup Playwright for the runner
+
+runs:
+  using: 'composite'
+
+  steps:
+    - name: Cache Playwright binaries
+      uses: actions/cache/restore@v5
+      id: cache-playwright-restore
+      with:
+        path: |
+          ~/.cache/ms-playwright
+        # This is the version of Playwright that we are using, if you are willing to upgrade, you should update this.
+        key: playwright-${{ runner.arch }}-${{ runner.os }}-1.58.2
+
+    - name: Install Playwright
+      id: install-playwright
+      shell: bash
+      if: steps.cache-playwright-restore.outputs.cache-hit != 'true'
+      working-directory: .
+      run: npx playwright install --with-deps
+
+    - name: Cache Playwright binaries
+      uses: actions/cache/save@v5
+      if: steps.install-playwright.outputs.success == 'true'
+      id: cache-playwright-save
+      with:
+        path: |
+          ~/.cache/ms-playwright
+        key: playwright-${{ runner.arch }}-${{ runner.os }}-1.58.2

.github/workflows/cd.yml

@@ -31,7 +31,23 @@ jobs:
           key: ${{ runner.os }}-modules-${{ hashFiles('yarn.lock') }}
       - run: yarn
         if: steps.yarn-cache.outputs.cache-hit != 'true'
-      - run: yarn run ci
+      - name: Build, lint and test
+        id: build-lint-test
+        run: yarn run ci
+
+      - name: Setup Playwright
+        uses: ./.github/actions/setup-playwright
+
+      - name: Visual regression
+        id: visual-regression
+        run: yarn turbo run visual-regression --cache-dir=".turbo" --concurrency=1
+
+      - uses: actions/upload-artifact@v7
+        if: failure()
+        with:
+          name: playwright-visual-results
+          path: '**/test-results'
+
       - run: yarn run docs
       - uses: actions/upload-artifact@v7
         with:

.github/workflows/ci-pr.yml

@@ -41,8 +41,26 @@ jobs:
             turbo-${{ runner.os }}-
       - run: yarn
         if: steps.yarn-cache.outputs.cache-hit != 'true'
-      - run: yarn run ci
-      - uses: actions/upload-artifact@v7
+
+      - name: Build, lint and test
+        id: build-lint-test
+        run: yarn run ci
+
+      - name: Setup Playwright
+        uses: ./.github/actions/setup-playwright
+      - name: Visual regression
+        id: visual-regression
+        run: yarn turbo run visual-regression --cache-dir=".turbo" --concurrency=1
+
+      - name: Upload visual-regression results
+        uses: actions/upload-artifact@v7
+        if: failure()
+        with:
+          name: 'playwright-visual-results-${{ github.event.number }}'
+          path: '**/test-results'
+
+      - name: Upload storybooks
+        uses: actions/upload-artifact@v7
         with:
           name: 'storybooks-${{ github.event.number }}'
           path: |

.gitignore

@@ -16,3 +16,5 @@ node_modules/
 **/.storybook/jest-results.json
 **/bundle-report.html
 .env
+**/playwright-report
+**/test-results

package.json

@@ -9,6 +9,8 @@
     "build": "yarn turbo run build",
     "build-storybook": "yarn turbo run build-storybook --cache-dir=\".turbo\"",
     "changeset": "changeset",
+    ".ci-build-lint": "yarn turbo run build lint build-storybook --cache-dir=\".turbo\"",
+    ".ci-test": "yarn turbo run test",
     "ci": "yarn turbo run build lint test build-storybook --cache-dir=\".turbo\"",
     "clean": "yarn workspaces foreach -vA run clean",
     "docs": "yarn turbo run docs",

packages/fuselage/.gitignore

@@ -2,3 +2,4 @@
 /dist
 /storybook-static
 /bundle-report*.html
+/test-results

packages/fuselage/jest.config.ts

@@ -3,6 +3,10 @@ import type { Config } from 'jest';
 export default {
   preset: 'ts-jest',
   testEnvironment: 'jsdom',
+  testMatch: [
+    '<rootDir>/src/**/*.spec.{ts,tsx}',
+    '!**/visualRegression.spec.ts',
+  ],
   setupFilesAfterEnv: [
     '<rootDir>/jest-setup.ts',
     'testing-utils/setup/noErrorsLogged',

packages/fuselage/package.json

@@ -23,6 +23,8 @@
     "/index.js"
   ],
   "scripts": {
+    "visual-regression": "visual-regression",
+    "visual-regression-update": "visual-regression --update-snapshots",
     "start": "webpack --watch --mode development",
     "storybook": "storybook dev -p 6006 --no-version-updates",
     "build": "run-s .:build:clean .:build:dev .:build:prod",
@@ -55,6 +57,7 @@
     "@rocket.chat/fuselage-hooks": "workspace:~",
     "@rocket.chat/icons": "workspace:~",
     "@rocket.chat/storybook-dark-mode": "workspace:~",
+    "@rocket.chat/visual-regression": "workspace:~",
     "@storybook/addon-a11y": "~9.1.17",
     "@storybook/addon-docs": "~9.1.17",
     "@storybook/addon-links": "~9.1.17",