@manufac/general-tests 0.5.0 → 0.9.0

package/dist/specs/utils.js

@@ -1,863 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SafeAreaZones = exports.KeyboardFields = exports.AutofillFields = exports.InvalidInputCases = exports.FieldValueMappings = exports.FieldInteractions = exports.ValidUserInfo = exports.ContentOverlapSelector = exports.TouchTargetSizeSelector = exports.TappableElementsSelector = exports.ResponsiveConfig = void 0;
-exports.describeElement = describeElement;
-exports.getScrollMetrics = getScrollMetrics;
-exports.scrollThroughPage = scrollThroughPage;
-exports.findTruncatedOrOverflowingText = findTruncatedOrOverflowingText;
-exports.findOverlappingElements = findOverlappingElements;
-exports.findImageSizeIssues = findImageSizeIssues;
-exports.isImageUpscaled = isImageUpscaled;
-exports.isImageOversized = isImageOversized;
-exports.isCutoffAtViewportEdge = isCutoffAtViewportEdge;
-exports.findElementsCutoffAtViewportEdge = findElementsCutoffAtViewportEdge;
-exports.findUndersizedBodyText = findUndersizedBodyText;
-exports.findUndersizedTouchTargets = findUndersizedTouchTargets;
-exports.hasHorizontalScrollbar = hasHorizontalScrollbar;
-exports.isVideoAutoplaying = isVideoAutoplaying;
-exports.isVideoMuted = isVideoMuted;
-exports.isFieldRequired = isFieldRequired;
-exports.fillDateTimePicker = fillDateTimePicker;
-exports.fillFormFields = fillFormFields;
-exports.hasVisibleErrorNearField = hasVisibleErrorNearField;
-exports.fillOtherRequiredFieldsValidly = fillOtherRequiredFieldsValidly;
-exports.getActiveSlideIndex = getActiveSlideIndex;
-exports.getTotalSlideCount = getTotalSlideCount;
-exports.hasEmptySlideFrame = hasEmptySlideFrame;
-exports.goToNextSlideViaArrow = goToNextSlideViaArrow;
-exports.getDotCount = getDotCount;
-exports.goToSlideViaDot = goToSlideViaDot;
-exports.swipeToNextSlide = swipeToNextSlide;
-exports.swipeToPreviousSlide = swipeToPreviousSlide;
-exports.traverseSlidesForward = traverseSlidesForward;
-exports.checkSwipeBackward = checkSwipeBackward;
-exports.checkAllDots = checkAllDots;
-exports.findSafeAreaOverlaps = findSafeAreaOverlaps;
 exports.fillField = fillField;
 exports.hasNativeValidationError = hasNativeValidationError;
+exports.toSnapshotName = toSnapshotName;
+exports.hasHorizontalScrollbar = hasHorizontalScrollbar;
+exports.scrollThroughPage = scrollThroughPage;
+const schema_1 = require("../schema");
 const test_1 = require("@playwright/test");
-exports.ResponsiveConfig = {
-    ScrollSteps: 10,
-    ScrollStepDelayMs: 100,
-    ViewPortWidth: 1440,
-    ViewPortHeight: 900,
-    ZoomFactor: 2,
-    ZoomSettleDelayMs: 300,
-    UpscaleTolerance: 1.05,
-    OversizeTolerance: 2,
-    ScrollDriftTolerance: 0.15,
-    MinBodyTextFontSizePX: 12,
-    PinFlickerTolerancePX: 2,
-    MinTouchTargetSizePX: 44,
-    KeyboardOcclusionRatio: 0.4,
-    CutoffTolerancePX: 5,
-};
-// Formats a descriptor captured inside page.evaluate (see findElementsCutoffAtViewportEdge and
-// findUndersizedBodyText) into a readable tag selector, e.g. <p.hero.subtitle>.
-function describeElement(descriptor) {
-    const rawClassName = descriptor.className.trim();
-    const className = rawClassName.length > 0 ? `.${rawClassName.replace(/\s+/g, ".")}` : "";
-    return `<${descriptor.tagName.toLowerCase()}${className}>`;
-}
-/**
- * References for summary and details elements:
- * - https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/summary
- * - https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details
- */
-const TappableElementsList = [
-    "a",
-    "button",
-    "select",
-    "summary",
-    'input[type="submit"]',
-    'input[type="button"]',
-    'input[type="reset"]',
-    'input[type="checkbox"]',
-    'input[type="radio"]',
-    "label[for]",
-    '[role="button"]',
-    '[role="link"]',
-    '[role="tab"]',
-    '[role="menuitem"]',
-    '[role="option"]',
-    '[role="switch"]',
-    '[role="checkbox"]',
-    '[role="radio"]',
-    '[tabindex="0"]',
-];
-exports.TappableElementsSelector = TappableElementsList.join(", ");
-// Native checkbox/radio inputs render at a small, fixed OS size regardless of page styling — their
-// real tappable target is normally the paired <label for="...">, already covered separately here.
-// Excluded from the size check (but not the overlap check) so a standard HTML form doesn't fail
-// on every single page just for using unstyled checkboxes/radios.
-const SizeExemptTappableSelectors = new Set(['input[type="checkbox"]', 'input[type="radio"]']);
-exports.TouchTargetSizeSelector = TappableElementsList.filter((selector) => {
-    return !SizeExemptTappableSelectors.has(selector);
-}).join(", ");
-async function getScrollMetrics(page) {
-    return page.evaluate(() => {
-        return {
-            scrollHeight: document.documentElement.scrollHeight,
-            scrollY: window.scrollY,
-            clientHeight: document.documentElement.clientHeight,
-        };
-    });
-}
-async function scrollThroughPage(page) {
-    const { scrollHeight } = await getScrollMetrics(page);
-    const scrollStepDelta = Math.floor(scrollHeight / exports.ResponsiveConfig.ScrollSteps);
-    for (let step = 0; step <= exports.ResponsiveConfig.ScrollSteps; step++) {
-        await page.mouse.wheel(0, scrollStepDelta);
-        await page.waitForTimeout(exports.ResponsiveConfig.ScrollStepDelayMs);
-    }
-}
-async function findTruncatedOrOverflowingText(page) {
-    return page.evaluate(() => {
-        const broken = [];
-        const elements = Array.from(document.querySelectorAll("p, li, td, th, dt, dd, blockquote, figcaption, h1, h2, h3, h4, h5, h6"));
-        for (const element of elements) {
-            const text = element.textContent.trim();
-            if (text.length > 0) {
-                const style = window.getComputedStyle(element);
-                const isEllipsisTruncated = style.textOverflow === "ellipsis" && style.overflow !== "visible";
-                const isOverflowingHorizontally = element.scrollWidth > element.clientWidth + 1;
-                // Ellipsis truncation is a deliberate, visually-indicated design pattern (card previews,
-                // single-line labels) — not a bug. Only flag genuinely broken cases: text overflowing
-                // WITHOUT any truncation handling (spilling out unstyled), which is always unintentional.
-                const isUnhandledOverflow = isOverflowingHorizontally && !isEllipsisTruncated;
-                if (isUnhandledOverflow) {
-                    broken.push(`<${element.tagName.toLowerCase()} class="${element.className}"> overflow=${style.overflow}, textOverflow=${style.textOverflow}: "${text.slice(0, 40)}"`);
-                }
-            }
-        }
-        return broken;
-    });
-}
-async function findOverlappingElements(page, containerSelector) {
-    const overlaps = await page.evaluate((selector) => {
-        function isVisibleInViewport(element) {
-            const rect = element.getBoundingClientRect();
-            const hasDimensions = rect.width > 0 && rect.height > 0;
-            const horizontalOverlap = Math.min(rect.right, window.innerWidth) - Math.max(rect.left, 0);
-            const verticalOverlap = Math.min(rect.bottom, window.innerHeight) - Math.max(rect.top, 0);
-            return hasDimensions && horizontalOverlap > 0 && verticalOverlap > 0;
-        }
-        // An element clipped by an ancestor's overflow:hidden/scroll/auto (e.g. a closed mobile
-        // drawer/menu duplicate) is intentionally hidden from view — not a real visual overlap.
-        // Defined inside this evaluate callback (rather than at module scope) since page.evaluate
-        // serializes only the callback itself — outer Node-side function references aren't
-        // available once this runs in the browser.
-        function isClippedByAncestorOverflow(element) {
-            const rect = element.getBoundingClientRect();
-            let parent = element.parentElement;
-            let isClipped = false;
-            while (parent !== null && !isClipped) {
-                const parentStyle = window.getComputedStyle(parent);
-                const isOverflowClipped = ["hidden", "scroll", "auto"].includes(parentStyle.overflowX) ||
-                    ["hidden", "scroll", "auto"].includes(parentStyle.overflowY);
-                if (isOverflowClipped) {
-                    const parentRect = parent.getBoundingClientRect();
-                    const isOutsideParentBounds = rect.right <= parentRect.left ||
-                        rect.left >= parentRect.right ||
-                        rect.bottom <= parentRect.top ||
-                        rect.top >= parentRect.bottom;
-                    if (isOutsideParentBounds) {
-                        isClipped = true;
-                    }
-                }
-                parent = parent.parentElement;
-            }
-            return isClipped;
-        }
-        const conflicts = [];
-        const elements = Array.from(document.querySelectorAll(selector))
-            .filter(isVisibleInViewport)
-            .filter((element) => {
-            return !isClippedByAncestorOverflow(element);
-        });
-        // Checks the element itself and its ancestors: a fixed/sticky container's own children are
-        // normally position:static/relative, but they still visually pin to the viewport along with
-        // it, so the pinning has to be detected up the ancestor chain, not just on the element itself.
-        function isPinnedToViewport(element) {
-            let current = element;
-            let isPinned = false;
-            while (current !== null && !isPinned) {
-                const { position } = window.getComputedStyle(current);
-                isPinned = position === "fixed" || position === "sticky";
-                current = current.parentElement;
-            }
-            return isPinned;
-        }
-        for (let i = 0; i < elements.length; i++) {
-            for (let index = i + 1; index < elements.length; index++) {
-                const a = elements[i];
-                const b = elements[index];
-                const isNested = a.contains(b) || b.contains(a);
-                // A fixed/sticky element (or something inside one) sitting over whatever content has
-                // scrolled beneath it is expected, inherent behavior — not a layout bug. Only flag
-                // overlaps between two elements that are both in normal flow (or both pinned, which
-                // would indicate a real stacking conflict between two pinned elements).
-                const isExpectedPinnedOverlap = isPinnedToViewport(a) !== isPinnedToViewport(b);
-                if (!isNested && !isExpectedPinnedOverlap) {
-                    const rectA = a.getBoundingClientRect();
-                    const rectB = b.getBoundingClientRect();
-                    const overlapWidth = Math.min(rectA.right, rectB.right) - Math.max(rectA.left, rectB.left);
-                    const overlapHeight = Math.min(rectA.bottom, rectB.bottom) - Math.max(rectA.top, rectB.top);
-                    if (overlapWidth > 0 && overlapHeight > 0) {
-                        conflicts.push({
-                            elementA: { tagName: a.tagName, className: a.className },
-                            elementB: { tagName: b.tagName, className: b.className },
-                            overlapWidth,
-                            overlapHeight,
-                        });
-                    }
-                }
-            }
-        }
-        return conflicts;
-    }, containerSelector);
-    return overlaps.map((overlap) => {
-        return `${overlap.elementA.tagName} overlaps ${overlap.elementB.tagName} by ${overlap.overlapWidth.toFixed(0)}x${overlap.overlapHeight.toFixed(0)}px`;
-    });
-}
-// Content elements worth checking for overlap after a layout-affecting change (e.g. orientation
-// change): tappable elements, text-bearing elements, and images.
-exports.ContentOverlapSelector = [
-    exports.TappableElementsSelector,
-    "p",
-    "li",
-    "td",
-    "th",
-    "dt",
-    "dd",
-    "blockquote",
-    "figcaption",
-    "h1",
-    "h2",
-    "h3",
-    "h4",
-    "h5",
-    "h6",
-    "img",
-].join(", ");
-async function findImageSizeIssues(page) {
-    return page.evaluate(() => {
-        const images = Array.from(document.querySelectorAll("img"));
-        const issues = images
-            .map((image) => {
-            let issue = null;
-            const rect = image.getBoundingClientRect();
-            const isRendered = rect.width > 0 && rect.height > 0;
-            const hasNaturalSize = image.naturalWidth > 0 && image.naturalHeight > 0;
-            if (isRendered && hasNaturalSize) {
-                issue = {
-                    src: image.currentSrc,
-                    naturalWidth: image.naturalWidth,
-                    naturalHeight: image.naturalHeight,
-                    renderedWidth: rect.width,
-                    renderedHeight: rect.height,
-                    devicePixelRatio: window.devicePixelRatio,
-                };
-            }
-            return issue;
-        })
-            .filter((entry) => {
-            return entry !== null;
-        });
-        return issues;
-    });
-}
-function isImageUpscaled(image) {
-    const isWidthUpscaled = image.renderedWidth * image.devicePixelRatio > image.naturalWidth * exports.ResponsiveConfig.UpscaleTolerance;
-    const isHeightUpscaled = image.renderedHeight * image.devicePixelRatio > image.naturalHeight * exports.ResponsiveConfig.UpscaleTolerance;
-    return isWidthUpscaled || isHeightUpscaled;
-}
-function isImageOversized(image) {
-    const isWidthOversized = image.naturalWidth > image.renderedWidth * image.devicePixelRatio * exports.ResponsiveConfig.OversizeTolerance;
-    const isHeightOversized = image.naturalHeight > image.renderedHeight * image.devicePixelRatio * exports.ResponsiveConfig.OversizeTolerance;
-    return isWidthOversized || isHeightOversized;
-}
-// Cut off means straddling the viewport edge (partially visible), not positioned entirely
-// outside it — off-canvas nav drawers, upcoming carousel slides, and visually-hidden
-// screen-reader text are intentionally placed fully outside the viewport and are not bugs.
-// Vertical straddling is only flagged for fixed/sticky elements: normal in-flow content
-// straddles the top/bottom edge constantly while scrolling, which is expected, not a bug.
-// Pure geometry (no DOM APIs), so it runs in Node against a rect snapshot taken in the browser.
-function isCutoffAtViewportEdge(snapshot, viewport) {
-    const { rect } = snapshot;
-    const hasDimensions = rect.width > 0 && rect.height > 0;
-    const horizontalOverlap = Math.min(rect.right, viewport.width) - Math.max(rect.left, 0);
-    const isHorizontallyClipped = horizontalOverlap > 0 &&
-        (rect.left < -exports.ResponsiveConfig.CutoffTolerancePX ||
-            rect.right > viewport.width + exports.ResponsiveConfig.CutoffTolerancePX);
-    const verticalOverlap = Math.min(rect.bottom, viewport.height) - Math.max(rect.top, 0);
-    const isVerticallyClipped = snapshot.isFixedOrSticky &&
-        verticalOverlap > 0 &&
-        (rect.top < -exports.ResponsiveConfig.CutoffTolerancePX ||
-            rect.bottom > viewport.height + exports.ResponsiveConfig.CutoffTolerancePX);
-    return hasDimensions && (isHorizontallyClipped || isVerticallyClipped);
-}
-async function findElementsCutoffAtViewportEdge(page, containerSelector) {
-    const { elements, viewport } = await page.evaluate((selector) => {
-        function isRenderedElement(element) {
-            const style = window.getComputedStyle(element);
-            return style.display !== "none" && style.visibility !== "hidden" && Number.parseFloat(style.opacity) !== 0;
-        }
-        // An element clipped by an ancestor's overflow:hidden/scroll/auto (e.g. a closed
-        // drawer/menu duplicate) is intentionally hidden from view — not a real cutoff.
-        // Defined inside this evaluate callback (rather than at module scope) since page.evaluate
-        // serializes only the callback itself — outer Node-side function references aren't
-        // available once this runs in the browser.
-        function isClippedByAncestorOverflow(element) {
-            const rect = element.getBoundingClientRect();
-            let parent = element.parentElement;
-            let isClipped = false;
-            while (parent !== null && !isClipped) {
-                const parentStyle = window.getComputedStyle(parent);
-                const isOverflowClipped = ["hidden", "scroll", "auto"].includes(parentStyle.overflowX) ||
-                    ["hidden", "scroll", "auto"].includes(parentStyle.overflowY);
-                if (isOverflowClipped) {
-                    const parentRect = parent.getBoundingClientRect();
-                    const isOutsideParentBounds = rect.right <= parentRect.left ||
-                        rect.left >= parentRect.right ||
-                        rect.bottom <= parentRect.top ||
-                        rect.top >= parentRect.bottom;
-                    if (isOutsideParentBounds) {
-                        isClipped = true;
-                    }
-                }
-                parent = parent.parentElement;
-            }
-            return isClipped;
-        }
-        const renderedElements = Array.from(document.querySelectorAll(selector ?? "body *"))
-            .filter(isRenderedElement)
-            .filter((element) => {
-            return !isClippedByAncestorOverflow(element);
-        })
-            .map((element) => {
-            const rect = element.getBoundingClientRect();
-            const style = window.getComputedStyle(element);
-            return {
-                tagName: element.tagName,
-                className: element instanceof HTMLElement ? element.className : "",
-                rect: {
-                    left: rect.left,
-                    right: rect.right,
-                    top: rect.top,
-                    bottom: rect.bottom,
-                    width: rect.width,
-                    height: rect.height,
-                },
-                isFixedOrSticky: style.position === "fixed" || style.position === "sticky",
-            };
-        });
-        return { elements: renderedElements, viewport: { width: window.innerWidth, height: window.innerHeight } };
-    }, containerSelector);
-    return elements
-        .filter((element) => {
-        return isCutoffAtViewportEdge(element, viewport);
-    })
-        .map(describeElement);
-}
-// Returns a descriptor (not the element itself) rather than returning it directly: page.evaluate's
-// return value is JSON-serialized across the browser/Node boundary, and a DOM element has no own
-// enumerable properties, so it would come back as an empty object instead of a usable reference.
-async function findUndersizedBodyText(page) {
-    const undersizedElements = await page.evaluate((minFontSizePX) => {
-        const elements = Array.from(document.querySelectorAll("p, li, td, th, dt, dd, blockquote, figcaption"));
-        return elements.reduce((undersized, element) => {
-            const text = element.textContent.trim();
-            const fontSizePX = Number.parseFloat(window.getComputedStyle(element).fontSize);
-            if (text.length > 0 && fontSizePX < minFontSizePX) {
-                undersized.push({ tagName: element.tagName, className: element.className, fontSizePX });
-            }
-            return undersized;
-        }, []);
-    }, exports.ResponsiveConfig.MinBodyTextFontSizePX);
-    return undersizedElements.map((element) => {
-        return `${describeElement(element)} (${String(element.fontSizePX)}px)`;
-    });
-}
-async function findUndersizedTouchTargets(page, containerSelector) {
-    const undersizedElements = await page.evaluate(({ selector, minSizePX }) => {
-        function isRendered(element) {
-            const style = window.getComputedStyle(element);
-            return style.display !== "none" && style.visibility !== "hidden" && Number.parseFloat(style.opacity) !== 0;
-        }
-        return Array.from(document.querySelectorAll(selector))
-            .filter(isRendered)
-            .map((element) => {
-            const rect = element.getBoundingClientRect();
-            return {
-                tagName: element.tagName,
-                className: element.className,
-                width: rect.width,
-                height: rect.height,
-                text: element.textContent.trim().slice(0, 40),
-            };
-        })
-            .filter((entry) => {
-            const hasDimensions = entry.width > 0 && entry.height > 0;
-            return hasDimensions && (entry.width < minSizePX || entry.height < minSizePX);
-        });
-    }, { selector: containerSelector, minSizePX: exports.ResponsiveConfig.MinTouchTargetSizePX });
-    return undersizedElements.map((element) => {
-        return `${describeElement(element)} is ${element.width.toFixed(0)}x${element.height.toFixed(0)}px: "${element.text}"`;
-    });
-}
-async function hasHorizontalScrollbar(page) {
-    return page.evaluate(() => {
-        return document.documentElement.scrollWidth > document.documentElement.clientWidth;
-    });
-}
-async function isVideoAutoplaying(video) {
-    const isPaused = await video.evaluate((element) => {
-        return element.paused;
-    });
-    return !isPaused;
-}
-async function isVideoMuted(video) {
-    return video.evaluate((element) => {
-        return element.muted;
-    });
-}
-exports.ValidUserInfo = {
-    ValidTestName: "Jane Doe",
-    ValidTestEmail: "test@test.com",
-    ValidTestPhone: "9876543210",
-    ValidTestCompany: "Acme Corp",
-    ValidTestProjectDescription: "This is a sample project description used for automated contact form testing.",
-    ValidTestPreferredDate: "2026-09-15",
-    ValidTestPreferredTime: "10:00 AM",
-    LongNameCharacterCount: 250,
-    EmojiTestName: "Jane 😀 Doe",
-    PaddedTestEmail: "   test@test.com   ",
-    InvalidTestEmail: "not-an-email",
-};
-async function isFieldRequired(fieldLocator) {
-    const requiredAttribute = await fieldLocator.getAttribute("required");
-    const ariaRequired = await fieldLocator.getAttribute("aria-required");
-    const isMarkedRequired = requiredAttribute !== null || ariaRequired === "true";
-    return isMarkedRequired;
-}
-exports.FieldInteractions = {
-    Fill: "fill",
-    Datetime: "datetime",
-};
-/**
- * Maps a detected field (by its label) to the valid test value used
- * to fill it. Presence here does NOT imply the field is required —
- * required-ness is determined dynamically per field via
- * `isFieldRequired`. Email is the only field that is always required.
- */
-exports.FieldValueMappings = [
-    { label: /name/i, validValue: exports.ValidUserInfo.ValidTestName, interaction: exports.FieldInteractions.Fill },
-    { label: /email/i, validValue: exports.ValidUserInfo.ValidTestEmail, interaction: exports.FieldInteractions.Fill },
-    { label: /phone/i, validValue: exports.ValidUserInfo.ValidTestPhone, interaction: exports.FieldInteractions.Fill },
-    { label: /company/i, validValue: exports.ValidUserInfo.ValidTestCompany, interaction: exports.FieldInteractions.Fill },
-    {
-        label: /project|description/i,
-        validValue: exports.ValidUserInfo.ValidTestProjectDescription,
-        interaction: exports.FieldInteractions.Fill,
-    },
-    { label: /date/i, validValue: exports.ValidUserInfo.ValidTestPreferredDate, interaction: exports.FieldInteractions.Datetime },
-    { label: /time/i, validValue: exports.ValidUserInfo.ValidTestPreferredTime, interaction: exports.FieldInteractions.Datetime },
-];
-// Some date/time fields are plain inputs; others are picker widgets that open a popup and
-// reject typed text. Tries .fill() first, falling back to ARIA roles (grid/gridcell, spinbutton)
-// if the value didn't take, since apps vary in UI library. No-ops if nothing matches.
-//
-// Mantine's DateTimePicker doesn't use role=gridcell for its calendar days (just plain <button>
-// elements labeled by day number), so the day selector also falls back to any enabled button
-// with a 1-2 digit label.
-async function fillDateTimePicker(locator, fallbackValue) {
-    await locator.fill(fallbackValue).catch(() => {
-        return undefined;
-    });
-    const filledValue = await locator.inputValue().catch(() => {
-        return "";
-    });
-    if (filledValue.length === 0) {
-        await locator.click();
-        const page = locator.page();
-        // Give the popup a moment to finish laying out before interacting — clicking immediately
-        // can hit a day cell while another control (e.g. an AM/PM toggle) is still animating into
-        // place on top of it, intercepting the click.
-        await page.waitForTimeout(300);
-        // Scope the numeric-button fallback to an open popup/dialog when one exists, rather than the
-        // whole page, so it can't accidentally match an unrelated numeric button elsewhere (e.g. a
-        // pagination control or step counter).
-        const popup = page.locator('[role="dialog"], [role="listbox"], [aria-modal="true"]').first();
-        const hasPopup = (await popup.count()) > 0;
-        const numericDayButtons = (hasPopup ? popup : page)
-            .locator("button:not([disabled]):not([aria-disabled='true'])")
-            .filter({ hasText: /^\d{1,2}$/ });
-        const dayCells = page.locator('[role="gridcell"]:not([aria-disabled="true"])').or(numericDayButtons);
-        const dayCellCount = await dayCells.count();
-        for (let index = 0; index < dayCellCount; index++) {
-            const cell = dayCells.nth(index);
-            if (await cell.isVisible()) {
-                await cell.click();
-                await page.waitForTimeout(300);
-                break;
-            }
-        }
-        const spinbuttons = page.locator('[role="spinbutton"]');
-        const spinbuttonCount = await spinbuttons.count();
-        for (let index = 0; index < spinbuttonCount; index++) {
-            const button = spinbuttons.nth(index);
-            // Guards against the element detaching mid-animation, same as the day-cell loop above.
-            const isStillPresent = await button.isVisible().catch(() => {
-                return false;
-            });
-            if (isStillPresent) {
-                await button.click();
-                await page.keyboard.press("ArrowUp");
-                await page.waitForTimeout(100);
-            }
-        }
-        const confirmButton = page.getByRole("button", { name: /submit|confirm|apply|done|ok/i });
-        const confirmButtonCount = await confirmButton.count();
-        let isConfirmed = false;
-        for (let index = 0; index < confirmButtonCount; index++) {
-            const button = confirmButton.nth(index);
-            if (await button.isVisible()) {
-                await button.click();
-                isConfirmed = true;
-                break;
-            }
-        }
-        if (!isConfirmed) {
-            await page.keyboard.press("Escape");
-        }
-    }
-}
-async function fillFormFields(page) {
-    // Filled sequentially, not concurrently — see the same note in fillOtherRequiredFieldsValidly:
-    // a popup-based widget open in one field can lose focus and close mid-interaction if another
-    // field is filled at the same time.
-    for (const field of exports.FieldValueMappings) {
-        const locator = page.getByLabel(field.label);
-        if ((await locator.count()) > 0) {
-            if (field.interaction === exports.FieldInteractions.Datetime) {
-                await fillDateTimePicker(locator.first(), field.validValue);
-            }
-            else {
-                await locator.first().fill(field.validValue);
-            }
-        }
-    }
-}
-async function hasVisibleErrorNearField(fieldLocator) {
-    const fieldID = await fieldLocator.getAttribute("id");
-    const describedBy = await fieldLocator.getAttribute("aria-describedby");
-    let isDescribedByErrorVisible = false;
-    if (describedBy !== null) {
-        const describedByLocator = fieldLocator.page().locator(`#${describedBy}`);
-        isDescribedByErrorVisible = await describedByLocator.isVisible();
-    }
-    let isAdjacentErrorVisible = false;
-    if (fieldID !== null) {
-        const adjacentError = fieldLocator.page().locator(`[data-error-for="${fieldID}"]`);
-        isAdjacentErrorVisible = await adjacentError.isVisible();
-    }
-    // Native browser validation (e.g. the built-in "Please fill out this field" bubble triggered
-    // by the `required` attribute) isn't a queryable DOM node, so it can't be caught by the checks
-    // above — but the field's own validity state still reflects it.
-    const isNativelyInvalid = await fieldLocator.evaluate((element) => {
-        return !element.validity.valid && element.validationMessage !== "";
-    });
-    return isDescribedByErrorVisible || isAdjacentErrorVisible || isNativelyInvalid;
-}
-exports.InvalidInputCases = [
-    { fieldLabel: /email/i, invalidValue: "notanemail", expectedErrorText: /enter a valid email address/i },
-    { fieldLabel: /email/i, invalidValue: "test@", expectedErrorText: /enter a valid email address/i },
-    { fieldLabel: /email/i, invalidValue: "@test.com", expectedErrorText: /enter a valid email address/i },
-    { fieldLabel: /phone/i, invalidValue: "abc", expectedErrorText: /enter a valid phone number/i },
-    { fieldLabel: /phone/i, invalidValue: "12", expectedErrorText: /enter a valid phone number/i },
-];
-async function fillOtherRequiredFieldsValidly(page, skipLabel) {
-    const skipLocator = page.getByLabel(skipLabel);
-    const skipFieldCount = await skipLocator.count();
-    // Some combined widgets (e.g. a single "Preferred Time & Date" picker) match more than one
-    // FieldValueMappings label at once — comparing by element id, not just label text, catches
-    // that case so filling the "other" field doesn't silently fill the one under test too.
-    const skipFieldID = skipFieldCount > 0 ? await skipLocator.first().getAttribute("id") : null;
-    // Filled sequentially, not concurrently: a popup-based widget (like a date/time picker) opens
-    // on focus and closes on blur, so filling a different field at the same time can steal focus
-    // and close it mid-interaction, detaching whatever this was about to click inside it.
-    for (const field of exports.FieldValueMappings) {
-        const isSkippedField = field.label.source === skipLabel.source;
-        const locator = page.getByLabel(field.label);
-        let isFieldPresent = false;
-        if (!isSkippedField) {
-            isFieldPresent = (await locator.count()) > 0;
-        }
-        let isSameElementAsSkipped = false;
-        if (isFieldPresent && skipFieldID !== null) {
-            const fieldID = await locator.first().getAttribute("id");
-            isSameElementAsSkipped = fieldID !== null && fieldID === skipFieldID;
-        }
-        // Email is always treated as required (see the FieldValueMappings doc comment above),
-        // regardless of whether it carries a native `required`/`aria-required` attribute — the
-        // same rule the isEmailField check in required-field.spec.ts applies for its own skip
-        // decision, so filling here needs to agree with it or both can end up empty at once.
-        const isEmailField = field.label.source === "email";
-        let isRequired = false;
-        if (isFieldPresent && !isSameElementAsSkipped) {
-            isRequired = isEmailField || (await isFieldRequired(locator.first()));
-        }
-        if (isRequired) {
-            if (field.interaction === exports.FieldInteractions.Datetime) {
-                await fillDateTimePicker(locator.first(), field.validValue);
-            }
-            else {
-                await locator.first().fill(field.validValue);
-            }
-        }
-    }
-}
-exports.AutofillFields = [
-    { label: /name/i, expectedAutocomplete: /name/i },
-    { label: /email/i, expectedAutocomplete: /email/i },
-    { label: /phone/i, expectedAutocomplete: /tel/i },
-];
-exports.KeyboardFields = [
-    { label: /email/i, expectedInputMode: /email/i },
-    { label: /phone/i, expectedInputMode: /tel|numeric/i },
-];
-const SlideSelector = '[data-slide], [role="group"], .slide';
-const DotSelector = '[role="tab"], .dot, [data-dot]';
-async function getActiveSlideIndex(carousel) {
-    return carousel.evaluate((element, selector) => {
-        const slides = Array.from(element.querySelectorAll(selector));
-        return slides.findIndex((slide) => {
-            return slide.getAttribute("aria-hidden") !== "true";
-        });
-    }, SlideSelector);
-}
-async function getTotalSlideCount(carousel) {
-    return carousel.evaluate((element, selector) => {
-        return element.querySelectorAll(selector).length;
-    }, SlideSelector);
-}
-async function hasEmptySlideFrame(carousel) {
-    return carousel.evaluate((element, selector) => {
-        const visibleSlides = Array.from(element.querySelectorAll(selector)).filter((slide) => {
-            return slide.getAttribute("aria-hidden") !== "true";
-        });
-        const isEveryVisibleSlideBlank = visibleSlides.every((slide) => {
-            return slide.textContent.trim() === "";
-        });
-        return visibleSlides.length === 0 || isEveryVisibleSlideBlank;
-    }, SlideSelector);
-}
-async function goToNextSlideViaArrow(carousel) {
-    const nextArrow = carousel.getByRole("button", { name: /next/i });
-    const arrowCount = await nextArrow.count();
-    let didAdvance = false;
-    if (arrowCount > 0) {
-        const isEnabled = await nextArrow.isEnabled();
-        if (isEnabled) {
-            await nextArrow.click();
-            didAdvance = true;
-        }
-    }
-    return didAdvance;
-}
-async function getDotCount(carousel) {
-    return carousel.locator(DotSelector).count();
-}
-async function goToSlideViaDot(carousel, dotIndex) {
-    const dot = carousel.locator(DotSelector).nth(dotIndex);
-    const isEnabled = await dot.isEnabled();
-    if (isEnabled) {
-        await dot.click();
-    }
-    return isEnabled;
-}
-const SlideDirection = {
-    Forward: "forward",
-    Backward: "backward",
-};
-// Playwright has no built-in touch-swipe gesture, but a mouse drag across most of the carousel's
-// width is functionally equivalent for carousels that respond to pointer events (which cover both
-// mouse drag and touch swipe), and is more portable across browser engines than dispatching
-// synthetic touch events directly.
-async function dragCarousel(carousel, direction) {
-    const box = await carousel.boundingBox();
-    const didDrag = box !== null;
-    if (box !== null) {
-        const page = carousel.page();
-        const y = box.y + box.height / 2;
-        const isForward = direction === SlideDirection.Forward;
-        const fromX = isForward ? box.x + box.width * 0.8 : box.x + box.width * 0.2;
-        const toX = isForward ? box.x + box.width * 0.2 : box.x + box.width * 0.8;
-        await page.mouse.move(fromX, y);
-        await page.mouse.down();
-        await page.mouse.move(toX, y, { steps: 10 });
-        await page.mouse.up();
-    }
-    return didDrag;
-}
-async function swipeToNextSlide(carousel) {
-    return dragCarousel(carousel, SlideDirection.Forward);
-}
-async function swipeToPreviousSlide(carousel) {
-    return dragCarousel(carousel, SlideDirection.Backward);
-}
-// Advances through every slide via arrow (desktop) or swipe (mobile), asserting the frame is
-// never blank along the way. Stops early once it either loops back to the start or gets stuck on
-// the same slide (a non-looping carousel that has reached its last slide).
-async function traverseSlidesForward(carousel, carouselIndex, isMobile) {
-    const totalSlides = await getTotalSlideCount(carousel);
-    const startIndex = await getActiveSlideIndex(carousel);
-    let previousIndex = startIndex;
-    // One extra advance beyond the actual slide count, to also exercise the loop/stop behavior at
-    // the end rather than just reaching the last slide.
-    const maxAdvances = totalSlides + 1;
-    let shouldContinue = true;
-    for (let advance = 0; advance < maxAdvances && shouldContinue; advance++) {
-        const didAdvance = isMobile ? await swipeToNextSlide(carousel) : await goToNextSlideViaArrow(carousel);
-        if (didAdvance) {
-            const isEmptyFrame = await hasEmptySlideFrame(carousel);
-            (0, test_1.expect)(isEmptyFrame, `Carousel at index ${carouselIndex.toString()}: Slide frame was blank after ${String(advance + 1)} ${isMobile ? "swipes" : "arrow clicks"}`).toBe(false);
-            const currentIndex = await getActiveSlideIndex(carousel);
-            const hasLoopedBackToStart = currentIndex === startIndex && previousIndex !== startIndex;
-            const hasStoppedAdvancing = currentIndex === previousIndex;
-            if (hasLoopedBackToStart || hasStoppedAdvancing) {
-                shouldContinue = false;
-            }
-            previousIndex = currentIndex;
-        }
-        else {
-            shouldContinue = false;
-        }
-    }
-}
-async function checkSwipeBackward(carousel, carouselIndex) {
-    const didSwipeBack = await swipeToPreviousSlide(carousel);
-    if (didSwipeBack) {
-        const isEmptyFrameAfterSwipeBack = await hasEmptySlideFrame(carousel);
-        (0, test_1.expect)(isEmptyFrameAfterSwipeBack, `Carousel at index ${carouselIndex.toString()}: Slide frame was blank after swiping backward`).toBe(false);
-    }
-}
-async function checkAllDots(carousel, carouselIndex) {
-    const dotCount = await getDotCount(carousel);
-    for (let dotIndex = 0; dotIndex < dotCount; dotIndex++) {
-        const didGoToDot = await goToSlideViaDot(carousel, dotIndex);
-        if (didGoToDot) {
-            const isEmptyFrameAfterDot = await hasEmptySlideFrame(carousel);
-            (0, test_1.expect)(isEmptyFrameAfterDot, `Carousel at index ${carouselIndex.toString()}: Slide frame was blank after clicking dot ${dotIndex.toString()}`).toBe(false);
-        }
-    }
-}
-exports.SafeAreaZones = {
-    Top: "top",
-    Bottom: "bottom",
-    Left: "left",
-    Right: "right",
-};
-function getPadding(val) {
-    let numericValue = 0;
-    const parsed = Number.parseFloat(val);
-    if (!Number.isNaN(parsed)) {
-        numericValue = parsed;
-    }
-    return numericValue;
-}
-function isVisible(element) {
-    let visible;
-    const style = window.getComputedStyle(element);
-    if (style.display === "none" || style.visibility === "hidden" || Number.parseFloat(style.opacity) === 0) {
-        visible = false;
-    }
-    else {
-        const rect = element.getBoundingClientRect();
-        const hasDimensions = rect.width > 0 && rect.height > 0;
-        const horizontalOverlap = Math.min(rect.right, window.innerWidth) - Math.max(rect.left, 0);
-        const verticalOverlap = Math.min(rect.bottom, window.innerHeight) - Math.max(rect.top, 0);
-        visible = hasDimensions && horizontalOverlap > 0 && verticalOverlap > 0;
-    }
-    return visible;
-}
-async function findSafeAreaOverlaps(page) {
-    const contentSelector = `${exports.TappableElementsSelector}, p, h1, h2, h3, h4, h5, h6, li, span`;
-    return page.evaluate(({ selector }) => {
-        // Dynamically measure actual safe area insets from the browser environment
-        const div = document.createElement("div");
-        div.style.paddingTop = "env(safe-area-inset-top, 0px)";
-        div.style.paddingRight = "env(safe-area-inset-right, 0px)";
-        div.style.paddingBottom = "env(safe-area-inset-bottom, 0px)";
-        div.style.paddingLeft = "env(safe-area-inset-left, 0px)";
-        div.style.position = "absolute";
-        div.style.visibility = "hidden";
-        document.body.appendChild(div);
-        const computedStyle = window.getComputedStyle(div);
-        const { paddingTop } = computedStyle;
-        const { paddingRight } = computedStyle;
-        const { paddingBottom } = computedStyle;
-        const { paddingLeft } = computedStyle;
-        document.body.removeChild(div);
-        const insets = {
-            top: getPadding(paddingTop),
-            right: getPadding(paddingRight),
-            bottom: getPadding(paddingBottom),
-            left: getPadding(paddingLeft),
-        };
-        const overlaps = [];
-        const elements = Array.from(document.querySelectorAll(selector));
-        const visibleElements = elements.filter(isVisible);
-        for (const element of visibleElements) {
-            // Skip elements that are likely just layout containers or backgrounds if they don't have direct text
-            // (Though the selector restricts to text/tappable elements mostly)
-            const rect = element.getBoundingClientRect();
-            const style = window.getComputedStyle(element);
-            const pl = getPadding(style.paddingLeft);
-            const pr = getPadding(style.paddingRight);
-            const pt = getPadding(style.paddingTop);
-            const pb = getPadding(style.paddingBottom);
-            const contentLeft = rect.left + pl;
-            const contentRight = rect.right - pr;
-            const contentTop = rect.top + pt;
-            const contentBottom = rect.bottom - pb;
-            const viewportWidth = window.innerWidth;
-            const viewportHeight = window.innerHeight;
-            const isFixedOrSticky = style.position === "fixed" || style.position === "sticky";
-            const zones = [];
-            // Check if element content intersects with top safe area
-            if (insets.top > 0 && contentTop < insets.top && contentBottom > 0) {
-                zones.push("top");
-            }
-            // Check if element content intersects with bottom safe area
-            if (insets.bottom > 0 && contentBottom > viewportHeight - insets.bottom && contentTop < viewportHeight) {
-                // Normal static elements naturally scroll through the bottom safe area,
-                // so only flag fixed or sticky elements that overlap it on load.
-                if (isFixedOrSticky) {
-                    zones.push("bottom");
-                }
-            }
-            // Check if element content intersects with left safe area
-            if (insets.left > 0 && contentLeft < insets.left && contentRight > 0) {
-                zones.push("left");
-            }
-            // Check if element content intersects with right safe area
-            if (insets.right > 0 && contentRight > viewportWidth - insets.right && contentLeft < viewportWidth) {
-                zones.push("right");
-            }
-            for (const zone of zones) {
-                overlaps.push({
-                    tagName: element.tagName,
-                    className: element.className,
-                    text: element.textContent.trim().slice(0, 40),
-                    overlapZone: zone,
-                });
-            }
-        }
-        return overlaps;
-    }, { selector: contentSelector });
-}
 const MonthNames = [
     "January",
     "February",
@@ -872,6 +21,8 @@ const MonthNames = [
     "November",
     "December",
 ];
+const ScrollSteps = 10;
+const ScrollStepDelayMs = 100;
 async function fillDatetime({ field, locator, page }) {
     // A fresh page load already leaves the picker empty; nothing to clear or open for.
     if (field.validValue != null && field.validValue !== "") {
@@ -893,7 +44,7 @@ async function fillDatetime({ field, locator, page }) {
 }
 async function fillField({ field, locator, page }) {
     const fieldLocator = locator.getByTestId(field.fieldID);
-    if (field.interaction === exports.FieldInteractions.Datetime) {
+    if (field.interaction === schema_1.FieldInteractions.Datetime) {
         await fillDatetime({
             field,
             locator: fieldLocator,
@@ -910,6 +61,29 @@ async function fillField({ field, locator, page }) {
  */
 async function hasNativeValidationError(fieldLocator) {
     return await fieldLocator.evaluate((element) => {
-        return element instanceof HTMLInputElement && !element.checkValidity();
+        return ((element instanceof HTMLInputElement ||
+            element instanceof HTMLTextAreaElement ||
+            element instanceof HTMLSelectElement) &&
+            !element.checkValidity());
+    });
+}
+// Turns a page path into a filesystem-safe snapshot name, e.g. "/" -> "home", "/pricing" -> "pricing".
+function toSnapshotName(targetPage) {
+    const trimmed = targetPage.replace(/^\/+|\/+$/g, "");
+    return trimmed.length > 0 ? trimmed.replace(/\//g, "-") : "home";
+}
+async function hasHorizontalScrollbar(page) {
+    return page.evaluate(() => {
+        return document.documentElement.scrollWidth > document.documentElement.clientWidth;
+    });
+}
+async function scrollThroughPage(page) {
+    const scrollHeight = await page.evaluate(() => {
+        return document.documentElement.scrollHeight;
     });
+    const scrollStepDelta = Math.floor(scrollHeight / ScrollSteps);
+    for (let step = 0; step <= ScrollSteps; step++) {
+        await page.mouse.wheel(0, scrollStepDelta);
+        await page.waitForTimeout(ScrollStepDelayMs);
+    }
 }