@manufac/general-tests 0.0.1-alpha → 0.0.2

package/dist/specs/desktop-only/browser-zoom.spec.js

@@ -4,15 +4,23 @@ const fixtures_1 = require("../../fixtures");
 const utils_1 = require("../utils");
 const test_1 = require("@playwright/test");
 (0, fixtures_1.test)("RS-07 Browser zoom (desktop) at 200%", async ({ page, targetPage }) => {
-    await page.setViewportSize({ width: utils_1.ResponsiveConfig.ViewPortWidth, height: utils_1.ResponsiveConfig.ViewPortHeight });
+    // Real browser zoom shrinks the effective CSS layout viewport, which is what makes responsive
+    // breakpoints react to it — the non-standard CSS `zoom` property only scales rendered output
+    // and leaves window.innerWidth/matchMedia untouched, so it doesn't reproduce that behavior.
+    // Dividing the viewport by the zoom factor reproduces the actual layout effect directly.
+    await page.setViewportSize({
+        width: Math.round(utils_1.ResponsiveConfig.ViewPortWidth / utils_1.ResponsiveConfig.ZoomFactor),
+        height: Math.round(utils_1.ResponsiveConfig.ViewPortHeight / utils_1.ResponsiveConfig.ZoomFactor),
+    });
     await page.goto(targetPage);
-    await page.evaluate((zoom) => {
-        document.documentElement.style.zoom = zoom;
-    }, utils_1.ResponsiveConfig.ZoomLevel);
     await page.waitForTimeout(utils_1.ResponsiveConfig.ZoomSettleDelayMs);
     await (0, utils_1.scrollThroughPage)(page);
+    // Some layouts transition position (e.g. a header offset tied to scroll state) on a short
+    // CSS transition; without this, checks below can catch a mid-transition frame instead of
+    // the actual settled layout.
+    await page.waitForTimeout(utils_1.ResponsiveConfig.ZoomSettleDelayMs);
     const brokenText = await (0, utils_1.findTruncatedOrOverflowingText)(page);
     (0, test_1.expect)(brokenText, `Text overlapping/clipped at 200% zoom:\n${brokenText.join("\n")}`).toEqual([]);
-    const overlappingTargets = await (0, utils_1.findOverlappingTapTargets)(page);
+    const overlappingTargets = await (0, utils_1.findOverlappingElements)(page, utils_1.TappableElementsSelector);
     (0, test_1.expect)(overlappingTargets, `Interactive elements unreachable (overlapping) at 200% zoom:\n${overlappingTargets.join("\n")}`).toEqual([]);
 });

package/dist/specs/mobile-only/ios-safari-toolbar.spec.d.ts

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

package/dist/specs/mobile-only/ios-safari-toolbar.spec.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../fixtures");
+const sticky_utils_1 = require("../sticky-utils");
+const utils_1 = require("../utils");
+const test_1 = require("@playwright/test");
+// Safari toolbar height change is typically around 50px on modern iOS devices
+const ToolbarHeightDeltaPX = 50;
+fixtures_1.test.describe("Cross-Browser - iOS Safari Toolbar", () => {
+    (0, fixtures_1.test)("XB-03 Page adapts to iOS Safari toolbar size changes smoothly", async ({ page, targetPage, browserName }) => {
+        fixtures_1.test.slow(); // This test does two full scroll passes (40+ evaluates) and needs more than 30s
+        const initialViewport = page.viewportSize();
+        // true when the viewport width is below 768px (a mobile-sized device, not a desktop viewport)
+        const isMobileViewport = initialViewport !== null && initialViewport.width < 768;
+        if (browserName !== "webkit" || !isMobileViewport) {
+            // test.skip aborts execution internally, so no return or else block is needed
+            fixtures_1.test.skip(true, "Safari toolbar behavior test is only relevant for mobile viewports on iOS (WebKit)");
+        }
+        if (initialViewport === null) {
+            throw new Error("Viewport size is required but was null");
+        }
+        await page.goto(targetPage);
+        // Initial check - ensure no cut-off elements before we even start
+        const initialCutoffElements = await (0, utils_1.findElementsCutoffAtViewportEdge)(page);
+        (0, test_1.expect)(initialCutoffElements, `Elements were already cut off before resizing the viewport:\n${initialCutoffElements.join("\n")}`).toEqual([]);
+        const initialInnerHeight = await page.evaluate(() => {
+            return window.innerHeight;
+        });
+        // 1. Simulate scrolling down (toolbar shrinks -> viewport height INCREASES)
+        const expandedHeight = initialViewport.height + ToolbarHeightDeltaPX;
+        await page.setViewportSize({ width: initialViewport.width, height: expandedHeight });
+        await page.waitForFunction((prevHeight) => {
+            // Avoid strict equality (===) as mobile viewports can have fractional/scaled innerHeights
+            return window.innerHeight > prevHeight;
+        }, initialInnerHeight);
+        const cutoffAfterExpand = await (0, utils_1.findElementsCutoffAtViewportEdge)(page);
+        (0, test_1.expect)(cutoffAfterExpand, `Elements were cut off when the viewport expanded (simulating toolbar shrinking):\n${cutoffAfterExpand.join("\n")}`).toEqual([]);
+        // Check sticky elements don't break after expansion
+        const stickyIssuesAfterExpand = await (0, sticky_utils_1.checkStickyElements)(page);
+        if (stickyIssuesAfterExpand.stickyElementCount > 0) {
+            (0, test_1.expect)(stickyIssuesAfterExpand.flicker, `Sticky elements flickered/detached when viewport expanded:\n${stickyIssuesAfterExpand.flicker.join("\n")}`).toEqual([]);
+            (0, test_1.expect)(stickyIssuesAfterExpand.coversContent, `Sticky elements covered content when viewport expanded:\n${stickyIssuesAfterExpand.coversContent.join("\n")}`).toEqual([]);
+        }
+        const afterExpandHeight = await page.evaluate(() => {
+            return window.innerHeight;
+        });
+        // 2. Simulate scrolling up (toolbar expands -> viewport height DECREASES)
+        const shrunkHeight = initialViewport.height - ToolbarHeightDeltaPX;
+        await page.setViewportSize({ width: initialViewport.width, height: shrunkHeight });
+        await page.waitForFunction((prevHeight) => {
+            return window.innerHeight < prevHeight;
+        }, afterExpandHeight);
+        const cutoffAfterShrink = await (0, utils_1.findElementsCutoffAtViewportEdge)(page);
+        (0, test_1.expect)(cutoffAfterShrink, `Elements were cut off when the viewport shrank (simulating toolbar expanding):\n${cutoffAfterShrink.join("\n")}`).toEqual([]);
+        // Check sticky elements don't break after shrinking
+        const stickyIssuesAfterShrink = await (0, sticky_utils_1.checkStickyElements)(page);
+        if (stickyIssuesAfterShrink.stickyElementCount > 0) {
+            (0, test_1.expect)(stickyIssuesAfterShrink.flicker, `Sticky elements flickered/detached when viewport shrank:\n${stickyIssuesAfterShrink.flicker.join("\n")}`).toEqual([]);
+            (0, test_1.expect)(stickyIssuesAfterShrink.coversContent, `Sticky elements covered content when viewport shrank:\n${stickyIssuesAfterShrink.coversContent.join("\n")}`).toEqual([]);
+        }
+    });
+});

package/dist/specs/mobile-only/ios-safe-areas.spec.d.ts

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

package/dist/specs/mobile-only/ios-safe-areas.spec.js

@@ -0,0 +1,36 @@
+"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("Cross-Browser - iOS Safe Areas", () => {
+    (0, fixtures_1.test)("XB-02 Content respects iOS safe areas in portrait and landscape", async ({ page, targetPage, browserName }) => {
+        fixtures_1.test.skip(browserName !== "webkit", "Safe area test is only relevant for iOS (WebKit)");
+        const viewportInfo = page.viewportSize();
+        const isMobileViewport = viewportInfo !== null && viewportInfo.width < 768;
+        if (!isMobileViewport) {
+            fixtures_1.test.skip(true, "Safe area test is only relevant for mobile viewports");
+        }
+        await page.goto(targetPage);
+        // Check Portrait
+        const portraitOverlaps = await (0, utils_1.findSafeAreaOverlaps)(page);
+        const portraitDescriptions = portraitOverlaps.map((overlap) => {
+            return `${(0, utils_1.describeElement)(overlap)} overlaps ${overlap.overlapZone} safe area: "${overlap.text}"`;
+        });
+        (0, test_1.expect)(portraitOverlaps, `Elements should not overlap portrait safe areas:\n${portraitDescriptions.join("\n")}`).toEqual([]);
+        // Check Landscape
+        if (viewportInfo !== null) {
+            // Rotate to landscape
+            await page.setViewportSize({ width: viewportInfo.height, height: viewportInfo.width });
+            await page.waitForFunction((expectedWidth) => {
+                const isMatch = window.innerWidth === expectedWidth;
+                return isMatch;
+            }, viewportInfo.height);
+            const landscapeOverlaps = await (0, utils_1.findSafeAreaOverlaps)(page);
+            const landscapeDescriptions = landscapeOverlaps.map((overlap) => {
+                return `${(0, utils_1.describeElement)(overlap)} overlaps ${overlap.overlapZone} safe area: "${overlap.text}"`;
+            });
+            (0, test_1.expect)(landscapeOverlaps, `Elements should not overlap landscape safe areas:\n${landscapeDescriptions.join("\n")}`).toEqual([]);
+        }
+    });
+});

package/dist/specs/mobile-only/navigation.spec.js

@@ -6,10 +6,9 @@ fixtures_1.test.describe("Mobile Navigation", () => {
     (0, fixtures_1.test)("CT-05: Hamburger/mobile nav", async ({ page, targetPage }) => {
         await page.goto(targetPage);
         const hamburger = page
-            .getByRole("button", { name: /menu|navigation/i })
-            .or(page.getByRole("button", { expanded: false }))
-            .or(page.getByRole("button", { expanded: true }))
+            .getByRole("button", { name: /menu|navigation|hamburger/i })
             .or(page.locator(".hamburger, .menu-toggle"))
+            .or(page.getByRole("banner").getByRole("button"))
             .first();
         const count = await hamburger.count();
         if (count === 0) {
@@ -21,10 +20,21 @@ fixtures_1.test.describe("Mobile Navigation", () => {
         }
         await hamburger.click();
         await page.waitForTimeout(500); // Wait for transition
-        const bodyOverflow = await page.evaluate(() => {
-            return window.getComputedStyle(document.body).overflow;
+        const isScrollLocked = await page.evaluate(() => {
+            const { body } = document;
+            const html = document.documentElement;
+            const bodyOverflow = window.getComputedStyle(body).overflow;
+            const htmlOverflow = window.getComputedStyle(html).overflow;
+            const hasOverflowHidden = ["hidden", "clip"].includes(bodyOverflow) || ["hidden", "clip"].includes(htmlOverflow);
+            const hasLockAttribute = body.hasAttribute("data-scroll-locked") || html.hasAttribute("data-scroll-locked");
+            // Some libraries like react-remove-scroll (when removeScrollBar=false) lock scroll via JS events without CSS
+            const wheelEvent = new WheelEvent("wheel", { deltaY: 100, bubbles: true, cancelable: true });
+            document.body.dispatchEvent(wheelEvent);
+            const touchEvent = new TouchEvent("touchmove", { bubbles: true, cancelable: true });
+            document.body.dispatchEvent(touchEvent);
+            const isLocked = hasOverflowHidden || hasLockAttribute || wheelEvent.defaultPrevented || touchEvent.defaultPrevented;
+            return isLocked;
         });
-        const isHidden = bodyOverflow === "hidden" || bodyOverflow === "clip";
-        (0, test_1.expect)(isHidden, "Page behind the open mobile menu should not be scrollable").toBe(true);
+        (0, test_1.expect)(isScrollLocked, "Page behind the open mobile menu should not be scrollable").toBe(true);
     });
 });

package/dist/specs/mobile-only/orientation.spec.js

@@ -11,30 +11,33 @@ const test_1 = require("@playwright/test");
     }
     const { width, height } = portraitViewport;
     const { scrollHeight, clientHeight } = await (0, utils_1.getScrollMetrics)(page);
-    // A page only truly scrolls when its content is taller than the viewport, not merely > 0px.
     const isScrollable = scrollHeight > clientHeight;
     const scrollTarget = isScrollable ? Math.floor(scrollHeight / 2) : 0;
-    const scrollRatioBefore = isScrollable ? scrollTarget / scrollHeight : 0;
     if (isScrollable) {
-        // window.scrollTo guarantees landing at the target, unlike a wheel-delta scroll gesture.
         await page.evaluate((y) => {
             window.scrollTo(0, y);
         }, scrollTarget);
+        // scroll-behavior: smooth animates the scroll; wait for it to actually
+        // land near the target before treating it as the baseline position.
+        await page.waitForFunction((target) => {
+            return Math.abs(window.scrollY - target) < 5;
+        }, scrollTarget, { timeout: 2000 });
     }
+    const baselineMetrics = await (0, utils_1.getScrollMetrics)(page);
+    const scrollRatioBefore = isScrollable ? baselineMetrics.scrollY / baselineMetrics.scrollHeight : 0;
     const phases = [
         { name: "landscape", viewport: { width: height, height: width } },
         { name: "portrait", viewport: { width, height } },
     ];
     for (const phase of phases) {
         await page.setViewportSize(phase.viewport);
-        // Layout must reflow cleanly after rotation — no elements clipped by the viewport edge...
+        // Allow any smooth-scroll/reflow triggered by the viewport change to settle.
+        await page.waitForTimeout(300);
         const cutoffElements = await (0, utils_1.findElementsCutoffAtViewportEdge)(page);
         (0, test_1.expect)(cutoffElements, `Found element(s) cut off at the viewport edge after rotating to ${phase.name}:\n${cutoffElements.join("\n")}`).toEqual([]);
-        // ...and no two elements overlapping each other.
         const overlappingElements = await (0, utils_1.findOverlappingElements)(page, utils_1.ContentOverlapSelector);
         (0, test_1.expect)(overlappingElements, `Found overlapping element(s) after rotating to ${phase.name}:\n${overlappingElements.join("\n")}`).toEqual([]);
         if (isScrollable) {
-            // Scroll ratio (not absolute position) should stay stable since page height changes with orientation.
             const currentMetrics = await (0, utils_1.getScrollMetrics)(page);
             const scrollRatioAfter = currentMetrics.scrollY / currentMetrics.scrollHeight;
             (0, test_1.expect)(Math.abs(scrollRatioAfter - scrollRatioBefore), `Scroll position jumped away from the original section after rotating to ${phase.name}`).toBeLessThan(utils_1.ResponsiveConfig.ScrollDriftTolerance);

package/dist/specs/mobile-only/soft-keyboard.spec.js

@@ -7,11 +7,15 @@ fixtures_1.test.describe("Forms - Soft Keyboard", () => {
     utils_1.KeyboardFields.forEach((keyboardField) => {
         (0, fixtures_1.test)(`FM-05 ${keyboardField.label.source} field opens the correct soft keyboard`, async ({ page, targetPage }) => {
             await page.goto(targetPage);
+            const field = page.getByLabel(keyboardField.label);
+            const fieldCount = await field.count();
+            if (fieldCount === 0) {
+                fixtures_1.test.skip(true, `No ${keyboardField.label.source} field present on this page`);
+            }
             const viewport = page.viewportSize();
             if (viewport === null) {
                 throw new Error("Viewport size must be set before running the soft keyboard test");
             }
-            const field = page.getByLabel(keyboardField.label);
             await field.click();
             // NOTE: Playwright cannot render a real device's on-screen keyboard, so the
             // originally-specified check ("email field opens the @ keyboard, phone field
@@ -20,10 +24,15 @@ fixtures_1.test.describe("Forms - Soft Keyboard", () => {
             const [inputMode, inputType] = await Promise.all([field.getAttribute("inputmode"), field.getAttribute("type")]);
             const hasCorrectKeyboardHint = keyboardField.expectedInputMode.test(inputMode ?? "") || keyboardField.expectedInputMode.test(inputType ?? "");
             (0, test_1.expect)(hasCorrectKeyboardHint, `${keyboardField.label.source} field should have an inputmode/type that opens the correct soft keyboard`).toBe(true);
-            // A real on-screen keyboard typically covers roughly the bottom 40% of a mobile viewport.
+            // Note: A real on-screen keyboard typically covers roughly the bottom 40% of a mobile viewport.
             // Playwright can't render an actual OS keyboard, so this is approximated by shrinking the
             // viewport after focusing the field, turning "field shouldn't be hidden behind the keyboard"
             // into a real geometry check instead of one that trivially always passes.
+            //
+            // Limitation (FM-05): This is a best-effort regression guard, not a substitute for real-device testing.
+            // The 40% occlusion is a rough estimate and page.setViewportSize() doesn't replicate the
+            // native viewport repositioning/scrolling behavior of real mobile browsers when keyboards open.
+            // Manual verification on a real device remains the source of truth for FM-05.
             const visibleHeight = Math.round(viewport.height * (1 - utils_1.ResponsiveConfig.KeyboardOcclusionRatio));
             await page.setViewportSize({ width: viewport.width, height: visibleHeight });
             const fieldBox = await field.boundingBox();

package/dist/specs/mobile-only/touch-targets.spec.js

@@ -7,6 +7,6 @@ const test_1 = require("@playwright/test");
     await page.goto(targetPage);
     const undersizedTargets = await (0, utils_1.findUndersizedTouchTargets)(page, utils_1.TouchTargetSizeSelector);
     (0, test_1.expect)(undersizedTargets, `Touch targets below ${String(utils_1.ResponsiveConfig.MinTouchTargetSizePX)}x${String(utils_1.ResponsiveConfig.MinTouchTargetSizePX)}px:\n${undersizedTargets.join("\n")}`).toEqual([]);
-    const overlappingTargets = await (0, utils_1.findOverlappingTapTargets)(page);
+    const overlappingTargets = await (0, utils_1.findOverlappingElements)(page, utils_1.TappableElementsSelector);
     (0, test_1.expect)(overlappingTargets, `Overlapping tap targets risk triggering the wrong element:\n${overlappingTargets.join("\n")}`).toEqual([]);
 });

package/dist/specs/shared/forms/autofill.spec.js

@@ -6,11 +6,23 @@ const test_1 = require("@playwright/test");
 fixtures_1.test.describe("Forms - Autofill", () => {
     (0, fixtures_1.test)("FM-06 Form fields expose autocomplete hints for autofill compatibility", async ({ page, targetPage }) => {
         await page.goto(targetPage);
-        await Promise.all(utils_1.AutofillFields.map(async (autofillField) => {
-            const field = page.getByLabel(autofillField.label);
+        const form = page.locator("form");
+        if ((await form.count()) === 0) {
+            fixtures_1.test.skip(true, "No form present on this page");
+        }
+        await form.scrollIntoViewIfNeeded();
+        const fieldEntries = await Promise.all(utils_1.AutofillFields.map(async (autofillField) => {
+            const field = form.getByLabel(autofillField.label);
+            const isVisible = (await field.count()) > 0 && (await field.isVisible());
+            return { autofillField, field, isVisible };
+        }));
+        const visibleFieldEntries = fieldEntries.filter((entry) => {
+            return entry.isVisible;
+        });
+        for (const { autofillField, field } of visibleFieldEntries) {
             const autocompleteValue = await field.getAttribute("autocomplete");
             const hasCorrectAutocomplete = autofillField.expectedAutocomplete.test(autocompleteValue ?? "");
             (0, test_1.expect)(hasCorrectAutocomplete, `${autofillField.label.source} field should have an autocomplete attribute matching ${autofillField.expectedAutocomplete.source} so browser autofill puts the value in the correct field`).toBe(true);
-        }));
+        }
     });
 });

package/dist/specs/shared/forms/double-submit.spec.js

@@ -11,21 +11,7 @@ fixtures_1.test.describe("Forms - Double Submit", () => {
         if (submitButtonCount === 0) {
             fixtures_1.test.skip(true, "No submit button present on this page");
         }
-        const nameField = page.getByLabel(/name/i);
-        const nameFieldCount = await nameField.count();
-        if (nameFieldCount > 0) {
-            await nameField.first().fill(utils_1.ValidUserInfo.ValidTestName);
-        }
-        const emailField = page.getByLabel(/email/i);
-        const emailFieldCount = await emailField.count();
-        if (emailFieldCount > 0) {
-            await emailField.first().fill(utils_1.ValidUserInfo.ValidTestEmail);
-        }
-        const phoneField = page.getByLabel(/phone/i);
-        const phoneFieldCount = await phoneField.count();
-        if (phoneFieldCount > 0) {
-            await phoneField.first().fill(utils_1.ValidUserInfo.ValidTestPhone);
-        }
+        await (0, utils_1.fillFormFields)(page);
         const targetSubmitButton = submitButton.first();
         const firstClick = targetSubmitButton.click();
         await targetSubmitButton.click({ force: true });

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

@@ -6,9 +6,14 @@ 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 nameField = page.getByLabel(/name/i);
+        const nameFieldCount = await nameField.count();
+        if (nameFieldCount === 0) {
+            fixtures_1.test.skip(true, "No Name field present on this page");
+        }
+        await (0, utils_1.fillFormFields)(page);
         const longName = "A".repeat(utils_1.ValidUserInfo.LongNameCharacterCount);
-        await page.getByLabel(/name/i).fill(longName);
+        await nameField.first().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 });
@@ -21,8 +26,13 @@ fixtures_1.test.describe("Forms - Input Edge Cases", () => {
     });
     (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 nameField = page.getByLabel(/name/i);
+        const nameFieldCount = await nameField.count();
+        if (nameFieldCount === 0) {
+            fixtures_1.test.skip(true, "No Name field present on this page");
+        }
+        await nameField.first().fill(utils_1.ValidUserInfo.EmojiTestName);
+        const nameValue = await nameField.first().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("😀");
@@ -31,7 +41,7 @@ fixtures_1.test.describe("Forms - Input Edge Cases", () => {
     });
     (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);
+        await (0, utils_1.fillFormFields)(page);
         const emailField = page.getByLabel(/email/i);
         await emailField.fill(utils_1.ValidUserInfo.PaddedTestEmail);
         await emailField.blur();

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

@@ -3,22 +3,41 @@ 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, }) => {
+        (0, fixtures_1.test)(`FM-03 Invalid input "${invalidCase.invalidValue}" in ${invalidCase.fieldLabel.toString()} field is rejected (if present)`, 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`);
+            const form = page.locator("form");
+            if ((await form.count()) === 0) {
+                fixtures_1.test.skip(true, "No form present on this page");
             }
+            await form.first().scrollIntoViewIfNeeded();
+            const fieldLocator = form.getByLabel(invalidCase.fieldLabel);
+            if ((await fieldLocator.count()) === 0 || !(await fieldLocator.isVisible())) {
+                fixtures_1.test.skip(true, `${invalidCase.fieldLabel.toString()} field is not present on this form`);
+            }
+            // Fill valid data in all other required fields
             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.
+            // Fill invalid value in the field under test
+            await fieldLocator.first().fill(invalidCase.invalidValue);
+            // Attempt submit
+            const submitButton = form.getByRole("button", {
+                name: /(schedule discovery call|submit|send|book|request|get in touch)/i,
+            });
+            await submitButton.click();
+            // Assert rejection - confirmation should NOT appear
+            const confirmation = page.getByText(/thank you|success|confirmation/i);
+            await (0, test_1.expect)(confirmation).not.toBeVisible({ timeout: 5000 });
+            // Assert validation message or invalid state
+            await (0, test_1.expect)(async () => {
+                const validationError = page.getByText(invalidCase.expectedErrorText);
+                const isErrorVisible = await validationError.isVisible();
+                const isAriaValid = (await fieldLocator.first().getAttribute("aria-invalid")) !== "true";
+                const isNativelyValid = await fieldLocator.first().evaluate((node) => {
+                    return node.checkValidity();
+                });
+                (0, test_1.expect)(isErrorVisible || !isAriaValid || !isNativelyValid).toBeTruthy();
+            }).toPass({ timeout: 5000 });
         });
     });
 });

package/dist/specs/shared/forms/native-inputs.spec.d.ts

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

package/dist/specs/shared/forms/native-inputs.spec.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../../fixtures");
+const test_1 = require("@playwright/test");
+fixtures_1.test.describe("Forms - Native Inputs", () => {
+    (0, fixtures_1.test)("XB-04 Date and number inputs reject invalid values", async ({ page, targetPage }) => {
+        await page.goto(targetPage);
+        // Locate all date and number inputs
+        const nativeInputs = page.locator('input[type="date"], input[type="number"]');
+        const inputCount = await nativeInputs.count();
+        if (inputCount === 0) {
+            fixtures_1.test.skip(true, "No date or number inputs found on the page");
+        }
+        const allInputs = await nativeInputs.all();
+        const invalidValues = {
+            number: "notanumber",
+            date: "02302026",
+        };
+        for (const inputLocator of allInputs) {
+            const inputType = await inputLocator.getAttribute("type");
+            const invalidValue = inputType !== null ? (invalidValues[inputType] ?? "") : "";
+            // We use click and keyboard.type to bypass Playwright's strict fill checks for invalid types
+            // (Playwright's fill() throws if you try to put letters in a number field).
+            // This simulates a user typing invalid data to see if the browser's native UI rejects it.
+            await inputLocator.click();
+            await page.keyboard.type(invalidValue);
+            const isRejectedByBrowser = await inputLocator.evaluate((element) => {
+                // If the browser natively rejects the input because of its type constraint,
+                // the value property will often be an empty string, or validity.badInput will be true.
+                const isBadInput = element.validity.badInput;
+                const isValueRejected = element.value === "";
+                return isBadInput || isValueRejected;
+            });
+            (0, test_1.expect)(isRejectedByBrowser, `Input of type "${inputType ?? "unknown"}" should reject invalid value "${invalidValue}"`).toBe(true);
+        }
+    });
+});

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

@@ -5,7 +5,7 @@ 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) => {
+    utils_1.FieldValueMappings.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);
@@ -13,7 +13,12 @@ fixtures_1.test.describe("Forms", () => {
             if (fieldCount === 0) {
                 fixtures_1.test.skip(true, `No ${targetField.label.source} field present on this page`);
             }
-            await (0, utils_1.fillAllFieldsValidly)(page);
+            const isRequired = await (0, utils_1.isFieldRequired)(fieldLocator.first());
+            const isEmailField = targetField.label.source === "email";
+            if (!isRequired && !isEmailField) {
+                fixtures_1.test.skip(true, `${targetField.label.source} field is not marked required on this page`);
+            }
+            await (0, utils_1.fillFormFields)(page);
             await fieldLocator.first().clear();
             const submitButtons = page.locator('button[type="submit"], input[type="submit"]');
             await submitButtons.first().click();

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

@@ -6,12 +6,10 @@ 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 (0, utils_1.fillFormFields)(page);
         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();
+        await (0, test_1.expect)(confirmation, "Confirmation message/page did not appear or did not match the design spec").toBeVisible({ timeout: 10_000 });
         let hasResubmitDialog = false;
         page.on("dialog", (dialog) => {
             hasResubmitDialog = true;
@@ -21,5 +19,6 @@ fixtures_1.test.describe("Forms - Thank You Confirm", () => {
         (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();
+        (0, test_1.expect)(hasResubmitDialog, 'Browser Forward should NOT show a "resubmit form?" dialog').toBe(false);
     });
 });

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

@@ -9,11 +9,30 @@ const test_1 = require("@playwright/test");
     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();
+    const ctaRegex = /get started|book a demo|contact us|try|sign up|request|start|buy|explore|join|register|learn|get|access|download|schedule|book|discuss/i;
+    // Restrict to elements that appear before the first <form> on the page, so the hero's
+    // CTA can never accidentally resolve to a submit button belonging to the contact form.
+    // boundingBox() auto-waits for a matching element, so it must only be called once a form
+    // is confirmed present — otherwise a page with no form at all would hang until timeout.
+    const contactForm = page.locator("form").first();
+    const hasContactForm = (await contactForm.count()) > 0;
+    const formBoundingBox = hasContactForm ? await contactForm.boundingBox() : null;
+    const allMatches = page.getByRole("link", { name: ctaRegex }).or(page.getByRole("button", { name: ctaRegex }));
+    const matchCount = await allMatches.count();
+    let primaryCTA = allMatches.first();
+    if (formBoundingBox !== null) {
+        let isFound = false;
+        for (let index = 0; index < matchCount; index++) {
+            if (!isFound) {
+                const candidate = allMatches.nth(index);
+                const candidateBox = await candidate.boundingBox();
+                if (candidateBox !== null && candidateBox.y < formBoundingBox.y) {
+                    primaryCTA = candidate;
+                    isFound = true;
+                }
+            }
+        }
+    }
     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/landing-page.spec.js

@@ -4,6 +4,14 @@ 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, }) => {
+        let failedNetworkRequests = 0;
+        page.on("response", (response) => {
+            const status = response.status();
+            // Track any 4xx or 5xx responses (except for the 404 test itself, but this is LP-01)
+            if (status >= 400) {
+                failedNetworkRequests += 1;
+            }
+        });
         const response = await page.goto(targetPage);
         // Page returns 200
         (0, test_1.expect)(response?.ok()).toBe(true);
@@ -12,6 +20,67 @@ fixtures_1.test.describe("Landing Page Automated Smoke Suite", () => {
         await (0, test_1.expect)(h1).toBeVisible();
         // No console errors on load
         (0, test_1.expect)(consoleErrors).toHaveLength(0);
+        // No failed asset/network requests
+        (0, test_1.expect)(failedNetworkRequests, "Page should load without any failed network requests (404/500)").toBe(0);
+    });
+    (0, fixtures_1.test)("LP-02: Correct page metadata (title and favicon)", async ({ page, targetPage }) => {
+        await page.goto(targetPage);
+        // Title should not be empty, a raw URL, or a placeholder
+        const title = await page.title();
+        const hasTitle = title.trim().length > 0;
+        (0, test_1.expect)(hasTitle, "Page title should not be empty").toBe(true);
+        (0, test_1.expect)(title).not.toMatch(/^http/i);
+        (0, test_1.expect)(title).not.toMatch(/untitled/i);
+        // Favicon should be present
+        const favicon = page.locator('link[rel="icon"], link[rel="shortcut icon"]');
+        await (0, test_1.expect)(favicon.first()).toBeAttached();
+    });
+    (0, fixtures_1.test)("LP-03: HTTPS enforced", async ({ page, targetPage }) => {
+        // We can only reliably test HTTPS redirection if we have an absolute URL pointing to a remote environment.
+        // If targetPage is a relative path (like '/'), we skip because local dev servers usually run on HTTP.
+        const isRelativePath = targetPage.startsWith("/");
+        const isLocalhost = targetPage.includes("localhost");
+        const isLocalIP = targetPage.includes("127.0.0.1");
+        const isLocalEnvironment = isRelativePath || isLocalhost || isLocalIP;
+        if (isLocalEnvironment) {
+            fixtures_1.test.skip(true, "HTTPS redirection is only testable on remote staging/production environments");
+        }
+        let httpURL = targetPage;
+        const isHTTPS = targetPage.startsWith("https://");
+        const isHTTP = targetPage.startsWith("http://");
+        if (isHTTPS) {
+            httpURL = targetPage.replace("https://", "http://");
+        }
+        else if (!isHTTP) {
+            // isHTTP is true when the targetPage already explicitly defines the HTTP protocol
+            httpURL = `http://${targetPage}`;
+        }
+        await page.goto(httpURL);
+        // Address bar shows https:// (auto-redirected)
+        (0, test_1.expect)(page.url()).toMatch(/^https:\/\//);
+    });
+    (0, fixtures_1.test)("LP-04: 404/error handling", async ({ page, targetPage }) => {
+        let notFoundURL = `${targetPage}/thispagedoesnotexist`;
+        const hasTrailingSlash = targetPage.endsWith("/");
+        if (hasTrailingSlash) {
+            notFoundURL = `${targetPage}thispagedoesnotexist`;
+        }
+        await page.goto(notFoundURL);
+        // Check that it's a branded/styled 404 page, NOT a plain white server error page or a stack trace
+        const content = await page.content();
+        (0, test_1.expect)(content).not.toMatch(/stack trace/i);
+        // Look for common 404 indicators
+        const errorHeading = page.getByRole("heading").filter({ hasText: /404|not found|does not exist|not available/i });
+        const errorText = page.locator("text=/404|not found|does not exist|not available/i");
+        const hasErrorHeading = (await errorHeading.count()) > 0;
+        const hasErrorText = (await errorText.count()) > 0;
+        const isBranded404 = hasErrorHeading || hasErrorText;
+        (0, test_1.expect)(isBranded404, "Page should display a branded 404 error message").toBe(true);
+        // 404 page should have a link back to the home page
+        const homeLink = page.getByRole("link", { name: /home|back|return/i }).or(page.locator('a[href="/"]'));
+        const homeLinkCount = await homeLink.count();
+        const hasHomeLink = homeLinkCount > 0;
+        (0, test_1.expect)(hasHomeLink, "404 page should have a link back to the home page").toBe(true);
     });
     (0, fixtures_1.test)("RS-01: No horizontal overflow (responsive layout stability)", async ({ page, targetPage }) => {
         await page.goto(targetPage);