diff --git a/tests/playwright/helpers/commands.ts b/tests/playwright/helpers/commands.ts index f941200e9cb..e85893b5dc6 100644 --- a/tests/playwright/helpers/commands.ts +++ b/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,20 +50,20 @@ 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) { diff --git a/tests/playwright/helpers/form-fields.ts b/tests/playwright/helpers/form-fields.ts index 28233843941..1a04b3dba46 100644 --- a/tests/playwright/helpers/form-fields.ts +++ b/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"]' }, +]; diff --git a/tests/playwright/tests/forms/form-generator.spec.ts b/tests/playwright/tests/forms/form-generator.spec.ts index 70a485dc1f8..4305636e87b 100644 --- a/tests/playwright/tests/forms/form-generator.spec.ts +++ b/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"); @@ -73,22 +73,25 @@ test.describe("Modal validation tests", () => { test("should disable submit button when required checkbox is not checked", async ({ page }) => { // Check that submit button is disabled - const submitButton = page.getByRole("button", { name: /Submit/ }); + const modal = page.locator("#contact-modal"); + const submitButton = modal.getByRole("button", { name: /Submit/ }); await expect(submitButton).toBeDisabled(); }); 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 +100,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(); }); }); diff --git a/tests/playwright/tests/forms/static-forms.spec.ts b/tests/playwright/tests/forms/static-forms.spec.ts index 0f4c18c2466..05e30988701 100644 --- a/tests/playwright/tests/forms/static-forms.spec.ts +++ b/tests/playwright/tests/forms/static-forms.spec.ts @@ -39,6 +39,7 @@ 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 () => { @@ -46,12 +47,10 @@ test.describe("Form ID validation", () => { 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(); }); } });