[DRAFT] chore: update build config and CI/CD

.commitlintrc.json

@@ -2,6 +2,7 @@
 	"extends": ["@commitlint/config-conventional"],
 	"rules": {
 		"type-enum": [2, "always", ["ci", "chore", "docs", "feat", "fix", "perf", "refactor", "revert", "test"]],
-		"body-max-line-length": [2, "always", 500]
+		"body-max-line-length": [2, "always", 500],
+		"header-max-length": [2, "always", 200]
 	}
 }

.github/actions/upload-test-artifacts/action.yaml

@@ -37,3 +37,10 @@ runs:
               name: playwright-test-results-${{ inputs.browser }}-${{ inputs.run-id }}
               path: test-results/
               retention-days: 2
+
+        - name: Upload Connection Test Data
+          uses: actions/upload-artifact@v4
+          with:
+              name: connection-test-data-${{ inputs.browser }}-${{ inputs.run-id }}
+              path: e2e/fixtures/connectionsTestCases.json
+              retention-days: 2

.github/workflows/build_test_and_release.yml

@@ -142,9 +142,10 @@ jobs:
       - name: Run Playwright tests
         env:
           TESTS_JWT_AUTH_TOKEN: ${{ secrets.TESTS_JWT_AUTH_TOKEN }}
+          VITE_DESCOPE_PROJECT_ID: ${{ secrets.VITE_DESCOPE_PROJECT_ID }}
           VITE_DISPLAY_CHATBOT: true
           CI: true
-        run: npx playwright test --project=${{ matrix.browser }}
+        run: npx playwright test ${{ env.TEST_FILE || '' }} --project=${{ matrix.browser }}
 
       - name: Upload test artifacts
         if: always()
@@ -157,7 +158,6 @@ jobs:
     name: 🎨 Visual Regression Tests
     needs: setup
     runs-on: ubuntu-latest
-    if: false # Temporarily disabled
     timeout-minutes: 30
     continue-on-error: true
 
@@ -206,14 +206,15 @@ jobs:
       - name: Run visual regression tests
         env:
           TESTS_JWT_AUTH_TOKEN: ${{ secrets.TESTS_JWT_AUTH_TOKEN }}
+          VITE_DESCOPE_PROJECT_ID: ${{ secrets.VITE_DESCOPE_PROJECT_ID }}
           VITE_DISPLAY_CHATBOT: true
         run: npx playwright test project/connections/buttonPresence.visual.spec.ts --project="Visual Regression" --workers=1
 
       - name: Upload visual regression artifacts
         if: always()
         uses: actions/upload-artifact@v4
         with:
-          name: visual-regression-results
+          name: visual-regression-results-${{ github.run_id }}
           path: |
             test-results/
             playwright-report/
@@ -253,15 +254,14 @@ jobs:
         run: |
           git submodule update --remote
           npm run type-check
-          npm run generate:connection-test-data
           npm run lint:ci
           npm run build
           echo '!dist' >> .gitignore
 
       - name: Upload Built Files
         uses: actions/upload-artifact@v4
         with:
-          name: built-files
+          name: built-files-${{ github.run_id }}
           path: dist
 
   release:
@@ -281,7 +281,7 @@ jobs:
 
       - uses: actions/download-artifact@v4
         with:
-          name: built-files
+          name: built-files-${{ github.run_id }}
           path: ./dist
 
       - name: Create ZIP of the dist directory

.gitignore

@@ -25,10 +25,18 @@ dist-ssr
 .vscode/mcp.json
 
 .env
+
+# Playwright Test Results
 /test-results/
 /playwright-report/
-/blob-report/
 /playwright/.cache/
+/blob-report/
+
+# Playwright Test Results Docker Visual Regression
+.cache/dconf
+.config/google-chrome
+.pki
+
 
 # Sentry Config File
 
@@ -57,3 +65,7 @@ directory_contents.json
 # ACT Run github workflows locally
 .vars
 .secrets
+
+# npm
+.npm-docker-cache
+.npm

.husky/pre-commit

@@ -8,7 +8,6 @@ if [ -z "$all_staged_files" ]; then
     exit 0
 fi
 
-
 # ===========================================
 # Lint-staged Check
 # ===========================================

package.json

@@ -10,22 +10,20 @@
 		"fetch-templates": "node scripts/fetchTemplates",
 		"clear-playwright-cache": "rm -rf ~/.cache/ms-playwright playwright-report .playwright",
 		"generate-interfaces-manifest": "node scripts/generateInterfacesManifest",
-		"generate:connection-test-data": "if [ \"$VITE_RUN_VISUAL_REGRESSION_TESTS\" = \"true\" ]; then tsx scripts/generateConnectionTestData.ts; fi",
+		"generate:connection-test-data": "tsx scripts/generateConnectionTestData.ts",
 		"dev": "vite",
 		"generate-project-files-index": "node generateProjectFilesIndex.js && eslint --fix src/assets/templates/index.ts",
 		"lint": "eslint",
 		"lint:fix": "npm run lint -- --fix",
 		"lint:ci": "npm run lint -- --rule 'prettier/prettier: off'",
-		"pretest:e2e": "npm run generate:connection-test-data",
-		"pretest:e2e:ui": "npm run generate:connection-test-data",
 		"postinstall": "husky",
 		"prepare": "husky install",
 		"preview": "vite preview",
 		"react-icons:preview": "open https://react-icons.github.io/react-icons/",
 		"storybook": "storybook dev",
 		"storybook-docs": "storybook dev --docs",
 		"tailwind-config-viewer": "tailwind-config-viewer -o --config tailwind.config.cjs",
-		"test:e2e": "playwright test",
+		"test:e2e": "npm run generate:connection-test-data && playwright test",
 		"test:e2e:rate-limited": "E2E_RATE_LIMIT_DELAY=2000 playwright test",
 		"test:e2e:rate-limited:serial": "E2E_RATE_LIMIT_DELAY=2000 playwright test --workers=1 --project=Chrome",
 		"test:e2e:by-name": "node scripts/runTestByName.mjs",
@@ -42,30 +40,18 @@
 		"test:e2e:safari": "playwright test --project=Safari --reporter=line",
 		"test:e2e:edge": "playwright test --project=Edge --reporter=line",
 		"test:e2e:visual": "npm run generate:connection-test-data && playwright test --project=\"Visual Regression\"",
-		"test:e2e:visual:update": "npm run test:e2e:visual -- --update-snapshots",
-		"test:e2e:visual:serial": "npm run test:e2e:visual -- --workers=1",
-		"test:e2e:visual:serial:update": "npm run test:e2e:visual:serial -- --update-snapshots",
+		"test:e2e:visual:update": "npm run generate:connection-test-data && playwright test --project=\"Visual Regression\" --update-snapshots",
+		"test:e2e:visual:serial": "npm run generate:connection-test-data && playwright test --project=\"Visual Regression\" --workers=1",
+		"test:e2e:visual:serial:update": "npm run generate:connection-test-data && playwright test --project=\"Visual Regression\" --workers=1 --update-snapshots",
+		"test:e2e:visual:docker": "node scripts/e2e/docker-visual.mjs",
 		"test:e2e:report": "npx playwright show-report",
-		"test:e2e:act": "act --workflows .github/workflows/build_test_and_release.yml --job test --secret-file .secrets --var-file .vars --platform ubuntu-latest=catthehacker/ubuntu:act-latest --matrix \"browser:Chrome\" --container-options \"--privileged\"",
-		"test:e2e:act:logs": "act --workflows .github/workflows/build_test_and_release.yml --job test --secret-file .secrets --var-file .vars --platform ubuntu-latest=catthehacker/ubuntu:act-latest --matrix \"browser:Chrome\" --container-options \"--privileged\" --verbose",
-		"test:e2e:act:logs:keep": "act --workflows .github/workflows/build_test_and_release.yml --job test --secret-file .secrets --var-file .vars --platform ubuntu-latest=catthehacker/ubuntu:act-latest --matrix \"browser:Chrome\" --container-options \"--privileged\" --verbose --reuse",
-		"test:e2e:act:debug": "act --workflows .github/workflows/build_test_and_release.yml --job test --secret-file .secrets --var-file .vars --platform ubuntu-latest=catthehacker/ubuntu:act-latest --matrix \"browser:Chrome\" --container-options \"--privileged\" --debug",
-		"test:e2e:act:debug:keep": "act --workflows .github/workflows/build_test_and_release.yml --job test --secret-file .secrets --var-file .vars --platform ubuntu-latest=catthehacker/ubuntu:act-latest --matrix \"browser:Chrome\" --container-options \"--privileged\" --debug --reuse",
-		"test:e2e:act:chrome": "act --workflows .github/workflows/build_test_and_release.yml --job test --secret-file .secrets --var-file .vars --platform ubuntu-latest=catthehacker/ubuntu:act-latest --matrix \"browser:Chrome\" --container-options \"--privileged\"",
-		"test:e2e:act:firefox": "act --workflows .github/workflows/build_test_and_release.yml --job test --secret-file .secrets --var-file .vars --platform ubuntu-latest=catthehacker/ubuntu:act-latest --matrix \"browser:Firefox\" --container-options \"--privileged\"",
-		"test:e2e:act:safari": "act --workflows .github/workflows/build_test_and_release.yml --job test --secret-file .secrets --var-file .vars --platform ubuntu-latest=catthehacker/ubuntu:act-latest --matrix \"browser:Safari\" --container-options \"--privileged\"",
-		"test:e2e:act:edge": "act --workflows .github/workflows/build_test_and_release.yml --job test --secret-file .secrets --var-file .vars --platform ubuntu-latest=catthehacker/ubuntu:act-latest --matrix \"browser:Edge\" --container-options \"--privileged\"",
-		"test:e2e:act:chrome:logs": "act --workflows .github/workflows/build_test_and_release.yml --job test --secret-file .secrets --var-file .vars --platform ubuntu-latest=catthehacker/ubuntu:act-latest --matrix \"browser:Chrome\" --container-options \"--privileged\" --verbose",
-		"test:e2e:act:firefox:logs": "act --workflows .github/workflows/build_test_and_release.yml --job test --secret-file .secrets --var-file .vars --platform ubuntu-latest=catthehacker/ubuntu:act-latest --matrix \"browser:Firefox\" --container-options \"--privileged\" --verbose",
-		"test:e2e:act:safari:logs": "act --workflows .github/workflows/build_test_and_release.yml --job test --secret-file .secrets --var-file .vars --platform ubuntu-latest=catthehacker/ubuntu:act-latest --matrix \"browser:Safari\" --container-options \"--privileged\" --verbose",
-		"test:e2e:act:edge:logs": "act --workflows .github/workflows/build_test_and_release.yml --job test --secret-file .secrets --var-file .vars --platform ubuntu-latest=catthehacker/ubuntu:act-latest --matrix \"browser:Edge\" --container-options \"--privileged\" --verbose",
-		"test:e2e:ui": "npx playwright test --ui",
+		"test:e2e:act": "node scripts/e2e/act.mjs",
+		"test:e2e:ui": "npm run generate:connection-test-data && npx playwright test --ui",
 		"test": "vitest",
 		"test:run": "vitest run",
 		"test:ui": "vitest --ui",
 		"tsc": "tsc",
-		"pretype-check": "npm run generate:connection-test-data",
-		"type-check": "tsc --pretty --noEmit",
+		"type-check": "npm run generate:connection-test-data && tsc --pretty --noEmit",
 		"validate-rules": "node scripts/validateRuleConsistency.mjs"
 	},
 	"dependencies": {
@@ -231,4 +217,4 @@
 		"rimraf": "^4.0.0",
 		"micromatch": "^4.0.8"
 	}
-}
+}

playwright.config.ts

@@ -1,11 +1,10 @@
 import { PlaywrightTestOptions, defineConfig, devices } from "@playwright/test";
 import dotenv from "dotenv";
+import path from "path";
+
+const visualRegression = process.env.DOCKER_VISUAL_REGRESSION === "true";
 
 dotenv.config();
-/**
- * Read environment variables from file.
- * https://github.com/motdotla/dotenv
- */
 
 const extraHTTPHeaders: PlaywrightTestOptions["extraHTTPHeaders"] | undefined = process.env.TESTS_JWT_AUTH_TOKEN
 	? { Authorization: `Bearer ${process.env.TESTS_JWT_AUTH_TOKEN}` }
@@ -17,22 +16,49 @@ const previewPort = process.env.VITE_PREVIEW_PORT
 		? parseInt(process.env.VITE_LOCAL_PORT)
 		: 8000;
 
-/**
- * See https://playwright.dev/docs/test-configuration.
- */
+const snapshotDir = process.env.SNAPSHOT_DIR;
+
+const getSnapshotPath = (): string => {
+	if (snapshotDir) {
+		const absoluteSnapshotDir = path.isAbsolute(snapshotDir)
+			? snapshotDir
+			: path.resolve(process.cwd(), snapshotDir);
+
+		return `${absoluteSnapshotDir}/{testFileDir}/{testFileName}-snapshots/{arg}{ext}`;
+	}
+
+	return "{testDir}/{testFileDir}/{testFileName}-snapshots/{arg}{ext}";
+};
+
+const visualRegressionConfig = {
+	browserName: "chromium" as const,
+	timezoneId: "UTC",
+	locale: "en-US",
+	colorScheme: "light" as const,
+	reducedMotion: "reduce" as const,
+	video: "on" as const,
+	trace: "on" as const,
+	screenshot: "on" as const,
+	launchOptions: {
+		args: [
+			"--disable-gpu",
+			"--disable-dev-shm-usage",
+			"--disable-accelerated-2d-canvas",
+			"--no-sandbox",
+			"--disable-setuid-sandbox",
+			"--font-render-hinting=none",
+			"--disable-lcd-text",
+			"--disable-font-subpixel-positioning",
+		],
+	},
+	...devices["Desktop Chrome"],
+};
+
 export default defineConfig({
-	/* Fail the build on CI if you accidentally left test.only in the source code. */
 	forbidOnly: !!process.env.CI,
+	workers: 1,
 
-	workers: process.env.CI ? 1 : 2,
-
-	/* Configure projects for major browsers */
 	projects: [
-		// {
-		// 	name: "chromium",
-		// 	use: { ...devices["Desktop Chrome"] },
-		// },
-
 		{
 			name: "Firefox",
 			use: { ...devices["Desktop Firefox"] },
@@ -45,15 +71,6 @@ export default defineConfig({
 			testIgnore: /.*\.visual\.spec\.ts/,
 		},
 
-		// {
-		// 	name: "Mobile Chrome",
-		// 	use: { ...devices["Pixel 5"] },
-		// },
-		// {
-		// 	name: "Mobile Safari",
-		// 	use: { ...devices["iPhone 12"] },
-		// },
-
 		{
 			name: "Edge",
 			use: { ...devices["Desktop Edge"], channel: "msedge" },
@@ -67,10 +84,7 @@ export default defineConfig({
 		{
 			name: "Visual Regression",
 			testMatch: /.*\.visual\.spec\.ts/,
-			use: {
-				...devices["Desktop Chrome"],
-				channel: "chrome",
-			},
+			use: visualRegressionConfig,
 		},
 	],
 
@@ -94,15 +108,14 @@ export default defineConfig({
 		timeout: 5000,
 		/* Threshold for visual comparison (0-1, where 0 is exact match) */
 		toHaveScreenshot: {
-			maxDiffPixels: 100,
-			maxDiffPixelRatio: 0.01,
+			maxDiffPixels: 500,
+			maxDiffPixelRatio: 0.05,
 			threshold: 0.3,
 			animations: "disabled",
 		},
 	},
 
-	/* Use platform-agnostic snapshot names */
-	snapshotPathTemplate: "{testDir}/{testFileDir}/{testFileName}-snapshots/{arg}{ext}",
+	snapshotPathTemplate: getSnapshotPath(),
 
 	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
 	use: {
@@ -121,11 +134,11 @@ export default defineConfig({
 	},
 
 	webServer: {
-		command: `npm run build && npm run preview`,
-		port: previewPort,
+		command: "npm run dev",
+		url: "http://127.0.0.1:8000",
 		reuseExistingServer: !process.env.CI,
 		stderr: "pipe",
 		stdout: "pipe",
-		timeout: 2 * 60 * 1000, // 120,000 ms = 2 minutes
+		timeout: visualRegression ? 5 * 60 * 1000 : 2 * 60 * 1000, // 120,000 ms = 2 minutes (build can take time in Docker)
 	},
 });