@manufac/general-tests 0.0.1-alpha

package/README.md

@@ -0,0 +1,58 @@
+# @manufac/general-tests
+
+Shared Playwright regression suite for landing pages, built from the Landing Page Test Plan. It ships generic, page-agnostic checks (page load, responsive layout, forms, CTAs/links, media, orientation, touch targets, etc.) that any landing-page app in the monorepo can run against its own pages.
+
+See [CHANGELOG.md](./CHANGELOG.md) for release notes.
+
+## Consuming from an app
+
+Add it as a normal dependency, pinned to the version you want to consume:
+
+```bash
+npm install @manufac/general-tests@0.0.1-alpha
+```
+
+```json
+{
+  "dependencies": {
+    "@manufac/general-tests": "0.0.1-alpha"
+  }
+}
+```
+
+Then wire it into the app's `playwright.config.ts` using the project-builder helpers:
+
+```ts
+import { defineConfig } from "@playwright/test";
+import { createDesktopProject, createMobileProject } from "@manufac/general-tests/config/projects.js";
+
+export default defineConfig({
+  use: {
+    baseURL: "http://localhost:8080",
+  },
+  projects: [
+    createDesktopProject("Desktop Chrome", "Desktop Chrome"),
+    createDesktopProject("Desktop Safari", "Desktop Safari"),
+    createDesktopProject("Desktop Firefox", "Desktop Firefox"),
+    createMobileProject("Mobile Safari", "iPhone 12"),
+    createMobileProject("Mobile Chrome", "Pixel 5"),
+  ],
+  webServer: {
+    command: "npm run start",
+    url: "http://localhost:8080",
+    reuseExistingServer: !process.env.CI,
+  },
+});
+```
+
+- `createDesktopProject(name, device, breakpoint?)` runs the `shared` + `desktop-only` specs under the given Playwright device, defaulting to the Desktop breakpoint (1440x900).
+- `createMobileProject(name, device, breakpoint?)` runs the `shared` + `mobile-only` specs, defaulting to the Mobile M breakpoint (390x844).
+- Both accept an optional third `breakpoint` argument — one of `Breakpoints.MobileS/MobileM/Tablet/Laptop/Desktop/Wide` (Section 3 of the test plan) — to test at a different viewport.
+
+By default every spec runs against `/`. To point a project at a different page, override the `targetPage` fixture option:
+
+```ts
+createDesktopProject("Desktop Chrome — pricing", "Desktop Chrome"),
+// then, in that project's `use`:
+use: { targetPage: "/pricing" }
+```

package/dist/config/projects.d.ts

@@ -0,0 +1,41 @@
+import { devices } from "@playwright/test";
+import type { Project } from "@playwright/test";
+export interface Breakpoint {
+    name: string;
+    width: number;
+    height: number;
+}
+export declare const Breakpoints: {
+    readonly MobileS: {
+        readonly name: "Mobile S";
+        readonly width: 320;
+        readonly height: 568;
+    };
+    readonly MobileM: {
+        readonly name: "Mobile M";
+        readonly width: 390;
+        readonly height: 844;
+    };
+    readonly Tablet: {
+        readonly name: "Tablet";
+        readonly width: 768;
+        readonly height: 1024;
+    };
+    readonly Laptop: {
+        readonly name: "Laptop";
+        readonly width: 1280;
+        readonly height: 800;
+    };
+    readonly Desktop: {
+        readonly name: "Desktop";
+        readonly width: 1440;
+        readonly height: 900;
+    };
+    readonly Wide: {
+        readonly name: "Wide";
+        readonly width: 1920;
+        readonly height: 1080;
+    };
+};
+export declare function createDesktopProject(name: string, device: keyof typeof devices, breakpoint?: Breakpoint): Project;
+export declare function createMobileProject(name: string, device: keyof typeof devices, breakpoint?: Breakpoint): Project;

package/dist/config/projects.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Breakpoints = void 0;
+exports.createDesktopProject = createDesktopProject;
+exports.createMobileProject = createMobileProject;
+const test_1 = require("@playwright/test");
+const node_path_1 = require("node:path");
+// Section 3 of the Landing Page Test Plan — breakpoints / viewports.
+exports.Breakpoints = {
+    MobileS: { name: "Mobile S", width: 320, height: 568 },
+    MobileM: { name: "Mobile M", width: 390, height: 844 },
+    Tablet: { name: "Tablet", width: 768, height: 1024 },
+    Laptop: { name: "Laptop", width: 1280, height: 800 },
+    Desktop: { name: "Desktop", width: 1440, height: 900 },
+    Wide: { name: "Wide", width: 1920, height: 1080 },
+};
+// Resolves to dist/specs at runtime so projects work regardless of the consuming app's own testDir.
+const SpecsDirectory = (0, node_path_1.join)(__dirname, "..", "specs");
+const SharedTestMatch = "shared/**/*.spec.js";
+const DesktopOnlyTestMatch = "desktop-only/**/*.spec.js";
+const MobileOnlyTestMatch = "mobile-only/**/*.spec.js";
+function createDesktopProject(name, device, breakpoint = exports.Breakpoints.Desktop) {
+    return {
+        name,
+        testDir: SpecsDirectory,
+        testMatch: [SharedTestMatch, DesktopOnlyTestMatch],
+        use: { ...test_1.devices[device], viewport: { width: breakpoint.width, height: breakpoint.height } },
+    };
+}
+function createMobileProject(name, device, breakpoint = exports.Breakpoints.MobileM) {
+    return {
+        name,
+        testDir: SpecsDirectory,
+        testMatch: [SharedTestMatch, MobileOnlyTestMatch],
+        use: { ...test_1.devices[device], viewport: { width: breakpoint.width, height: breakpoint.height } },
+    };
+}

package/dist/fixtures/index.d.ts

@@ -0,0 +1,5 @@
+export interface PageTestOptions {
+    targetPage: string;
+    consoleErrors: string[];
+}
+export declare const test: import("@playwright/test").TestType<import("@playwright/test").PlaywrightTestArgs & import("@playwright/test").PlaywrightTestOptions & PageTestOptions, import("@playwright/test").PlaywrightWorkerArgs & import("@playwright/test").PlaywrightWorkerOptions>;

package/dist/fixtures/index.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.test = void 0;
+const test_1 = require("@playwright/test");
+// Ref: https://playwright.dev/docs/test-fixtures#creating-a-fixture
+// eslint-disable-next-line @typescript-eslint/naming-convention
+exports.test = test_1.test.extend({
+    // Ref: https://playwright.dev/docs/test-fixtures#fixtures-options
+    /**
+     * Playwright's test.extend<Options>({ someOption: [defaultValue, { option: true }] })
+     * syntax declares targetPage as a fixture option — a configurable value with a
+     * default ("/" here), which any consumer can override via test.use({ targetPage: "..." }),
+     * either per spec file, per describe block, or per Playwright "project" in a config.
+     * Without { option: true }, it'd just be a fixed value baked into the fixture,
+     * not something a consumer could override.
+     */
+    targetPage: ["/", { option: true }],
+    consoleErrors: async ({ page }, use) => {
+        let errors = [];
+        page.on("console", (message) => {
+            if (message.type() === "error") {
+                errors = [...errors, message.text()];
+            }
+        });
+        await use(errors);
+    },
+});

package/dist/schema/index.d.ts

@@ -0,0 +1,5 @@
+import { z } from "zod";
+export declare const ManufacTestConfigSchema: z.ZodObject<{
+    pages: z.ZodArray<z.ZodString>;
+}, z.core.$strip>;
+export type ManufacTestConfig = z.infer<typeof ManufacTestConfigSchema>;

package/dist/schema/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ManufacTestConfigSchema = void 0;
+const zod_1 = require("zod");
+exports.ManufacTestConfigSchema = zod_1.z.object({
+    pages: zod_1.z.array(zod_1.z.string()).min(1, "At least one page is required"),
+});

package/dist/specs/desktop-only/browser-zoom.spec.d.ts

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

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../fixtures");
+const utils_1 = require("../utils");
+const test_1 = require("@playwright/test");
+(0, fixtures_1.test)("RS-07 Browser zoom (desktop) at 200%", async ({ page, targetPage }) => {
+    await page.setViewportSize({ width: utils_1.ResponsiveConfig.ViewPortWidth, height: utils_1.ResponsiveConfig.ViewPortHeight });
+    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);
+    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);
+    (0, test_1.expect)(overlappingTargets, `Interactive elements unreachable (overlapping) at 200% zoom:\n${overlappingTargets.join("\n")}`).toEqual([]);
+});

package/dist/specs/mobile-only/navigation.spec.d.ts

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

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

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../fixtures");
+const test_1 = require("@playwright/test");
+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 }))
+            .or(page.locator(".hamburger, .menu-toggle"))
+            .first();
+        const count = await hamburger.count();
+        if (count === 0) {
+            fixtures_1.test.skip(true, "No hamburger menu button found on the page");
+        }
+        const isVisible = await hamburger.isVisible();
+        if (!isVisible) {
+            fixtures_1.test.skip(true, "Hamburger menu button is not visible");
+        }
+        await hamburger.click();
+        await page.waitForTimeout(500); // Wait for transition
+        const bodyOverflow = await page.evaluate(() => {
+            return window.getComputedStyle(document.body).overflow;
+        });
+        const isHidden = bodyOverflow === "hidden" || bodyOverflow === "clip";
+        (0, test_1.expect)(isHidden, "Page behind the open mobile menu should not be scrollable").toBe(true);
+    });
+});

package/dist/specs/mobile-only/orientation.spec.d.ts

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

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../fixtures");
+const utils_1 = require("../utils");
+const test_1 = require("@playwright/test");
+(0, fixtures_1.test)("RS-02 Orientation change (mobile) reflows without overlap and preserves scroll section", async ({ page, targetPage, }) => {
+    await page.goto(targetPage);
+    const portraitViewport = page.viewportSize();
+    if (portraitViewport === null) {
+        throw new Error("Viewport size must be set before running orientation 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);
+    }
+    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...
+        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/readability.spec.d.ts

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

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../fixtures");
+const utils_1 = require("../utils");
+const test_1 = require("@playwright/test");
+(0, fixtures_1.test)("RS-04 Text readability at 320px", async ({ page, targetPage }) => {
+    await page.goto(targetPage);
+    const undersizedText = await (0, utils_1.findUndersizedBodyText)(page);
+    (0, test_1.expect)(undersizedText, `Found ${String(undersizedText.length)} body text element(s) below ${String(utils_1.ResponsiveConfig.MinBodyTextFontSizePX)}px at 320px width:\n${undersizedText.join("\n")}`).toEqual([]);
+    const brokenText = await (0, utils_1.findTruncatedOrOverflowingText)(page);
+    (0, test_1.expect)(brokenText, `Truncated or overflowing text at 320px width:\n${brokenText.join("\n")}`).toEqual([]);
+    const isScrollable = await (0, utils_1.hasHorizontalScrollbar)(page);
+    (0, test_1.expect)(isScrollable, "Horizontal scrollbar present at 320px — text requires horizontal scrolling to read").toBe(false);
+});

package/dist/specs/mobile-only/soft-keyboard.spec.d.ts

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

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

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../fixtures");
+const utils_1 = require("../utils");
+const test_1 = require("@playwright/test");
+fixtures_1.test.describe("Forms - 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 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
+            // opens the number pad") is verified indirectly via the input's inputmode/type
+            // attribute, which is what drives the OS keyboard choice on a real device.
+            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.
+            // 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.
+            const visibleHeight = Math.round(viewport.height * (1 - utils_1.ResponsiveConfig.KeyboardOcclusionRatio));
+            await page.setViewportSize({ width: viewport.width, height: visibleHeight });
+            const fieldBox = await field.boundingBox();
+            const isAboveKeyboard = fieldBox !== null && fieldBox.y >= 0 && fieldBox.y + fieldBox.height <= visibleHeight;
+            (0, test_1.expect)(isAboveKeyboard, `${keyboardField.label.source} field should never be hidden behind the keyboard; the page should scroll it into view`).toBe(true);
+        });
+    });
+});

package/dist/specs/mobile-only/touch-targets.spec.d.ts

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

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

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../fixtures");
+const utils_1 = require("../utils");
+const test_1 = require("@playwright/test");
+(0, fixtures_1.test)("RS-05 Touch targets (mobile) are at least 44x44px and do not overlap", async ({ page, targetPage }) => {
+    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);
+    (0, test_1.expect)(overlappingTargets, `Overlapping tap targets risk triggering the wrong element:\n${overlappingTargets.join("\n")}`).toEqual([]);
+});

package/dist/specs/shared/cta.spec.d.ts

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

package/dist/specs/shared/cta.spec.js

@@ -0,0 +1,199 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../fixtures");
+const test_1 = require("@playwright/test");
+fixtures_1.test.describe("Landing Page - CTAs, Links & Navigation", () => {
+    (0, fixtures_1.test)("CT-01: All CTAs functional", async ({ page, targetPage }) => {
+        await page.goto(targetPage);
+        // Look for elements with button role or common CTA link names using smart locators
+        const ctas = page
+            .getByRole("button", { name: /submit|send|join|subscribe|sign|start|contact|book|request|try/i })
+            .or(page.getByRole("link", { name: /submit|send|join|subscribe|sign|start|contact|book|request|try/i }));
+        const ctaCount = await ctas.count();
+        (0, test_1.expect)(ctaCount, "Page should have at least some CTAs").toBeGreaterThan(0);
+        for (let index = 0; index < ctaCount; index++) {
+            const cta = ctas.nth(index);
+            const tagName = await cta.evaluate((element) => {
+                return element.tagName.toLowerCase();
+            });
+            switch (tagName) {
+                case "a": {
+                    const href = await cta.getAttribute("href");
+                    (0, test_1.expect)(typeof href === "string", "CTA link must have an href").toBe(true);
+                    if (typeof href === "string") {
+                        (0, test_1.expect)(href.length > 0, "CTA href must not be empty").toBe(true);
+                    }
+                    const target = await cta.getAttribute("target");
+                    if (target !== null) {
+                        (0, test_1.expect)(target, "CTA target attribute should be _blank if present").toBe("_blank");
+                    }
+                    break;
+                }
+                case "button": {
+                    await (0, test_1.expect)(cta, "CTA button should be visible").toBeVisible();
+                    break;
+                }
+            }
+        }
+    });
+    (0, fixtures_1.test)("CT-02: All links valid", async ({ page, request, targetPage }) => {
+        await page.goto(targetPage);
+        const links = page.getByRole("link");
+        const linkCount = await links.count();
+        (0, test_1.expect)(linkCount, "Page should have at least some links").toBeGreaterThan(0);
+        let linkURLs = [];
+        for (let index = 0; index < linkCount; index++) {
+            const href = await links.nth(index).getAttribute("href");
+            if (typeof href === "string") {
+                // We only check internal links to avoid flaky tests due to external anti-bot protections
+                if (href.startsWith("/")) {
+                    const isIncluded = linkURLs.includes(href);
+                    if (!isIncluded) {
+                        linkURLs = [...linkURLs, href];
+                    }
+                }
+            }
+        }
+        for (const linkURL of linkURLs) {
+            const requestURL = new URL(linkURL, page.url()).toString();
+            const response = await request.get(requestURL);
+            const isResponseOK = response.ok();
+            (0, test_1.expect)(isResponseOK, `Link ${linkURL} returned status ${response.status().toString()}`).toBe(true);
+        }
+    });
+    (0, fixtures_1.test)("CT-03: Anchor scroll on mobile", async ({ page, targetPage }) => {
+        await page.goto(targetPage);
+        const links = page.getByRole("link");
+        const count = await links.count();
+        if (count === 0) {
+            fixtures_1.test.skip(true, "No links found on the page");
+        }
+        let hasClicked = false;
+        for (let index = 0; index < count; index++) {
+            const href = await links.nth(index).getAttribute("href");
+            if (typeof href === "string" && href.startsWith("#") && href.length > 1) {
+                const targetID = href.substring(1);
+                const targetElement = page.locator(`id=${targetID}`);
+                const targetCount = await targetElement.count();
+                if (targetCount > 0) {
+                    await links.nth(index).click();
+                    await (0, test_1.expect)(targetElement).toBeInViewport();
+                    hasClicked = true;
+                    break;
+                }
+            }
+        }
+        if (!hasClicked) {
+            fixtures_1.test.skip(true, "No valid anchor links with existing targets found on the page");
+        }
+    });
+    (0, fixtures_1.test)("CT-04: Phone/email links", async ({ page, targetPage }) => {
+        await page.goto(targetPage);
+        const links = page.getByRole("link");
+        const count = await links.count();
+        if (count === 0) {
+            fixtures_1.test.skip(true, "No links found on the page to check for phone/email");
+        }
+        for (let index = 0; index < count; index++) {
+            const href = await links.nth(index).getAttribute("href");
+            if (typeof href === "string") {
+                if (href.startsWith("tel:")) {
+                    const phoneRegex = /^tel:[+\d\-\s()]+$/;
+                    const isValid = phoneRegex.test(href);
+                    (0, test_1.expect)(isValid, `Phone link format should be valid: ${href}`).toBe(true);
+                }
+                else if (href.startsWith("mailto:")) {
+                    // Simple email validation for mailto format
+                    const emailRegex = /^mailto:[^@\s]+@[^@\s]+\.[^@\s]+.*$/;
+                    const isValid = emailRegex.test(href);
+                    (0, test_1.expect)(isValid, `Email link format should be valid: ${href}`).toBe(true);
+                }
+            }
+        }
+    });
+    (0, fixtures_1.test)("CT-06: Hover vs touch states", async ({ page, isMobile, targetPage }) => {
+        await page.goto(targetPage);
+        const interactables = page.getByRole("button").or(page.getByRole("link"));
+        const count = await interactables.count();
+        if (count === 0) {
+            fixtures_1.test.skip(true, "No buttons or links found to test interaction states");
+        }
+        const interactablesAll = await interactables.all();
+        await Promise.all(interactablesAll.map(async (element, index) => {
+            const isVisible = await element.isVisible();
+            if (isVisible) {
+                // Prevent navigation or unwanted side effects during interaction testing
+                await element.evaluate((node) => {
+                    node.addEventListener("click", (event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                    }, { once: true });
+                });
+                if (!isMobile) {
+                    const initialStyle = await element.evaluate((node) => {
+                        const style = window.getComputedStyle(node);
+                        return {
+                            bg: style.backgroundColor,
+                            color: style.color,
+                            opacity: style.opacity,
+                            border: style.borderColor,
+                            shadow: style.boxShadow,
+                            transform: style.transform,
+                        };
+                    });
+                    await element.hover();
+                    const hoverStyle = await element.evaluate((node) => {
+                        const style = window.getComputedStyle(node);
+                        return {
+                            bg: style.backgroundColor,
+                            color: style.color,
+                            opacity: style.opacity,
+                            border: style.borderColor,
+                            shadow: style.boxShadow,
+                            transform: style.transform,
+                        };
+                    });
+                    const isStyleChanged = initialStyle.bg !== hoverStyle.bg ||
+                        initialStyle.color !== hoverStyle.color ||
+                        initialStyle.opacity !== hoverStyle.opacity ||
+                        initialStyle.border !== hoverStyle.border ||
+                        initialStyle.shadow !== hoverStyle.shadow ||
+                        initialStyle.transform !== hoverStyle.transform;
+                    (0, test_1.expect)(isStyleChanged, `Hovering should change styling for element at index ${index.toString()}`).toBe(true);
+                }
+                else {
+                    const initialStyle = await element.evaluate((node) => {
+                        const style = window.getComputedStyle(node);
+                        return {
+                            bg: style.backgroundColor,
+                            color: style.color,
+                            opacity: style.opacity,
+                            border: style.borderColor,
+                            shadow: style.boxShadow,
+                            transform: style.transform,
+                        };
+                    });
+                    await element.tap();
+                    const finalStyle = await element.evaluate((node) => {
+                        const style = window.getComputedStyle(node);
+                        return {
+                            bg: style.backgroundColor,
+                            color: style.color,
+                            opacity: style.opacity,
+                            border: style.borderColor,
+                            shadow: style.boxShadow,
+                            transform: style.transform,
+                        };
+                    });
+                    const isStyleChanged = initialStyle.bg !== finalStyle.bg ||
+                        initialStyle.color !== finalStyle.color ||
+                        initialStyle.opacity !== finalStyle.opacity ||
+                        initialStyle.border !== finalStyle.border ||
+                        initialStyle.shadow !== finalStyle.shadow ||
+                        initialStyle.transform !== finalStyle.transform;
+                    (0, test_1.expect)(isStyleChanged, `Element at index ${index.toString()} should change styling after tap on mobile`).toBe(true);
+                }
+            }
+        }));
+    });
+});

package/dist/specs/shared/forms/autofill.spec.d.ts

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

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../../fixtures");
+const utils_1 = require("../../utils");
+const test_1 = require("@playwright/test");
+fixtures_1.test.describe("Forms - 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 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.d.ts

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

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

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const fixtures_1 = require("../../../fixtures");
+const utils_1 = require("../../utils");
+const test_1 = require("@playwright/test");
+fixtures_1.test.describe("Forms - Double Submit", () => {
+    (0, fixtures_1.test)("FM-04 Double-submit protection allows only one submission", async ({ page, targetPage }) => {
+        await page.goto(targetPage);
+        const submitButton = page.locator('button[type="submit"], input[type="submit"]');
+        const submitButtonCount = await submitButton.count();
+        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);
+        }
+        const targetSubmitButton = submitButton.first();
+        const firstClick = targetSubmitButton.click();
+        await targetSubmitButton.click({ force: true });
+        await firstClick;
+        const isEnabled = !(await targetSubmitButton.isDisabled());
+        const ariaBusy = await targetSubmitButton.getAttribute("aria-busy");
+        const isBusy = ariaBusy === "true";
+        const hasDoubleSubmitProtection = !isEnabled || isBusy;
+        (0, test_1.expect)(hasDoubleSubmitProtection, "Submit button should visibly disable or show a loading state after the first click").toBe(true);
+    });
+});

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

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