@manufac/general-tests 0.0.1-alpha

package/dist/specs/utils.d.ts

@@ -0,0 +1,119 @@
+import type { Locator, Page } from "@playwright/test";
+export declare const ResponsiveConfig: {
+    readonly ScrollSteps: 10;
+    readonly ScrollStepDelayMs: 100;
+    readonly ViewPortWidth: 1440;
+    readonly ViewPortHeight: 900;
+    readonly ZoomLevel: "200%";
+    readonly ZoomSettleDelayMs: 200;
+    readonly UpscaleTolerance: 1.05;
+    readonly OversizeTolerance: 2;
+    readonly ScrollDriftTolerance: 0.15;
+    readonly MinBodyTextFontSizePX: 12;
+    readonly PinFlickerTolerancePX: 2;
+    readonly MinTouchTargetSizePX: 44;
+    readonly KeyboardOcclusionRatio: 0.4;
+};
+export interface ScrollMetrics {
+    scrollHeight: number;
+    scrollY: number;
+    clientHeight: number;
+}
+export interface Viewport {
+    name: string;
+    width: number;
+    height: number;
+}
+export interface ElementDescriptor {
+    tagName: string;
+    className: string;
+}
+export declare function describeElement(descriptor: ElementDescriptor): string;
+export interface ElementOverlap {
+    elementA: ElementDescriptor;
+    elementB: ElementDescriptor;
+    overlapWidth: number;
+    overlapHeight: number;
+}
+export declare const TappableElementsSelector: string;
+export declare const TouchTargetSizeSelector: string;
+export declare function getScrollMetrics(page: Page): Promise<ScrollMetrics>;
+export declare function scrollThroughPage(page: Page): Promise<void>;
+export declare function findTruncatedOrOverflowingText(page: Page): Promise<string[]>;
+export declare function findOverlappingElements(page: Page, containerSelector: string): Promise<string[]>;
+export declare function findOverlappingTapTargets(page: Page): Promise<string[]>;
+export declare const ContentOverlapSelector: string;
+export interface ImageSizeIssue {
+    src: string;
+    naturalWidth: number;
+    naturalHeight: number;
+    renderedWidth: number;
+    renderedHeight: number;
+    devicePixelRatio: number;
+}
+export declare function findImageSizeIssues(page: Page): Promise<ImageSizeIssue[]>;
+export declare function isImageUpscaled(image: ImageSizeIssue): boolean;
+export declare function isImageOversized(image: ImageSizeIssue): boolean;
+export interface ElementRect {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+    width: number;
+    height: number;
+}
+export interface ViewportSize {
+    width: number;
+    height: number;
+}
+export declare function isCutoffAtViewportEdge(rect: ElementRect, viewport: ViewportSize): boolean;
+export declare function findElementsCutoffAtViewportEdge(page: Page, containerSelector?: string): Promise<string[]>;
+export declare function findUndersizedBodyText(page: Page): Promise<string[]>;
+export declare function findUndersizedTouchTargets(page: Page, containerSelector: string): Promise<string[]>;
+export declare function hasHorizontalScrollbar(page: Page): Promise<boolean>;
+export declare function findCollapsedEmbeds(page: Page): Promise<string[]>;
+export declare function isVideoAutoplaying(video: Locator): Promise<boolean>;
+export declare function isVideoMuted(video: Locator): Promise<boolean>;
+export declare const ValidUserInfo: {
+    readonly ValidTestName: "Jane Doe";
+    readonly ValidTestEmail: "test@test.com";
+    readonly ValidTestPhone: "9876543210";
+    readonly LongNameCharacterCount: 250;
+    readonly EmojiTestName: "Jane 😀 Doe";
+    readonly PaddedTestEmail: "   test@test.com   ";
+};
+export interface RequiredField {
+    label: RegExp;
+    validValue: string;
+}
+export declare const RequiredFields: RequiredField[];
+export declare function fillAllFieldsValidly(page: Page): Promise<void>;
+export declare function hasVisibleErrorNearField(fieldLocator: Locator): Promise<boolean>;
+export interface InvalidInputCase {
+    fieldLabel: RegExp;
+    invalidValue: string;
+    expectedErrorText: RegExp;
+}
+export declare const InvalidInputCases: InvalidInputCase[];
+export declare function fillOtherRequiredFieldsValidly(page: Page, skipLabel: RegExp): Promise<void>;
+export interface AutofillField {
+    label: RegExp;
+    expectedAutocomplete: RegExp;
+}
+export declare const AutofillFields: AutofillField[];
+export interface KeyboardField {
+    label: RegExp;
+    expectedInputMode: RegExp;
+}
+export declare const KeyboardFields: KeyboardField[];
+export declare function getActiveSlideIndex(carousel: Locator): Promise<number>;
+export declare function getTotalSlideCount(carousel: Locator): Promise<number>;
+export declare function hasEmptySlideFrame(carousel: Locator): Promise<boolean>;
+export declare function goToNextSlideViaArrow(carousel: Locator): Promise<boolean>;
+export declare function getDotCount(carousel: Locator): Promise<number>;
+export declare function goToSlideViaDot(carousel: Locator, dotIndex: number): Promise<boolean>;
+export declare function swipeToNextSlide(carousel: Locator): Promise<boolean>;
+export declare function swipeToPreviousSlide(carousel: Locator): Promise<boolean>;
+export declare function traverseSlidesForward(carousel: Locator, carouselIndex: number, isMobile: boolean): Promise<void>;
+export declare function checkSwipeBackward(carousel: Locator, carouselIndex: number): Promise<void>;
+export declare function checkAllDots(carousel: Locator, carouselIndex: number): Promise<void>;

package/dist/specs/utils.js

@@ -0,0 +1,529 @@
+"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.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;
+exports.isCutoffAtViewportEdge = isCutoffAtViewportEdge;
+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.hasVisibleErrorNearField = hasVisibleErrorNearField;
+exports.fillOtherRequiredFieldsValidly = fillOtherRequiredFieldsValidly;
+exports.getActiveSlideIndex = getActiveSlideIndex;
+exports.getTotalSlideCount = getTotalSlideCount;
+exports.hasEmptySlideFrame = hasEmptySlideFrame;
+exports.goToNextSlideViaArrow = goToNextSlideViaArrow;
+exports.getDotCount = getDotCount;
+exports.goToSlideViaDot = goToSlideViaDot;
+exports.swipeToNextSlide = swipeToNextSlide;
+exports.swipeToPreviousSlide = swipeToPreviousSlide;
+exports.traverseSlidesForward = traverseSlidesForward;
+exports.checkSwipeBackward = checkSwipeBackward;
+exports.checkAllDots = checkAllDots;
+const test_1 = require("@playwright/test");
+exports.ResponsiveConfig = {
+    ScrollSteps: 10,
+    ScrollStepDelayMs: 100,
+    ViewPortWidth: 1440,
+    ViewPortHeight: 900,
+    ZoomLevel: "200%",
+    ZoomSettleDelayMs: 200,
+    UpscaleTolerance: 1.05,
+    OversizeTolerance: 2,
+    ScrollDriftTolerance: 0.15,
+    MinBodyTextFontSizePX: 12,
+    PinFlickerTolerancePX: 2,
+    MinTouchTargetSizePX: 44,
+    KeyboardOcclusionRatio: 0.4,
+};
+// Formats a descriptor captured inside page.evaluate (see findElementsCutoffAtViewportEdge and
+// findUndersizedBodyText) into a readable tag selector, e.g. <p.hero.subtitle>.
+function describeElement(descriptor) {
+    const rawClassName = descriptor.className.trim();
+    const className = rawClassName.length > 0 ? `.${rawClassName.replace(/\s+/g, ".")}` : "";
+    return `<${descriptor.tagName.toLowerCase()}${className}>`;
+}
+/**
+ * References for summary and details elements:
+ * - https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/summary
+ * - https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/details
+ */
+const TappableElementsList = [
+    "a",
+    "button",
+    "select",
+    "summary",
+    'input[type="submit"]',
+    'input[type="button"]',
+    'input[type="reset"]',
+    'input[type="checkbox"]',
+    'input[type="radio"]',
+    "label[for]",
+    '[role="button"]',
+    '[role="link"]',
+    '[role="tab"]',
+    '[role="menuitem"]',
+    '[role="option"]',
+    '[role="switch"]',
+    '[role="checkbox"]',
+    '[role="radio"]',
+    '[tabindex="0"]',
+];
+exports.TappableElementsSelector = TappableElementsList.join(", ");
+// Native checkbox/radio inputs render at a small, fixed OS size regardless of page styling — their
+// real tappable target is normally the paired <label for="...">, already covered separately here.
+// Excluded from the size check (but not the overlap check) so a standard HTML form doesn't fail
+// on every single page just for using unstyled checkboxes/radios.
+const SizeExemptTappableSelectors = new Set(['input[type="checkbox"]', 'input[type="radio"]']);
+exports.TouchTargetSizeSelector = TappableElementsList.filter((selector) => {
+    return !SizeExemptTappableSelectors.has(selector);
+}).join(", ");
+async function getScrollMetrics(page) {
+    return page.evaluate(() => {
+        return {
+            scrollHeight: document.documentElement.scrollHeight,
+            scrollY: window.scrollY,
+            clientHeight: document.documentElement.clientHeight,
+        };
+    });
+}
+async function scrollThroughPage(page) {
+    const { scrollHeight } = await getScrollMetrics(page);
+    const scrollStepDelta = Math.floor(scrollHeight / exports.ResponsiveConfig.ScrollSteps);
+    for (let step = 0; step <= exports.ResponsiveConfig.ScrollSteps; step++) {
+        await page.mouse.wheel(0, scrollStepDelta);
+        await page.waitForTimeout(exports.ResponsiveConfig.ScrollStepDelayMs);
+    }
+}
+async function findTruncatedOrOverflowingText(page) {
+    return page.evaluate(() => {
+        const broken = [];
+        const elements = Array.from(document.querySelectorAll("p, li, td, th, dt, dd, blockquote, figcaption, h1, h2, h3, h4, h5, h6"));
+        for (const element of elements) {
+            const text = element.textContent.trim();
+            if (text.length === 0)
+                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)}"`);
+            }
+        }
+        return broken;
+    });
+}
+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;
+            const horizontalOverlap = Math.min(rect.right, window.innerWidth) - Math.max(rect.left, 0);
+            const verticalOverlap = Math.min(rect.bottom, window.innerHeight) - Math.max(rect.top, 0);
+            return hasDimensions && horizontalOverlap > 0 && verticalOverlap > 0;
+        }
+        const conflicts = [];
+        const elements = Array.from(document.querySelectorAll(selector)).filter(isVisibleInViewport);
+        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,
+                    });
+                }
+            }
+        }
+        return conflicts;
+    }, containerSelector);
+    return overlaps.map((overlap) => {
+        return `${overlap.elementA.tagName} overlaps ${overlap.elementB.tagName} by ${overlap.overlapWidth.toFixed(0)}x${overlap.overlapHeight.toFixed(0)}px`;
+    });
+}
+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 = [
+    exports.TappableElementsSelector,
+    "p",
+    "li",
+    "td",
+    "th",
+    "dt",
+    "dd",
+    "blockquote",
+    "figcaption",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "img",
+].join(", ");
+async function findImageSizeIssues(page) {
+    return page.evaluate(() => {
+        const images = Array.from(document.querySelectorAll("img"));
+        const issues = images
+            .map((image) => {
+            let issue = null;
+            const rect = image.getBoundingClientRect();
+            const isRendered = rect.width > 0 && rect.height > 0;
+            const hasNaturalSize = image.naturalWidth > 0 && image.naturalHeight > 0;
+            if (isRendered && hasNaturalSize) {
+                issue = {
+                    src: image.currentSrc,
+                    naturalWidth: image.naturalWidth,
+                    naturalHeight: image.naturalHeight,
+                    renderedWidth: rect.width,
+                    renderedHeight: rect.height,
+                    devicePixelRatio: window.devicePixelRatio,
+                };
+            }
+            return issue;
+        })
+            .filter((entry) => {
+            return entry !== null;
+        });
+        return issues;
+    });
+}
+function isImageUpscaled(image) {
+    const isWidthUpscaled = image.renderedWidth * image.devicePixelRatio > image.naturalWidth * exports.ResponsiveConfig.UpscaleTolerance;
+    const isHeightUpscaled = image.renderedHeight * image.devicePixelRatio > image.naturalHeight * exports.ResponsiveConfig.UpscaleTolerance;
+    return isWidthUpscaled || isHeightUpscaled;
+}
+function isImageOversized(image) {
+    const isWidthOversized = image.naturalWidth > image.renderedWidth * image.devicePixelRatio * exports.ResponsiveConfig.OversizeTolerance;
+    const isHeightOversized = image.naturalHeight > image.renderedHeight * image.devicePixelRatio * exports.ResponsiveConfig.OversizeTolerance;
+    return isWidthOversized || isHeightOversized;
+}
+// Cut off means straddling the viewport edge (partially visible), not positioned entirely
+// outside it — off-canvas nav drawers, upcoming carousel slides, and visually-hidden
+// screen-reader text are intentionally placed fully outside the viewport and are not bugs.
+// Pure geometry (no DOM APIs), so it runs in Node against a rect snapshot taken in the browser.
+function isCutoffAtViewportEdge(rect, viewport) {
+    const hasDimensions = rect.width > 0 && rect.height > 0;
+    const horizontalOverlap = Math.min(rect.right, viewport.width) - Math.max(rect.left, 0);
+    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;
+}
+async function findElementsCutoffAtViewportEdge(page, containerSelector = "body *") {
+    const { elements, viewport } = await page.evaluate((selector) => {
+        function isRenderedElement(element) {
+            const style = window.getComputedStyle(element);
+            return style.display !== "none" && style.visibility !== "hidden" && Number.parseFloat(style.opacity) !== 0;
+        }
+        const renderedElements = Array.from(document.querySelectorAll(selector))
+            .filter(isRenderedElement)
+            .map((element) => {
+            const rect = element.getBoundingClientRect();
+            return {
+                tagName: element.tagName,
+                className: element instanceof HTMLElement ? element.className : "",
+                rect: {
+                    left: rect.left,
+                    right: rect.right,
+                    top: rect.top,
+                    bottom: rect.bottom,
+                    width: rect.width,
+                    height: rect.height,
+                },
+            };
+        });
+        return { elements: renderedElements, viewport: { width: window.innerWidth, height: window.innerHeight } };
+    }, containerSelector);
+    return elements
+        .filter((element) => {
+        return isCutoffAtViewportEdge(element.rect, viewport);
+    })
+        .map(describeElement);
+}
+// Returns a descriptor (not the element itself) rather than returning it directly: page.evaluate's
+// return value is JSON-serialized across the browser/Node boundary, and a DOM element has no own
+// enumerable properties, so it would come back as an empty object instead of a usable reference.
+async function findUndersizedBodyText(page) {
+    const undersizedElements = await page.evaluate((minFontSizePX) => {
+        const elements = Array.from(document.querySelectorAll("p, li, td, th, dt, dd, blockquote, figcaption"));
+        return elements.reduce((undersized, element) => {
+            const text = element.textContent.trim();
+            const fontSizePX = Number.parseFloat(window.getComputedStyle(element).fontSize);
+            if (text.length > 0 && fontSizePX < minFontSizePX) {
+                undersized.push({ tagName: element.tagName, className: element.className, fontSizePX });
+            }
+            return undersized;
+        }, []);
+    }, exports.ResponsiveConfig.MinBodyTextFontSizePX);
+    return undersizedElements.map((element) => {
+        return `${describeElement(element)} (${String(element.fontSizePX)}px)`;
+    });
+}
+async function findUndersizedTouchTargets(page, containerSelector) {
+    const undersizedElements = await page.evaluate(({ selector, minSizePX }) => {
+        function isRendered(element) {
+            const style = window.getComputedStyle(element);
+            return style.display !== "none" && style.visibility !== "hidden" && Number.parseFloat(style.opacity) !== 0;
+        }
+        return Array.from(document.querySelectorAll(selector))
+            .filter(isRendered)
+            .map((element) => {
+            const rect = element.getBoundingClientRect();
+            return {
+                tagName: element.tagName,
+                className: element.className,
+                width: rect.width,
+                height: rect.height,
+                text: element.textContent.trim().slice(0, 40),
+            };
+        })
+            .filter((entry) => {
+            const hasDimensions = entry.width > 0 && entry.height > 0;
+            return hasDimensions && (entry.width < minSizePX || entry.height < minSizePX);
+        });
+    }, { selector: containerSelector, minSizePX: exports.ResponsiveConfig.MinTouchTargetSizePX });
+    return undersizedElements.map((element) => {
+        return `${describeElement(element)} is ${element.width.toFixed(0)}x${element.height.toFixed(0)}px: "${element.text}"`;
+    });
+}
+async function hasHorizontalScrollbar(page) {
+    return page.evaluate(() => {
+        return document.documentElement.scrollWidth > document.documentElement.clientWidth;
+    });
+}
+async function 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;
+    });
+    return !isPaused;
+}
+async function isVideoMuted(video) {
+    return video.evaluate((element) => {
+        return element.muted;
+    });
+}
+exports.ValidUserInfo = {
+    ValidTestName: "Jane Doe",
+    ValidTestEmail: "test@test.com",
+    ValidTestPhone: "9876543210",
+    LongNameCharacterCount: 250,
+    EmojiTestName: "Jane 😀 Doe",
+    PaddedTestEmail: "   test@test.com   ",
+};
+exports.RequiredFields = [
+    { label: /name/i, validValue: exports.ValidUserInfo.ValidTestName },
+    { label: /email/i, validValue: exports.ValidUserInfo.ValidTestEmail },
+    { label: /phone/i, validValue: exports.ValidUserInfo.ValidTestPhone },
+];
+async function fillAllFieldsValidly(page) {
+    await Promise.all(exports.RequiredFields.map(async (field) => {
+        const locator = page.getByLabel(field.label);
+        if ((await locator.count()) > 0) {
+            await locator.first().fill(field.validValue);
+        }
+    }));
+}
+async function hasVisibleErrorNearField(fieldLocator) {
+    const fieldID = await fieldLocator.getAttribute("id");
+    const describedBy = await fieldLocator.getAttribute("aria-describedby");
+    let isDescribedByErrorVisible = false;
+    if (describedBy !== null) {
+        const describedByLocator = fieldLocator.page().locator(`#${describedBy}`);
+        isDescribedByErrorVisible = await describedByLocator.isVisible();
+    }
+    let isAdjacentErrorVisible = false;
+    if (fieldID !== null) {
+        const adjacentError = fieldLocator.page().locator(`[data-error-for="${fieldID}"]`);
+        isAdjacentErrorVisible = await adjacentError.isVisible();
+    }
+    return isDescribedByErrorVisible || isAdjacentErrorVisible;
+}
+exports.InvalidInputCases = [
+    { fieldLabel: /email/i, invalidValue: "notanemail", expectedErrorText: /enter a valid email address/i },
+    { fieldLabel: /email/i, invalidValue: "test@", expectedErrorText: /enter a valid email address/i },
+    { fieldLabel: /email/i, invalidValue: "@test.com", expectedErrorText: /enter a valid email address/i },
+    { fieldLabel: /phone/i, invalidValue: "abc", expectedErrorText: /enter a valid phone number/i },
+    { fieldLabel: /phone/i, invalidValue: "12", expectedErrorText: /enter a valid phone number/i },
+];
+async function fillOtherRequiredFieldsValidly(page, skipLabel) {
+    if (!/name/i.test(skipLabel.source)) {
+        await page.getByLabel(/name/i).fill(exports.ValidUserInfo.ValidTestName);
+    }
+}
+exports.AutofillFields = [
+    { label: /name/i, expectedAutocomplete: /name/i },
+    { label: /email/i, expectedAutocomplete: /email/i },
+    { label: /phone/i, expectedAutocomplete: /tel/i },
+];
+exports.KeyboardFields = [
+    { label: /email/i, expectedInputMode: /email/i },
+    { label: /phone/i, expectedInputMode: /tel|numeric/i },
+];
+const SlideSelector = '[data-slide], [role="group"], .slide';
+const DotSelector = '[role="tab"], .dot, [data-dot]';
+async function getActiveSlideIndex(carousel) {
+    return carousel.evaluate((element, selector) => {
+        const slides = Array.from(element.querySelectorAll(selector));
+        return slides.findIndex((slide) => {
+            return slide.getAttribute("aria-hidden") !== "true";
+        });
+    }, SlideSelector);
+}
+async function getTotalSlideCount(carousel) {
+    return carousel.evaluate((element, selector) => {
+        return element.querySelectorAll(selector).length;
+    }, SlideSelector);
+}
+async function hasEmptySlideFrame(carousel) {
+    return carousel.evaluate((element, selector) => {
+        const visibleSlides = Array.from(element.querySelectorAll(selector)).filter((slide) => {
+            return slide.getAttribute("aria-hidden") !== "true";
+        });
+        const isEveryVisibleSlideBlank = visibleSlides.every((slide) => {
+            return slide.textContent.trim() === "";
+        });
+        return visibleSlides.length === 0 || isEveryVisibleSlideBlank;
+    }, SlideSelector);
+}
+async function goToNextSlideViaArrow(carousel) {
+    const nextArrow = carousel.getByRole("button", { name: /next/i });
+    const arrowCount = await nextArrow.count();
+    let didAdvance = false;
+    if (arrowCount > 0) {
+        const isEnabled = await nextArrow.isEnabled();
+        if (isEnabled) {
+            await nextArrow.click();
+            didAdvance = true;
+        }
+    }
+    return didAdvance;
+}
+async function getDotCount(carousel) {
+    return carousel.locator(DotSelector).count();
+}
+async function goToSlideViaDot(carousel, dotIndex) {
+    const dot = carousel.locator(DotSelector).nth(dotIndex);
+    const isEnabled = await dot.isEnabled();
+    if (isEnabled) {
+        await dot.click();
+    }
+    return isEnabled;
+}
+const SlideDirection = {
+    Forward: "forward",
+    Backward: "backward",
+};
+// Playwright has no built-in touch-swipe gesture, but a mouse drag across most of the carousel's
+// width is functionally equivalent for carousels that respond to pointer events (which cover both
+// mouse drag and touch swipe), and is more portable across browser engines than dispatching
+// synthetic touch events directly.
+async function dragCarousel(carousel, direction) {
+    const box = await carousel.boundingBox();
+    const didDrag = box !== null;
+    if (box !== null) {
+        const page = carousel.page();
+        const y = box.y + box.height / 2;
+        const isForward = direction === SlideDirection.Forward;
+        const fromX = isForward ? box.x + box.width * 0.8 : box.x + box.width * 0.2;
+        const toX = isForward ? box.x + box.width * 0.2 : box.x + box.width * 0.8;
+        await page.mouse.move(fromX, y);
+        await page.mouse.down();
+        await page.mouse.move(toX, y, { steps: 10 });
+        await page.mouse.up();
+    }
+    return didDrag;
+}
+async function swipeToNextSlide(carousel) {
+    return dragCarousel(carousel, SlideDirection.Forward);
+}
+async function swipeToPreviousSlide(carousel) {
+    return dragCarousel(carousel, SlideDirection.Backward);
+}
+// Advances through every slide via arrow (desktop) or swipe (mobile), asserting the frame is
+// never blank along the way. Stops early once it either loops back to the start or gets stuck on
+// the same slide (a non-looping carousel that has reached its last slide).
+async function traverseSlidesForward(carousel, carouselIndex, isMobile) {
+    const totalSlides = await getTotalSlideCount(carousel);
+    const startIndex = await getActiveSlideIndex(carousel);
+    let previousIndex = startIndex;
+    // One extra advance beyond the actual slide count, to also exercise the loop/stop behavior at
+    // the end rather than just reaching the last slide.
+    const maxAdvances = totalSlides + 1;
+    let shouldContinue = true;
+    for (let advance = 0; advance < maxAdvances && shouldContinue; advance++) {
+        const didAdvance = isMobile ? await swipeToNextSlide(carousel) : await goToNextSlideViaArrow(carousel);
+        if (didAdvance) {
+            const isEmptyFrame = await hasEmptySlideFrame(carousel);
+            (0, test_1.expect)(isEmptyFrame, `Carousel at index ${carouselIndex.toString()}: Slide frame was blank after ${String(advance + 1)} ${isMobile ? "swipes" : "arrow clicks"}`).toBe(false);
+            const currentIndex = await getActiveSlideIndex(carousel);
+            const hasLoopedBackToStart = currentIndex === startIndex && previousIndex !== startIndex;
+            const hasStoppedAdvancing = currentIndex === previousIndex;
+            if (hasLoopedBackToStart || hasStoppedAdvancing) {
+                shouldContinue = false;
+            }
+            previousIndex = currentIndex;
+        }
+        else {
+            shouldContinue = false;
+        }
+    }
+}
+async function checkSwipeBackward(carousel, carouselIndex) {
+    const didSwipeBack = await swipeToPreviousSlide(carousel);
+    if (didSwipeBack) {
+        const isEmptyFrameAfterSwipeBack = await hasEmptySlideFrame(carousel);
+        (0, test_1.expect)(isEmptyFrameAfterSwipeBack, `Carousel at index ${carouselIndex.toString()}: Slide frame was blank after swiping backward`).toBe(false);
+    }
+}
+async function checkAllDots(carousel, carouselIndex) {
+    const dotCount = await getDotCount(carousel);
+    for (let dotIndex = 0; dotIndex < dotCount; dotIndex++) {
+        const didGoToDot = await goToSlideViaDot(carousel, dotIndex);
+        if (didGoToDot) {
+            const isEmptyFrameAfterDot = await hasEmptySlideFrame(carousel);
+            (0, test_1.expect)(isEmptyFrameAfterDot, `Carousel at index ${carouselIndex.toString()}: Slide frame was blank after clicking dot ${dotIndex.toString()}`).toBe(false);
+        }
+    }
+}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@manufac/general-tests",
+  "version": "0.0.1-alpha",
+  "description": "A library for general tests for landing pages",
+  "license": "UNLICENSED",
+  "exports": {
+    "./*": "./dist/*"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "lint": "eslint --fix --cache",
+    "prepack": "npm run build",
+    "pretty": "prettier --cache --write . && sort-package-json"
+  },
+  "dependencies": {
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@manufac/eslint-config": "*",
+    "@manufac/prettier-config": "*",
+    "@playwright/test": "^1.62.0",
+    "typescript": "^7.0.2"
+  },
+  "peerDependencies": {
+    "@playwright/test": "^1.62.0"
+  }
+}