@manufac/general-tests 0.3.1 → 0.5.0

package/README.md

@@ -9,74 +9,128 @@ See [CHANGELOG.md](./CHANGELOG.md) for release notes.
 Add it as a normal dependency, pinned to the version you want to consume:
 
 ```bash
-npm install @manufac/general-tests@0.0.1-alpha
+npm install @manufac/general-tests
 ```
 
-```json
-{
-  "dependencies": {
-    "@manufac/general-tests": "0.0.1-alpha"
-  }
-}
+Then wire it into the app's `playwright.config.ts`.
+
+First, declare the app-specific pages in a small local config file, typed against `ManufacTestConfig`:
+
+```ts
+// manufac-test.config.ts
+import type { ManufacTestConfig } from "@manufac/general-tests/schema/index.js";
+
+export const Config: ManufacTestConfig = {
+  pages: ["/", "/pricing", "/contact-us", "/privacy"],
+};
 ```
 
-Then wire it into the app's `playwright.config.ts` using the project-builder helpers:
+Then reference it from `playwright.config.ts`:
 
 ```ts
-import { defineConfig } from "@playwright/test";
-import { Breakpoints, createProject } from "@manufac/general-tests/config/projects.js";
+import { defineConfig, devices } from "@playwright/test";
+import { dirname, join } from "node:path";
+import {
+  DesktopBreakpoints,
+  ResponsiveLayoutBreakpoints,
+  LoadingPageTestMatch,
+  ResponsiveLayoutTestMatch,
+} from "@manufac/general-tests/config/projects.js";
+import type { PageTestOptions } from "@manufac/general-tests/fixtures/index.js";
+import type { Project } from "@playwright/test";
+import { Config } from "./manufac-test.config.js";
 
-export default defineConfig({
-  use: {
-    baseURL: "http://localhost:8080",
+// Resolves to node_modules/@manufac/general-tests/dist/specs, wherever it's installed from.
+const GeneralTestsSpecsDir = join(dirname(require.resolve("@manufac/general-tests/config/projects.js")), "..", "specs");
+
+const Projects: Project[] = [
+  {
+    name: "Desktop Chrome",
+    testDir: GeneralTestsSpecsDir,
+    testMatch: [LoadingPageTestMatch, ResponsiveLayoutTestMatch],
+    use: { ...devices["Desktop Chrome"], viewport: DesktopBreakpoints.Desktop },
   },
-  projects: [
-    createProject({
-      name: "Desktop Chrome",
-      device: "Desktop Chrome",
-      configuration: { projectType: "desktop", breakpoint: Breakpoints.Desktop },
-    }),
-    createProject({
-      name: "Desktop Safari",
-      device: "Desktop Safari",
-      configuration: { projectType: "desktop", breakpoint: Breakpoints.Desktop },
-    }),
-    createProject({
-      name: "Desktop Firefox",
-      device: "Desktop Firefox",
-      configuration: { projectType: "desktop", breakpoint: Breakpoints.Desktop },
-    }),
-    createProject({
-      name: "Mobile Safari",
-      device: "iPhone 12",
-      configuration: { projectType: "mobile", breakpoint: Breakpoints.MobileM },
-    }),
-    createProject({
-      name: "Mobile Chrome",
-      device: "Pixel 5",
-      configuration: { projectType: "mobile", breakpoint: Breakpoints.MobileM },
-    }),
-  ],
-  webServer: {
-    command: "npm run start",
-    url: "http://localhost:8080",
-    reuseExistingServer: !process.env.CI,
+  {
+    name: "Desktop Safari",
+    testDir: GeneralTestsSpecsDir,
+    testMatch: [LoadingPageTestMatch, ResponsiveLayoutTestMatch],
+    use: { ...devices["Desktop Safari"], viewport: DesktopBreakpoints.Desktop },
+  },
+  {
+    name: "Desktop Firefox",
+    testDir: GeneralTestsSpecsDir,
+    testMatch: [LoadingPageTestMatch, ResponsiveLayoutTestMatch],
+    use: { ...devices["Desktop Firefox"], viewport: DesktopBreakpoints.Desktop },
+  },
+  {
+    name: "Responsive 375",
+    testDir: GeneralTestsSpecsDir,
+    testMatch: ResponsiveLayoutTestMatch,
+    use: { ...devices["Desktop Chrome"], viewport: ResponsiveLayoutBreakpoints.MobileL },
+  },
+  {
+    name: "Responsive 768",
+    testDir: GeneralTestsSpecsDir,
+    testMatch: ResponsiveLayoutTestMatch,
+    use: { ...devices["Desktop Chrome"], viewport: ResponsiveLayoutBreakpoints.Tablet },
+  },
+];
+
+export default defineConfig<PageTestOptions>({
+  testDir: "./e2e",
+  use: {
+    baseURL: "https://your-app.example.com",
+    pages: Config.pages,
   },
+  projects: Projects,
 });
 ```
 
-- `createProject({ name, device, configuration })` builds a Playwright project for the given device.
-- `configuration.projectType: "desktop"` runs the `shared` + `desktop-only` specs, and requires `configuration.breakpoint: Breakpoints.Desktop` (1440x900).
-- `configuration.projectType: "mobile"` runs the `shared` + `mobile-only` specs, and requires `configuration.breakpoint: Breakpoints.MobileM` (390x844).
+- `LoadingPageTestMatch` runs `loading-page.spec.ts` — page-load/console-error/network checks, once per project, over every page in `Config.pages`.
+- `ResponsiveLayoutTestMatch` runs `responsive-layout.spec.ts` — checked at whichever `viewport` each project sets, so add one project per breakpoint you care about (`ResponsiveLayoutBreakpoints.MobileL` / `.Tablet` / `.Desktop`).
+- `require.resolve` + `join(..., "..", "specs")` finds the package's built `specs` directory regardless of how it's installed (registry, `file:`, or a vendored tarball) — `testDir` must point there since these two spec files aren't re-exported any other way.
+- `PageTestOptions` (from `fixtures/index.js`) types the `use` block so `pages` (and `forms`, if you set it) are checked against the fixture's actual shape.
+
+## Storybook visual regression
+
+`VisualRegressionTestMatch` runs `visual-regression.spec.ts` — a single generic test that walks every story in a running Storybook instance and compares it against a baseline screenshot with Playwright's `toHaveScreenshot()`. No per-component spec files are needed; new stories are picked up automatically.
 
-By default every spec runs against `/`. To point a project at a different page, override the `targetPage` fixture option:
+It needs its own Playwright config, separate from the one above, since it runs against Storybook's dev server instead of the app itself:
 
 ```ts
-createProject({
-  name: "Desktop Chrome — pricing",
-  device: "Desktop Chrome",
-  configuration: { projectType: "desktop", breakpoint: Breakpoints.Desktop },
-}),
-// then, in that project's `use`:
-use: { targetPage: "/pricing" }
+// playwright.storybook.config.ts
+import { defineConfig, devices } from "@playwright/test";
+import { dirname, join } from "node:path";
+import { VisualRegressionTestMatch } from "@manufac/general-tests/config/projects.js";
+
+const GeneralTestsSpecsDir = join(dirname(require.resolve("@manufac/general-tests/config/projects.js")), "..", "specs");
+
+export default defineConfig({
+  testDir: GeneralTestsSpecsDir,
+  testMatch: VisualRegressionTestMatch,
+  // Relative, so Playwright resolves it against this config file's own directory (not
+  // testDir, which points into the installed package) — baselines stay in this repo.
+  snapshotPathTemplate: "e2e-visual/__screenshots__/{arg}{ext}",
+  reporter: [["html", { open: "never" }]],
+  expect: { toHaveScreenshot: { maxDiffPixelRatio: 0.001, animations: "disabled" } },
+  use: { ...devices["Desktop Chrome"], viewport: { width: 1366, height: 768 }, baseURL: "http://localhost:6006" },
+  webServer: {
+    command: "npm run start:sb -- --ci --port 6006",
+    url: "http://localhost:6006",
+    reuseExistingServer: true,
+  },
+});
 ```
+
+Then add two scripts to the app's `package.json` (adjust `start:sb`/`build:sb` to however the app runs Storybook):
+
+```json
+{
+  "scripts": {
+    "test:visual": "npm run build:sb && playwright test -c playwright.storybook.config.ts",
+    "update:visual": "npm run build:sb && playwright test -c playwright.storybook.config.ts --update-snapshots"
+  }
+}
+```
+
+Baselines land in `e2e-visual/__screenshots__/<story-id>.png`, next to `playwright.storybook.config.ts`.

package/dist/config/projects.d.ts

@@ -32,5 +32,7 @@ export declare const ProjectTypes: {
     readonly Desktop: "desktop";
     readonly Shared: "shared";
 };
-export declare const LoadingPageTestMatch = "loading-page.spec.ts";
+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";

package/dist/config/projects.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ResponsiveLayoutTestMatch = exports.LoadingPageTestMatch = exports.ProjectTypes = exports.ResponsiveLayoutBreakpoints = exports.DesktopBreakpoints = void 0;
+exports.VisualRegressionTestMatch = 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 },
@@ -15,5 +15,7 @@ exports.ProjectTypes = {
     Desktop: "desktop",
     Shared: "shared",
 };
-exports.LoadingPageTestMatch = "loading-page.spec.ts";
+exports.LoadingPageTestMatch = "loading-page.spec.js";
 exports.ResponsiveLayoutTestMatch = "responsive-layout.spec.js";
+exports.FormsTestMatch = "forms.spec.js";
+exports.VisualRegressionTestMatch = "visual-regression.spec.js";

package/dist/fixtures/index.d.ts

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

@@ -8,6 +8,7 @@ exports.test = test_1.test.extend({
     // Ref: https://playwright.dev/docs/test-fixtures#fixtures-options
     targetPage: ["/", { option: true }],
     pages: [["/"], { option: true }],
+    forms: [[], { option: true }],
     consoleErrors: async ({ page }, use) => {
         const errors = [];
         page.on("console", (message) => {

package/dist/schema/index.d.ts

@@ -13,7 +13,7 @@ export type FieldInteraction = (typeof FieldInteractions)[keyof typeof FieldInte
  * (e.g. a field with no `invalidValue` is simply skipped by the invalid-input check for that form).
  */
 declare const FormFieldSchema: z.ZodObject<{
-    testID: z.ZodString;
+    fieldID: z.ZodString;
     validValue: z.ZodOptional<z.ZodNullable<z.ZodString>>;
     interaction: z.ZodOptional<z.ZodNullable<z.ZodEnum<{
         /** A plain input */
@@ -22,6 +22,7 @@ declare const FormFieldSchema: z.ZodObject<{
         readonly Datetime: "datetime";
     }>>>;
     invalidValue: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+    isRequired: z.ZodOptional<z.ZodNullable<z.ZodBoolean>>;
     expectedAutocomplete: z.ZodOptional<z.ZodNullable<z.ZodCustom<import("react").HTMLInputAutoCompleteAttribute | undefined, import("react").HTMLInputAutoCompleteAttribute | undefined>>>;
     expectedInputMode: z.ZodOptional<z.ZodNullable<z.ZodCustom<"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined, "decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined>>>;
 }, z.core.$strip>;
@@ -30,9 +31,10 @@ export type ManufacTestFormField = z.infer<typeof FormFieldSchema>;
  * Represents One form to be tested
  */
 declare const FormSchema: z.ZodObject<{
-    testID: z.ZodString;
+    formID: z.ZodString;
+    page: z.ZodString;
     fields: z.ZodArray<z.ZodObject<{
-        testID: z.ZodString;
+        fieldID: z.ZodString;
         validValue: z.ZodOptional<z.ZodNullable<z.ZodString>>;
         interaction: z.ZodOptional<z.ZodNullable<z.ZodEnum<{
             /** A plain input */
@@ -41,37 +43,40 @@ declare const FormSchema: z.ZodObject<{
             readonly Datetime: "datetime";
         }>>>;
         invalidValue: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+        isRequired: z.ZodOptional<z.ZodNullable<z.ZodBoolean>>;
         expectedAutocomplete: z.ZodOptional<z.ZodNullable<z.ZodCustom<import("react").HTMLInputAutoCompleteAttribute | undefined, import("react").HTMLInputAutoCompleteAttribute | undefined>>>;
         expectedInputMode: z.ZodOptional<z.ZodNullable<z.ZodCustom<"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined, "decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined>>>;
     }, z.core.$strip>>;
+    successMessage: z.ZodString;
 }, z.core.$strip>;
-export type ManufacTestForm = z.infer<typeof FormSchema>;
-/**
- * Defines selectors for commonly tested components.
- */
-declare const ManufacTestSelectorsSchema: z.ZodObject<{
-    hamburgerTestID: z.ZodOptional<z.ZodNullable<z.ZodString>>;
-    ctaTestID: z.ZodOptional<z.ZodNullable<z.ZodString>>;
-    cookieAcceptTestID: z.ZodOptional<z.ZodNullable<z.ZodString>>;
-    homeLinkTestID: z.ZodOptional<z.ZodNullable<z.ZodString>>;
-    carouselSlideTestID: z.ZodOptional<z.ZodNullable<z.ZodString>>;
-    carouselDotTestID: z.ZodOptional<z.ZodNullable<z.ZodString>>;
-}, z.core.$strip>;
-export type ManufacTestSelectors = z.infer<typeof ManufacTestSelectorsSchema>;
+export type ManufacTestFormConfig = z.infer<typeof FormSchema>;
+/** Validates the `forms` fixture option. */
+export declare const ManufacTestFormsSchema: z.ZodArray<z.ZodObject<{
+    formID: z.ZodString;
+    page: z.ZodString;
+    fields: z.ZodArray<z.ZodObject<{
+        fieldID: z.ZodString;
+        validValue: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+        interaction: z.ZodOptional<z.ZodNullable<z.ZodEnum<{
+            /** A plain input */
+            readonly Fill: "fill";
+            /** A popup-based date/time picker widget */
+            readonly Datetime: "datetime";
+        }>>>;
+        invalidValue: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+        isRequired: z.ZodOptional<z.ZodNullable<z.ZodBoolean>>;
+        expectedAutocomplete: z.ZodOptional<z.ZodNullable<z.ZodCustom<import("react").HTMLInputAutoCompleteAttribute | undefined, import("react").HTMLInputAutoCompleteAttribute | undefined>>>;
+        expectedInputMode: z.ZodOptional<z.ZodNullable<z.ZodCustom<"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined, "decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined>>>;
+    }, z.core.$strip>>;
+    successMessage: z.ZodString;
+}, z.core.$strip>>;
 export declare const ManufacTestConfigSchema: z.ZodObject<{
     pages: z.ZodArray<z.ZodString>;
-    selectors: z.ZodOptional<z.ZodNullable<z.ZodObject<{
-        hamburgerTestID: z.ZodOptional<z.ZodNullable<z.ZodString>>;
-        ctaTestID: z.ZodOptional<z.ZodNullable<z.ZodString>>;
-        cookieAcceptTestID: z.ZodOptional<z.ZodNullable<z.ZodString>>;
-        homeLinkTestID: z.ZodOptional<z.ZodNullable<z.ZodString>>;
-        carouselSlideTestID: z.ZodOptional<z.ZodNullable<z.ZodString>>;
-        carouselDotTestID: z.ZodOptional<z.ZodNullable<z.ZodString>>;
-    }, z.core.$strip>>>;
     forms: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodObject<{
-        testID: z.ZodString;
+        formID: z.ZodString;
+        page: z.ZodString;
         fields: z.ZodArray<z.ZodObject<{
-            testID: z.ZodString;
+            fieldID: z.ZodString;
             validValue: z.ZodOptional<z.ZodNullable<z.ZodString>>;
             interaction: z.ZodOptional<z.ZodNullable<z.ZodEnum<{
                 /** A plain input */
@@ -80,10 +85,18 @@ export declare const ManufacTestConfigSchema: z.ZodObject<{
                 readonly Datetime: "datetime";
             }>>>;
             invalidValue: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            isRequired: z.ZodOptional<z.ZodNullable<z.ZodBoolean>>;
             expectedAutocomplete: z.ZodOptional<z.ZodNullable<z.ZodCustom<import("react").HTMLInputAutoCompleteAttribute | undefined, import("react").HTMLInputAutoCompleteAttribute | undefined>>>;
             expectedInputMode: z.ZodOptional<z.ZodNullable<z.ZodCustom<"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined, "decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | undefined>>>;
         }, z.core.$strip>>;
+        successMessage: z.ZodString;
     }, z.core.$strip>>>>;
 }, z.core.$strip>;
 export type ManufacTestConfig = z.infer<typeof ManufacTestConfigSchema>;
+export declare const StorybookIndexSchema: z.ZodObject<{
+    entries: z.ZodRecord<z.ZodString, z.ZodObject<{
+        type: z.ZodString;
+        id: z.ZodString;
+    }, z.core.$strip>>;
+}, z.core.$strip>;
 export {};

package/dist/schema/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ManufacTestConfigSchema = exports.FieldInteractions = void 0;
+exports.StorybookIndexSchema = exports.ManufacTestConfigSchema = exports.ManufacTestFormsSchema = exports.FieldInteractions = void 0;
 const zod_1 = require("zod");
 /** Interaction kind for filling a form field. */
 exports.FieldInteractions = {
@@ -15,54 +15,32 @@ exports.FieldInteractions = {
  * (e.g. a field with no `invalidValue` is simply skipped by the invalid-input check for that form).
  */
 const FormFieldSchema = zod_1.z.object({
-    /** data-testid of the input element itself. */
-    testID: zod_1.z.string().min(1),
-    /** Value used to fill this field on the happy path. Omit to skip filling this field. */
+    fieldID: zod_1.z.string().min(1),
     validValue: zod_1.z.string().nullish(),
-    /** How to interact with (or fill) this input */
     interaction: zod_1.z.enum(exports.FieldInteractions).nullish(),
-    /**
-     * Deliberately invalid value used by the invalid-input check. Omit to skip that check for this field.
-     *  - The check only verifies the field is left in an invalid state (`aria-invalid` or a failing native `checkValidity()`).
-     */
     invalidValue: zod_1.z.string().nullish(),
-    // `autoComplete` and `inputMode` values are not validated by schema. Only type inference is added.
-    /** Expected `autocomplete` attribute value, checked by the autofill spec. Omit to skip that check. */
+    isRequired: zod_1.z.boolean().nullish(),
     expectedAutocomplete: zod_1.z.custom().nullish(),
-    /** Expected `inputmode` attribute value, checked by the soft-keyboard spec. Omit to skip that check. */
     expectedInputMode: zod_1.z.custom().nullish(),
 });
 /**
  * Represents One form to be tested
  */
 const FormSchema = zod_1.z.object({
-    /** data-testid of the `<form>` element (or its closest wrapping container). */
-    testID: zod_1.z.string().min(1),
-    /** Fields belonging to this form. */
+    formID: zod_1.z.string().min(1),
+    page: zod_1.z.string().min(1),
     fields: zod_1.z.array(FormFieldSchema).min(1),
+    successMessage: zod_1.z.string().min(1),
 });
-/**
- * Defines selectors for commonly tested components.
- */
-const ManufacTestSelectorsSchema = zod_1.z.object({
-    /** Mobile nav hamburger/menu-toggle button. Single element — this testid must be unique on the page. */
-    hamburgerTestID: zod_1.z.string().min(1).nullish(),
-    /** Primary CTA button/link checked by CT-01. Single element — this testid must be unique on the page. */
-    ctaTestID: zod_1.z.string().min(1).nullish(),
-    /** Cookie-consent banner's accept/dismiss button. Single element — this testid must be unique on the page. */
-    cookieAcceptTestID: zod_1.z.string().min(1).nullish(),
-    /** "Back to home" link shown on the 404 page. Single element — this testid must be unique on the page. */
-    homeLinkTestID: zod_1.z.string().min(1).nullish(),
-    /** Shared testID present on every carousel slide — a group, not one element: put the SAME testid on every slide. */
-    carouselSlideTestID: zod_1.z.string().min(1).nullish(),
-    /** Shared testID present on every carousel pagination dot — a group, not one element: put the SAME testid on every dot. */
-    carouselDotTestID: zod_1.z.string().min(1).nullish(),
-});
+/** Validates the `forms` fixture option. */
+exports.ManufacTestFormsSchema = zod_1.z.array(FormSchema);
 exports.ManufacTestConfigSchema = zod_1.z.object({
-    /** Pages this suite should run against. */
     pages: zod_1.z.array(zod_1.z.string()).min(1, "At least one page is required"),
-    /** Defines selectors for commonly tested components. */
-    selectors: ManufacTestSelectorsSchema.nullish(),
-    /** Forms this suite should exercise, keyed by their own data-testid. Omit to skip form-related checks. */
     forms: zod_1.z.array(FormSchema).nullish(),
 });
+exports.StorybookIndexSchema = zod_1.z.object({
+    entries: zod_1.z.record(zod_1.z.string(), zod_1.z.object({
+        type: zod_1.z.string(),
+        id: zod_1.z.string(),
+    })),
+});

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

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

package/dist/specs/forms.spec.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const utils_1 = require("./utils");
+const fixtures_1 = require("../fixtures");
+const test_1 = require("@playwright/test");
+fixtures_1.test.describe("Forms & lead capture", () => {
+    (0, fixtures_1.test)("FM-01 Happy path submission", async ({ page, forms, consoleErrors }) => {
+        fixtures_1.test.slow();
+        for (const form of forms) {
+            await fixtures_1.test.step(`${form.page} (${form.formID})`, async () => {
+                const consoleErrorsBeforeSubmit = consoleErrors.length; // Capture errors while filling the forms.
+                await page.goto(form.page);
+                const formLocator = page.getByTestId(form.formID);
+                await (0, test_1.expect)(formLocator).toBeVisible();
+                for (const field of form.fields) {
+                    await (0, utils_1.fillField)({ page, locator: formLocator, field });
+                }
+                const submittedAt = new Date().toISOString();
+                await formLocator.locator('button[type="submit"]').click();
+                await (0, test_1.expect)(page.getByText(form.successMessage, {
+                    exact: true,
+                })).toBeVisible();
+                (0, test_1.expect)(consoleErrors.slice(consoleErrorsBeforeSubmit)).toHaveLength(0);
+                // Manual, staging-only follow-up — see downstream check below.
+                fixtures_1.test.info().annotations.push({
+                    type: "FM-01 downstream check",
+                    description: `Verify "${form.formID}" submission from ${form.page} on staging (submitted ${submittedAt}).`,
+                });
+            });
+        }
+    });
+    (0, fixtures_1.test)("FM-02 Required field validation", async ({ page, forms }) => {
+        fixtures_1.test.slow();
+        for (const form of forms) {
+            const requiredFields = form.fields.filter((field) => {
+                return field.isRequired === true;
+            });
+            for (const requiredField of requiredFields) {
+                await fixtures_1.test.step(`${form.page} (${form.formID}) - ${requiredField.fieldID}`, async () => {
+                    await page.goto(form.page);
+                    const formLocator = page.getByTestId(form.formID);
+                    await (0, test_1.expect)(formLocator).toBeVisible();
+                    for (const field of form.fields) {
+                        await (0, utils_1.fillField)({
+                            page,
+                            locator: formLocator,
+                            field: {
+                                ...field,
+                                validValue: field.fieldID === requiredField.fieldID ? "" : field.validValue,
+                            },
+                        });
+                    }
+                    await formLocator.locator('button[type="submit"]').click();
+                    await (0, test_1.expect)(page.getByText(new RegExp(form.successMessage, "i"))).not.toBeVisible();
+                    const requiredFieldLocator = formLocator.getByTestId(requiredField.fieldID);
+                    const hasNativeError = await (0, utils_1.hasNativeValidationError)(requiredFieldLocator); // Checks for the browser native validation error for required field.
+                    if (hasNativeError) {
+                        (0, test_1.expect)(hasNativeError).toBeTruthy();
+                    }
+                    else {
+                        await (0, test_1.expect)(requiredFieldLocator).toHaveAttribute("aria-invalid", "true");
+                        const describedBy = await requiredFieldLocator.getAttribute("aria-describedby");
+                        (0, test_1.expect)(describedBy, `"${requiredField.fieldID}" should be linked to its error via aria-describedby`).toBeTruthy();
+                        const errorID = describedBy?.split(" ").at(0) ?? ""; // aria-describedby can hold several element IDs, separated by spaces Ref: https://github.com/mantinedev/mantine/blob/e49d1d94280d9841ff27a46f1935ebcba0f1b639/packages/%40mantine/core/src/components/Input/InputWrapper/InputWrapper.tsx#L213
+                        const errorLocator = page.locator(`#${errorID}`);
+                        await (0, test_1.expect)(errorLocator).toBeVisible();
+                        const errorText = (await errorLocator.textContent())?.trim() ?? "";
+                        (0, test_1.expect)(errorText, `"${requiredField.fieldID}" error message should mention it's required`).toMatch(/required/i);
+                    }
+                });
+            }
+        }
+    });
+});

package/dist/specs/utils.d.ts

@@ -1,4 +1,5 @@
-import type { Locator, Page } from "@playwright/test";
+import { type Locator, type Page } from "@playwright/test";
+import type { ManufacTestFormField } from "../schema";
 export declare const ResponsiveConfig: {
     readonly ScrollSteps: 10;
     readonly ScrollStepDelayMs: 100;
@@ -156,4 +157,15 @@ export interface SafeAreaOverlap extends ElementDescriptor {
     overlapZone: SafeAreaZone;
 }
 export declare function findSafeAreaOverlaps(page: Page): Promise<SafeAreaOverlap[]>;
+interface FillFieldParams {
+    page: Page;
+    locator: Locator;
+    field: ManufacTestFormField;
+}
+export declare function fillField({ field, locator, page }: FillFieldParams): Promise<void>;
+/**
+ * Checks whether the browser's native validation (e.g. the `required` attribute) rejects the field's current value.
+ * Native validation blocks the submit itself, so no custom error is rendered for it.
+ */
+export declare function hasNativeValidationError(fieldLocator: Locator): Promise<boolean>;
 export {};

package/dist/specs/utils.js

@@ -33,6 +33,8 @@ exports.traverseSlidesForward = traverseSlidesForward;
 exports.checkSwipeBackward = checkSwipeBackward;
 exports.checkAllDots = checkAllDots;
 exports.findSafeAreaOverlaps = findSafeAreaOverlaps;
+exports.fillField = fillField;
+exports.hasNativeValidationError = hasNativeValidationError;
 const test_1 = require("@playwright/test");
 exports.ResponsiveConfig = {
     ScrollSteps: 10,
@@ -856,3 +858,58 @@ async function findSafeAreaOverlaps(page) {
         return overlaps;
     }, { selector: contentSelector });
 }
+const MonthNames = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+];
+async function fillDatetime({ field, locator, page }) {
+    // A fresh page load already leaves the picker empty; nothing to clear or open for.
+    if (field.validValue != null && field.validValue !== "") {
+        const date = new Date(field.validValue);
+        await locator.click();
+        const dialog = page.getByRole("dialog");
+        await (0, test_1.expect)(dialog).toBeVisible(); // Check dialog for visibility to select months
+        const dayLabel = `${date.getDate().toString()} ${MonthNames[date.getMonth()]} ${date.getFullYear().toString()}`;
+        await dialog.getByRole("button", { name: dayLabel, exact: true }).click(); // Get the exact date cell with aria-label comparison.
+        const hour24 = date.getHours();
+        const hour12 = ((hour24 + 11) % 12) + 1;
+        const period = hour24 >= 12 ? "PM" : "AM";
+        const timeSegments = dialog.getByRole("spinbutton");
+        await timeSegments.nth(0).fill(hour12.toString().padStart(2, "0")); // First spin button is hour scroll
+        await timeSegments.nth(1).fill(date.getMinutes().toString().padStart(2, "0")); // second spin button is minute scroll
+        await dialog.getByRole("textbox").fill(period);
+        await dialog.getByRole("button").last().click(); // No specific selectors available for this button like aria-* attributes so using .last as selector
+    }
+}
+async function fillField({ field, locator, page }) {
+    const fieldLocator = locator.getByTestId(field.fieldID);
+    if (field.interaction === exports.FieldInteractions.Datetime) {
+        await fillDatetime({
+            field,
+            locator: fieldLocator,
+            page,
+        });
+    }
+    else if (field.validValue != null) {
+        await fieldLocator.fill(field.validValue);
+    }
+}
+/**
+ * Checks whether the browser's native validation (e.g. the `required` attribute) rejects the field's current value.
+ * Native validation blocks the submit itself, so no custom error is rendered for it.
+ */
+async function hasNativeValidationError(fieldLocator) {
+    return await fieldLocator.evaluate((element) => {
+        return element instanceof HTMLInputElement && !element.checkValidity();
+    });
+}

package/dist/specs/visual-regression.spec.d.ts

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

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const schema_1 = require("../schema");
+const test_1 = require("@playwright/test");
+(0, test_1.test)("storybook stories match their baseline screenshots", async ({ page }) => {
+    // index.json is generated at runtime by the Storybook dev server (resolved against
+    // baseURL in the consuming app's playwright.storybook.config.ts), not a file in the repo.
+    const response = await page.request.get("index.json");
+    const result = schema_1.StorybookIndexSchema.safeParse(await response.json());
+    if (!result.success) {
+        throw new Error(`Failed to parse Storybook index: ${result.error.message}`);
+    }
+    const storyIDs = Object.values(result.data.entries)
+        .filter((entry) => {
+        return entry.type === "story";
+    })
+        .map((entry) => {
+        return entry.id;
+    });
+    const errors = [];
+    for (const storyID of storyIDs) {
+        await test_1.test.step(storyID, async () => {
+            try {
+                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
+                await (0, test_1.expect)(page).toHaveScreenshot(`${storyID}.png`, { fullPage: true, timeout: 10_000 });
+            }
+            catch (error) {
+                // Collect failures instead of stopping at the first broken story.
+                const message = error instanceof Error ? error.message : String(error);
+                errors.push(`Story ${storyID} failed: ${message}`);
+            }
+        });
+    }
+    (0, test_1.expect)(errors, `Visual regression failures:\n${errors.join("\n")}`).toHaveLength(0);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@manufac/general-tests",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "description": "A library for general tests for landing pages",
   "repository": {
     "type": "git",