test: add ability to do visual regression tests

.gitignore

@@ -3,3 +3,8 @@ _site
 .jekyll-cache
 .jekyll-metadata
 vendor
+node_modules
+test-results
+playwright-report
+visual-regression-current.png
+visual-regression-result.png

README.md

@@ -0,0 +1,54 @@
+# Managerbot Website
+
+## Development
+
+### Prerequisites
+
+- Ruby (with Bundler)
+- Node.js (for visual regression tests)
+
+### Running locally
+
+```bash
+bundle install
+bundle exec jekyll serve
+```
+
+The site will be available at `http://localhost:4000`.
+
+## Visual Regression Testing
+
+Visual regression tests use Playwright to capture screenshots of the home page and compare them against a baseline to detect unintended visual changes.
+
+### Setup
+
+```bash
+npm install
+npx playwright install chromium
+```
+
+### Running tests
+
+1. Start the Jekyll server:
+   ```bash
+   bundle exec jekyll serve
+   ```
+
+2. In a separate terminal, run the visual regression test:
+   ```bash
+   npm run visual-regression:check
+   ```
+
+### Updating the baseline
+
+If you've made intentional visual changes, update the baseline snapshot:
+
+```bash
+npm run visual-regression
+```
+
+### Output
+
+Each test run saves images in the root directory:
+- `visual-regression-current.png` - the current screenshot (always saved)
+- `visual-regression-diff.png` - diff image highlighting visual changes (only when differences detected)

_config.yml

@@ -33,22 +33,11 @@ sass:
 
 plugins:
   - jekyll-feed
-# Exclude from processing.
-# The following items will not be processed, by default.
-# Any item listed under the `exclude:` key here will be automatically added to
-# the internal "default list".
-#
-# Excluded items can be processed by explicitly listing the directories or
-# their entries' file path in the `include:` list.
-#
-# exclude:
-#   - .sass-cache/
-#   - .jekyll-cache/
-#   - gemfiles/
-#   - Gemfile
-#   - Gemfile.lock
-#   - node_modules/
-#   - vendor/bundle/
-#   - vendor/cache/
-#   - vendor/gems/
-#   - vendor/ruby/
+exclude:
+  - node_modules/
+  - tests/
+  - package.json
+  - package-lock.json
+  - playwright.config.ts
+  - test-results/
+  - playwright-report/

package.json

@@ -0,0 +1,12 @@
+{
+  "name": "hyper-unearthing-visual-tests",
+  "version": "1.0.0",
+  "scripts": {
+    "visual-regression": "npx playwright test visual-regression.spec.ts --update-snapshots",
+    "visual-regression:check": "npx playwright test visual-regression.spec.ts"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.40.0",
+    "@types/node": "^20.0.0"
+  }
+}

playwright.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: 0,
+  workers: 1,
+  reporter: 'list',
+  use: {
+    baseURL: 'http://localhost:4000',
+    trace: 'off',
+  },
+  snapshotPathTemplate: '{testDir}/__snapshots__/{testFilePath}/{arg}{ext}',
+  expect: {
+    toHaveScreenshot: {
+      maxDiffPixelRatio: 0.01,
+    },
+  },
+});

tests/visual-regression.spec.ts

@@ -0,0 +1,48 @@
+import { test, expect } from '@playwright/test';
+import * as fs from 'fs';
+import * as path from 'path';
+
+const OUTPUT_DIR = path.join(__dirname, '..');
+const DIFF_IMAGE = path.join(OUTPUT_DIR, 'visual-regression-diff.png');
+const CURRENT_IMAGE = path.join(OUTPUT_DIR, 'visual-regression-current.png');
+
+test('home page visual regression', async ({ page }, testInfo) => {
+  await page.goto('/');
+
+  // Wait for the page to be fully loaded
+  await page.waitForLoadState('networkidle');
+
+  // Always save the current screenshot
+  const screenshot = await page.screenshot({ fullPage: true });
+  fs.writeFileSync(CURRENT_IMAGE, screenshot);
+
+  try {
+    await expect(page).toHaveScreenshot('home-page.png', {
+      fullPage: true,
+      maxDiffPixelRatio: 0.01,
+    });
+
+    // Test passed - remove diff image if it exists
+    if (fs.existsSync(DIFF_IMAGE)) {
+      fs.unlinkSync(DIFF_IMAGE);
+    }
+    console.log(`✓ No visual differences detected.`);
+    console.log(`  Current screenshot: ${CURRENT_IMAGE}`);
+  } catch (error) {
+    // Test failed - find and copy the diff image
+    const attachments = testInfo.attachments;
+    const diffAttachment = attachments.find(a => a.name === 'home-page-diff.png');
+
+    if (diffAttachment && diffAttachment.path) {
+      fs.copyFileSync(diffAttachment.path, DIFF_IMAGE);
+      console.log(`✗ Visual differences detected!`);
+      console.log(`  Diff image: ${DIFF_IMAGE}`);
+      console.log(`  Current screenshot: ${CURRENT_IMAGE}`);
+    } else {
+      console.log(`✗ Visual differences detected.`);
+      console.log(`  Current screenshot: ${CURRENT_IMAGE}`);
+    }
+
+    throw error;
+  }
+});