fixed the failed playwrights

packages/react-sdk-components/src/components/field/RadioButtons/RadioButtons.tsx

@@ -108,7 +108,7 @@ export default function RadioButtons(props: RadioButtonsProps) {
     return (
       <div>
         <h4 style={{ marginTop: 0, marginBottom: 0 }}>{label}</h4>
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(200px, 100%), 1fr))', gap: '1rem' }}>
+        <div id='selectable-card' style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(min(200px, 100%), 1fr))', gap: '1rem' }}>
           <SelectableCard
             hideFieldLabels={hideFieldLabels}
             additionalProps={additionalProps}

packages/react-sdk-components/tests/e2e/Digv2/ComplexFields/CaseReference.spec.js

@@ -125,7 +125,7 @@ test.describe('E2E test', () => {
     await page.locator('button:has-text("Next")').click();
 
     const assignment = page.locator('div[id="Assignment"]');
-    await expect(assignment.locator(`div >> span >> text="${caseID[0]}"`)).toBeVisible();
+    await expect(assignment.locator(`button:has-text("${caseID[0]}")`)).toBeVisible();
 
     await page.locator('button:has-text("Previous")').click();
 

packages/react-sdk-components/tests/e2e/Digv2/ComplexFields/DataReference.spec.js

@@ -28,14 +28,49 @@ test.describe('E2E test', () => {
 
     await page.locator('button:has-text("submit")').click();
 
+    /** Testing Advanced Search */
+    let selectedSubCategory = page.locator('div[data-test-id="9463d5f18a8924b3200b56efaad63bda"]');
+    await selectedSubCategory.click();
+    await page.locator('li:has-text("DataPatterns")').click();
+
+    let selectedTestName = page.locator('div[data-test-id="6f64b45d01d11d8efd1693dfcb63b735"]');
+    await selectedTestName.click();
+    await page.locator('li:has-text("Advanced search")').click();
+
+    await page.locator('button:has-text("Search")').click();
+
+    const productName = page.locator('input[data-test-id="85c72bcef3da32c2abc605764537c6a1"]');
+    await productName.fill('item');
+
+    await page.locator('button:has-text("Search")').click();
+
+    let table = page.locator('div[id="list-view"] >> nth = 0');
+    let tableCell = table.locator('tbody >> tr >> td >> nth=1');
+
+    const selectedRow = await table.locator('tbody >> tr >> td >> span >> input[type="radio"] >> nth=0');
+    await selectedRow.click();
+
+    await expect(await tableCell.textContent()).toContain('Item');
+
+    const radiobutton = await page.locator('div[role="radiogroup"]');
+    const requiredDateInput = await radiobutton.locator('label >> span >> input >> nth=1');
+    await requiredDateInput.click();
+
+    await page.locator('button:has-text("Discard")').click();
+
+    const price = await page.locator('input[data-test-id="3601146c4e948c32b6424d2c0a7f0118"]');
+    await price.fill('12');
+
+    await page.locator('button:has-text("Search")').click();
+
     /** Display subcategory tests */
 
     /** Autocomplete display type test */
-    let selectedSubCategory = page.locator('div[data-test-id="9463d5f18a8924b3200b56efaad63bda"]');
+    selectedSubCategory = page.locator('div[data-test-id="9463d5f18a8924b3200b56efaad63bda"]');
     await selectedSubCategory.click();
     await page.locator('li:has-text("Display")').click();
 
-    let selectedTestName = page.locator('div[data-test-id="6f64b45d01d11d8efd1693dfcb63b735"]');
+    selectedTestName = page.locator('div[data-test-id="6f64b45d01d11d8efd1693dfcb63b735"]');
     await selectedTestName.click();
     await page.locator('li:has-text("Autocomplete")').click();
 
@@ -88,7 +123,8 @@ test.describe('E2E test', () => {
 
     selectedTestName = page.locator('div[data-test-id="6f64b45d01d11d8efd1693dfcb63b735"]');
     await selectedTestName.click();
-    await page.locator('li:has-text("Table")').click();
+
+    await page.getByRole('option', { name: 'Table', exact: true }).click();
 
     selectedProduct = page.locator('tr:has-text("Basic Product")');
     const selectedProductRow = selectedProduct.locator('input[type="radio"]');
@@ -267,7 +303,7 @@ test.describe('E2E test', () => {
     await selectedTestName.click();
     await page.locator('li:has-text("Readonly")').click();
 
-    selectedProduct = page.locator('div[id="semantic-link-grid"] >> span >> text="Basic Product"');
+    selectedProduct = page.locator('button:has-text("Basic Product")');
     await expect(selectedProduct).toBeVisible();
 
     await page.locator('button:has-text("Next")').click();
@@ -292,8 +328,8 @@ test.describe('E2E test', () => {
 
     await page.locator('span:has-text("Product Name")').click();
 
-    let table = page.locator('div[id="list-view"]');
-    let tableCell = table.locator('tbody >> tr >> td >> nth=1');
+    table = page.locator('div[id="list-view"]');
+    tableCell = table.locator('tbody >> tr >> td >> nth=1');
     // "---" should come at the top in the ascending order, since it's a Falsy value
     await expect(await tableCell.textContent()).toBe('---');
 
@@ -313,38 +349,6 @@ test.describe('E2E test', () => {
 
     await page.locator('button:has-text("Previous")').click();
 
-    /** Testing Advanced Search */
-    selectedSubCategory = page.locator('div[data-test-id="9463d5f18a8924b3200b56efaad63bda"]');
-    await selectedSubCategory.click();
-    await page.locator('li:has-text("DataPatterns")').click();
-
-    selectedTestName = page.locator('div[data-test-id="6f64b45d01d11d8efd1693dfcb63b735"]');
-    await selectedTestName.click();
-    await page.locator('li:has-text("Advanced search")').click();
-
-    await page.locator('button:has-text("Search")').click();
-
-    const productName = page.locator('input[data-test-id="85c72bcef3da32c2abc605764537c6a1"]');
-    await productName.fill('item');
-
-    await page.locator('button:has-text("Search")').click();
-
-    table = page.locator('div[id="list-view"] >> nth = 0');
-    tableCell = table.locator('tbody >> tr >> td >> nth=1');
-
-    await expect(await tableCell.textContent()).toContain('Item');
-
-    const radiobutton = page.locator('div[role="radiogroup"]');
-    const requiredDateInput = radiobutton.locator('label >> span >> input >> nth=1');
-    await requiredDateInput.click();
-
-    await page.locator('button:has-text("Discard")').click();
-
-    const price = page.locator('input[data-test-id="3601146c4e948c32b6424d2c0a7f0118"]');
-    await price.fill('12');
-
-    await page.locator('button:has-text("Search")').click();
-
     /** Submitting the case */
     await page.locator('button:has-text("Next")').click();
   }, 10000);

packages/react-sdk-components/tests/e2e/Digv2/ComplexFields/EmbeddedData.spec.js

@@ -216,6 +216,9 @@ test.describe('E2E test', () => {
 
     await page.locator('button[id="delete-button"] >> nth=0').click();
 
+    await page.locator('button:has-text("Next")').click();
+    await page.locator('button:has-text("Previous")').click();
+
     /** Table Edit Modal tests */
     selectEditMode = page.locator('div[data-test-id="80c1db3a7b228760228004b1a532c71e"]');
     await selectEditMode.click();

packages/react-sdk-components/tests/e2e/Digv2/FormFields/Email.spec.js

@@ -98,10 +98,10 @@ test.describe('E2E test', () => {
     const editableEmail = page.locator('input[data-test-id="c75f8a926bb5e08fd8342f7fe45dc344"]');
     await editableEmail.fill('Johndoe.com');
     await editableEmail.blur();
-    await expect(page.locator('p:has-text("Invalid")')).toBeVisible();
+    await expect(page.locator('p:has-text("Enter a valid email address")')).toBeVisible();
     editableEmail.fill('[email protected]');
     await editableEmail.blur();
-    await expect(page.locator('p:has-text("Invalid")')).toBeHidden();
+    await expect(page.locator('p:has-text("Enter a valid email address")')).toBeHidden();
 
     attributes = await common.getAttributes(editableEmail);
     await expect(attributes.includes('readonly')).toBeFalsy();

packages/react-sdk-components/tests/e2e/Digv2/FormFields/Location.spec.js

@@ -40,7 +40,7 @@ test.describe('E2E test for Location component', () => {
     /** Required field test */
     const requiredLocationField = page.locator('input[data-test-id="5d234240d150ee2ad896ca0be0e01fd3"]');
     await requiredLocationField.type('Hitech City, Hyderabad');
-    await page.waitForSelector('.pac-container .pac-item', { timeout: 5000 });
+    await page.waitForSelector('.pac-container .pac-item', { timeout: 50000 });
     await page.locator('.pac-container .pac-item').nth(1).click();
 
     await expect(requiredLocationField).not.toHaveValue('');

packages/react-sdk-components/tests/e2e/Digv2/FormFields/URL.spec.js

@@ -83,7 +83,7 @@ test.describe('E2E test', () => {
     await expect(attributes.includes('readonly')).toBeFalsy();
 
     /** Validation tests */
-    const validationMsg = 'Please enter a valid URL including the protocol (http://, https://, ftp://, etc.)';
+    const validationMsg = 'Enter a valid url';
     await editableURL.fill('InvalidUrl');
     await editableURL.blur();
     await expect(page.locator(`p:has-text("${validationMsg}")`)).toBeVisible();

packages/react-sdk-components/tests/e2e/MediaCo/embedded.spec.js

@@ -1,80 +1,87 @@
-const { test } = require('@playwright/test');
+const { test, expect } = require('@playwright/test');
 
 const common = require('../../common');
 
 test.beforeEach(common.launchEmbedded);
 
 test.describe('E2E test', () => {
-  test('Embedded: should launch, select a service plan and fill details', async ({ page }) => {
-    const silverPlan = page.locator('button:has-text("shop now") >> nth=1');
-    await silverPlan.click();
+  test('Embedded: should launch, select a phone and purchase the phone', async ({ page }) => {
+    const selectPhone = page.locator('button:has-text("Buy now") >> nth=1');
+    await selectPhone.click();
+
+    const storageSelectableCard = await page.locator('div[id="selectable-card"] >> nth=1');
+    await storageSelectableCard.locator('label >> span >> input >> nth=1').click();
+
+    const colorSelectableCard = await page.locator('div[id="selectable-card"] >> nth=2');
+    await colorSelectableCard.locator('label >> span >> input >> nth=1').click();
+
+    await page.locator('button:has-text("next")').click();
+
+    const phonenumber = page.locator('div[role="radiogroup"] >> nth=0');
+    const requiredInput = phonenumber.locator('label >> span >> input >> nth=1');
+    await requiredInput.click();
+
+    const tradeIn = page.locator('div[role="radiogroup"] >> nth=1');
+    const tradeInInput = tradeIn.locator('label >> span >> input >> nth=1');
+    await tradeInInput.click();
+
+    const paymentOptionsSelectableCard = await page.locator('div[id="selectable-card"] >> nth=0');
+    await paymentOptionsSelectableCard.locator('label >> span >> input >> nth=1').click();
+
+    await page.locator('button:has-text("next")').click();
 
     const firstNameInput = page.locator('input[data-test-id="BC910F8BDF70F29374F496F05BE0330C"]');
     await firstNameInput.click();
     await firstNameInput.fill('John');
 
-    const middleNameInput = page.locator('input[data-test-id="D3691D297D95C48EF1A2B7D6523EF3F0"]');
-    await middleNameInput.click();
-    await middleNameInput.fill('');
-
     const lastNameInput = page.locator('input[data-test-id="77587239BF4C54EA493C7033E1DBF636"]');
     await lastNameInput.click();
     await lastNameInput.fill('Doe');
 
-    const suffix = page.locator('div[data-test-id="56E6DDD1CB6CEC596B433440DFB21C17"]');
-    await suffix.locator('button[title="Open"]').click();
-    await page.locator('li:has-text("Jr")').click();
-
-    const emailInput = page.locator('input[data-test-id="CE8AE9DA5B7CD6C3DF2929543A9AF92D"]');
+    const emailInput = page.locator('input[data-test-id="643a860f992333b8600ea264aca7c4fc"]');
     await emailInput.click();
     await emailInput.fill('[email protected]');
 
+    const phone = page.locator('div[data-test-id="1e4dbc7eaa78468a3bc1448a3d68d906"]');
+    const countrySelector = phone.locator('button');
+    await countrySelector.click();
+    await page.locator('text=United States+1 >> nth=0').click();
+    await common.enterPhoneNumber(phone, '6175551212');
+
+    await page.locator('button:has-text("next")').click();
+
+    const nameOnCard = page.locator('input[data-test-id="c2b63e85bd5e4dc9b6cf5a4693847e06"]');
+    await nameOnCard.click();
+    await nameOnCard.fill('John Doe');
+
     await page.locator('button:has-text("next")').click();
 
     const streetInput = page.locator('input[data-test-id="D61EBDD8A0C0CD57C22455E9F0918C65"]');
     await streetInput.click();
     await streetInput.fill('Main St');
 
-    await page.locator('button:has-text("previous")').click();
-
-    await page.locator('h6:has-text("Customer Info")').click();
-
-    await page.locator('button:has-text("next")').click();
-
-    await page.locator('h6:has-text("Customer Address")').click();
+    const apartmentInput = page.locator('input[data-test-id="73786cb2bc433cfb06603ab61f15e04e"]');
+    await apartmentInput.click();
+    await apartmentInput.fill('Glenalmond Avenue');
 
     const cityInput = page.locator('input[data-test-id="57D056ED0984166336B7879C2AF3657F"]');
     await cityInput.click();
     await cityInput.fill('Cambridge');
 
-    const state = page.locator('div[data-test-id="46A2A41CC6E552044816A2D04634545D"]');
-    const stateSelector = state.locator('div[role="combobox"]');
-    await stateSelector.click();
-    await page.locator('li[data-value="MA"]').click();
+    const stateInput = page.locator('input[data-test-id="46A2A41CC6E552044816A2D04634545D"]');
+    await stateInput.click();
+    await stateInput.fill('Indiana');
 
     const postalCodeInput = page.locator('input[data-test-id="572ED696F21038E6CC6C86BB272A3222"]');
     await postalCodeInput.click();
     await postalCodeInput.fill('02142');
 
-    const phone = page.locator('div[data-test-id="1F8261D17452A959E013666C5DF45E07"]');
-    const countrySelector = phone.locator('button');
-    await countrySelector.click();
-    await page.locator('text=United States+1 >> nth=0').click();
-    await common.enterPhoneNumber(phone, '6175551212');
-
-    await page.locator('button:has-text("next")').click();
-
-    const dataServiceBeginDate = page.locator('div[data-test-id="1321FA74451B96BC02663B0EF96CCBB9"]');
-    const dataServiceBeginDateInput = dataServiceBeginDate.locator('input');
-    await dataServiceBeginDateInput.click();
-    const futureDate = common.getFutureDate();
-    await dataServiceBeginDateInput.pressSequentially(futureDate);
-
-    await page.locator('button:has-text("next")').click();
-
     await page.locator('button:has-text("submit")').click();
 
-    await page.locator('text=Thanks for selecting a package with us. ').click();
+    await expect(page.locator('p:has-text("Oceonix 25 Max")')).toBeVisible();
+    await expect(page.locator('p:has-text("[email protected]")')).toBeVisible();
+
+    await page.locator('a:has-text("Done")').click();
   }, 10000);
 });
 

packages/react-sdk-components/tests/e2e/MediaCo/portal.spec.js

@@ -56,10 +56,10 @@ test.describe('E2E test', () => {
     firstNameInput = caseSummary.locator('input').first();
     await expect(firstNameInput).toHaveValue('John');
 
-    lastNameInput = caseSummary.locator('input').nth(2);
+    lastNameInput = caseSummary.locator('input').nth(1);
     await expect(lastNameInput).toHaveValue('Doe');
 
-    emailInput = caseSummary.locator('input').nth(3);
+    emailInput = caseSummary.locator('input').nth(2);
     await expect(emailInput).toHaveValue('[email protected]');
 
     const streetInput = page.locator('input[data-test-id="D61EBDD8A0C0CD57C22455E9F0918C65"]');