Move tests to a package and simplify docker setup

Author: gabriellsh

.dockerignore

@@ -0,0 +1,21 @@
+name: Setup Playwright
+description: Setup Playwright for the runner
+
+runs:
+  using: 'composite'
+
+  steps:
+    - name: Cache Playwright binaries
+      uses: actions/cache@v5
+      id: cache-playwright
+      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.52.2
+
+    - name: Install Playwright
+      shell: bash
+      if: steps.cache-playwright.outputs.cache-hit != 'true'
+      working-directory: .
+      run: npx playwright install --with-deps

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

@@ -31,7 +31,24 @@ 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
+        if: steps.build-lint-test.outputs.success == 'true'
+        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/cd.yml

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

.github/workflows/ci-pr.yml

@@ -17,3 +17,4 @@ node_modules/
 **/bundle-report.html
 .env
 **/playwright-report
+**/test-results

.gitignore

@@ -11,8 +11,7 @@
     "changeset": "changeset",
     ".ci-build-lint": "yarn turbo run build lint build-storybook --cache-dir=\".turbo\"",
     ".ci-test": "yarn turbo run test",
-    ".ci-visual-regression": "yarn turbo run visual-regression-ci",
-    "ci": "yarn turbo run build lint test build-storybook visual-regression --cache-dir=\".turbo\"",
+    "ci": "yarn turbo run build lint test build-storybook --cache-dir=\".turbo\"",
     "clean": "yarn workspaces foreach -vA run clean",
     "docs": "yarn turbo run docs",
     "postinstall": "husky install",

package.json

@@ -23,9 +23,8 @@
     "/index.js"
   ],
   "scripts": {
-    "visual-regression-ci": "npx concurrently -k -s first -n \"SB,TEST\" \"npx http-server storybook-static -s -p 6006\" \"npx wait-on tcp:127.0.0.1:6006 && yarn playwright test\"",
-    "visual-regression-update": "npx concurrently -k -s first -n \"SB,TEST\" \"yarn storybook --ci\" \"npx wait-on tcp:127.0.0.1:6006 && ./scripts/run-playwright-docker.sh --update-snapshots\"",
-    "visual-regression": "npx concurrently -k -s first -n \"SB,TEST\" \"yarn storybook --ci\" \"npx wait-on tcp:127.0.0.1:6006 && ./scripts/run-playwright-docker.sh\"",
+    "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,10 +54,10 @@
     "@babel/plugin-transform-runtime": "~7.28.5",
     "@babel/preset-env": "~7.28.6",
     "@babel/preset-react": "~7.28.5",
-    "@playwright/test": "~1.58.1",
     "@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",

packages/fuselage/Dockerfile.playwright

@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+import { execSync } from 'child_process';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const toolRoot = path.resolve(__dirname, '..');
+const packageDir = process.cwd();
+
+const args = process.argv.slice(2);
+const updateSnapshots = args.includes('--update-snapshots')
+  ? '--update-snapshots'
+  : '';
+const buildDockerImage = args.includes('--build') ? '--build' : '';
+
+if (process.env.CI) {
+  execSync(
+    `npx -y concurrently -k -s first -n "SB,TEST" "npx -y http-server storybook-static -s -p 6006" "npx -y wait-on tcp:127.0.0.1:6006 && PACKAGE_DIR=${packageDir} yarn workspace @rocket.chat/visual-regression playwright test --config=${toolRoot}/playwright.config.ts ${updateSnapshots}"`,
+    { stdio: 'inherit', cwd: packageDir },
+    {
+      env: {
+        ...process.env,
+        PACKAGE_DIR: `${packageDir}`,
+      },
+    },
+  );
+} else {
+  execSync(
+    `npx -y concurrently -k -s first -n "SB,TEST" "yarn storybook -p 6006 --ci --host 0.0.0.0" "${toolRoot}/scripts/run-playwright-docker.sh ${updateSnapshots} ${buildDockerImage}"`,
+    {
+      stdio: 'inherit',
+      cwd: packageDir,
+      env: { ...process.env, PACKAGE_DIR: packageDir },
+    },
+  );
+}