@manufac/general-tests 0.0.1-alpha

package/dist/specs/shared/forms/input-edge.spec.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../../fixtures");
+const utils_1 = require("../../utils");
+const test_1 = require("@playwright/test");
+fixtures_1.test.describe("Forms - Input Edge Cases", () => {
+    (0, fixtures_1.test)("FM-08 Name field accepts a 200+ character string without breaking layout", async ({ page, targetPage }) => {
+        await page.goto(targetPage);
+        await (0, utils_1.fillAllFieldsValidly)(page);
+        const longName = "A".repeat(utils_1.ValidUserInfo.LongNameCharacterCount);
+        await page.getByLabel(/name/i).fill(longName);
+        const isOverflowingBeforeSubmit = await (0, utils_1.hasHorizontalScrollbar)(page);
+        (0, test_1.expect)(isOverflowingBeforeSubmit, "Page should not have overflowing/broken layout after a very long name is entered").toBe(false);
+        const submitButton = page.getByRole("button", { name: /submit/i });
+        await (0, test_1.expect)(submitButton, "Submit button should remain visible with a long name entered").toBeVisible();
+        await submitButton.click();
+        const successState = page.getByText(/thank you|success|confirmation/i);
+        await (0, test_1.expect)(successState, "Form should submit successfully with a very long name entered").toBeVisible();
+        const isOverflowingAfterSubmit = await (0, utils_1.hasHorizontalScrollbar)(page);
+        (0, test_1.expect)(isOverflowingAfterSubmit, "Confirmation should not have overflowing/broken layout after a very long name was submitted").toBe(false);
+    });
+    (0, fixtures_1.test)("FM-08 Name field with emoji is accepted or cleanly rejected", async ({ page, targetPage, consoleErrors }) => {
+        await page.goto(targetPage);
+        await page.getByLabel(/name/i).fill(utils_1.ValidUserInfo.EmojiTestName);
+        const nameValue = await page.getByLabel(/name/i).inputValue();
+        const isEmojiAccepted = nameValue === utils_1.ValidUserInfo.EmojiTestName;
+        // Indicates the emoji character was not preserved in the field value (stripped or cleared by the input).
+        const isEmojiRejected = nameValue === "" || !nameValue.includes("😀");
+        (0, test_1.expect)(isEmojiAccepted || isEmojiRejected, "Emoji in the name field should be accepted as typed or cleanly rejected (no garbled/crashed display)").toBe(true);
+        (0, test_1.expect)(consoleErrors, `Entering emoji in the name field should not cause a console error:\n${consoleErrors.join("\n")}`).toHaveLength(0);
+    });
+    (0, fixtures_1.test)("FM-08 Email with leading/trailing spaces is trimmed and submits successfully", async ({ page, targetPage }) => {
+        await page.goto(targetPage);
+        await (0, utils_1.fillAllFieldsValidly)(page);
+        const emailField = page.getByLabel(/email/i);
+        await emailField.fill(utils_1.ValidUserInfo.PaddedTestEmail);
+        await emailField.blur();
+        // Checked on blur since that's when most forms trim client-side; a form that only trims
+        // server-side at submission time (also valid per the plan's wording) wouldn't show it here.
+        const trimmedEmail = await emailField.inputValue();
+        (0, test_1.expect)(trimmedEmail, `Leading/trailing spaces around the email should be trimmed; field still shows "${trimmedEmail}"`).toBe(utils_1.ValidUserInfo.PaddedTestEmail.trim());
+        await page.getByRole("button", { name: /submit/i }).click();
+        const successState = page.getByText(/thank you|success|confirmation/i);
+        await (0, test_1.expect)(successState, "Form should submit successfully after trimming leading/trailing spaces around the email").toBeVisible();
+    });
+});

package/dist/specs/shared/forms/invalid-input.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/specs/shared/forms/invalid-input.spec.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../../fixtures");
+const utils_1 = require("../../utils");
+const test_1 = require("@playwright/test");
+// Ref: https://playwright.dev/docs/test-parameterize#parameterized-tests
+fixtures_1.test.describe("Forms - Invalid Input", () => {
+    utils_1.InvalidInputCases.forEach((invalidCase) => {
+        (0, fixtures_1.test)(`FM-03 Invalid input "${invalidCase.invalidValue}" in ${invalidCase.fieldLabel.source} is rejected`, async ({ page, targetPage, }) => {
+            await page.goto(targetPage);
+            const targetField = page.getByLabel(invalidCase.fieldLabel);
+            const fieldCount = await targetField.count();
+            if (fieldCount === 0) {
+                fixtures_1.test.skip(true, `No ${invalidCase.fieldLabel.source} field present on this page`);
+            }
+            await (0, utils_1.fillOtherRequiredFieldsValidly)(page, invalidCase.fieldLabel);
+            await targetField.first().fill(invalidCase.invalidValue);
+            const submitButtons = page.locator('button[type="submit"], input[type="submit"]');
+            await submitButtons.first().click();
+            await (0, test_1.expect)(page.getByText(invalidCase.expectedErrorText), `Expected a clear inline error for "${invalidCase.invalidValue}" in ${invalidCase.fieldLabel.source}`).toBeVisible();
+            // TODO: verify nothing was submitted downstream for this invalid attempt.
+        });
+    });
+});

package/dist/specs/shared/forms/required-field.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/specs/shared/forms/required-field.spec.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../../fixtures");
+const utils_1 = require("../../utils");
+const test_1 = require("@playwright/test");
+// Ref: https://playwright.dev/docs/test-parameterize#parameterized-tests
+fixtures_1.test.describe("Forms", () => {
+    utils_1.RequiredFields.forEach((targetField) => {
+        (0, fixtures_1.test)(`FM-02 Required field validation blocks empty ${targetField.label.source}`, async ({ page, targetPage, }) => {
+            await page.goto(targetPage);
+            const fieldLocator = page.getByLabel(targetField.label);
+            const fieldCount = await fieldLocator.count();
+            if (fieldCount === 0) {
+                fixtures_1.test.skip(true, `No ${targetField.label.source} field present on this page`);
+            }
+            await (0, utils_1.fillAllFieldsValidly)(page);
+            await fieldLocator.first().clear();
+            const submitButtons = page.locator('button[type="submit"], input[type="submit"]');
+            await submitButtons.first().click();
+            const isErrorPresent = await (0, utils_1.hasVisibleErrorNearField)(fieldLocator.first());
+            (0, test_1.expect)(isErrorPresent, `No visible inline error next to the empty ${targetField.label.source} field after submit`).toBe(true);
+            const genericError = page.getByText(/form error/i);
+            const genericErrorCount = await genericError.count();
+            (0, test_1.expect)(genericErrorCount, `Error message for ${targetField.label.source} should be specific (e.g. "Email is required"), not a generic "form error"`).toBe(0);
+        });
+    });
+});

package/dist/specs/shared/forms/thankyou-confirm.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/specs/shared/forms/thankyou-confirm.spec.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../../fixtures");
+const utils_1 = require("../../utils");
+const test_1 = require("@playwright/test");
+fixtures_1.test.describe("Forms - Thank You Confirm", () => {
+    (0, fixtures_1.test)("FM-07 Confirmation state matches spec and does not resubmit on Back/Forward", async ({ page, targetPage }) => {
+        await page.goto(targetPage);
+        await page.getByLabel(/name/i).fill(utils_1.ValidUserInfo.ValidTestName);
+        await page.getByLabel(/email/i).fill(utils_1.ValidUserInfo.ValidTestEmail);
+        await page.getByLabel(/phone/i).fill(utils_1.ValidUserInfo.ValidTestPhone);
+        await page.getByRole("button", { name: /submit/i }).click();
+        const confirmation = page.getByText(/thank you|success|confirmation/i);
+        await (0, test_1.expect)(confirmation, "Confirmation message/page did not appear or did not match the design spec").toBeVisible();
+        let hasResubmitDialog = false;
+        page.on("dialog", (dialog) => {
+            hasResubmitDialog = true;
+            void dialog.dismiss();
+        });
+        await page.goBack();
+        (0, test_1.expect)(hasResubmitDialog, 'Browser Back should NOT show a "resubmit form?" dialog').toBe(false);
+        await page.goForward();
+        await (0, test_1.expect)(confirmation, "Confirmation should still be shown after pressing Forward").toBeVisible();
+    });
+});

package/dist/specs/shared/hero-fold.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/specs/shared/hero-fold.spec.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../fixtures");
+const test_1 = require("@playwright/test");
+(0, fixtures_1.test)("RS-03 Hero section above the fold", async ({ page, targetPage }) => {
+    await page.goto(targetPage);
+    const headline = page.getByRole("heading", { level: 1 }).first();
+    await (0, test_1.expect)(headline, "Main headline not visible without scrolling").toBeVisible();
+    await (0, test_1.expect)(headline, "Main headline not fully within the fold").toBeInViewport({
+        ratio: 1,
+    });
+    const ctaRegex = /get started|book a demo|contact us|try|sign up|request|start|buy|explore|join|register|learn|get|access|download|schedule|book/i;
+    const primaryCTA = page
+        .getByRole("link", { name: ctaRegex })
+        .or(page.getByRole("button", { name: ctaRegex }))
+        .first();
+    await (0, test_1.expect)(primaryCTA, "Primary CTA not visible without scrolling").toBeVisible();
+    await (0, test_1.expect)(primaryCTA, "Primary CTA not fully within the fold").toBeInViewport({
+        ratio: 1,
+    });
+});

package/dist/specs/shared/image-quality.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/specs/shared/image-quality.spec.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../fixtures");
+const utils_1 = require("../utils");
+const test_1 = require("@playwright/test");
+(0, fixtures_1.test)("RS-08 Images are not blurry/pixelated/stretched, and load an appropriately sized file for the viewport", async ({ page, targetPage, }) => {
+    await page.goto(targetPage);
+    const imageSizeIssues = await (0, utils_1.findImageSizeIssues)(page);
+    const upscaledImages = imageSizeIssues.filter(utils_1.isImageUpscaled);
+    (0, test_1.expect)(upscaledImages, "Image(s) appear stretched/upscaled at this viewport").toEqual([]);
+    const oversizedImages = imageSizeIssues.filter(utils_1.isImageOversized);
+    (0, test_1.expect)(oversizedImages, "Image(s) loaded a file much larger than needed for this viewport — responsive srcset may not be working").toEqual([]);
+});

package/dist/specs/shared/landing-page.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/specs/shared/landing-page.spec.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../fixtures");
+const test_1 = require("@playwright/test");
+fixtures_1.test.describe("Landing Page Automated Smoke Suite", () => {
+    (0, fixtures_1.test)("LP-01: Page returns 200, renders H1, and has no console errors", async ({ page, consoleErrors, targetPage, }) => {
+        const response = await page.goto(targetPage);
+        // Page returns 200
+        (0, test_1.expect)(response?.ok()).toBe(true);
+        // Renders main heading (H1)
+        const h1 = page.getByRole("heading", { level: 1 }).first();
+        await (0, test_1.expect)(h1).toBeVisible();
+        // No console errors on load
+        (0, test_1.expect)(consoleErrors).toHaveLength(0);
+    });
+    (0, fixtures_1.test)("RS-01: No horizontal overflow (responsive layout stability)", async ({ page, targetPage }) => {
+        await page.goto(targetPage);
+        const hasHorizontalOverflow = await page.evaluate(() => {
+            return document.documentElement.scrollWidth > document.documentElement.clientWidth;
+        });
+        (0, test_1.expect)(hasHorizontalOverflow).toBe(false);
+    });
+    (0, fixtures_1.test)("FM-01: Form happy path submits successfully", async ({ page, targetPage, consoleErrors }) => {
+        await page.goto(targetPage);
+        const forms = page.locator("form");
+        const totalFormCount = await forms.count();
+        if (totalFormCount === 0) {
+            // test.skip aborts execution internally, so no else block is needed
+            fixtures_1.test.skip(true, "No form found on the page");
+        }
+        const allForms = await forms.all();
+        await Promise.all(allForms.map(async (form) => {
+            // Attempt to fill email inputs
+            const emailInputs = await form.getByRole("textbox", { name: /email/i }).all();
+            await Promise.all(emailInputs.map(async (emailInput) => {
+                const email = `qa+${Date.now().toString()}@manufacanalytics.com`;
+                await emailInput.fill(email);
+            }));
+            // Fill required text inputs
+            const textInputs = await form
+                .getByRole("textbox")
+                .filter({ hasNot: form.getByRole("textbox", { name: /email/i }) })
+                .all();
+            await Promise.all(textInputs.map(async (textInput) => {
+                const isRequired = await textInput.evaluate((element) => {
+                    let isElementRequired = false;
+                    if (element instanceof HTMLInputElement) {
+                        isElementRequired = element.required;
+                    }
+                    return isElementRequired;
+                });
+                if (isRequired) {
+                    await textInput.fill("Test User");
+                }
+            }));
+            // Set up the network response listener before submitting
+            const responsePromise = page.waitForResponse((response) => {
+                const method = response.request().method();
+                return ["POST", "PUT", "PATCH"].includes(method) || response.request().isNavigationRequest();
+            });
+            // Submit form
+            const submitButton = form.getByRole("button", { name: /submit|send|join|subscribe|save|draft|sign/i });
+            const submitButtonCount = await submitButton.count();
+            // It is possibility that form might have multiple submit buttons Ref: bud time entry form has 2 submit buttons
+            if (submitButtonCount > 0) {
+                await submitButton.first().click();
+            }
+            else {
+                await form.evaluate((formElement) => {
+                    if (formElement instanceof HTMLFormElement) {
+                        formElement.submit();
+                    }
+                });
+            }
+            // Wait for the response and verify it was successful
+            const response = await responsePromise;
+            (0, test_1.expect)(response.ok()).toBe(true);
+        }));
+        // Brief settle time for post-submit JS (redirects, toasts, error handlers)
+        await page.waitForTimeout(1000);
+        // No console errors after any form submission
+        (0, test_1.expect)(consoleErrors).toHaveLength(0);
+    });
+});

package/dist/specs/shared/media-embeds/carousel-slider.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/specs/shared/media-embeds/carousel-slider.spec.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../../fixtures");
+const utils_1 = require("../../utils");
+const test_1 = require("@playwright/test");
+fixtures_1.test.describe("Media Embeds - Carousel Slider", () => {
+    (0, fixtures_1.test)("MD-02 Carousel is reachable through all slides without blank slides", async ({ page, isMobile, targetPage, }) => {
+        fixtures_1.test.slow();
+        await page.goto(targetPage);
+        await page.waitForLoadState("load");
+        const carousels = page.locator('[data-carousel], [role="region"][aria-roledescription="carousel"]');
+        const carouselCount = await carousels.count();
+        fixtures_1.test.skip(carouselCount === 0, "No carousel/slider present on this page");
+        const carouselsAll = await carousels.all();
+        await Promise.all(carouselsAll.map(async (carousel, carouselIndex) => {
+            await (0, utils_1.traverseSlidesForward)(carousel, carouselIndex, isMobile);
+            if (isMobile) {
+                await (0, utils_1.checkSwipeBackward)(carousel, carouselIndex);
+            }
+            else {
+                await (0, utils_1.checkAllDots)(carousel, carouselIndex);
+            }
+        }));
+        const autoAdvanceWaitMS = 30_000;
+        await page.waitForTimeout(autoAdvanceWaitMS);
+        await Promise.all(carouselsAll.map(async (carousel, carouselIndex) => {
+            const isEmptyFrameAfterWait = await (0, utils_1.hasEmptySlideFrame)(carousel);
+            (0, test_1.expect)(isEmptyFrameAfterWait, `Carousel at index ${carouselIndex.toString()}: Slide frame was blank after 30s untouched`).toBe(false);
+        }));
+    });
+});

package/dist/specs/shared/media-embeds/cookie-consent.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/specs/shared/media-embeds/cookie-consent.spec.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../../fixtures");
+const test_1 = require("@playwright/test");
+fixtures_1.test.describe("Media & embeds", () => {
+    (0, fixtures_1.test)("MD-04 Cookie consent banner appears on first visit and can be dismissed", async ({ page, targetPage, }) => {
+        await page.goto(targetPage);
+        // Look for common cookie banner text and an accept button
+        const acceptButton = page
+            .getByRole("button", { name: /accept|got it|agree/i })
+            .filter({ hasText: /cookie|accept/i })
+            .first();
+        const isBannerVisible = await acceptButton.isVisible();
+        // isBannerVisible is true when the cookie consent banner is present and visible on the page
+        if (!isBannerVisible) {
+            fixtures_1.test.skip(true, "No cookie consent banner found on this page");
+        }
+        // Dismiss it
+        await acceptButton.click();
+        // Button/banner should disappear
+        await (0, test_1.expect)(acceptButton).toBeHidden();
+        // Reload page
+        await page.reload();
+        // Banner should not reappear (Playwright context persists cookies within a single test by default)
+        await (0, test_1.expect)(acceptButton).toBeHidden();
+    });
+});

package/dist/specs/shared/media-embeds/third-party-embeds.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/specs/shared/media-embeds/third-party-embeds.spec.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../../fixtures");
+const utils_1 = require("../../utils");
+const test_1 = require("@playwright/test");
+fixtures_1.test.describe("Media Embeds - Third Party", () => {
+    (0, fixtures_1.test)("MD-03 Third-party embeds render without overflow and remain interactive", async ({ page, targetPage, consoleErrors, }) => {
+        await page.goto(targetPage);
+        const embeds = page.locator("iframe, embed, object");
+        const embedCount = await embeds.count();
+        fixtures_1.test.skip(embedCount === 0, "No third-party embeds present on this page");
+        const isOverflowing = await (0, utils_1.hasHorizontalScrollbar)(page);
+        (0, test_1.expect)(isOverflowing, "Page should not have horizontal overflow with embeds present").toBe(false);
+        const collapsedEmbeds = await (0, utils_1.findCollapsedEmbeds)(page);
+        (0, test_1.expect)(collapsedEmbeds, `Embed(s) collapsed to zero size:\n${collapsedEmbeds.join("\n")}`).toEqual([]);
+        const heading = page.getByRole("heading", { level: 1 }).first();
+        await (0, test_1.expect)(heading, "Main heading should remain visible with embeds present").toBeVisible();
+        for (let embedIndex = 0; embedIndex < embedCount; embedIndex++) {
+            await embeds.nth(embedIndex).click({ timeout: 5_000 });
+        }
+        (0, test_1.expect)(consoleErrors, `Interacting with an embed should not cause a console error:\n${consoleErrors.join("\n")}`).toHaveLength(0);
+        await (0, test_1.expect)(heading, "Main heading should still be visible after interacting with each embed").toBeVisible();
+    });
+});

package/dist/specs/shared/media-embeds/video-playback.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/specs/shared/media-embeds/video-playback.spec.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../../fixtures");
+const utils_1 = require("../../utils");
+const test_1 = require("@playwright/test");
+fixtures_1.test.describe("Media Embeds - Video Playback", () => {
+    (0, fixtures_1.test)("MD-01 Video playback controls work and autoplay (if present) is muted", async ({ page, targetPage, }) => {
+        await page.goto(targetPage);
+        const videos = page.locator("video");
+        const videoCount = await videos.count();
+        fixtures_1.test.skip(videoCount === 0, "No video element present on this page");
+        const allVideos = await videos.all();
+        await Promise.all(allVideos.map(async (video, index) => {
+            const isAutoplaying = await (0, utils_1.isVideoAutoplaying)(video);
+            if (isAutoplaying) {
+                const isMuted = await (0, utils_1.isVideoMuted)(video);
+                (0, test_1.expect)(isMuted, `Autoplaying video at index ${index.toString()} must be muted (autoplay with sound is a failure, especially on mobile)`).toBe(true);
+            }
+            await video.evaluate((element) => {
+                element.pause();
+            });
+            const isPausedAfterPause = await video.evaluate((element) => {
+                return element.paused;
+            });
+            (0, test_1.expect)(isPausedAfterPause, `Video at index ${index.toString()} should pause when pause is triggered`).toBe(true);
+            await video.evaluate((element) => {
+                void element.play();
+            });
+            const isPlayingAfterPlay = await video.evaluate((element) => {
+                return !element.paused;
+            });
+            (0, test_1.expect)(isPlayingAfterPlay, `Video at index ${index.toString()} should play when play is triggered`).toBe(true);
+            await video.evaluate((element) => {
+                element.muted = false;
+            });
+            const isUnmuted = await video.evaluate((element) => {
+                return !element.muted;
+            });
+            (0, test_1.expect)(isUnmuted, `Video at index ${index.toString()} should be unmutable via its controls`).toBe(true);
+            const initialTime = await video.evaluate((element) => {
+                return element.currentTime;
+            });
+            const seek = initialTime + 1;
+            await video.evaluate((element, seekTo) => {
+                element.currentTime = seekTo;
+            }, seek);
+            const currentTimeAfterSeek = await video.evaluate((element) => {
+                return element.currentTime;
+            });
+            const timeDifference = Math.abs(currentTimeAfterSeek - initialTime);
+            (0, test_1.expect)(timeDifference, `Video at index ${index.toString()} should have a different current time after seeking`).toBeGreaterThan(0);
+        }));
+    });
+});

package/dist/specs/shared/sticky-elements.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/specs/shared/sticky-elements.spec.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../fixtures");
+const sticky_utils_1 = require("../sticky-utils");
+const test_1 = require("@playwright/test");
+(0, fixtures_1.test)("RS-06 Sticky elements (if present) stay pinned and don't cover content or overlap the footer", async ({ page, targetPage, }) => {
+    await page.goto(targetPage);
+    const { stickyElementCount, flicker, coversContent, overlapsFooter } = await (0, sticky_utils_1.checkStickyElements)(page);
+    fixtures_1.test.skip(stickyElementCount === 0, "No sticky/fixed elements present");
+    (0, test_1.expect)(flicker, `Sticky element did not stay pinned:\n${flicker.join("\n")}`).toEqual([]);
+    (0, test_1.expect)(coversContent, `Sticky element covered body text or form fields:\n${coversContent.join("\n")}`).toEqual([]);
+    (0, test_1.expect)(overlapsFooter, `Sticky element overlapped the footer at the bottom of the page:\n${overlapsFooter.join("\n")}`).toEqual([]);
+});

package/dist/specs/sticky-utils.d.ts

@@ -0,0 +1,13 @@
+import type { Page } from "@playwright/test";
+export interface ScrollMetrics {
+    scrollHeight: number;
+    scrollY: number;
+}
+export declare function getScrollMetrics(page: Page): Promise<ScrollMetrics>;
+export interface StickyIssues {
+    stickyElementCount: number;
+    flicker: string[];
+    coversContent: string[];
+    overlapsFooter: string[];
+}
+export declare function checkStickyElements(page: Page): Promise<StickyIssues>;

package/dist/specs/sticky-utils.js

@@ -0,0 +1,158 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getScrollMetrics = getScrollMetrics;
+exports.checkStickyElements = checkStickyElements;
+const utils_1 = require("./utils");
+async function getScrollMetrics(page) {
+    return page.evaluate(() => {
+        return {
+            scrollHeight: document.documentElement.scrollHeight,
+            scrollY: window.scrollY,
+        };
+    });
+}
+// Each page.evaluate call runs in a fresh browser-side context, so a DOM element found in one
+// can't be referenced from the next — this attribute gives each sticky a stable ID to re-select
+// by across the many separate evaluate calls this check makes while scrolling.
+const StickyMarkerAttribute = "data-rs06-sticky-id";
+// Content worth checking that a sticky element doesn't cover: body text and form fields.
+const ContentSelector = "p, li, td, th, label, input, textarea, select, button, a, h1, h2, h3, h4, h5, h6";
+// Marks by computed position alone, not current visibility — a sticky/fixed element that's
+// hidden at page load (e.g. a CTA bar that only appears after scrolling past the hero) must
+// still be tracked once it shows up later, not excluded from the whole test up front.
+async function markStickyElements(page) {
+    return page.evaluate((markerAttribute) => {
+        const candidates = Array.from(document.querySelectorAll("body *")).filter((element) => {
+            const style = window.getComputedStyle(element);
+            return style.position === "fixed" || style.position === "sticky";
+        });
+        candidates.forEach((element, index) => {
+            element.setAttribute(markerAttribute, String(index));
+        });
+        return candidates.length;
+    }, StickyMarkerAttribute);
+}
+async function sampleStickyPositions(page) {
+    return page.evaluate(({ markerAttribute, contentSelector }) => {
+        function isRendered(element) {
+            const style = window.getComputedStyle(element);
+            const rect = element.getBoundingClientRect();
+            return (style.display !== "none" &&
+                style.visibility !== "hidden" &&
+                Number.parseFloat(style.opacity) !== 0 &&
+                rect.width > 0 &&
+                rect.height > 0);
+        }
+        // Only currently-visible stickies contribute a sample this step — a sticky bar that's
+        // hidden right now (not yet triggered, or already dismissed) simply isn't sampled here.
+        const stickies = Array.from(document.querySelectorAll(`[${markerAttribute}]`)).filter(isRendered);
+        const contentElements = Array.from(document.querySelectorAll(contentSelector)).filter(isRendered);
+        return stickies.map((element) => {
+            const stickyID = Number(element.getAttribute(markerAttribute));
+            const rect = element.getBoundingClientRect();
+            const desc = `<${element.tagName.toLowerCase()} class="${element.className}">`;
+            const covered = contentElements
+                .filter((content) => {
+                const isNested = element.contains(content);
+                const contentRect = content.getBoundingClientRect();
+                const overlapWidth = Math.min(rect.right, contentRect.right) - Math.max(rect.left, contentRect.left);
+                const overlapHeight = Math.min(rect.bottom, contentRect.bottom) - Math.max(rect.top, contentRect.top);
+                return !isNested && overlapWidth > 0 && overlapHeight > 0;
+            })
+                .map((content) => {
+                return `${desc} covers <${content.tagName.toLowerCase()} class="${content.className}">`;
+            });
+            return { stickyID, top: rect.top, covered };
+        });
+    }, { markerAttribute: StickyMarkerAttribute, contentSelector: ContentSelector });
+}
+async function collectStickySamples(page, scrollHeight, steps) {
+    const samplesByElement = new Map();
+    const coversContent = [];
+    const down = Array.from({ length: steps + 1 }, (_, i) => {
+        return Math.floor((scrollHeight / steps) * i);
+    });
+    const up = Array.from({ length: steps + 1 }, (_, i) => {
+        return Math.floor((scrollHeight / steps) * (steps - i));
+    });
+    for (const scrollY of [...down, ...up]) {
+        await page.evaluate((y) => {
+            window.scrollTo(0, y);
+        }, scrollY);
+        await page.waitForTimeout(100);
+        const sample = await sampleStickyPositions(page);
+        for (const entry of sample) {
+            const samples = samplesByElement.get(entry.stickyID) ?? [];
+            samples.push({ scrollY, top: entry.top });
+            samplesByElement.set(entry.stickyID, samples);
+            coversContent.push(...entry.covered);
+        }
+    }
+    return { samplesByElement, coversContent };
+}
+// A well-behaved sticky/fixed element's top can only change between two samples in one of two
+// ways: it's currently pinned, so top stays put (delta ~0); or it's still in normal flow (not yet
+// engaged), so top moves in exact lockstep with scroll (delta ~ -scrollDelta). Anything else is an
+// unexplained jump — the actual flicker/jank this check is meant to catch.
+function computeFlicker(samplesByElement) {
+    const flicker = [];
+    for (const [stickyID, samples] of samplesByElement) {
+        for (let i = 1; i < samples.length; i++) {
+            const topDelta = samples[i].top - samples[i - 1].top;
+            const scrollDelta = samples[i].scrollY - samples[i - 1].scrollY;
+            const isPinned = Math.abs(topDelta) <= utils_1.ResponsiveConfig.PinFlickerTolerancePX;
+            const isFollowingScroll = Math.abs(topDelta + scrollDelta) <= utils_1.ResponsiveConfig.PinFlickerTolerancePX;
+            if (!isPinned && !isFollowingScroll) {
+                flicker.push(`sticky element #${String(stickyID)} jumped ${Math.abs(topDelta).toFixed(0)}px between consecutive scroll samples`);
+            }
+        }
+    }
+    return flicker;
+}
+async function findFooterOverlaps(page) {
+    await page.evaluate(() => {
+        window.scrollTo(0, document.documentElement.scrollHeight);
+    });
+    await page.waitForTimeout(100);
+    const conflicts = [];
+    const footer = await page.$("footer, [role='contentinfo']");
+    if (footer !== null) {
+        const footerRect = await footer.boundingBox();
+        const stickies = await page.$$(`[${StickyMarkerAttribute}]`);
+        for (const sticky of stickies) {
+            const rect = await sticky.boundingBox();
+            if (footerRect === null || rect === null)
+                continue;
+            const overlapWidth = Math.min(rect.x + rect.width, footerRect.x + footerRect.width) - Math.max(rect.x, footerRect.x);
+            const overlapHeight = Math.min(rect.y + rect.height, footerRect.y + footerRect.height) - Math.max(rect.y, footerRect.y);
+            if (overlapWidth > 0 && overlapHeight > 0) {
+                const description = await sticky.evaluate((element) => {
+                    return `<${element.tagName.toLowerCase()} class="${element.className}">`;
+                });
+                conflicts.push(description);
+            }
+        }
+    }
+    return conflicts;
+}
+async function checkStickyElements(page) {
+    const stickyElementCount = await markStickyElements(page);
+    let result;
+    if (stickyElementCount === 0) {
+        result = { stickyElementCount: 0, flicker: [], coversContent: [], overlapsFooter: [] };
+    }
+    else {
+        const { scrollHeight } = await getScrollMetrics(page);
+        const steps = 20;
+        const { samplesByElement, coversContent } = await collectStickySamples(page, scrollHeight, steps);
+        const flicker = computeFlicker(samplesByElement);
+        const overlapsFooter = await findFooterOverlaps(page);
+        result = {
+            stickyElementCount,
+            flicker,
+            coversContent: [...new Set(coversContent)],
+            overlapsFooter,
+        };
+    }
+    return result;
+}