From a358a2d9fbdfef4be52b8a68d527e970f3adc48f Mon Sep 17 00:00:00 2001 From: Ryan Bas Date: Tue, 28 Apr 2026 16:52:59 -0600 Subject: [PATCH] fix(davinci-suites): support two phone collectors in form-fields e2e MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The PingOne form now renders two PhoneNumberCollector instances ("Phone" and "Phone Number w/Extension"). Both rendered with hardcoded id="phone-number-input", producing duplicate IDs in the DOM and triggering a Playwright strict-mode violation on `page.locator('#phone-number-input').fill(...)`. Two fixes: - e2e/davinci-app/components/object-value.ts: derive the input id from `collector.output.key` so each phone field gets a unique id and its label associates with the correct input (also fixes a real HTML invalidity). - e2e/davinci-suites/src/form-fields.test.ts: replace the CSS-selector lookup with `getByLabel('Phone', { exact: true })` so the test selects an input by its accessible name, and update the expected `formData` to include both phone collectors — phone-field carries the prefilled "(555)555-1234"/GB, phone-field1 receives the typed "1234567890"/CR. --- e2e/davinci-app/components/object-value.ts | 8 +++++--- e2e/davinci-suites/src/form-fields.test.ts | 8 ++++++-- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/e2e/davinci-app/components/object-value.ts b/e2e/davinci-app/components/object-value.ts index 77e964d765..00593711eb 100644 --- a/e2e/davinci-app/components/object-value.ts +++ b/e2e/davinci-app/components/object-value.ts @@ -62,15 +62,17 @@ export default function objectValueComponent( formEl.appendChild(buttonEl); } } else { + const inputId = `phone-number-input-${collector.output.key}`; + const phoneLabel = document.createElement('label'); phoneLabel.textContent = collector.output.label || 'Phone Number'; phoneLabel.className = 'object-options-title'; - phoneLabel.setAttribute('for', 'phone-number-input'); + phoneLabel.setAttribute('for', inputId); const phoneInput = document.createElement('input'); phoneInput.setAttribute('type', 'tel'); - phoneInput.setAttribute('id', 'phone-number-input'); - phoneInput.setAttribute('name', 'phone-number-input'); + phoneInput.setAttribute('id', inputId); + phoneInput.setAttribute('name', inputId); phoneInput.setAttribute('placeholder', 'Enter phone number'); // Add change event listener diff --git a/e2e/davinci-suites/src/form-fields.test.ts b/e2e/davinci-suites/src/form-fields.test.ts index 0ad89d3e21..2fa731132e 100644 --- a/e2e/davinci-suites/src/form-fields.test.ts +++ b/e2e/davinci-suites/src/form-fields.test.ts @@ -31,7 +31,7 @@ test('Should render form fields', async ({ page }) => { await page.locator('#combobox-field-key-3').check(); await page.locator('#combobox-field-key-2').uncheck(); - await page.locator('#phone-number-input').fill('1234567890'); + await page.getByLabel('Phone', { exact: true }).fill('1234567890'); await expect(page.getByRole('button', { name: 'Flow Button' })).toBeVisible(); await expect(page.getByRole('button', { name: 'Flow Link' })).toBeVisible(); @@ -53,9 +53,13 @@ test('Should render form fields', async ({ page }) => { 'radio-group-key': 'option2 value', 'combobox-field-key': ['option1 value', 'option3 value'], 'phone-field': { - phoneNumber: '1234567890', + phoneNumber: '(555)555-1234', countryCode: 'GB', }, + 'phone-field1': { + phoneNumber: '1234567890', + countryCode: 'CR', + }, }); });