@manufac/general-tests 0.3.0 → 0.4.0

package/README.md

@@ -9,74 +9,84 @@ 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 },
+  },
+  {
+    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 },
   },
-  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: "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).
-
-By default every spec runs against `/`. To point a project at a different page, override the `targetPage` fixture option:
-
-```ts
-createProject({
-  name: "Desktop Chrome — pricing",
-  device: "Desktop Chrome",
-  configuration: { projectType: "desktop", breakpoint: Breakpoints.Desktop },
-}),
-// then, in that project's `use`:
-use: { targetPage: "/pricing" }
-```
+- `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.

package/dist/config/projects.d.ts

@@ -11,11 +11,6 @@ export declare const DesktopBreakpoints: {
     };
 };
 export declare const ResponsiveLayoutBreakpoints: {
-    readonly MobileS: {
-        readonly name: "320";
-        readonly width: 320;
-        readonly height: 568;
-    };
     readonly MobileL: {
         readonly name: "375";
         readonly width: 375;
@@ -37,5 +32,6 @@ 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";

package/dist/config/projects.js

@@ -1,12 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ResponsiveLayoutTestMatch = exports.LoadingPageTestMatch = exports.ProjectTypes = exports.ResponsiveLayoutBreakpoints = exports.DesktopBreakpoints = void 0;
+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 },
 };
 exports.ResponsiveLayoutBreakpoints = {
-    MobileS: { name: "320", width: 320, height: 568 },
     MobileL: { name: "375", width: 375, height: 812 },
     Tablet: { name: "768", width: 768, height: 1024 },
     Desktop: { name: "1440", width: 1440, height: 900 },
@@ -16,5 +15,6 @@ 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";

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,9 +85,11 @@ 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>;

package/dist/schema/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ManufacTestConfigSchema = exports.FieldInteractions = void 0;
+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,26 @@ 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(),
 });

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/responsive-layout.spec.js

@@ -4,7 +4,7 @@ const utils_js_1 = require("./utils.js");
 const fixtures_1 = require("../fixtures");
 const test_1 = require("@playwright/test");
 fixtures_1.test.describe("Responsive layout", () => {
-    (0, fixtures_1.test)("RS-01: No horizontal overflow at 320 / 375 / 768 / 1440", async ({ page, pages }) => {
+    (0, fixtures_1.test)("RS-01: No horizontal overflow at 375 / 768 / 1440", async ({ page, pages }) => {
         fixtures_1.test.slow();
         for (const targetPage of pages) {
             await fixtures_1.test.step(targetPage, async () => {

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/package.json

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