Update playwright snapshot names

.gitea/workflows/ci.yaml

@@ -76,9 +76,7 @@ jobs:
           curl -fsS "http://$HOST:$PORT" >/dev/null
           echo "✅ App is responding at http://$HOST:$PORT"
 
-          # Update snapshots first (for visual regression tests)
-          echo "🔄 Updating visual regression snapshots..."
-          PLAYWRIGHT_UPDATE_SNAPSHOTS=1 npx playwright test tests/e2e/footer.responsive.spec.js tests/e2e/header.responsive.spec.js --project=${{ matrix.browser }} || true
+
 
           # Run tests
           echo "🧪 Running E2E tests for ${{ matrix.browser }}..."
@@ -148,9 +146,9 @@ jobs:
           curl -fsS "http://$HOST:$PORT" >/dev/null
           echo "✅ App is responding at http://$HOST:$PORT"
 
-          # Seed snapshots on main branch or when testing (for debugging)
-          if [ "${{ gitea.ref }}" = "refs/heads/main" ] || [ "${{ gitea.ref }}" = "refs/heads/fix-runner-trigger" ]; then
-            echo "🌱 Seeding snapshots on ${{ gitea.ref }}..."
+          # Seed snapshots on main branch only (one-time setup)
+          if [ "${{ gitea.ref }}" = "refs/heads/main" ]; then
+            echo "🌱 Seeding snapshots on main branch..."
             PLAYWRIGHT_UPDATE_SNAPSHOTS=1 npx playwright test tests/e2e/visual-regression.spec.ts --project=chromium
           fi
 

playwright.config.ts

@@ -35,8 +35,7 @@ export default defineConfig({
         },
       }),
   // OS-agnostic snapshot path template (removes platform-specific suffixes)
-  snapshotPathTemplate:
-    "{testDir}/{testFileName}-snapshots/{arg}-{projectName}.png",
+  snapshotPathTemplate: "{testDir}/{testFileName}-snapshots/{arg}.png",
   projects: [
     { name: "chromium", use: { ...devices["Desktop Chrome"] } },
     { name: "firefox", use: { ...devices["Desktop Firefox"] } },

tests/e2e/footer.responsive.spec.js

@@ -33,11 +33,11 @@ for (const bp of breakpoints) {
     }) => {
       // All breakpoints should have navigation items
       await expect(
-        page.getByRole("link", { name: /use cases/i }),
+        page.getByRole("link", { name: /use cases/i })
       ).toBeVisible();
       // Look for the "Learn" link specifically in the footer (not in other components)
       await expect(
-        page.getByRole("contentinfo").getByRole("link", { name: /learn/i }),
+        page.getByRole("contentinfo").getByRole("link", { name: /learn/i })
       ).toBeVisible();
       await expect(page.getByRole("link", { name: /about/i })).toBeVisible();
     });
@@ -45,23 +45,23 @@ for (const bp of breakpoints) {
     test(`footer legal links visibility at ${bp.name}`, async ({ page }) => {
       // All breakpoints should have legal links
       await expect(
-        page.getByRole("link", { name: /privacy policy/i }),
+        page.getByRole("link", { name: /privacy policy/i })
       ).toBeVisible();
       await expect(
-        page.getByRole("link", { name: /terms of service/i }),
+        page.getByRole("link", { name: /terms of service/i })
       ).toBeVisible();
       await expect(
-        page.getByRole("link", { name: /cookies settings/i }),
+        page.getByRole("link", { name: /cookies settings/i })
       ).toBeVisible();
     });
 
     test(`footer social links visibility at ${bp.name}`, async ({ page }) => {
       // All breakpoints should have social links
       await expect(
-        page.getByRole("link", { name: /follow us on bluesky/i }),
+        page.getByRole("link", { name: /follow us on bluesky/i })
       ).toBeVisible();
       await expect(
-        page.getByRole("link", { name: /follow us on gitlab/i }),
+        page.getByRole("link", { name: /follow us on gitlab/i })
       ).toBeVisible();
     });
 
@@ -117,8 +117,9 @@ test.describe("Footer visual regression", () => {
       await page.waitForTimeout(500);
 
       // Take a screenshot for visual regression testing
+      // Note: Playwright automatically appends the browser name (e.g., -chromium, -firefox)
       await expect(page.getByRole("contentinfo")).toHaveScreenshot(
-        `footer-${bp.name}.png`,
+        `footer-${bp.name}.png`
       );
     }
   });
@@ -146,7 +147,7 @@ test.describe("Footer visual regression", () => {
       await useCasesLink.hover();
       await page.waitForTimeout(200);
       await expect(page.getByRole("contentinfo")).toHaveScreenshot(
-        `footer-${bp.name}-hover-nav.png`,
+        `footer-${bp.name}-hover-nav.png`
       );
 
       // Test hover on social links
@@ -156,7 +157,7 @@ test.describe("Footer visual regression", () => {
       await blueskyLink.hover();
       await page.waitForTimeout(200);
       await expect(page.getByRole("contentinfo")).toHaveScreenshot(
-        `footer-${bp.name}-hover-social.png`,
+        `footer-${bp.name}-hover-social.png`
       );
     }
   });
@@ -184,7 +185,7 @@ test.describe("Footer visual regression", () => {
       await useCasesLink.focus();
       await page.waitForTimeout(200);
       await expect(page.getByRole("contentinfo")).toHaveScreenshot(
-        `footer-${bp.name}-focus-nav.png`,
+        `footer-${bp.name}-focus-nav.png`
       );
 
       // Test focus on social links
@@ -194,7 +195,7 @@ test.describe("Footer visual regression", () => {
       await blueskyLink.focus();
       await page.waitForTimeout(200);
       await expect(page.getByRole("contentinfo")).toHaveScreenshot(
-        `footer-${bp.name}-focus-social.png`,
+        `footer-${bp.name}-focus-social.png`
       );
     }
   });