diff --git a/packages/core/src/components/Modal/ModalTopActions/ModalTopActions.tsx b/packages/core/src/components/Modal/ModalTopActions/ModalTopActions.tsx
index e381325439..b391481777 100644
--- a/packages/core/src/components/Modal/ModalTopActions/ModalTopActions.tsx
+++ b/packages/core/src/components/Modal/ModalTopActions/ModalTopActions.tsx
@@ -4,6 +4,7 @@ import { ModalTopActionsButtonColor, ModalTopActionsTheme, ModalTopActionsProps
 import IconButton from "../../IconButton/IconButton";
 import { CloseMedium } from "@vibe/icons";
 import { ButtonColor } from "../../Button/ButtonConstants";
+import { ComponentDefaultTestId } from "../../../tests/constants";
 
 const colorToButtonColor: Record<ModalTopActionsTheme, ModalTopActionsButtonColor> = {
   dark: ButtonColor.ON_INVERTED_BACKGROUND,
@@ -17,6 +18,7 @@ const ModalTopActions = ({ renderAction, theme, closeButtonAriaLabel, onClose }:
     <div className={styles.actions} data-no-autofocus={true}>
       {typeof renderAction === "function" ? renderAction(buttonColor) : renderAction}
       <IconButton
+        data-testid={ComponentDefaultTestId.MODAL_NEXT_CLOSE_BUTTON}
         icon={CloseMedium}
         onClick={onClose}
         size="small"
diff --git a/packages/core/src/tests/constants.ts b/packages/core/src/tests/constants.ts
index fc73b82cbd..917b3b8b9f 100644
--- a/packages/core/src/tests/constants.ts
+++ b/packages/core/src/tests/constants.ts
@@ -107,6 +107,7 @@ export enum ComponentDefaultTestId {
   MODAL_NEXT = "modal",
   MODAL_NEXT_OVERLAY = "modal-overlay",
   MODAL_NEXT_HEADER = "modal-header",
+  MODAL_NEXT_CLOSE_BUTTON = "modal-close-button",
   MODAL_NEXT_CONTENT = "modal-content",
   MODAL_NEXT_FOOTER = "modal-footer",
   MODAL_NEXT_MEDIA = "modal-media",
diff --git a/packages/testkit/__tests__/buttonGroup.test.js b/packages/testkit/__tests__/buttonGroup.test.js
index e9a462fc41..b7e1edfb43 100644
--- a/packages/testkit/__tests__/buttonGroup.test.js
+++ b/packages/testkit/__tests__/buttonGroup.test.js
@@ -28,19 +28,13 @@ test.describe("ButtonGroup Class with Storybook", () => {
 
   test("should initialize buttons if needed", async () => {
     // Initialize the buttons inside the ButtonGroup
-    await buttonGroup.initializeButtonsIfNeeded();
-
-    // Verify that buttons are initialized
-    expect(buttonGroup.buttonsInitialized).toBe(true);
-
+    const buttons = await buttonGroup.getAllButtons();
     // Verify that buttons exist in the items array
-    expect(buttonGroup.items.length).toBeGreaterThan(0); // Ensure that buttons were initialized
+    expect(buttons.length).toBeGreaterThan(0);
   });
 
   test("should retrieve a button by name and click it", async ({ page }) => {
     // Initialize the buttons inside the ButtonGroup
-    await buttonGroup.initializeButtonsIfNeeded();
-
     const button = await buttonGroup.getButtonByName("Beta"); // Adjust the button name as needed
 
     // Add a listener for console logs to capture the click event
@@ -58,7 +52,7 @@ test.describe("ButtonGroup Class with Storybook", () => {
     });
 
     // Click the button
-    await buttonGroup.click("Beta");
+    await buttonGroup.clickButton("Beta");
 
     // eslint-disable-next-line playwright/no-wait-for-timeout -- Wait a bit to ensure the console log is captured
     await page.waitForTimeout(500);
@@ -66,8 +60,4 @@ test.describe("ButtonGroup Class with Storybook", () => {
     // Verify the console message contains the expected log
     expect(consoleMessage).toContain("Button clicked: Beta");
   });
-
-  test("should throw an error if trying to click a non-existent button", async () => {
-    await expect(buttonGroup.click("NonExistentButton")).rejects.toThrow("Invalid button name provided");
-  });
 });
diff --git a/packages/testkit/components/BaseElement.ts b/packages/testkit/components/BaseElement.ts
index 111df7f66f..f6698ace94 100644
--- a/packages/testkit/components/BaseElement.ts
+++ b/packages/testkit/components/BaseElement.ts
@@ -27,33 +27,6 @@ export class BaseElement {
     return this.locator;
   }
 
-  /**
-   * Wait for the list elements to stabilize (i.e., the count of items remains constant for a specified duration).
-   * @returns {Promise<void>}
-   */
-  async waitForElementsGroup(locator: Locator, elementReportName: string): Promise<void> {
-    await test.step(`Wait for ${elementReportName} items to stabilize`, async () => {
-      let previousCount = 0;
-      let stableCountTime = 0;
-      const stabilizationTimeMs = 500;
-      // eslint-disable-next-line no-constant-condition
-      while (true) {
-        const currentCount = await this.locator.locator(locator).count();
-
-        if (currentCount === previousCount) {
-          stableCountTime += 100; // Increase stable time by the check interval (100ms)
-        } else {
-          stableCountTime = 0; // Reset if the count changes
-        }
-        if (stableCountTime >= stabilizationTimeMs) {
-          break; // Break the loop if count has been stable for the desired duration
-        }
-        previousCount = currentCount;
-        await this.page.waitForTimeout(100); // Polling interval (100ms)
-      }
-    });
-  }
-
   /**
    * Check if the element is enabled.
    * @returns {Promise<boolean>} - Returns true if the element is enabled, otherwise false.
@@ -67,6 +40,26 @@ export class BaseElement {
     return isEnabled;
   }
 
+  /**
+   * Hover the element.
+   * @returns {Promise<void>}
+   */
+  async hover(): Promise<void> {
+    await test.step(`Hover ${this.elementReportName}`, async () => {
+      await this.locator.hover();
+    });
+  }
+
+  /**
+   * Click the element.
+   * @returns {Promise<void>}
+   */
+  async click(): Promise<void> {
+    await test.step(`Click ${this.elementReportName}`, async () => {
+      await this.locator.click();
+    });
+  }
+
   /**
    * Scroll the element into view if needed.
    * @returns {Promise<void>}
@@ -119,6 +112,12 @@ export class BaseElement {
     });
   }
 
+  async waitForVisible(): Promise<void> {
+    await test.step(`Wait for ${this.elementReportName}`, async () => {
+      await this.locator.waitFor({ state: "visible" });
+    });
+  }
+
   async waitForAbsence(): Promise<void> {
     await test.step(`Wait for ${this.elementReportName} to be absent`, async () => {
       await this.waitFor({ state: "detached" });
@@ -140,4 +139,55 @@ export class BaseElement {
     });
     return isVisible;
   }
+
+  /**
+   * Wait for the list elements to stabilize (i.e., the count of items remains constant for a specified duration).
+   * @param {Locator} locator - The locator for the elements.
+   * @returns {Promise<void>}
+   */
+  protected async waitForAndVerifyElements(locator: Locator): Promise<void> {
+    await test.step(`Wait for ${this.elementReportName} items to stabilize and verify existence`, async () => {
+      let previousCount = 0;
+      let stableCountTime = 0;
+      const stabilizationTimeMs = 500;
+
+      // eslint-disable-next-line no-constant-condition
+      while (true) {
+        const currentCount = await locator.count();
+
+        // Verify we have at least one element
+        if (currentCount === 0) {
+          await this.page.waitForTimeout(100);
+          continue;
+        }
+
+        // Check if all elements are visible
+        const elements = await locator.all();
+        const visibleStates = await Promise.all(elements.map(el => el.isVisible()));
+        const allVisible = visibleStates.every(state => state === true);
+
+        if (!allVisible) {
+          await this.page.waitForTimeout(100);
+          continue;
+        }
+
+        if (currentCount === previousCount) {
+          stableCountTime += 100;
+        } else {
+          stableCountTime = 0;
+        }
+
+        if (stableCountTime >= stabilizationTimeMs) {
+          break;
+        }
+
+        previousCount = currentCount;
+        await this.page.waitForTimeout(100);
+      }
+
+      if ((await locator.count()) === 0) {
+        throw new Error(`No ${this.elementReportName} elements found after stabilization`);
+      }
+    });
+  }
 }
diff --git a/packages/testkit/components/Button.ts b/packages/testkit/components/Button.ts
index 6a3ec61dca..4e9bcdfe22 100644
--- a/packages/testkit/components/Button.ts
+++ b/packages/testkit/components/Button.ts
@@ -6,9 +6,6 @@ import { BaseElement } from "./BaseElement";
  * Extends the BaseElement class.
  */
 export class Button extends BaseElement {
-  override page: Page;
-  override locator: Locator;
-  override elementReportName: string;
   /**
    * Create a Button.
    * @param {Page} page - The Playwright page object.
@@ -17,9 +14,6 @@ export class Button extends BaseElement {
    */
   constructor(page: Page, locator: Locator, elementReportName: string) {
     super(page, locator, elementReportName);
-    this.page = page;
-    this.locator = locator;
-    this.elementReportName = elementReportName;
   }
 
   /**
diff --git a/packages/testkit/components/ButtonGroup.ts b/packages/testkit/components/ButtonGroup.ts
index 5d313bf530..8d3127ab56 100644
--- a/packages/testkit/components/ButtonGroup.ts
+++ b/packages/testkit/components/ButtonGroup.ts
@@ -7,49 +7,24 @@ import { Button } from "./Button";
  * Extends the BaseElement class.
  */
 export class ButtonGroup extends BaseElement {
-  override page: Page;
-  override locator: Locator;
-  override elementReportName: string;
-  items: Button[];
-  buttonsInitialized: boolean;
-
   constructor(page: Page, locator: Locator, elementReportName: string) {
     super(page, locator, elementReportName);
-    this.page = page;
-    this.locator = locator;
-    this.elementReportName = elementReportName;
-    this.items = [];
-    this.buttonsInitialized = false;
   }
 
   /**
-   * Initialize buttons if they are not already initialized.
-   * @returns {Promise<void>}
-   */
-  async initializeButtonsIfNeeded() {
-    await test.step(`Initialize ${this.elementReportName} if needed`, async () => {
-      if (!this.buttonsInitialized) {
-        await this.initializeButtons();
-        this.buttonsInitialized = true;
-      }
-    });
-  }
-
-  /**
-   * Initialize the buttons by locating all button elements.
-   * @returns {Promise<void>}
+   * Get all buttons in the button group.
+   * @returns {Promise<Button[]>} An array of Button objects.
    */
-  async initializeButtons() {
-    await test.step(`Initialize ${this.elementReportName}`, async () => {
-      await this.waitForElementsGroup(this.locator.locator("button"), this.elementReportName);
-      const buttonElements = await this.locator.locator("button").all();
-      this.items = await Promise.all(
-        buttonElements.map(async locator => {
-          const buttonName = await locator.innerText();
-          return new Button(this.page, locator.getByText(`${buttonName}`), `Button: ${buttonName}`);
-        })
+  async getAllButtons(): Promise<Button[]> {
+    let buttons: Button[] = [];
+    await test.step(`Get all buttons in ${this.elementReportName}`, async () => {
+      const buttonsLocators = await this.locator.locator("button").all();
+      const buttonPromises = buttonsLocators.map(
+        async buttonLocator => new Button(this.page, buttonLocator, await buttonLocator.innerText())
       );
+      buttons = await Promise.all(buttonPromises);
     });
+    return buttons;
   }
 
   /**
@@ -57,12 +32,16 @@ export class ButtonGroup extends BaseElement {
    * @param {string} buttonName - The name of the button to retrieve.
    * @returns {Button} The button with the specified name.
    */
-  getButtonByName(buttonName: string): Button | undefined {
-    if (!buttonName) {
-      throw new Error("Invalid button name provided");
-    }
-
-    return this.items.find(item => item.elementReportName.includes(buttonName));
+  async getButtonByName(buttonName: string): Promise<Button | undefined> {
+    let button: Button | undefined;
+    await test.step(`Get button by name ${buttonName} in ${this.elementReportName}`, async () => {
+      button = new Button(
+        this.page,
+        this.locator.locator("button").filter({ hasText: buttonName }),
+        `Button: ${buttonName}`
+      );
+    });
+    return button;
   }
 
   /**
@@ -70,16 +49,17 @@ export class ButtonGroup extends BaseElement {
    * @param {string} buttonName - The name of the button to click.
    * @returns {Promise<void>}
    */
-  async click(buttonName: string): Promise<void> {
-    await this.initializeButtonsIfNeeded();
-
-    const button = this.getButtonByName(buttonName);
-
-    // Throw an error if the button is not found
-    if (!button) {
-      throw new Error(`Invalid button name provided: ${buttonName}`);
-    }
-
-    await button.click();
+  async clickButton(buttonName: string): Promise<void> {
+    await test.step(`Click button ${buttonName} in ${this.elementReportName}`, async () => {
+      const button = new Button(
+        this.page,
+        this.locator.locator("button").filter({ hasText: buttonName }),
+        `Button: ${buttonName}`
+      );
+      if (!button) {
+        throw new Error(`Invalid button name provided: ${buttonName}`);
+      }
+      await button.click();
+    });
   }
 }
diff --git a/packages/testkit/components/Dialog.ts b/packages/testkit/components/Dialog.ts
index ae0aeca735..919e832024 100644
--- a/packages/testkit/components/Dialog.ts
+++ b/packages/testkit/components/Dialog.ts
@@ -1,5 +1,5 @@
 import { Page, Locator } from "@playwright/test";
-import { Button } from "./Button";
+import { BaseElement } from "./BaseElement";
 
 /**
  * Class representing a Dialog element.
@@ -27,8 +27,13 @@ export class Dialog {
    * @param {string} item - The name of the item to select.
    * @returns {Promise<void>}
    */
-  async selectItem(item: string): Promise<void> {
-    const menuItem = new Button(this.page, this.locator.getByText(`${item}`), `Select Menu Item: ${item}`);
-    await menuItem.click();
+  async selectItem(itmeName: string): Promise<void> {
+    const dialogItem = new BaseElement(
+      this.page,
+      this.locator.getByText(`${itmeName}`).first(),
+      `Select Menu Item: ${itmeName}`
+    );
+    await dialogItem.hover();
+    await dialogItem.click();
   }
 }
diff --git a/packages/testkit/components/Dropdown.ts b/packages/testkit/components/Dropdown.ts
index 96fa0c6982..836d69c18b 100644
--- a/packages/testkit/components/Dropdown.ts
+++ b/packages/testkit/components/Dropdown.ts
@@ -8,9 +8,6 @@ import { BaseElement } from "./BaseElement";
  */
 export class Dropdown extends BaseElement {
   inputField: TextField;
-  override page: Page;
-  override locator: Locator;
-  override elementReportName: string;
   /**
    * Create a DropDown.
    * @param {Page} page - The Playwright page object.
@@ -19,10 +16,19 @@ export class Dropdown extends BaseElement {
    */
   constructor(page: Page, locator: Locator, elementReportName: string) {
     super(page, locator, elementReportName);
-    this.page = page;
-    this.locator = locator;
-    this.elementReportName = elementReportName;
-    this.inputField = new TextField(page, locator.locator("input"), "Dropdown Input Field");
+    this.inputField = new TextField(this.page, this.locator.locator("input"), "Dropdown Input Field");
+  }
+
+  /**
+   * Open the dropdown.
+   * @returns {Promise<void>}
+   */
+  async open(): Promise<void> {
+    await test.step(`Open ${this.elementReportName}`, async () => {
+      if (!(await this.isDropdownOpen())) {
+        await this.locator.click();
+      }
+    });
   }
 
   /**
@@ -32,10 +38,39 @@ export class Dropdown extends BaseElement {
    */
   async selectItem(item: string): Promise<void> {
     await test.step(`Select ${item} from ${this.elementReportName}`, async () => {
-      await this.locator.click();
+      await this.open();
       await this.inputField.setText(item);
       const dropdownItem = this.locator.getByRole("option", { name: item });
       await dropdownItem.click();
     });
   }
+
+  /**
+   * Select multiple items from a dropdown.
+   * @param items - The values text to be selected in the dropdown.
+   * @returns {Promise<void>}
+   */
+  async selectMultipleItems(items: string[]): Promise<void> {
+    await test.step(`Select ${items} from ${this.elementReportName}`, async () => {
+      await this.open();
+      for (const item of items) {
+        await this.inputField.setText(item);
+        const dropdownItem = this.locator.getByRole("option", { name: item });
+        await dropdownItem.click();
+      }
+    });
+  }
+
+  /**
+   * Check if the dropdown is open.
+   * @returns {Promise<boolean>}
+   */
+  private async isDropdownOpen(): Promise<boolean> {
+    let isOpen = false;
+    await test.step(`Check if ${this.elementReportName} is open`, async () => {
+      const expandedAttribute = await this.inputField.getAttributeValue("aria-expanded");
+      isOpen = expandedAttribute === "true" ? true : false;
+    });
+    return isOpen;
+  }
 }
diff --git a/packages/testkit/components/IconButton.ts b/packages/testkit/components/IconButton.ts
index 23a6a3d7c6..b398c18e49 100644
--- a/packages/testkit/components/IconButton.ts
+++ b/packages/testkit/components/IconButton.ts
@@ -7,9 +7,6 @@ import { Menu } from "./Menu";
  * Class representing an icon button that extends the Button class.
  */
 export class IconButton extends Button {
-  override page: Page;
-  override locator: Locator;
-  override elementReportName: string;
   icon: Button;
   menu: Dialog | Menu | undefined;
 
@@ -22,9 +19,6 @@ export class IconButton extends Button {
    */
   constructor(page: Page, locator: Locator, elementReportName: string, menuType?: Dialog | Menu) {
     super(page, locator, elementReportName);
-    this.page = page;
-    this.locator = locator;
-    this.elementReportName = elementReportName;
     this.icon = new Button(this.page, this.locator, `${this.elementReportName} - Icon`);
     this.menu = menuType;
   }
diff --git a/packages/testkit/components/List.ts b/packages/testkit/components/List.ts
index 5ea96fa9d8..37867489a4 100644
--- a/packages/testkit/components/List.ts
+++ b/packages/testkit/components/List.ts
@@ -41,8 +41,9 @@ export class List extends BaseElement {
    */
   async initializeItems(): Promise<void> {
     await test.step(`Initialize ${this.elementReportName}`, async () => {
-      await this.waitForElementsGroup(this.locator.locator("li"), this.elementReportName);
-      const listElements = await this.locator.locator("li").all();
+      const listItemLocator = this.locator.locator("li");
+      await this.waitForAndVerifyElements(listItemLocator);
+      const listElements = await listItemLocator.all();
       this.items = await Promise.all(
         listElements.map(async locator => {
           const itemName = await locator.innerText();
diff --git a/packages/testkit/components/Menu.ts b/packages/testkit/components/Menu.ts
index ebee0284f8..ccf4ccf3ee 100644
--- a/packages/testkit/components/Menu.ts
+++ b/packages/testkit/components/Menu.ts
@@ -23,33 +23,19 @@ export class Menu extends BaseElement {
   }
 
   /**
-   * Initialize list items if they are not already initialized.
-   * @returns {Promise<void>}
+   * Get all menu items.
+   * @returns {Promise<MenuItem[]>} An array of MenuItem objects.
    */
-  async initializeItemsIfNeeded(): Promise<void> {
-    await test.step(`Initialize ${this.elementReportName} if needed`, async () => {
-      if (!this.itemsInitialized) {
-        await this.initializeItems();
-        this.itemsInitialized = true;
-      }
-    });
-  }
-
-  /**
-   * Initialize the list items by locating all list elements.
-   * @returns {Promise<void>}
-   */
-  async initializeItems(): Promise<void> {
-    await test.step(`Initialize ${this.elementReportName}`, async () => {
-      await this.waitForElementsGroup(this.locator.locator("[role='menuitem']"), this.elementReportName);
-      const listElements = await this.locator.locator("[role='menuitem']").all();
-      this.items = await Promise.all(
-        listElements.map(async locator => {
-          const itemName = await locator.innerText();
-          return new MenuItem(this.page, locator, `Menu Item: ${itemName}`);
-        })
+  async getAllMenuItems(): Promise<MenuItem[]> {
+    let menuItems: MenuItem[] = [];
+    await test.step(`Get all menu items in ${this.elementReportName}`, async () => {
+      const menuItemsLocators = await this.locator.locator("[role='menuitem']").all();
+      const menuItemsPromises = menuItemsLocators.map(
+        async locator => new MenuItem(this.page, locator, await locator.innerText())
       );
+      menuItems = await Promise.all(menuItemsPromises);
     });
+    return menuItems;
   }
 
   /**
@@ -57,8 +43,16 @@ export class Menu extends BaseElement {
    * @param {string} itemName - The name of the item to retrieve.
    * @returns {ListItem | undefined} The list item with the specified name or undefined if not found.
    */
-  getItemByName(itemName: string): MenuItem | undefined {
-    return this.items.find(item => item.elementReportName.includes(itemName));
+  async getItemByName(itemName: string): Promise<MenuItem | undefined> {
+    let menuItem: MenuItem | undefined;
+    await test.step(`Get menu item by name ${itemName} in ${this.elementReportName}`, async () => {
+      menuItem = new MenuItem(
+        this.page,
+        this.locator.locator("[role='menuitem']").filter({ hasText: itemName }),
+        `Menu Item: ${itemName}`
+      );
+    });
+    return menuItem;
   }
 
   /**
@@ -67,13 +61,11 @@ export class Menu extends BaseElement {
    * @returns {Promise<void>}
    */
   async selectItem(listItem: string): Promise<void> {
-    await this.initializeItemsIfNeeded();
-    let menuItem = this.getItemByName(listItem);
-    if (!menuItem) {
-      // If the item is not in the initialized list, create it dynamically
-      menuItem = new MenuItem(this.page, this.locator.getByText(`${listItem}`), `Menu Item: ${listItem}`);
-    }
-    await menuItem.scrollIntoView();
+    const menuItem = new MenuItem(
+      this.page,
+      this.locator.locator("[role='menuitem']").filter({ hasText: listItem }),
+      `Menu Item: ${listItem}`
+    );
     await menuItem.click();
   }
 }
diff --git a/packages/testkit/components/MenuButton.ts b/packages/testkit/components/MenuButton.ts
index 4040770e23..a586bdd7a1 100644
--- a/packages/testkit/components/MenuButton.ts
+++ b/packages/testkit/components/MenuButton.ts
@@ -7,9 +7,6 @@ import { Dialog } from "./Dialog";
  * Class representing a menu button that extends the Button class.
  */
 export class MenuButton extends Button {
-  override page: Page;
-  override locator: Locator;
-  override elementReportName: string;
   button: Button;
   menu: Dialog | Menu;
 
@@ -22,9 +19,6 @@ export class MenuButton extends Button {
    */
   constructor(page: Page, locator: Locator, elementReportName: string, menuType: Dialog | Menu) {
     super(page, locator, elementReportName);
-    this.page = page;
-    this.locator = locator;
-    this.elementReportName = elementReportName;
     this.button = new Button(this.page, this.locator, elementReportName);
     this.menu = menuType;
   }
diff --git a/packages/testkit/components/MenuItem.ts b/packages/testkit/components/MenuItem.ts
index eb121f6ddf..16218f46e7 100644
--- a/packages/testkit/components/MenuItem.ts
+++ b/packages/testkit/components/MenuItem.ts
@@ -22,6 +22,7 @@ export class MenuItem extends BaseElement {
    */
   async click(): Promise<void> {
     await test.step(`Click ${this.elementReportName}`, async () => {
+      await this.locator.hover();
       await this.locator.click();
     });
   }
diff --git a/packages/testkit/components/Modal.ts b/packages/testkit/components/Modal.ts
index ec68a32775..318bdc42ac 100644
--- a/packages/testkit/components/Modal.ts
+++ b/packages/testkit/components/Modal.ts
@@ -1,5 +1,6 @@
 import { Page, Locator } from "@playwright/test";
 import { IconButton } from "./IconButton";
+import { pressKey } from "../utils/common-actions";
 
 /**
  * Class representing a Modal
@@ -20,13 +21,28 @@ export class Modal {
     this.page = page;
     this.locator = locator;
     this.elementReportName = elementReportName;
-    this.closeModalButton = new IconButton(this.page, this.locator, elementReportName);
+    this.closeModalButton = new IconButton(
+      this.page,
+      this.locator.getByTestId("close-modal-button"),
+      elementReportName
+    );
   }
 
   /**
    * Close the modal.
    */
   async closeModal(): Promise<void> {
-    await this.closeModalButton.click();
+    if (await this.closeModalButton.isVisible()) {
+      await this.closeModalButton.click();
+    } else {
+      await pressKey(this.page, "Escape");
+    }
+  }
+
+  /**
+   * Check if the modal is visible.
+   */
+  async isVisible(): Promise<boolean> {
+    return await this.locator.isVisible();
   }
 }
diff --git a/packages/testkit/components/RadioButton.ts b/packages/testkit/components/RadioButton.ts
index 2639c66e47..1eb044650f 100644
--- a/packages/testkit/components/RadioButton.ts
+++ b/packages/testkit/components/RadioButton.ts
@@ -2,10 +2,6 @@ import { test, Locator, Page } from "@playwright/test";
 import { BaseElement } from "./BaseElement";
 
 export class RadioButton extends BaseElement {
-  override page: Page;
-  override locator: Locator;
-  override elementReportName: string;
-
   /**
    * Create a RadioButton.
    * @param {Page} page - The Playwright page object.
@@ -14,9 +10,6 @@ export class RadioButton extends BaseElement {
    */
   constructor(page: Page, locator: Locator, elementReportName: string) {
     super(page, locator, elementReportName);
-    this.page = page;
-    this.locator = locator;
-    this.elementReportName = elementReportName;
   }
 
   /**
diff --git a/packages/testkit/components/Search.ts b/packages/testkit/components/Search.ts
index 05b1c46187..32226d5d09 100644
--- a/packages/testkit/components/Search.ts
+++ b/packages/testkit/components/Search.ts
@@ -16,9 +16,6 @@ export class Search extends TextField {
 
   constructor(page: Page, locator: Locator, elementReportName: string, filterMenuType?: Menu | Dialog) {
     super(page, locator, elementReportName);
-    this.page = page;
-    this.locator = locator;
-    this.elementReportName = elementReportName;
     this.input = new TextField(this.page, this.locator.locator("[type='search']"), `${this.elementReportName} - Input`);
     this.cleanSearchButton = new Button(this.page, this.locator.locator("[aria-label='Clear']"), "Clean Button");
     if (filterMenuType) {
diff --git a/packages/testkit/components/SplitButton.ts b/packages/testkit/components/SplitButton.ts
index 729774dedd..6a1bacc1ce 100644
--- a/packages/testkit/components/SplitButton.ts
+++ b/packages/testkit/components/SplitButton.ts
@@ -5,10 +5,6 @@ import { Button } from "./Button";
  * Class representing a split button that extends the Button class.
  */
 export class SplitButton extends Button {
-  override page: Page;
-  override locator: Locator;
-  override elementReportName: string;
-
   /**
    * Create a SplitButton.
    * @param {Page} page - The Playwright page object.
@@ -17,9 +13,6 @@ export class SplitButton extends Button {
    */
   constructor(page: Page, locator: Locator, elementReportName: string) {
     super(page, locator, elementReportName);
-    this.page = page;
-    this.locator = locator;
-    this.elementReportName = elementReportName;
   }
 
   /**
diff --git a/packages/testkit/components/TabList.ts b/packages/testkit/components/TabList.ts
index 3f7d0a4ea0..0b24892f8e 100644
--- a/packages/testkit/components/TabList.ts
+++ b/packages/testkit/components/TabList.ts
@@ -7,9 +7,6 @@ import { Tab } from "./Tab";
  * Extends the BaseElement class.
  */
 export class TabList extends BaseElement {
-  private items: Tab[]; // List of tabs
-  private tabsInitialized: boolean;
-
   /**
    * Create a TabList.
    * @param {Page} page - The Playwright page object.
@@ -18,47 +15,31 @@ export class TabList extends BaseElement {
    */
   constructor(page: Page, locator: Locator, elementReportName: string) {
     super(page, locator, elementReportName);
-    this.items = [];
-    this.tabsInitialized = false;
-  }
-
-  /**
-   * Initialize tabs if they are not already initialized.
-   * @returns {Promise<void>}
-   */
-  async initializeTabsIfNeeded(): Promise<void> {
-    await test.step(`Initialize ${this.elementReportName} if needed`, async () => {
-      if (!this.tabsInitialized) {
-        await this.initializeTabs();
-        this.tabsInitialized = true;
-      }
-    });
   }
 
-  /**
-   * Initialize the tabs by locating all tab elements.
-   * @returns {Promise<void>}
-   */
-  async initializeTabs(): Promise<void> {
-    await test.step(`Initialize ${this.elementReportName}`, async () => {
-      await this.waitForElementsGroup(this.locator.locator("li"), this.elementReportName);
-      const tabElements = await this.locator.locator("li").all();
-      this.items = await Promise.all(
-        tabElements.map(async locator => {
-          const tabName = await locator.innerText();
-          return new Tab(this.page, locator.getByText(`${tabName}`), `Tab Item: ${tabName}`);
-        })
+  async getAllTabs(): Promise<Tab[]> {
+    let tabs: Tab[] = [];
+    await test.step(`Get all tabs in ${this.elementReportName}`, async () => {
+      const tabsLocators = await this.locator.locator("li").all();
+      const tabPromises = tabsLocators.map(
+        async tabLocator => new Tab(this.page, tabLocator, await tabLocator.innerText())
       );
+      tabs = await Promise.all(tabPromises);
     });
+    return tabs;
   }
 
   /**
-   * Get a tab item by its name.
-   * @param {string} itemName - The name of the tab item to retrieve.
-   * @returns {Tab | undefined} The tab item with the specified name or undefined if not found.
+   * Get a tab by its name.
+   * @param {string} tabName - The name of the button to retrieve.
+   * @returns {Button} The button with the specified name.
    */
-  getItemByName(itemName: string): Tab | undefined {
-    return this.items.find(item => item.elementReportName.includes(itemName));
+  async getTabByName(tabName: string): Promise<Tab | undefined> {
+    let tab: Tab | undefined;
+    await test.step(`Get tab by name ${tabName} in ${this.elementReportName}`, async () => {
+      tab = new Tab(this.page, this.locator.locator("li").filter({ hasText: tabName }), `Tab: ${tabName}`);
+    });
+    return tab;
   }
 
   /**
@@ -67,12 +48,9 @@ export class TabList extends BaseElement {
    * @returns {Promise<void>}
    */
   async selectTab(tabName: string): Promise<void> {
-    await this.initializeTabsIfNeeded();
-    const item = this.getItemByName(tabName);
-    if (item) {
-      await item.click();
-    } else {
-      throw new Error(`Tab with name "${tabName}" not found`);
-    }
+    await test.step(`Select tab ${tabName} in ${this.elementReportName}`, async () => {
+      const tab = new Tab(this.page, this.locator.locator("li").filter({ hasText: tabName }), `Tab Item: ${tabName}`);
+      await tab.click();
+    });
   }
 }
diff --git a/packages/testkit/components/TextArea.ts b/packages/testkit/components/TextArea.ts
index c9efd290da..3fd725d770 100644
--- a/packages/testkit/components/TextArea.ts
+++ b/packages/testkit/components/TextArea.ts
@@ -19,8 +19,6 @@ export class TextArea extends BaseElement {
    */
   constructor(page: Page, locator: Locator, elementReportName: string) {
     super(page, locator, elementReportName);
-    this.page = page;
-    this.locator = locator;
     this.textAreaWrapper = new Button(this.page, this.locator, "Text Area Wrapper");
     this.textAreaInput = new TextField(this.page, this.locator.locator("textarea"), "Text Area Input");
   }
diff --git a/packages/testkit/components/TextField.ts b/packages/testkit/components/TextField.ts
index adcea8fb13..79aa7e41a9 100644
--- a/packages/testkit/components/TextField.ts
+++ b/packages/testkit/components/TextField.ts
@@ -7,8 +7,6 @@ import { BaseElement } from "./BaseElement";
  * Extends the BaseElement class.
  */
 export class TextField extends BaseElement {
-  override page: Page;
-  override locator: Locator;
   /**
    * Create a TextField.
    * @param {Page} page - The Playwright page object.
@@ -17,8 +15,6 @@ export class TextField extends BaseElement {
    */
   constructor(page: Page, locator: Locator, elementReportName: string) {
     super(page, locator, elementReportName);
-    this.page = page;
-    this.locator = locator;
   }
 
   /**
@@ -28,10 +24,28 @@ export class TextField extends BaseElement {
    */
   async setText(text: string): Promise<void> {
     await test.step(`Set text: ${text} in element: ${this.elementReportName}`, async () => {
+      await this.clearText();
       await this.locator.fill(text);
     });
   }
 
+  /**
+   * Clear the text in the input element.
+   */
+  async clearText(): Promise<void> {
+    await test.step(`Clear text in element: ${this.elementReportName}`, async () => {
+      await this.locator.fill("");
+    });
+  }
+
+  /**
+   * Get the value of the input element.
+   * @returns {Promise<string>}
+   */
+  async isEmpty(): Promise<boolean> {
+    return (await this.locator.inputValue()) === "";
+  }
+
   /**
    * Exit the edit mode by pressing the Escape key.
    * @returns {Promise<void>}
diff --git a/packages/testkit/components/Toggle.ts b/packages/testkit/components/Toggle.ts
index c9473c6a9b..f8f0407acf 100644
--- a/packages/testkit/components/Toggle.ts
+++ b/packages/testkit/components/Toggle.ts
@@ -6,8 +6,6 @@ import { BaseElement } from "./BaseElement";
  * Extends the BaseElement class.
  */
 export class Toggle extends BaseElement {
-  override page: Page;
-  override locator: Locator;
   /**
    * Create a Toggle.
    * @param {Page} page - The Playwright page object.
@@ -16,8 +14,6 @@ export class Toggle extends BaseElement {
    */
   constructor(page: Page, locator: Locator, elementReportName: string) {
     super(page, locator, elementReportName);
-    this.page = page;
-    this.locator = locator;
   }
 
   /**