chore(tests): visual regression testing POC

.github/workflows/visual-tests.yaml

@@ -0,0 +1,75 @@
+name: Visual Regression Tests
+on:
+  pull_request:
+    paths:
+      - 'packages/styles/**'
+  workflow_dispatch:
+    inputs:
+      update-snapshots:
+        description: 'Update visual snapshots'
+        type: boolean
+        default: false
+
+permissions:
+  contents: read
+  actions: read
+  pull-requests: read
+
+jobs:
+  visual-tests:
+    name: Visual Tests
+    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/styles
+        run: npx playwright install --with-deps
+
+      - name: Get snapshot cache
+        id: snapshot-cache
+        uses: actions/cache@5a3ec84eff668545956fd18022155c47e93e2684
+        with:
+          path: packages/styles/tests/visual/__screenshots__
+          key: visual-snapshots-${{ github.ref }}
+          restore-keys: |
+            visual-snapshots-refs/heads/main
+
+      - name: Update Snapshots
+        if: github.event.inputs.update-snapshots == 'true' || steps.snapshot-cache.outputs.cache-hit != 'true'
+        working-directory: packages/styles
+        run: pnpm test:visual:update
+
+      - name: Run visual tests
+        working-directory: packages/styles
+        run: pnpm test:visual
+
+      - name: Upload test results
+        if: always()
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02
+        with:
+          name: playwright-report
+          path: packages/styles/test-results
+          retention-days: 14
+
+      # Upload diff screenshots on failure
+      - name: Upload diff screenshots
+        if: failure()
+        uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02
+        with:
+          name: playwright-screenshots
+          path: |
+            packages/styles/test-results/**/*-diff.png
+            packages/styles/test-results/**/*-actual.png
+            packages/styles/test-results/**/*-expected.png
+          retention-days: 14

package.json

@@ -37,6 +37,12 @@
     "styles:unit": "pnpm --filter design-system-styles unit",
     "styles:lint": "pnpm --filter design-system-styles lint",
     "styles:lint:fix": "pnpm --filter design-system-styles lint:fix",
+    "styles:visual": "pnpm --filter design-system-styles build && pnpm --filter design-system-styles test:visual",
+    "styles:visual:update": "pnpm --filter design-system-styles build && pnpm --filter design-system-styles test:visual:update",
+    "styles:visual:ui": "pnpm --filter design-system-styles build && pnpm --filter design-system-styles test:visual:ui",
+    "styles:visual:chrome": "pnpm --filter design-system-styles build && pnpm --filter design-system-styles test:visual:chrome",
+    "styles:visual:firefox": "pnpm --filter design-system-styles build && pnpm --filter design-system-styles test:visual:firefox",
+    "styles:visual:safari": "pnpm --filter design-system-styles build && pnpm --filter design-system-styles test:visual:safari",
     "components": "pnpm components:start",
     "components:play": "pnpm --filter design-system-components play",
     "components:start": "pnpm --filter design-system-components start",

packages/styles/.gitignore

@@ -18,3 +18,18 @@ src/utilities/_post-icon-version.scss
 
 # Temporary files
 src/tokens/temp/
+
+# Visual testing ignores
+test-results/
+test-results-*
+playwright-report/
+
+# Screenshot artifacts
+**/tests/visual/__screenshots__/**/*-actual.png
+**/tests/visual/__screenshots__/**/*-diff.png
+**/tests/visual/__screenshots__/**/*-expected.png
+
+# Playwright
+/playwright/.cache/
+playwright/.auth/
+*.tsbuildinfo

packages/styles/package.json

@@ -26,7 +26,13 @@
     "unit": "gulp sass:tests",
     "lint": "stylelint src/**/*.scss !src/tokens/temp/**",
     "lint:fix": "stylelint src/**/*.scss !src/tokens/temp/** --fix",
-    "format": "prettier src/**/*.scss --write"
+    "format": "prettier src/**/*.scss --write",
+    "test:visual": "playwright test",
+    "test:visual:update": "playwright test --update-snapshots",
+    "test:visual:ui": "playwright test --ui",
+    "test:visual:chrome": "playwright test --project=chromium",
+    "test:visual:firefox": "playwright test --project=firefox",
+    "test:visual:safari": "playwright test --project=webkit"
   },
   "peerDependencies": {
     "@angular/core": "^19.0.0",
@@ -50,6 +56,7 @@
     "gulp-sourcemaps": "3.0.0"
   },
   "devDependencies": {
+    "@playwright/test": "1.52.0",
     "@swisspost/design-system-icons": "workspace:9.0.0-next.34",
     "@swisspost/design-system-tokens": "workspace:9.0.0-next.34",
     "@types/node": "22.10.5",
@@ -60,6 +67,7 @@
     "gulp-newer": "^1.4.0",
     "gulp-postcss": "10.0.0",
     "gulp-sass": "6.0.0",
+    "http-server": "14.1.1",
     "jest": "29.7.0",
     "postcss": "8.4.49",
     "postcss-scss": "4.0.9",
@@ -90,4 +98,4 @@
     "ui",
     "frontend"
   ]
-}
+}

packages/styles/playwright.config.ts

@@ -0,0 +1,51 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests/visual',
+
+  testMatch: '**/*.spec.ts',
+
+  timeout: 30000,
+
+  reporter: [
+    ['html', { outputFolder: 'test-results/html-report' }],
+    ['list']
+  ],
+
+  snapshotPathTemplate: '{testDir}/__screenshots__/{projectName}/{testFilePath}/{arg}{ext}',
+
+  outputDir: 'test-results/artifacts',
+
+  use: {
+    baseURL: 'http://localhost:9000',
+  },
+
+  // Projects for different browsers
+  projects: [
+    // Desktop Chrome
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    // Desktop Firefox
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    // Desktop Safari
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    }
+  ],
+
+  // Start a web server for the tests
+  webServer: {
+    command: 'npx http-server . -p 9000',
+    url: 'http://localhost:9000',
+    reuseExistingServer: true,
+    timeout: 60000,
+  },
+});

packages/styles/tests/visual/button.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Button Component Visual Test', () => {
+  test('primary button appearance', async ({ page }) => {
+    await page.goto('/tests/visual/components/button.html');
+
+    await page.waitForTimeout(2000);
+
+    const button = page.locator('.btn-primary');
+    await expect(button).toHaveScreenshot('button-primary.png');
+
+    await button.hover();
+    await expect(button).toHaveScreenshot('button-primary-hover.png');
+
+    await button.focus();
+    await expect(button).toHaveScreenshot('button-primary-focus.png');
+  });
+});

packages/styles/tests/visual/components/button.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" id="styles" href="/dist/post-default.css" />
+    <title>Button Test</title>
+  </head>
+  <body>
+
+    <button class="btn btn-primary">Button</button>
+  </body>
+</html>

packages/styles/tsconfig.json

@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+      "target": "ES2019",
+      "module": "commonjs",
+      "moduleResolution": "node",
+      "esModuleInterop": true,
+      "sourceMap": true,
+      "outDir": "./dist",
+      "baseUrl": ".",
+      "skipLibCheck": true,
+      "strict": true,
+      "resolveJsonModule": true,
+      "forceConsistentCasingInFileNames": true,
+      "types": ["node", "@playwright/test"]
+    },
+    "include": ["tests/**/*.ts", "playwright.config.ts"],
+    "exclude": ["node_modules"]
+  }