chore(tests): visual regression tests for post-header

.github/workflows/visual-tests.yaml

@@ -0,0 +1,91 @@
+name: Visual Regression Tests
+
+on:
+  pull_request:
+    paths:
+      - 'packages/components/**'
+  push:
+    branches:
+      - main
+    paths:
+      - 'packages/components/**'
+  workflow_dispatch:
+    inputs:
+      update-snapshots:
+        description: 'Force update visual snapshots'
+        type: boolean
+        default: false
+
+permissions:
+  contents: read
+  actions: read
+  pull-requests: read
+
+jobs:
+  visual-tests-components:
+    name: Visual Tests - Components
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
+        with:
+          fetch-depth: 0
+
+      - name: Setup
+        uses: ./.github/actions/setup-pnpm
+
+      - name: Install dependencies and build packages
+        run: pnpm bootstrap
+
+      - name: Install Playwright browsers
+        working-directory: packages/components
+        run: npx playwright install --with-deps
+
+      - name: Get baseline snapshots from cache
+        id: snapshot-cache
+        uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684
+        with:
+          path: packages/components/visual-tests/__screenshots__
+          key: visual-snapshots-main-${{ hashFiles('packages/components/src/**/*.{tsx,ts,scss}') }}
+          restore-keys: |
+            visual-snapshots-main-
+
+      - name: Generate baseline snapshots
+        if: |
+          (github.ref == 'refs/heads/main' && steps.snapshot-cache.outputs.cache-hit != 'true') ||
+          github.event.inputs.update-snapshots == 'true'
+        working-directory: packages/components
+        run: pnpm test:visual:update
+
+      - name: Optimize PNG screenshots
+        if: |
+          (github.ref == 'refs/heads/main' && steps.snapshot-cache.outputs.cache-hit != 'true') ||
+          github.event.inputs.update-snapshots == 'true'
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y pngquant
+          find packages/components/visual-tests/__screenshots__ -name "*.png" -exec pngquant --force --ext .png --quality 80-95 {} \;
+
+      - name: Run visual regression tests
+        working-directory: packages/components
+        run: pnpm test:visual
+
+      - name: Upload test results
+        if: always()
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02
+        with:
+          name: playwright-report-components
+          path: packages/components/test-results
+          retention-days: 14
+
+      - name: Upload diff screenshots
+        if: failure()
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02
+        with:
+          name: playwright-screenshots-components
+          path: |
+            packages/components/test-results/**/*-diff.png
+            packages/components/test-results/**/*-actual.png
+            packages/components/test-results/**/*-expected.png
+          retention-days: 14

package.json

@@ -48,6 +48,12 @@
     "components:lint": "pnpm --filter design-system-components lint",
     "components:lint:fix": "pnpm --filter design-system-components lint:fix",
     "components:generate": "pnpm --filter design-system-components generate",
+    "components:visual": "pnpm --filter design-system-components build && pnpm --filter design-system-components test:visual",
+    "components:visual:update": "pnpm --filter design-system-components build && pnpm --filter design-system-components test:visual:update",
+    "components:visual:ui": "pnpm --filter design-system-components build && pnpm --filter design-system-components test:visual:ui",
+    "components:visual:chrome": "pnpm --filter design-system-components build && pnpm --filter design-system-components test:visual:chrome",
+    "components:visual:firefox": "pnpm --filter design-system-components build && pnpm --filter design-system-components test:visual:firefox",
+    "components:visual:safari": "pnpm --filter design-system-components build && pnpm --filter design-system-components test:visual:safari",
     "components-angular": "pnpm components-angular:start",
     "components-angular:start": "pnpm --filter design-system-components-angular-workspace start",
     "components-angular:build": "pnpm --filter design-system-components-angular-workspace build",

packages/components/.gitignore

@@ -28,3 +28,17 @@ $RECYCLE.BIN/
 Thumbs.db
 UserInterfaceState.xcuserstate
 .env
+
+test-results/
+test-results-*
+playwright-report/
+
+**/visual-tests/__screenshots__/**/*-actual.png
+**/visual-tests/__screenshots__/**/*-diff.png
+**/visual-tests/__screenshots__/**/*-expected.png
+**/visual-tests/__screenshots__/
+**/visual-tests/components/post-header-*.html
+
+/playwright/.cache/
+playwright/.auth/
+*.tsbuildinfo

packages/components/package.json

@@ -80,6 +80,13 @@
     "e2e:ci": "xvfb-run -a cypress run --browser chrome",
     "lint": "eslint",
     "lint:fix": "eslint --fix",
+    "generate:header-html": "node visual-tests/generate-header-html.js",
+    "test:visual": "npm run generate:header-html && playwright test",
+    "test:visual:update": "npm run generate:header-html && playwright test --update-snapshots",
+    "test:visual:ui": "npm run generate:header-html && playwright test --ui",
+    "test:visual:chrome": "npm run generate:header-html && playwright test --project=chromium",
+    "test:visual:firefox": "npm run generate:header-html && playwright test --project=firefox",
+    "test:visual:safari": "npm run generate:header-html && playwright test --project=webkit",
     "generate": "stencil generate",
     "prebuild:script": "node --loader ts-node/esm prebuild.ts",
     "copy:component-names": "copyfiles -f src/_generated/component-names.json dist/",
@@ -117,6 +124,8 @@
     "eslint-plugin-cypress": "4.2.0",
     "eslint-plugin-react": "7.37.5",
     "globals": "16.0.0",
+    "@playwright/test": "1.56.1",
+    "http-server": "14.1.1",
     "memfs": "4.51.0",
     "prettier": "3.6.2",
     "replace": "1.2.2",
@@ -137,4 +146,4 @@
     "ui",
     "frontend"
   ]
-}
+}

packages/components/playwright.config.ts

@@ -0,0 +1,55 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './visual-tests',
+  timeout: 30000,
+
+  expect: {
+    toHaveScreenshot: {
+      threshold: 0.2,
+    }
+  },
+
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+
+  reporter: [
+    ['html', { outputFolder: 'test-results/html-report' }],
+    ['list']
+  ],
+
+  snapshotPathTemplate: '{testDir}/__screenshots__/{projectName}/{testFilePath}/{arg}{ext}',
+
+  outputDir: 'test-results/artifacts',
+
+  use: {
+    baseURL: 'http://localhost:9300',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure',
+  },
+
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+  ],
+
+  webServer: {
+    command: 'npx http-server . -p 9300',
+    url: 'http://localhost:9300',
+    reuseExistingServer: true,
+    timeout: 60000,
+  },
+});

packages/components/stencil.config.ts

@@ -142,6 +142,7 @@ export const config: Config = {
       '<rootDir>/hydrate/',
       '<rootDir>/www/',
       '<rootDir>/cypress',
+      '<rootDir>/visual-tests',
     ],
   },
 };

packages/components/tsconfig.eslint.json

@@ -3,5 +3,5 @@
   "compilerOptions": {
     "noEmit": true
   },
-  "include": ["prebuild.ts", "prebuild.spec.ts", ".config/*", "cypress", "src", "types"]
+  "include": ["prebuild.ts", "prebuild.spec.ts", ".config/*", "cypress", "src", "types", "playwright.config.ts", "visual-tests"]
 }

packages/components/tsconfig.json

@@ -28,6 +28,6 @@
     "resolveJsonModule": true,
     "skipLibCheck": true
   },
-  "include": [".config/*", "src", "types", "prebuild.spec.ts"],
+  "include": ["prebuild.ts", "prebuild.spec.ts", ".config/*", "src", "types", "visual-tests/**/*", "playwright.config.ts"],
   "exclude": ["node_modules"]
 }