diff --git a/.gitea/workflows/ci.yaml b/.gitea/workflows/ci.yaml index a90fdb4..86fcc63 100644 --- a/.gitea/workflows/ci.yaml +++ b/.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 diff --git a/playwright.config.ts b/playwright.config.ts index 2df39fb..8619385 100644 --- a/playwright.config.ts +++ b/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"] } }, diff --git a/tests/e2e/footer.responsive.spec.js b/tests/e2e/footer.responsive.spec.js index 7a287d9..c7d884c 100644 --- a/tests/e2e/footer.responsive.spec.js +++ b/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` ); } });