test: fix broken playwright tests

playwright/components/alert/index.ts

@@ -27,15 +27,4 @@ const alertDialog = (page: Page) => {
   return page.locator(ALERT_DIALOG);
 };
 
-const alertChildren = (page: Page) => {
-  return page.locator('[data-component="alert"] div:nth-of-type(2) div');
-};
-
-export {
-  alert,
-  alertCrossIcon,
-  alertTitle,
-  alertSubtitle,
-  alertDialog,
-  alertChildren,
-};
+export { alert, alertCrossIcon, alertTitle, alertSubtitle, alertDialog };

playwright/components/select/index.ts

@@ -9,12 +9,10 @@ import {
   MULTI_SELECT,
   SELECT_LIST_WRAPPER,
   SELECT_ELEMENT_INPUT,
-  FILTERABLE_ADD_BUTTON,
   SELECT_RESET_BUTTON,
   SELECT_LIST_SCROLLABLE_WRAPPER,
 } from "./locators";
 import { PILL_PREVIEW } from "../pill/locators";
-import { ALERT_DIALOG } from "../dialog/locators";
 import { getDataElementByValue } from "..";
 
 // component preview locators
@@ -96,14 +94,5 @@ export const selectListScrollableWrapper = (page: Page) =>
 export const selectElementInput = (page: Page) =>
   page.locator(SELECT_ELEMENT_INPUT);
 
-export const filterableSelectAddElementButton = (page: Page) =>
-  page.locator(FILTERABLE_ADD_BUTTON);
-
-export const filterableSelectButtonIcon = (page: Page) =>
-  filterableSelectAddElementButton(page).locator("span:nth-child(2)");
-
-export const filterableSelectAddNewButton = (page: Page) =>
-  page.locator(ALERT_DIALOG).locator("div:nth-child(3) > div > button");
-
 export const selectResetButton = (page: Page) =>
   page.locator(SELECT_RESET_BUTTON);

playwright/components/select/locators.ts

@@ -8,7 +8,6 @@ export const SELECT_TEXT = "select-text";
 export const SELECT_INPUT = '[data-element="input"]';
 export const SELECT_LIST_WRAPPER = '[data-element="select-list-wrapper"]';
 export const SELECT_ELEMENT_INPUT = '[data-element="select-input"]';
-export const FILTERABLE_ADD_BUTTON = '[data-component="button"]';
 export const SELECT_RESET_BUTTON = '[data-element="reset-button"]';
 export const SELECT_LIST_SCROLLABLE_WRAPPER =
   '[data-component="select-list-scrollable-container"]';

src/components/alert/alert.pw.tsx

@@ -4,7 +4,6 @@ import {
   alertCrossIcon,
   alertTitle,
   alertSubtitle,
-  alertChildren,
   alertDialog,
 } from "../../../playwright/components/alert";
 import {
@@ -50,9 +49,7 @@ test.describe("should render Alert component", () => {
     test(`with ${text} as children`, async ({ mount, page }) => {
       await mount(<AlertComponent title="title">{text}</AlertComponent>);
 
-      const children = alertChildren(page);
-      const alertChildrenText = await children.textContent();
-      expect(alertChildrenText).toEqual(text);
+      await expect(page.getByText(text)).toBeVisible();
     });
   });
 

src/components/date/date.pw.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { expect, test } from "@playwright/experimental-ct-react17";
 import dayjs from "dayjs";
-import Confirm from "../confirm";
 import {
   DateInputCustom,
   DateInputValidationNewDesign,
@@ -784,26 +783,52 @@ test.describe("Functionality tests", () => {
     await expect(wrapper).toBeVisible();
   });
 
-  [true, false].forEach((state) => {
-    test(`should render with disablePortal prop ${state}`, async ({
-      mount,
-      page,
-    }) => {
-      await mount(
-        <Confirm open height="60px" onConfirm={() => {}}>
-          <DateInputCustom disablePortal={state} />
-        </Confirm>
-      );
+  test("date picker does not float above the rest of the page, when disablePortal prop is true", async ({
+    mount,
+    page,
+  }) => {
+    await mount(
+      <div
+        id="clipping-container"
+        style={{
+          position: "relative",
+          overflow: "hidden",
+          border: "1px solid black",
+        }}
+      >
+        <DateInputCustom disablePortal />
+      </div>
+    );
 
-      const input = getDataElementByValue(page, "input");
-      await input.click();
-      const wrapper = dayPickerWrapper(page);
-      if (state) {
-        await expect(wrapper).not.toBeInViewport();
-      } else {
-        await expect(wrapper).toBeInViewport();
-      }
-    });
+    const input = page.getByLabel("Date");
+    await input.click();
+
+    const datePicker = dayPickerWrapper(page);
+    await expect(datePicker).not.toBeInViewport();
+  });
+
+  test("date picker floats above the rest of the page, when disablePortal prop is false", async ({
+    mount,
+    page,
+  }) => {
+    await mount(
+      <div
+        id="clipping-container"
+        style={{
+          position: "relative",
+          overflow: "hidden",
+          border: "1px solid black",
+        }}
+      >
+        <DateInputCustom disablePortal={false} />
+      </div>
+    );
+
+    const input = page.getByLabel("Date");
+    await input.click();
+
+    const datePicker = dayPickerWrapper(page);
+    await expect(datePicker).toBeInViewport();
   });
 
   test(`should have the expected border radius styling`, async ({

src/components/select/filterable-select/filterable-select.pw.tsx

@@ -30,9 +30,6 @@ import { loader } from "../../../../playwright/components/loader";
 import {
   boldedAndUnderlinedValue,
   dropdownButton,
-  filterableSelectAddElementButton,
-  filterableSelectAddNewButton,
-  filterableSelectButtonIcon,
   multiColumnsSelectListBody,
   multiColumnsSelectListHeader,
   multiColumnsSelectListHeaderColumn,
@@ -61,7 +58,6 @@ const testData = [CHARACTERS.DIACRITICS, CHARACTERS.SPECIALCHARACTERS];
 const testPropValue = CHARACTERS.STANDARD;
 const addElementText = "Add a New Element";
 const columns = 3;
-const icon = "add";
 const keyToTrigger = ["ArrowDown", "ArrowUp", "Home", "End"] as const;
 const listOption = "Amber";
 
@@ -1021,12 +1017,15 @@ test.describe("FilterableSelect component", () => {
       bodyAssertions.push(expect(bodyElements.nth(i)).toBeVisible());
     }
     await Promise.all(bodyAssertions);
-    const addElementButtonElement = filterableSelectAddElementButton(page);
+    const addElementButtonElement = page.getByRole("button", {
+      name: "Add a New Element",
+    });
     await expect(addElementButtonElement).toBeVisible();
     await expect(addElementButtonElement).toHaveText(addElementText);
-    const iconElement = filterableSelectButtonIcon(page);
-    await expect(iconElement).toBeVisible();
-    await expect(iconElement).toHaveAttribute("type", icon);
+
+    const addIcon = addElementButtonElement.getByTestId("icon");
+    await expect(addIcon).toBeVisible();
+    await expect(addIcon).toHaveAttribute("type", "add");
   });
 
   test("should render list options with an action button and trigger Dialog on action", async ({
@@ -1037,12 +1036,14 @@ test.describe("FilterableSelect component", () => {
 
     await dropdownButton(page).click();
     await expect(selectListWrapper(page)).toBeVisible();
-    const addElementButtonElement = filterableSelectAddElementButton(page);
+    const addElementButtonElement = page.getByRole("button", {
+      name: "Add a New Element",
+    });
     await expect(addElementButtonElement).toBeVisible();
     await expect(addElementButtonElement).toHaveText(addElementText);
-    const iconElement = filterableSelectButtonIcon(page);
-    await expect(iconElement).toBeVisible();
-    await expect(iconElement).toHaveAttribute("type", icon);
+    const addIcon = addElementButtonElement.getByTestId("icon");
+    await expect(addIcon).toBeVisible();
+    await expect(addIcon).toHaveAttribute("type", "add");
     await addElementButtonElement.click();
     await expect(alertDialogPreview(page)).toBeVisible();
   });
@@ -1055,7 +1056,9 @@ test.describe("FilterableSelect component", () => {
 
     await dropdownButton(page).click();
     await expect(selectListWrapper(page)).toBeVisible();
-    await expect(filterableSelectAddElementButton(page)).toBeInViewport();
+    await expect(
+      page.getByRole("button", { name: "Add a New Element" })
+    ).toBeInViewport();
     const selectListHeight = await selectListWrapper(
       page
     ).evaluate((wrapperElement) =>
@@ -1088,19 +1091,26 @@ test.describe("FilterableSelect component", () => {
     mount,
     page,
   }) => {
+    const newOption = "New10";
     await mount(<FilterableSelectWithActionButtonComponent />);
 
-    const newOption = "New10";
-    await dropdownButton(page).click();
-    await expect(selectListWrapper(page)).toBeVisible();
-    const addElementButtonElement = filterableSelectAddElementButton(page);
-    await expect(addElementButtonElement).toBeVisible();
+    // open select list
+    const input = page.getByRole("combobox");
+    await input.click();
+    await expect(page.getByRole("listbox")).toBeVisible();
+
+    const addElementButtonElement = page.getByRole("button", {
+      name: "Add a New Element",
+    });
     await addElementButtonElement.click();
-    await expect(alertDialogPreview(page)).toBeVisible();
-    const addNewButtonElement = filterableSelectAddNewButton(page);
-    await expect(addNewButtonElement).toBeVisible();
-    await addNewButtonElement.click();
-    await expect(getDataElementByValue(page, "input")).toHaveValue(newOption);
+
+    const alert = page.getByRole("dialog");
+    await expect(alert).toBeVisible();
+
+    const alertAddNewButton = page.getByRole("button", { name: "Add new" });
+    await alertAddNewButton.click();
+
+    await expect(input).toHaveValue(newOption);
   });
 
   test("should have correct hover state of list option", async ({
@@ -1368,9 +1378,11 @@ test.describe("Check events for FilterableSelect component", () => {
       <FilterableSelectListActionEventComponent onListAction={callback} />
     );
 
-    await dropdownButton(page).click();
-    await filterableSelectAddElementButton(page).click();
-    await expect(callbackCount).toBe(1);
+    const input = page.getByRole("combobox");
+    await input.click();
+
+    await page.getByRole("button", { name: "Add a New Element" }).click();
+    expect(callbackCount).toBe(1);
   });
 
   test("should call onListScrollBottom event when the list is scrolled to the bottom", async ({
@@ -1434,12 +1446,17 @@ test.describe("Check virtual scrolling", () => {
   }) => {
     await mount(<FilterableSelectWithManyOptionsAndVirtualScrolling />);
 
-    await dropdownButton(page).click();
-    await expect(selectOptionByText(page, "Option 1.")).toBeInViewport();
-    const option10 = selectOptionByText(page, "Option 10.");
+    const input = page.getByRole("combobox");
+    await input.click();
+
+    const option1 = page.getByRole("option", { name: "Option 1." });
+    const option10 = page.getByRole("option", { name: "Option 10." });
+    const option30 = page.getByRole("option", { name: "Option 30." });
+
+    await expect(option1).toBeInViewport();
     await expect(option10).toHaveCount(1);
     await expect(option10).not.toBeInViewport();
-    await expect(selectOptionByText(page, "Option 30.")).toHaveCount(0);
+    await expect(option30).toHaveCount(0);
   });
 
   test("changes the rendered options when you scroll down", async ({
@@ -1467,10 +1484,18 @@ test.describe("Check virtual scrolling", () => {
   }) => {
     await mount(<FilterableSelectWithManyOptionsAndVirtualScrolling />);
 
-    await commonDataElementInputPreview(page).type("Option 100");
-    await expect(selectOptionByText(page, "Option 100.")).toBeInViewport();
-    await expect(selectOptionByText(page, "Option 1000.")).toBeInViewport();
-    await expect(selectOptionByText(page, "Option 1002.")).toBeInViewport();
+    const input = page.getByRole("combobox");
+    await input.fill("Option 100");
+
+    await expect(
+      page.getByRole("option", { name: "Option 100." })
+    ).toBeInViewport();
+    await expect(
+      page.getByRole("option", { name: "Option 1000." })
+    ).toBeInViewport();
+    await expect(
+      page.getByRole("option", { name: "Option 1002." })
+    ).toBeInViewport();
   });
 
   [keyToTrigger[0], keyToTrigger[1]].forEach((key) => {
@@ -1480,8 +1505,9 @@ test.describe("Check virtual scrolling", () => {
     }) => {
       await mount(<FilterableSelectComponent />);
 
-      await commonDataElementInputPreview(page).type("foo");
-      await commonDataElementInputPreview(page).press(key);
+      const input = page.getByRole("combobox");
+      await input.fill("foo");
+      await input.press(key);
       await expect(page.getByText('No results for "foo"')).toBeVisible();
     });
   });

src/components/select/multi-select/multi-select.pw.tsx

@@ -629,8 +629,9 @@ test.describe("MultiSelect component", () => {
     }) => {
       await mount(<MultiSelectComponent />);
 
-      await commonDataElementInputPreview(page).type("foo");
-      await commonDataElementInputPreview(page).press(key);
+      const input = page.getByRole("combobox");
+      await input.fill("foo");
+      await input.press(key);
       await expect(page.getByText('No results for "foo"')).toBeVisible();
     });
   });