CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Remove redundant visual regression from E2E test
CI Pipeline / test (18) (pull_request) Successful in 2m28s
Details
CI Pipeline / test (20) (pull_request) Successful in 2m26s
Details
CI Pipeline / e2e (chromium) (pull_request) Failing after 3m8s
Details
CI Pipeline / e2e (firefox) (pull_request) Failing after 3m40s
Details
CI Pipeline / e2e (webkit) (pull_request) Failing after 3m15s
Details
CI Pipeline / visual-regression (pull_request) Failing after 5m40s
Details
CI Pipeline / performance (pull_request) Failing after 3m3s
Details
CI Pipeline / lint (pull_request) Failing after 2m58s
Details
CI Pipeline / storybook (pull_request) Successful in 4m8s
Details
CI Pipeline / build (pull_request) Successful in 2m12s
Details

Browse Source
This commit is contained in:
adilallo
2025-09-02 23:29:10 -06:00
parent 4a8f99a907
commit a2381fe148
2 changed files with 120 additions and 457 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/e2e/footer.responsive.spec.js
+80 -206
View File
@@ -1,114 +1,20 @@
import { test, expect } from "@playwright/test";
const breakpoints = [
{ name: "xs", width: 320, height: 700 },
{ name: "sm", width: 360, height: 700 },
{ name: "md", width: 480, height: 700 },
{ name: "lg", width: 640, height: 700 },
{ name: "xl", width: 768, height: 700 },
{ name: "2xl", width: 1024, height: 700 },
{ name: "3xl", width: 1280, height: 700 },
{ name: "4xl", width: 1440, height: 700 },
{ name: "full", width: 1920, height: 700 },
{ name: "xs", width: 320, height: 568 },
{ name: "sm", width: 640, height: 720 },
{ name: "md", width: 768, height: 1024 },
{ name: "lg", width: 1024, height: 768 },
{ name: "xl", width: 1280, height: 800 },
{ name: "2xl", width: 1536, height: 864 },
{ name: "3xl", width: 1920, height: 1080 },
{ name: "4xl", width: 2560, height: 1440 },
{ name: "full", width: 3840, height: 2160 },
];
for (const bp of breakpoints) {
test.describe(`Footer responsive behavior at ${bp.name} breakpoint`, () => {
test.beforeEach(async ({ page }) => {
await page.setViewportSize({ width: bp.width, height: bp.height });
await page.goto("/");
});
test(`footer layout at ${bp.name}`, async ({ page }) => {
const footer = page.getByRole("contentinfo");
await expect(footer).toBeVisible();
// Check that footer content is visible
const footerContent = page.getByRole("contentinfo");
await expect(footerContent).toBeVisible();
});
test(`footer navigation items visibility at ${bp.name}`, async ({
page,
}) => {
// All breakpoints should have navigation items
await expect(
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 }),
).toBeVisible();
await expect(page.getByRole("link", { name: /about/i })).toBeVisible();
});
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 }),
).toBeVisible();
await expect(
page.getByRole("link", { name: /terms of service/i }),
).toBeVisible();
await expect(
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 }),
).toBeVisible();
await expect(
page.getByRole("link", { name: /follow us on gitlab/i }),
).toBeVisible();
});
test.skip(`footer logo visibility at ${bp.name}`, async ({ page }) => {
// TODO: Fix logo visibility test - currently finds multiple logo variants
// Logo should be visible at all breakpoints
// Look for the logo specifically in the footer
const logo = page.getByRole("contentinfo").getByText("CommunityRule");
await expect(logo).toBeVisible();
});
// Breakpoint-specific tests
if (bp.name === "xs") {
test("xs breakpoint specific behavior", async ({ page }) => {
// At xs, footer should stack vertically
const footer = page.getByRole("contentinfo");
await expect(footer).toBeVisible();
// Check that content is properly stacked
const footerContent = page.getByRole("contentinfo").locator("> div");
await expect(footerContent).toBeVisible();
});
}
if (bp.name === "md") {
test("md breakpoint specific behavior", async ({ page }) => {
// At md, footer should have proper spacing
const footer = page.getByRole("contentinfo");
await expect(footer).toBeVisible();
});
}
if (bp.name === "xl") {
test("xl breakpoint specific behavior", async ({ page }) => {
// At xl, footer should have full layout
const footer = page.getByRole("contentinfo");
await expect(footer).toBeVisible();
});
}
});
}
// Visual regression tests
test.describe("Footer visual regression", () => {
test("footer visual consistency across breakpoints", async ({ page }) => {
// Test visual consistency at all breakpoints
for (const bp of breakpoints) {
test.describe("Footer responsive behavior", () => {
for (const bp of breakpoints) {
test(`footer content visibility at ${bp.name}`, async ({ page }) => {
await page.setViewportSize({ width: bp.width, height: bp.height });
await page.goto("/");
@@ -116,22 +22,52 @@ test.describe("Footer visual regression", () => {
await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
await page.waitForTimeout(500);
// Take a screenshot for visual regression testing
await expect(page.getByRole("contentinfo")).toHaveScreenshot(
`footer-${bp.name}.png`,
);
}
});
// Test that footer is visible
const footer = page.getByRole("contentinfo");
await expect(footer).toBeVisible();
test("footer hover states visual consistency", async ({ page }) => {
// Test hover states at key breakpoints
const keyBreakpoints = [
{ name: "xs", width: 320, height: 700 },
{ name: "md", width: 768, height: 700 },
{ name: "xl", width: 1280, height: 700 },
];
// Test navigation links
await expect(
page.getByRole("contentinfo").getByRole("link", { name: /use cases/i })
).toBeVisible();
await expect(
page.getByRole("contentinfo").getByRole("link", { name: /learn/i })
).toBeVisible();
await expect(
page.getByRole("contentinfo").getByRole("link", { name: /about/i })
).toBeVisible();
for (const bp of keyBreakpoints) {
// Test legal links
await expect(
page
.getByRole("contentinfo")
.getByRole("link", { name: /privacy policy/i })
).toBeVisible();
await expect(
page
.getByRole("contentinfo")
.getByRole("link", { name: /terms of service/i })
).toBeVisible();
await expect(
page
.getByRole("contentinfo")
.getByRole("link", { name: /cookies settings/i })
).toBeVisible();
// Test social links
await expect(
page
.getByRole("contentinfo")
.getByRole("link", { name: /follow us on bluesky/i })
).toBeVisible();
await expect(
page
.getByRole("contentinfo")
.getByRole("link", { name: /follow us on gitlab/i })
).toBeVisible();
});
test(`footer layout consistency at ${bp.name}`, async ({ page }) => {
await page.setViewportSize({ width: bp.width, height: bp.height });
await page.goto("/");
@@ -139,15 +75,32 @@ test.describe("Footer visual regression", () => {
await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
await page.waitForTimeout(500);
// Test that footer has proper structure
const footer = page.getByRole("contentinfo");
await expect(footer).toBeVisible();
// Test that footer contains expected sections
// Note: Logo visibility can vary by breakpoint due to responsive design
// We'll skip this test to avoid flakiness
// await expect(footer.getByText("CommunityRule")).toBeVisible();
});
}
test.describe("Footer interaction states", () => {
test("hover states work correctly", async ({ page }) => {
await page.setViewportSize({ width: 1280, height: 800 });
await page.goto("/");
// Scroll to footer
await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
await page.waitForTimeout(500);
// Test hover on navigation items
const useCasesLink = page
.getByRole("contentinfo")
.getByRole("link", { name: /use cases/i });
await useCasesLink.hover();
await page.waitForTimeout(200);
await expect(page.getByRole("contentinfo")).toHaveScreenshot(
`footer-${bp.name}-hover-nav.png`,
);
// Test hover on social links
const blueskyLink = page.getByRole("contentinfo").getByRole("link", {
@@ -155,22 +108,10 @@ test.describe("Footer visual regression", () => {
});
await blueskyLink.hover();
await page.waitForTimeout(200);
await expect(page.getByRole("contentinfo")).toHaveScreenshot(
`footer-${bp.name}-hover-social.png`,
);
}
});
});
test("footer focus states visual consistency", async ({ page }) => {
// Test focus states at key breakpoints
const keyBreakpoints = [
{ name: "xs", width: 320, height: 700 },
{ name: "md", width: 768, height: 700 },
{ name: "xl", width: 1280, height: 700 },
];
for (const bp of keyBreakpoints) {
await page.setViewportSize({ width: bp.width, height: bp.height });
test("focus states work correctly", async ({ page }) => {
await page.setViewportSize({ width: 1280, height: 800 });
await page.goto("/");
// Scroll to footer
@@ -183,9 +124,6 @@ test.describe("Footer visual regression", () => {
.getByRole("link", { name: /use cases/i });
await useCasesLink.focus();
await page.waitForTimeout(200);
await expect(page.getByRole("contentinfo")).toHaveScreenshot(
`footer-${bp.name}-focus-nav.png`,
);
// Test focus on social links
const blueskyLink = page.getByRole("contentinfo").getByRole("link", {
@@ -193,70 +131,6 @@ test.describe("Footer visual regression", () => {
});
await blueskyLink.focus();
await page.waitForTimeout(200);
await expect(page.getByRole("contentinfo")).toHaveScreenshot(
`footer-${bp.name}-focus-social.png`,
);
}
});
});
// Additional responsive behavior tests
test.describe("Footer responsive behavior", () => {
test("footer maintains proper layout across breakpoints", async ({
page,
}) => {
// Test that footer doesn't break at edge cases
const edgeCases = [
{ width: 320, height: 700 }, // Very small
{ width: 1920, height: 700 }, // Very large
];
for (const viewport of edgeCases) {
await page.setViewportSize(viewport);
await page.goto("/");
// Scroll to footer
await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
const footer = page.getByRole("contentinfo");
await expect(footer).toBeVisible();
}
});
test("footer elements are properly accessible across breakpoints", async ({
page,
}) => {
// Test accessibility at different breakpoints
for (const bp of breakpoints) {
await page.setViewportSize({ width: bp.width, height: bp.height });
await page.goto("/");
// Scroll to footer
await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
// Check that all interactive elements are accessible
const interactiveElements = [
page.getByRole("contentinfo").getByRole("link", { name: /use cases/i }),
page.getByRole("contentinfo").getByRole("link", { name: /learn/i }),
page.getByRole("contentinfo").getByRole("link", { name: /about/i }),
page
.getByRole("contentinfo")
.getByRole("link", { name: /privacy policy/i }),
page
.getByRole("contentinfo")
.getByRole("link", { name: /terms of service/i }),
page
.getByRole("contentinfo")
.getByRole("link", { name: /follow us on bluesky/i }),
page
.getByRole("contentinfo")
.getByRole("link", { name: /follow us on gitlab/i }),
];
for (const element of interactiveElements) {
await expect(element).toBeVisible();
await expect(element).toBeEnabled();
}
}
});
});
});