Add Playwright for visual testing and setup git lfs

Author: leonard84

.gitattributes

@@ -0,0 +1 @@
+spock-website/tests/__screenshots__/**/*.png filter=lfs diff=lfs merge=lfs -text

.github/workflows/verify.yaml

@@ -9,22 +9,57 @@ concurrency:
     cancel-in-progress: true
 
 jobs:
-    verify:
+    build:
         runs-on: ubuntu-latest
         steps:
             -   name: Checkout
                 uses: actions/checkout@v4
+
+            -   name: Verify LFS files
+                run: |
+                    git lfs install
+                    git lfs fsck --pointers HEAD
+
             -   name: Set up Node
                 uses: actions/setup-node@v4
                 with:
                     node-version: lts/*
                     cache: 'npm'
+
             -   name: Install dependencies
                 run: npm ci
+
             -   name: Build
                 run: npm run build
+
             -   name: Upload artifact
                 uses: 'actions/upload-artifact@v4'
                 with:
                     name: 'gh-pages-preview'
                     path: './spock-website/dist'
+
+    verify:
+        runs-on: ubuntu-latest
+        steps:
+            -   name: Checkout
+                uses: actions/checkout@v4
+                with:
+                    lfs: true # Download LFS files for screenshots
+
+            -   name: Set up Node
+                uses: actions/setup-node@v4
+                with:
+                    node-version: lts/*
+                    cache: 'npm'
+            -   name: Install dependencies
+                run: npm ci
+
+            -   name: Run Playwright Tests
+                run: npx playwright test
+
+            -   name: Upload Test Results (optional)
+                uses: actions/upload-artifact@v4
+                if: always()
+                with:
+                    name: playwright-report
+                    path: spock-website/playwright-report/

.gitignore

@@ -1,5 +1,8 @@
 .idea/
 node_modules/
+dist/
+playwright-report/
+test-results/
 
 # Logs
 logs
@@ -10,8 +13,6 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
-node_modules
-dist
 dist-ssr
 *.local
 

spock-website/package-lock.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
+    "@playwright/test": "^1.52.0",
     "typescript": "~5.7.2",
     "vite": "^6.3.1"
   },

spock-website/package.json

@@ -0,0 +1,32 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+    reporter: process.env.CI ? ['github', 'html'] : 'html',
+    // Configure projects for major browsers.
+    projects: [
+        {
+            name: 'chromium',
+            use: devices['Desktop Chrome'],
+        },
+        {
+            name: 'firefox',
+            use: devices['Desktop Firefox'],
+        },
+    ],
+    // Single template for all assertions
+    testDir: 'tests',
+    snapshotPathTemplate: '{testDir}/__screenshots__{/projectName}/{testFilePath}/{arg}{ext}',
+    // Run local dev server before starting the tests.
+    use: {
+        // Base URL to use in actions like `await page.goto('/')`.
+        baseURL: 'http://localhost:5173',
+
+        // Collect trace when retrying the failed test.
+        trace: 'on-first-retry',
+    },
+    webServer: {
+        command: 'npm run dev',
+        url: 'http://localhost:5173',
+        reuseExistingServer: !process.env.CI,
+    },
+});

spock-website/playwright.config.ts

@@ -0,0 +1,6 @@
+import { test, expect } from '@playwright/test';
+
+test('visual snapshot', async ({ page }) => {
+    await page.goto('/?disableaos');
+    await expect(page).toHaveScreenshot('index.png', { fullPage: true });
+});

spock-website/tests/visual.spec.ts

@@ -0,0 +1,6 @@
+{
+    "extends": "./tsconfig.json",
+    "include": [
+        "tests/**/*.spec.ts",
+    ],
+}