@manufac/general-tests 0.0.1-alpha → 0.0.2

package/dist/specs/utils.js

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.KeyboardFields = exports.AutofillFields = exports.InvalidInputCases = exports.RequiredFields = exports.ValidUserInfo = exports.ContentOverlapSelector = exports.TouchTargetSizeSelector = exports.TappableElementsSelector = exports.ResponsiveConfig = void 0;
+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.findOverlappingTapTargets = findOverlappingTapTargets;
 exports.findImageSizeIssues = findImageSizeIssues;
 exports.isImageUpscaled = isImageUpscaled;
 exports.isImageOversized = isImageOversized;
@@ -15,10 +14,11 @@ exports.findElementsCutoffAtViewportEdge = findElementsCutoffAtViewportEdge;
 exports.findUndersizedBodyText = findUndersizedBodyText;
 exports.findUndersizedTouchTargets = findUndersizedTouchTargets;
 exports.hasHorizontalScrollbar = hasHorizontalScrollbar;
-exports.findCollapsedEmbeds = findCollapsedEmbeds;
 exports.isVideoAutoplaying = isVideoAutoplaying;
 exports.isVideoMuted = isVideoMuted;
-exports.fillAllFieldsValidly = fillAllFieldsValidly;
+exports.isFieldRequired = isFieldRequired;
+exports.fillDateTimePicker = fillDateTimePicker;
+exports.fillFormFields = fillFormFields;
 exports.hasVisibleErrorNearField = hasVisibleErrorNearField;
 exports.fillOtherRequiredFieldsValidly = fillOtherRequiredFieldsValidly;
 exports.getActiveSlideIndex = getActiveSlideIndex;
@@ -32,14 +32,15 @@ exports.swipeToPreviousSlide = swipeToPreviousSlide;
 exports.traverseSlidesForward = traverseSlidesForward;
 exports.checkSwipeBackward = checkSwipeBackward;
 exports.checkAllDots = checkAllDots;
+exports.findSafeAreaOverlaps = findSafeAreaOverlaps;
 const test_1 = require("@playwright/test");
 exports.ResponsiveConfig = {
     ScrollSteps: 10,
     ScrollStepDelayMs: 100,
     ViewPortWidth: 1440,
     ViewPortHeight: 900,
-    ZoomLevel: "200%",
-    ZoomSettleDelayMs: 200,
+    ZoomFactor: 2,
+    ZoomSettleDelayMs: 300,
     UpscaleTolerance: 1.05,
     OversizeTolerance: 2,
     ScrollDriftTolerance: 0.15,
@@ -47,6 +48,7 @@ exports.ResponsiveConfig = {
     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>.
@@ -113,13 +115,17 @@ async function findTruncatedOrOverflowingText(page) {
         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)
-                continue;
-            const style = window.getComputedStyle(element);
-            const isEllipsisTruncated = style.textOverflow === "ellipsis" && style.overflow !== "visible";
-            const isOverflowingHorizontally = element.scrollWidth > element.clientWidth + 1;
-            if (isEllipsisTruncated || isOverflowingHorizontally) {
-                broken.push(`<${element.tagName.toLowerCase()} class="${element.className}"> overflow=${style.overflow}, textOverflow=${style.textOverflow}: "${text.slice(0, 40)}"`);
+            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;
@@ -127,9 +133,6 @@ async function findTruncatedOrOverflowingText(page) {
 }
 async function findOverlappingElements(page, containerSelector) {
     const overlaps = await page.evaluate((selector) => {
-        // Only elements at least partially visible in the viewport are candidates — off-canvas nav
-        // drawers, upcoming carousel slides, and similar patterns commonly overlap internally while
-        // hidden off-screen, and that's not a bug (mirrors the check in findElementsCutoffAtViewportEdge).
         function isVisibleInViewport(element) {
             const rect = element.getBoundingClientRect();
             const hasDimensions = rect.width > 0 && rect.height > 0;
@@ -137,25 +140,75 @@ async function findOverlappingElements(page, containerSelector) {
             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);
+        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];
-                if (a.contains(b) || b.contains(a))
-                    continue;
-                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,
-                    });
+                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,
+                        });
+                    }
                 }
             }
         }
@@ -165,9 +218,6 @@ async function findOverlappingElements(page, containerSelector) {
         return `${overlap.elementA.tagName} overlaps ${overlap.elementB.tagName} by ${overlap.overlapWidth.toFixed(0)}x${overlap.overlapHeight.toFixed(0)}px`;
     });
 }
-async function findOverlappingTapTargets(page) {
-    return findOverlappingElements(page, exports.TappableElementsSelector);
-}
 // Content elements worth checking for overlap after a layout-affecting change (e.g. orientation
 // change): tappable elements, text-bearing elements, and images.
 exports.ContentOverlapSelector = [
@@ -228,14 +278,22 @@ function isImageOversized(image) {
 // 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(rect, viewport) {
+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 overlapsViewport = horizontalOverlap > 0 && verticalOverlap > 0;
-    const fullyInsideViewport = rect.left >= 0 && rect.right <= viewport.width && rect.top >= 0 && rect.bottom <= viewport.height;
-    return hasDimensions && overlapsViewport && !fullyInsideViewport;
+    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 = "body *") {
     const { elements, viewport } = await page.evaluate((selector) => {
@@ -243,10 +301,41 @@ async function findElementsCutoffAtViewportEdge(page, containerSelector = "body
             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))
             .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 : "",
@@ -258,13 +347,14 @@ async function findElementsCutoffAtViewportEdge(page, containerSelector = "body
                     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.rect, viewport);
+        return isCutoffAtViewportEdge(element, viewport);
     })
         .map(describeElement);
 }
@@ -319,20 +409,6 @@ async function hasHorizontalScrollbar(page) {
         return document.documentElement.scrollWidth > document.documentElement.clientWidth;
     });
 }
-async function findCollapsedEmbeds(page) {
-    return page.evaluate(() => {
-        const embeds = Array.from(document.querySelectorAll("iframe, embed, object"));
-        return embeds
-            .filter((embed) => {
-            const rect = embed.getBoundingClientRect();
-            return rect.width === 0 || rect.height === 0;
-        })
-            .map((embed) => {
-            const rect = embed.getBoundingClientRect();
-            return `<${embed.tagName.toLowerCase()}> collapsed to ${rect.width.toFixed(0)}x${rect.height.toFixed(0)}px`;
-        });
-    });
-}
 async function isVideoAutoplaying(video) {
     const isPaused = await video.evaluate((element) => {
         return element.paused;
@@ -348,20 +424,110 @@ 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",
 };
-exports.RequiredFields = [
-    { label: /name/i, validValue: exports.ValidUserInfo.ValidTestName },
-    { label: /email/i, validValue: exports.ValidUserInfo.ValidTestEmail },
-    { label: /phone/i, validValue: exports.ValidUserInfo.ValidTestPhone },
+/**
+ * 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 },
 ];
-async function fillAllFieldsValidly(page) {
-    await Promise.all(exports.RequiredFields.map(async (field) => {
+// Some date/time fields are plain inputs (a direct .fill() works); others are picker widgets that
+// open a popup and reject typed text. This tries the plain-input path first, and only falls back
+// to interacting with a popup if the value didn't actually take. The fallback uses WAI-ARIA roles
+// (grid/gridcell for calendar days, spinbutton for numeric steppers) rather than any specific UI
+// library's class names, since this package runs against apps that don't all use the same one —
+// it degrades to a no-op if neither the plain-input path nor these ARIA patterns match anything.
+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();
+        const dayCells = page.locator('[role="gridcell"]:not([aria-disabled="true"])');
+        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) {
+    await Promise.all(exports.FieldValueMappings.map(async (field) => {
         const locator = page.getByLabel(field.label);
         if ((await locator.count()) > 0) {
-            await locator.first().fill(field.validValue);
+            if (field.interaction === exports.FieldInteractions.Datetime) {
+                await fillDateTimePicker(locator.first(), field.validValue);
+            }
+            else {
+                await locator.first().fill(field.validValue);
+            }
         }
     }));
 }
@@ -378,7 +544,13 @@ async function hasVisibleErrorNearField(fieldLocator) {
         const adjacentError = fieldLocator.page().locator(`[data-error-for="${fieldID}"]`);
         isAdjacentErrorVisible = await adjacentError.isVisible();
     }
-    return isDescribedByErrorVisible || isAdjacentErrorVisible;
+    // 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 },
@@ -388,9 +560,26 @@ exports.InvalidInputCases = [
     { fieldLabel: /phone/i, invalidValue: "12", expectedErrorText: /enter a valid phone number/i },
 ];
 async function fillOtherRequiredFieldsValidly(page, skipLabel) {
-    if (!/name/i.test(skipLabel.source)) {
-        await page.getByLabel(/name/i).fill(exports.ValidUserInfo.ValidTestName);
-    }
+    await Promise.all(exports.FieldValueMappings.map(async (field) => {
+        const isSkippedField = field.label.source === skipLabel.source;
+        const locator = page.getByLabel(field.label);
+        let isFieldPresent = false;
+        if (!isSkippedField) {
+            isFieldPresent = (await locator.count()) > 0;
+        }
+        let isRequired = false;
+        if (isFieldPresent) {
+            isRequired = 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 },
@@ -527,3 +716,108 @@ async function checkAllDots(carousel, carouselIndex) {
         }
     }
 }
+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 });
+}

package/package.json

@@ -1,7 +1,12 @@
 {
   "name": "@manufac/general-tests",
-  "version": "0.0.1-alpha",
+  "version": "0.0.2",
   "description": "A library for general tests for landing pages",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/manufac-analytics/sculptor.git",
+    "directory": "packages/tests"
+  },
   "license": "UNLICENSED",
   "exports": {
     "./*": "./dist/*"
@@ -26,5 +31,8 @@
   },
   "peerDependencies": {
     "@playwright/test": "^1.62.0"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }