@manufac/general-tests 0.5.0 → 0.9.0

package/README.md

@@ -134,3 +134,91 @@ Then add two scripts to the app's `package.json` (adjust `start:sb`/`build:sb` t
 ```
 
 Baselines land in `e2e-visual/__screenshots__/<story-id>.png`, next to `playwright.storybook.config.ts`.
+
+## Full-page visual regression
+
+`PageVisualRegressionTestMatch` runs `page-visual-regression.spec.ts` — one generic test that visits every page in `Config.pages` and compares a full-page screenshot against a saved baseline with `toHaveScreenshot()`. A page path becomes the snapshot name by trimming slashes (`/` -> `home`, `/pricing` -> `pricing`, `/docs/setup` -> `docs-setup`). Failures are collected, so one broken page doesn't hide the others.
+
+### Setup
+
+Run it in its own project, so it starts only after the other projects finish. Full-page screenshots of long pages are slow and sensitive to load, and running them next to other tests makes them flaky. Projects that list each other in `dependencies` run one after another, so only one visual project runs at a time.
+
+```ts
+import { LoadingPageTestMatch, PageVisualRegressionTestMatch } from "@manufac/general-tests/config/projects.js";
+
+const Projects: Project[] = [
+  {
+    name: "Desktop Chrome",
+    testDir: GeneralTestsSpecsDir,
+    testMatch: [LoadingPageTestMatch],
+    use: { ...devices["Desktop Chrome"], viewport: DesktopBreakpoints.Desktop },
+  },
+  {
+    name: "Desktop Chrome Visual",
+    testDir: GeneralTestsSpecsDir,
+    testMatch: PageVisualRegressionTestMatch,
+    dependencies: ["Desktop Chrome"],
+    snapshotPathTemplate: "e2e/__screenshots__/Desktop-Chrome/{arg}{ext}",
+    use: { ...devices["Desktop Chrome"], viewport: DesktopBreakpoints.Desktop },
+  },
+  {
+    // Chain the next visual project onto the previous one.
+    name: "Responsive 375 Visual",
+    testDir: GeneralTestsSpecsDir,
+    testMatch: PageVisualRegressionTestMatch,
+    dependencies: ["Desktop Chrome Visual"],
+    snapshotPathTemplate: "e2e/__screenshots__/Responsive-375/{arg}{ext}",
+    use: { ...devices["Desktop Chrome"], viewport: ResponsiveLayoutBreakpoints.MobileL },
+  },
+];
+
+export default defineConfig<PageTestOptions>({
+  testDir: "./e2e",
+  expect: { timeout: 10_000, toHaveScreenshot: { maxDiffPixelRatio: 0.001, animations: "disabled" } },
+  use: { baseURL: "https://your-app.example.com", pages: Config.pages, actionTimeout: 10_000 },
+  projects: Projects,
+});
+```
+
+- Each visual project has its own `snapshotPathTemplate`, so baselines are kept per project (Desktop Chrome and 375 differ in layout) and stay in the repo.
+- The image and video waits have no timeout of their own. They use `use.actionTimeout`, so one stuck image fails that page instead of hanging the suite.
+- `workers` is a global Playwright setting and can't be set per project. Chaining the projects gives the same result for the visual ones, because each has a single test and only one project runs at a time.
+- If a project in `dependencies` fails, the visual projects are skipped. Use `--no-deps` to run them on their own.
+
+### Scripts
+
+```json
+{
+  "scripts": {
+    "test:visual:pages": "playwright test page-visual-regression --no-deps --workers=1 --project=\"* Visual\"",
+    "update:visual:pages": "npm run test:visual:pages -- --update-snapshots=all"
+  }
+}
+```
+
+- The first run has no baselines, so use `update:visual:pages`.
+- Use `--update-snapshots=all` to rewrite every baseline. A plain `--update-snapshots` only rewrites the ones that fail the comparison, so old files can stay behind.
+- Review the new images before committing them. Check that the header is at the top and the video area is a solid box.
+- Don't run two Playwright runs at once in the same app. They share `test-results`, and one run can delete the other's files.
+
+## CTA & link destination checks
+
+`CTADestinationsTestMatch` runs `cta-destinations.spec.ts` — `CT-01` clicks each configured CTA and verifies it lands on its expected destination (same tab by default, or a new tab when `opensInNewTab` is set); `CT-02` visits every internal link reachable from `Config.pages` and checks it isn't a 404 or blank page, then verifies each configured legal link still points to its expected URL.
+
+Both are driven entirely by config, since the shared package has no way to know an individual app's design spec on its own:
+
+```ts
+// manufac-test.config.ts
+import type { ManufacTestConfig } from "@manufac/general-tests/schema/index.js";
+
+export const Config: ManufacTestConfig = {
+  pages: ["/", "/pricing", "/contact-us", "/privacy"],
+  ctas: [
+    { ctaID: "hero-cta", page: "/", name: "Get Started", expectedHref: "/contact-us" },
+    { ctaID: "pricing-cta", page: "/pricing", name: "Book a demo", expectedHref: "/contact-us", opensInNewTab: true },
+  ],
+  legalLinks: [{ page: "/", name: "Privacy Policy", expectedHref: "/privacy" }],
+};
+```
+
+Add `CTADestinationsTestMatch` to a project's `testMatch` the same way as `LoadingPageTestMatch`. `CT-01` skips entirely if `ctas` is left empty.

package/dist/config/projects.d.ts

@@ -35,4 +35,6 @@ export declare const ProjectTypes: {
 export declare const LoadingPageTestMatch = "loading-page.spec.js";
 export declare const ResponsiveLayoutTestMatch = "responsive-layout.spec.js";
 export declare const FormsTestMatch = "forms.spec.js";
-export declare const VisualRegressionTestMatch = "visual-regression.spec.js";
+export declare const StorybookVisualRegressionTestMatch = "storybook-visual-regression.spec.js";
+export declare const CTADestinationsTestMatch = "cta-destinations.spec.js";
+export declare const PageVisualRegressionTestMatch = "page-visual-regression.spec.js";

package/dist/config/projects.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VisualRegressionTestMatch = exports.FormsTestMatch = exports.ResponsiveLayoutTestMatch = exports.LoadingPageTestMatch = exports.ProjectTypes = exports.ResponsiveLayoutBreakpoints = exports.DesktopBreakpoints = void 0;
+exports.PageVisualRegressionTestMatch = exports.CTADestinationsTestMatch = exports.StorybookVisualRegressionTestMatch = exports.FormsTestMatch = exports.ResponsiveLayoutTestMatch = exports.LoadingPageTestMatch = exports.ProjectTypes = exports.ResponsiveLayoutBreakpoints = exports.DesktopBreakpoints = void 0;
 // Section 3 of the Landing Page Test Plan — breakpoints / viewports.
 exports.DesktopBreakpoints = {
     Desktop: { name: "Desktop", width: 1440, height: 900 },
@@ -18,4 +18,6 @@ exports.ProjectTypes = {
 exports.LoadingPageTestMatch = "loading-page.spec.js";
 exports.ResponsiveLayoutTestMatch = "responsive-layout.spec.js";
 exports.FormsTestMatch = "forms.spec.js";
-exports.VisualRegressionTestMatch = "visual-regression.spec.js";
+exports.StorybookVisualRegressionTestMatch = "storybook-visual-regression.spec.js";
+exports.CTADestinationsTestMatch = "cta-destinations.spec.js";
+exports.PageVisualRegressionTestMatch = "page-visual-regression.spec.js";

package/dist/fixtures/index.d.ts

@@ -1,8 +1,9 @@
-import type { ManufacTestFormConfig } from "../schema";
+import type { ManufacTestCTA, ManufacTestFormConfig } from "../schema";
 export interface PageTestOptions {
     targetPage: string;
     pages: string[];
     forms: ManufacTestFormConfig[];
+    ctas: ManufacTestCTA[];
     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

@@ -9,6 +9,7 @@ exports.test = test_1.test.extend({
     targetPage: ["/", { option: true }],
     pages: [["/"], { option: true }],
     forms: [[], { option: true }],
+    ctas: [[], { option: true }],
     consoleErrors: async ({ page }, use) => {
         const errors = [];
         page.on("console", (message) => {

package/dist/schema/index.d.ts

@@ -70,6 +70,13 @@ export declare const ManufacTestFormsSchema: z.ZodArray<z.ZodObject<{
     }, z.core.$strip>>;
     successMessage: z.ZodString;
 }, z.core.$strip>>;
+declare const CTASchema: z.ZodObject<{
+    ctaID: z.ZodString;
+    page: z.ZodString;
+    expectedHref: z.ZodString;
+    shouldOpenInNewTab: z.ZodOptional<z.ZodNullable<z.ZodBoolean>>;
+}, z.core.$strip>;
+export type ManufacTestCTA = z.infer<typeof CTASchema>;
 export declare const ManufacTestConfigSchema: z.ZodObject<{
     pages: z.ZodArray<z.ZodString>;
     forms: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodObject<{
@@ -91,6 +98,12 @@ export declare const ManufacTestConfigSchema: z.ZodObject<{
         }, z.core.$strip>>;
         successMessage: z.ZodString;
     }, z.core.$strip>>>>;
+    ctas: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodObject<{
+        ctaID: z.ZodString;
+        page: z.ZodString;
+        expectedHref: z.ZodString;
+        shouldOpenInNewTab: z.ZodOptional<z.ZodNullable<z.ZodBoolean>>;
+    }, z.core.$strip>>>>;
 }, z.core.$strip>;
 export type ManufacTestConfig = z.infer<typeof ManufacTestConfigSchema>;
 export declare const StorybookIndexSchema: z.ZodObject<{

package/dist/schema/index.js

@@ -34,9 +34,16 @@ const FormSchema = zod_1.z.object({
 });
 /** Validates the `forms` fixture option. */
 exports.ManufacTestFormsSchema = zod_1.z.array(FormSchema);
+const CTASchema = zod_1.z.object({
+    ctaID: zod_1.z.string().min(1),
+    page: zod_1.z.string().min(1),
+    expectedHref: zod_1.z.string().min(1),
+    shouldOpenInNewTab: zod_1.z.boolean().nullish(),
+});
 exports.ManufacTestConfigSchema = zod_1.z.object({
     pages: zod_1.z.array(zod_1.z.string()).min(1, "At least one page is required"),
     forms: zod_1.z.array(FormSchema).nullish(),
+    ctas: zod_1.z.array(CTASchema).nullish(),
 });
 exports.StorybookIndexSchema = zod_1.z.object({
     entries: zod_1.z.record(zod_1.z.string(), zod_1.z.object({

package/dist/specs/cta-destinations.spec.js

@@ -0,0 +1,65 @@
+"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 - CTA & Link Destinations", () => {
+    (0, fixtures_1.test)("CT-01: All CTAs functional", async ({ page, ctas }) => {
+        for (const cta of ctas) {
+            await fixtures_1.test.step(cta.ctaID, async () => {
+                await page.goto(cta.page);
+                const locator = page.getByTestId(cta.ctaID);
+                await (0, test_1.expect)(locator, `CTA "${cta.ctaID}" should be visible`).toBeVisible();
+                const shouldOpenNewTab = cta.shouldOpenInNewTab === true;
+                const [popup] = await Promise.all([
+                    shouldOpenNewTab ? page.waitForEvent("popup") : Promise.resolve(null),
+                    locator.click(),
+                ]);
+                const destination = popup ?? page;
+                await (0, test_1.expect)(destination, `CTA "${cta.ctaID}" should navigate to ${cta.expectedHref}`).toHaveURL(new RegExp(cta.expectedHref));
+                await popup?.close();
+            });
+        }
+    });
+    (0, fixtures_1.test)("CT-02: All links valid", async ({ page, pages }) => {
+        fixtures_1.test.slow();
+        for (const targetPage of pages) {
+            await fixtures_1.test.step(targetPage, async () => {
+                await page.goto(targetPage);
+                const links = page.getByRole("link");
+                const count = await links.count();
+                (0, test_1.expect)(count, `Page ${targetPage} should have at least some links`).toBeGreaterThan(0);
+                const hrefs = new Set();
+                for (let index = 0; index < count; index++) {
+                    const href = await links.nth(index).getAttribute("href");
+                    // Get in app hrefs
+                    if (typeof href === "string" && href.startsWith("/")) {
+                        hrefs.add(href);
+                    }
+                }
+                for (const href of hrefs) {
+                    await fixtures_1.test.step(href, async () => {
+                        const hashIndex = href.indexOf("#");
+                        const hasHash = hashIndex !== -1;
+                        const hrefPath = hasHash ? href.slice(0, hashIndex) : href;
+                        const hrefHash = hasHash ? href.slice(hashIndex + 1) : "";
+                        const currentPath = new URL(page.url()).pathname;
+                        // An in-page anchor (same path, just a hash) doesn't trigger a navigation, so
+                        // page.goto() returns no response — checking it against the DOM is what matters.
+                        const isSameDocumentAnchor = hasHash && (hrefPath === "" || hrefPath === currentPath);
+                        if (isSameDocumentAnchor && hrefHash.length > 0) {
+                            const targetCount = await page.locator(`#${hrefHash}`).count(); // same page navigation happens by HTML "id" field
+                            (0, test_1.expect)(targetCount > 0, `Anchor link ${href} should point to an existing element`).toBe(true);
+                        }
+                        else if (!isSameDocumentAnchor) {
+                            const response = await page.goto(href);
+                            (0, test_1.expect)(response?.ok(), `Link ${href} should load without a 404/500`).toBe(true);
+                            await (0, test_1.expect)(page.getByText("Page not found"), `Link ${href} should not land on a 404 page`).toBeHidden();
+                            const bodyText = await page.locator("body").innerText();
+                            (0, test_1.expect)(bodyText.trim().length > 0, `Link ${href} should not render a blank page`).toBe(true);
+                        }
+                    });
+                }
+            });
+        }
+    });
+});

package/dist/specs/page-visual-regression.spec.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const utils_1 = require("./utils");
+const fixtures_1 = require("../fixtures");
+const test_1 = require("@playwright/test");
+(0, fixtures_1.test)("page screenshots match their baseline", async ({ page, pages }) => {
+    // One test per page would leave too little time at the default 30s — triple it.
+    fixtures_1.test.slow();
+    const errors = [];
+    for (const targetPage of pages) {
+        await fixtures_1.test.step(targetPage, async () => {
+            try {
+                await page.goto(targetPage);
+                await page.waitForLoadState("networkidle");
+                // Triggers lazy-loaded images below the fold before scrolling back up.
+                await (0, utils_1.scrollThroughPage)(page);
+                // `behavior: "instant"` skips the page's smooth scrolling. Waiting for scrollY 0 matters because
+                // sticky/fixed elements (like the header) are painted wherever the page is scrolled to.
+                await page.evaluate(() => {
+                    window.scrollTo({ top: 0, behavior: "instant" });
+                });
+                await test_1.expect
+                    .poll(() => {
+                    return page.evaluate(() => {
+                        return window.scrollY;
+                    });
+                })
+                    .toBe(0);
+                // Some lazy images are never scrolled into view (e.g. hidden at this breakpoint) and would never load.
+                await page.evaluate(() => {
+                    for (const image of document.querySelectorAll("img[loading='lazy']")) {
+                        image.loading = "eager";
+                    }
+                });
+                // Timeout comes from the consuming app's `use.actionTimeout`, so a stuck image fails
+                // just this page instead of hanging the whole suite.
+                await page.waitForFunction(() => {
+                    return Array.from(document.images).every((image) => {
+                        return image.complete;
+                    });
+                });
+                // `complete` only means the file arrived; decode() waits until the image can be painted in full.
+                await page.evaluate(async () => {
+                    await Promise.all(Array.from(document.images).map((image) => {
+                        return image.decode().catch(() => undefined);
+                    }));
+                });
+                // A video's box size depends on its metadata, so wait for it or the mask height changes between runs.
+                await page.waitForFunction(() => {
+                    return Array.from(document.querySelectorAll("video")).every((video) => {
+                        return video.readyState >= HTMLMediaElement.HAVE_METADATA;
+                    });
+                });
+                // A playing video changes every frame and `animations: "disabled"` doesn't stop it, so mask it.
+                await (0, test_1.expect)(page).toHaveScreenshot(`${(0, utils_1.toSnapshotName)(targetPage)}.png`, {
+                    fullPage: true,
+                    mask: [page.locator("video")],
+                });
+            }
+            catch (error) {
+                // Collect failures instead of stopping at the first broken page.
+                const message = error instanceof Error ? error.message : String(error);
+                errors.push(`Page ${targetPage} failed: ${message}`);
+            }
+        });
+    }
+    (0, test_1.expect)(errors, `Visual regression failures:\n${errors.join("\n")}`).toHaveLength(0);
+});

package/dist/specs/{visual-regression.spec.js → storybook-visual-regression.spec.js}

@@ -24,6 +24,13 @@ const test_1 = require("@playwright/test");
                 await page.goto(`iframe.html?id=${storyID}&viewMode=story`);
                 await (0, test_1.expect)(page.locator("#storybook-root")).toBeVisible();
                 await (0, test_1.expect)(page.locator(".sb-preparing-story .sb-loader")).toBeHidden(); // Avoid screenshotting a half-rendered story
+                // Ensure all images are fully loaded before taking the visual regression screenshot.
+                // Ref: https://playwright.dev/docs/api/class-page#page-wait-for-function
+                await page.waitForFunction(() => {
+                    return Array.from(document.images).every((image) => {
+                        return image.complete;
+                    });
+                });
                 await (0, test_1.expect)(page).toHaveScreenshot(`${storyID}.png`, { fullPage: true, timeout: 10_000 });
             }
             catch (error) {

package/dist/specs/utils.d.ts

@@ -1,162 +1,5 @@
+import { type ManufacTestFormField } from "../schema";
 import { type Locator, type Page } from "@playwright/test";
-import type { ManufacTestFormField } from "../schema";
-export declare const ResponsiveConfig: {
-    readonly ScrollSteps: 10;
-    readonly ScrollStepDelayMs: 100;
-    readonly ViewPortWidth: 1440;
-    readonly ViewPortHeight: 900;
-    readonly ZoomFactor: 2;
-    readonly ZoomSettleDelayMs: 300;
-    readonly UpscaleTolerance: 1.05;
-    readonly OversizeTolerance: 2;
-    readonly ScrollDriftTolerance: 0.15;
-    readonly MinBodyTextFontSizePX: 12;
-    readonly PinFlickerTolerancePX: 2;
-    readonly MinTouchTargetSizePX: 44;
-    readonly KeyboardOcclusionRatio: 0.4;
-    readonly CutoffTolerancePX: 5;
-};
-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 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;
-}
-interface RenderedElementSnapshot extends ElementDescriptor {
-    rect: ElementRect;
-    isFixedOrSticky: boolean;
-}
-export declare function isCutoffAtViewportEdge(snapshot: RenderedElementSnapshot, 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 isVideoAutoplaying(video: Locator): Promise<boolean>;
-export declare function isVideoMuted(video: Locator): Promise<boolean>;
-export interface UserInfoShape {
-    ValidTestName: string;
-    ValidTestEmail: string;
-    ValidTestPhone: string;
-    ValidTestCompany: string;
-    ValidTestProjectDescription: string;
-    ValidTestPreferredDate: string;
-    ValidTestPreferredTime: string;
-    LongNameCharacterCount: number;
-    EmojiTestName: string;
-    PaddedTestEmail: string;
-    InvalidTestEmail: string;
-}
-export declare const ValidUserInfo: UserInfoShape;
-export interface RequiredField {
-    label: RegExp;
-    validValue: string;
-}
-export declare function isFieldRequired(fieldLocator: Locator): Promise<boolean>;
-export declare const FieldInteractions: {
-    readonly Fill: "fill";
-    readonly Datetime: "datetime";
-};
-export type FieldInteraction = (typeof FieldInteractions)[keyof typeof FieldInteractions];
-export interface FieldValueMapping {
-    label: RegExp;
-    validValue: string;
-    interaction: FieldInteraction;
-}
-/**
- * Maps a detected field (by its label) to the valid test value used
- * to fill it. Presence here does NOT imply the field is required —
- * required-ness is determined dynamically per field via
- * `isFieldRequired`. Email is the only field that is always required.
- */
-export declare const FieldValueMappings: FieldValueMapping[];
-export declare function fillDateTimePicker(locator: Locator, fallbackValue: string): Promise<void>;
-export declare function fillFormFields(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>;
-export declare const SafeAreaZones: {
-    readonly Top: "top";
-    readonly Bottom: "bottom";
-    readonly Left: "left";
-    readonly Right: "right";
-};
-export type SafeAreaZone = (typeof SafeAreaZones)[keyof typeof SafeAreaZones];
-export interface SafeAreaOverlap extends ElementDescriptor {
-    text: string;
-    overlapZone: SafeAreaZone;
-}
-export declare function findSafeAreaOverlaps(page: Page): Promise<SafeAreaOverlap[]>;
 interface FillFieldParams {
     page: Page;
     locator: Locator;
@@ -168,4 +11,7 @@ export declare function fillField({ field, locator, page }: FillFieldParams): Pr
  * Native validation blocks the submit itself, so no custom error is rendered for it.
  */
 export declare function hasNativeValidationError(fieldLocator: Locator): Promise<boolean>;
+export declare function toSnapshotName(targetPage: string): string;
+export declare function hasHorizontalScrollbar(page: Page): Promise<boolean>;
+export declare function scrollThroughPage(page: Page): Promise<void>;
 export {};