fix(test-playwright-forms): refactor form handling to support modal inputs and improve field validation

tests/playwright/helpers/commands.ts

@@ -1,6 +1,6 @@
-import { Page } from "@playwright/test";
+import { Locator, Page } from "@playwright/test";
 
-export const isExistingField = async (page: Page, fieldName: string) => {
+export const isExistingField = async (page: Page | Locator, fieldName: string) => {
   const field = page.locator(fieldName);
   return await field.isVisible();
 };
@@ -50,25 +50,25 @@ export const clickRecaptcha = async (page: Page) => {
 
 /**
  * Fills existing fields in the form
- * @param page Current page
+ * @param page Current page or locator to scope within
  * @param testTextFields List of text fields to fill
  * @param testCheckboxFields List of checkbox fields to fill
  * @param testRadioFields List of radio fields to fill
  */
 export const fillExistingFields = async (
-  page: Page,
+  page: Page | Locator,
   testTextFields: { field: string; value: string }[],
   testCheckboxFields: { field: string }[],
   testRadioFields: { field: string }[]
 ) => {
   for (const { field, value } of testTextFields) {
     if (await isExistingField(page, field)) {
-      await page.fill(field, value);
+      await page.locator(field).fill(value);
     }
   }
   for (const { field } of testCheckboxFields) {
     if (await isExistingField(page, field)) {
-      await page.locator(field).check({ force: true });
+      await page.locator(field).click({ force: true });
     }
   }
   for (const { field } of testRadioFields) {

tests/playwright/helpers/form-fields.ts

@@ -24,3 +24,15 @@ export const formCheckboxFields = [
 export const formRadioFields = [
   { field: 'input[aria-labelledby="less-5-machines"]' },
 ];
+
+// Fields for the generated modal form, which renders inputs with aria-label
+// instead of aria-labelledby
+export const modalFormCheckboxFields = [
+  { field: 'input[aria-label="24-04"]' },
+  { field: 'input[aria-label="physical-server"]' },
+  { field: 'input[aria-labelledby="canonicalUpdatesOptIn"]' },
+];
+
+export const modalFormRadioFields = [
+  { field: 'input[aria-label="less-5-machines"]' },
+];

tests/playwright/tests/forms/form-generator.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect, Page } from "@playwright/test";
 import { fillExistingFields, acceptCookiePolicy } from "../../helpers/commands";
-import { formTextFields, formCheckboxFields, formRadioFields } from "../../helpers/form-fields";
+import { formTextFields, modalFormCheckboxFields, modalFormRadioFields } from "../../helpers/form-fields";
 
 const openModal = async (page: Page) => {
   await page.goto("/tests/_form-generator");
@@ -78,17 +78,19 @@ test.describe("Modal validation tests", () => {
   });
 
   test("should enable submit button when required checkbox is checked", async ({ page }) => {
-    // Check the required checkbox
-    await page.locator('input[aria-labelledby="physical-server"]').check({ force: true });
+    // Check the required checkbox (scoped to modal)
+    const modal = page.locator("#contact-modal");
+    await modal.locator('input[aria-label="physical-server"]').check({ force: true });
 
-    const submitButton = page.getByRole("button", { name: /Submit/ });
+    const submitButton = modal.getByRole("button", { name: /Submit/ });
     await expect(submitButton).toBeEnabled();
   });
 
   test("should fill and redirect to marketo submission endpoint", async ({ page }) => {
-    await fillExistingFields(page, formTextFields, formCheckboxFields, formRadioFields);
+    const modal = page.locator("#contact-modal");
+    await fillExistingFields(modal, formTextFields, modalFormCheckboxFields, modalFormRadioFields);
 
-    await page.getByRole("button", { name: /Submit/ }).click();
+    await modal.getByRole("button", { name: /Submit/ }).click();
     await page.waitForURL(/\/marketo\/submit/, { timeout: 10000 });
     await expect(page).toHaveURL('/marketo/submit');
   });
@@ -97,25 +99,27 @@ test.describe("Modal validation tests", () => {
     const responsePromise = page.waitForResponse(response =>
       response.url().includes('/marketo/submit') && response.status() === 400
     );
-    await fillExistingFields(page, formTextFields, formCheckboxFields, formRadioFields);
+    const modal = page.locator("#contact-modal");
+    await fillExistingFields(modal, formTextFields, modalFormCheckboxFields, modalFormRadioFields);
 
     // Honeypot fields
-    await page.fill('input[name="website"]', 'test');
-    await page.fill('input[name="name"]', 'test');
-    await page.getByRole("button", { name: /Submit/ }).click();
+    await modal.locator('input[name="website"]').fill('test');
+    await modal.locator('input[name="name"]').fill('test');
+    await modal.getByRole("button", { name: /Submit/ }).click();
 
     // Wait for 400 response
     const response = await responsePromise;
     expect(response.status()).toBe(400);
   });
 
-  test("should show textbox when 'Other' checkbox is checked", async ({ page }) => {
-    // Check the 'Other' checkbox
-    const otherCheckbox = page.locator('input[aria-labelledby="other"]');
-    await otherCheckbox.check({ force: true });
+  test("should show textbox when 'Other' radio is selected", async ({ page }) => {
+    // Select the 'Other' radio option (scoped to modal)
+    const modal = page.locator("#contact-modal");
+    const otherRadio = modal.locator('input[aria-label="other"]');
+    await otherRadio.check({ force: true });
 
     // Check that the textarea is visible
-    const otherTextarea = page.locator('textarea#other-textarea');
+    const otherTextarea = modal.locator('textarea#other-textarea');
     await expect(otherTextarea).toBeVisible();
   });
 });

tests/playwright/tests/forms/static-forms.spec.ts

@@ -39,19 +39,18 @@ test.describe("Form ID validation", () => {
   }
 
   test("should discover and validate all static /contact-us pages", async ({ page }) => {
+    test.setTimeout(10000);
     const contactUsPages = await discoverContactUsPages(page);
     for (const url of contactUsPages) {
       await test.step(`Validating form on ${url}`, async () => {
         await page.goto(url);
         await acceptCookiePolicy(page);
 
         // Check that formid and mktoForm input fields are present
-        const formIdInput = page.locator('input[name="formid"]');
-        await expect(formIdInput).not.toBeEmpty();        
-        const form = page.locator('form[id^="mktoForm_"]');
+        const form = page.locator('form[id^="mktoForm_"]').first();
         await expect(form).toBeVisible();
-        await page.waitForTimeout(1000);
-
+        const formIdInput = form.locator('input[name="formid"]');
+        await expect(formIdInput).not.toBeEmpty();
       });
     }
   });