Fix visual regression test snapshot naming and add missing snapshots

.gitea/workflows/ci.yaml

@@ -76,6 +76,8 @@ jobs:
           curl -fsS "http://$HOST:$PORT" >/dev/null
           echo "✅ App is responding at http://$HOST:$PORT"
 
+
+
           # Run tests
           echo "🧪 Running E2E tests for ${{ matrix.browser }}..."
           BASE_URL="http://$HOST:$PORT" npx playwright test --project=${{ matrix.browser }} --reporter=list

.gitignore

@@ -19,6 +19,11 @@
 # Visual regression snapshots (allow these)
 !tests/e2e/visual-regression.spec.ts-snapshots/
 !tests/e2e/visual-regression.spec.ts-snapshots/*.png
+# Footer and header responsive snapshots (allow these)
+!tests/e2e/footer.responsive.spec.js-snapshots/
+!tests/e2e/footer.responsive.spec.js-snapshots/*.png
+!tests/e2e/header.responsive.spec.js-snapshots/
+!tests/e2e/header.responsive.spec.js-snapshots/*.png
 # Ignore other image files
 *.png
 *.jpg

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`
       );
     }
   });