@elastic/eui-test-helpers 1.1.0 → 1.2.0

package/README.md

@@ -1,8 +1,9 @@
 # EUI Test Helpers
 
-`@elastic/eui-test-helpers` is a library of test helpers to use when testing EUI components
-with [Cypress], [React Testing Library], or [Scout]. It provides assertion, find, and query helpers to make interacting
-with EUI components easy and reliable. Say goodbye to finding CSS selectors to query that _seem_ right.
+`@elastic/eui-test-helpers` provides helpers for interacting with EUI components reliably in
+consumer tests — no more guessing at CSS selectors that only _seem_ right. Today it ships
+**Playwright Component Objects** for [Scout]/[Playwright] consumers; [Cypress] and
+[React Testing Library] helpers may follow.
 
 > [!NOTE]
 > This library is in early stages of development and is missing many useful utilities. Please contribute or
@@ -51,6 +52,7 @@ their own version at runtime.
 
 See [CONTRIBUTING.md](CONTRIBUTING.md) for design principles, directory structure, and how to add new Component Objects.
 
+[Playwright]: https://playwright.dev
 [Cypress]: https://github.com/cypress-io/cypress
 [React Testing Library]: https://github.com/testing-library/react-testing-library
 [Scout]: https://github.com/elastic/kibana/tree/main/src/platform/packages/shared/kbn-scout

package/lib/cjs/components/combo_box/selectors.d.ts

@@ -1,72 +1,32 @@
 /**
- * List of available stable selectors for
- * {@link https://eui.elastic.co/docs/components/forms/selection/combo-box/|EuiComboBox}
+ * Stable selectors for
+ * {@link https://eui.elastic.co/docs/components/forms/selection/combo-box/|EuiComboBox}.
+ * `*_SELECTOR` values are CSS; `*_TEST_SUBJ` values are `data-test-subj` names.
  */
 export declare const EuiComboBoxSelectors: {
-    /**
-     * `data-test-subj` identifier of the inner input wrapper element
-     */
+    /** Root element (outer `.euiComboBox` wrapper carrying the consumer's `data-test-subj`). */
+    ROOT_SELECTOR: string;
     INPUT_WRAPPER_TEST_SUBJ: string;
-    /**
-     * `data-test-subj` identifier of the search input field
-     */
     SEARCH_INPUT_TEST_SUBJ: string;
-    /**
-     * `data-test-subj` identifier of the options list
-     */
     OPTIONS_LIST_TEST_SUBJ: string;
-    /**
-     * `data-test-subj` identifier of the options list toggle button
-     */
     OPTIONS_LIST_TOGGLE_BUTTON_TEST_SUBJ: string;
-    /**
-     * `data-test-subj` identifier of the clear button
-     */
     CLEAR_BUTTON_TEST_SUBJ: string;
-    /**
-     * CSS selector for the input wrapper in `singleSelection={{ asPlainText: true }}` mode.
-     * Present when the combo renders the selection inside the input instead of as pills.
-     */
     PLAIN_TEXT_INPUT_WRAP_SELECTOR: string;
     /**
-     * `data-test-subj` identifier of selected option pills.
-     * Only present in non-`asPlainText` mode — in `asPlainText` mode the
-     * selection is shown inside the input, not as pills.
+     * Selected option pills. Read by class, not `data-test-subj`: EUI spreads an
+     * option's own `data-test-subj` onto its pill after the `euiComboBoxPill`
+     * default, so a per-option subj would override it; the class always holds.
      */
-    PILL_TEST_SUBJ: string;
+    PILL_SELECTOR: string;
     /**
-     * CSS selector for all options in a specific combo box's dropdown.
-     *
-     * `testSubj` is the consumer's `data-test-subj` on `<EuiComboBox>`. EUI
-     * propagates this to the options list as `${testSubj}-optionsList`,
-     * letting us disambiguate when multiple combo boxes coexist on one page.
-     *
-     * To target a specific option by label, compose with Playwright's
-     * `getByTitle` to avoid CSS-injection issues with labels that contain
-     * special characters (`"`, `]`, `\`):
-     *
-     * ```ts
-     * page
-     *   .locator(EuiComboBoxSelectors.optionFor(testSubj))
-     *   .and(page.getByTitle(label, { exact: true }))
-     * ```
-     *
-     * Note: the list may be virtualized — type the search string into the
-     * input before asserting on a specific option to ensure it is in DOM.
+     * Options in a specific combo's dropdown. EUI propagates the consumer's
+     * `data-test-subj` to the list as `${testSubj}-optionsList`, so this scopes to
+     * one combo when several coexist. The list may be virtualized — type to filter
+     * before asserting on a specific option.
      */
     optionFor: (testSubj: string) => string;
-    /**
-     * CSS selector for all selected options in a specific combo box's dropdown.
-     * See `optionFor` for `testSubj` rationale and label-targeting guidance.
-     */
+    /** Selected options in a specific combo's dropdown (see `optionFor`). */
     selectedOptionFor: (testSubj: string) => string;
-    /**
-     * CSS selector for a specific combo box's options list container (the
-     * dropdown portal). Matches whether the list has regular options or an
-     * empty-state entry (e.g. "Add X as a custom option" for `onCreateOption`).
-     *
-     * Use this when you only need to wait for the dropdown to open, not when
-     * you need to target a specific option inside it.
-     */
+    /** A specific combo's options list container (the dropdown portal). */
     optionsListFor: (testSubj: string) => string;
 };

package/lib/cjs/components/combo_box/selectors.js

@@ -13,74 +13,34 @@ exports.EuiComboBoxSelectors = void 0;
  */
 
 /**
- * List of available stable selectors for
- * {@link https://eui.elastic.co/docs/components/forms/selection/combo-box/|EuiComboBox}
+ * Stable selectors for
+ * {@link https://eui.elastic.co/docs/components/forms/selection/combo-box/|EuiComboBox}.
+ * `*_SELECTOR` values are CSS; `*_TEST_SUBJ` values are `data-test-subj` names.
  */
 const EuiComboBoxSelectors = exports.EuiComboBoxSelectors = {
-  /**
-   * `data-test-subj` identifier of the inner input wrapper element
-   */
+  /** Root element (outer `.euiComboBox` wrapper carrying the consumer's `data-test-subj`). */
+  ROOT_SELECTOR: '.euiComboBox',
   INPUT_WRAPPER_TEST_SUBJ: 'comboBoxInput',
-  /**
-   * `data-test-subj` identifier of the search input field
-   */
   SEARCH_INPUT_TEST_SUBJ: 'comboBoxSearchInput',
-  /**
-   * `data-test-subj` identifier of the options list
-   */
   OPTIONS_LIST_TEST_SUBJ: 'comboBoxOptionsList',
-  /**
-   * `data-test-subj` identifier of the options list toggle button
-   */
   OPTIONS_LIST_TOGGLE_BUTTON_TEST_SUBJ: 'comboBoxToggleListButton',
-  /**
-   * `data-test-subj` identifier of the clear button
-   */
   CLEAR_BUTTON_TEST_SUBJ: 'comboBoxClearButton',
-  /**
-   * CSS selector for the input wrapper in `singleSelection={{ asPlainText: true }}` mode.
-   * Present when the combo renders the selection inside the input instead of as pills.
-   */
   PLAIN_TEXT_INPUT_WRAP_SELECTOR: '.euiComboBox__inputWrap--plainText',
   /**
-   * `data-test-subj` identifier of selected option pills.
-   * Only present in non-`asPlainText` mode — in `asPlainText` mode the
-   * selection is shown inside the input, not as pills.
+   * Selected option pills. Read by class, not `data-test-subj`: EUI spreads an
+   * option's own `data-test-subj` onto its pill after the `euiComboBoxPill`
+   * default, so a per-option subj would override it; the class always holds.
    */
-  PILL_TEST_SUBJ: 'euiComboBoxPill',
+  PILL_SELECTOR: '.euiComboBoxPill',
   /**
-   * CSS selector for all options in a specific combo box's dropdown.
-   *
-   * `testSubj` is the consumer's `data-test-subj` on `<EuiComboBox>`. EUI
-   * propagates this to the options list as `${testSubj}-optionsList`,
-   * letting us disambiguate when multiple combo boxes coexist on one page.
-   *
-   * To target a specific option by label, compose with Playwright's
-   * `getByTitle` to avoid CSS-injection issues with labels that contain
-   * special characters (`"`, `]`, `\`):
-   *
-   * ```ts
-   * page
-   *   .locator(EuiComboBoxSelectors.optionFor(testSubj))
-   *   .and(page.getByTitle(label, { exact: true }))
-   * ```
-   *
-   * Note: the list may be virtualized — type the search string into the
-   * input before asserting on a specific option to ensure it is in DOM.
+   * Options in a specific combo's dropdown. EUI propagates the consumer's
+   * `data-test-subj` to the list as `${testSubj}-optionsList`, so this scopes to
+   * one combo when several coexist. The list may be virtualized — type to filter
+   * before asserting on a specific option.
    */
   optionFor: testSubj => `[data-test-subj~="${testSubj}-optionsList"] [role="option"]`,
-  /**
-   * CSS selector for all selected options in a specific combo box's dropdown.
-   * See `optionFor` for `testSubj` rationale and label-targeting guidance.
-   */
+  /** Selected options in a specific combo's dropdown (see `optionFor`). */
   selectedOptionFor: testSubj => `[data-test-subj~="${testSubj}-optionsList"] [role="option"][aria-selected="true"]`,
-  /**
-   * CSS selector for a specific combo box's options list container (the
-   * dropdown portal). Matches whether the list has regular options or an
-   * empty-state entry (e.g. "Add X as a custom option" for `onCreateOption`).
-   *
-   * Use this when you only need to wait for the dropdown to open, not when
-   * you need to target a specific option inside it.
-   */
+  /** A specific combo's options list container (the dropdown portal). */
   optionsListFor: testSubj => `[data-test-subj~="${testSubj}-optionsList"]`
 };

package/lib/cjs/playwright/base_object.d.ts

@@ -22,10 +22,24 @@ export declare abstract class BaseObject {
      * when several exist on a page.
      */
     protected readonly testSubj: string;
-    constructor(scope: ObjectScope, testSubj: string);
+    /**
+     * CSS selector the root must match to be this component (e.g. `.euiComboBox`).
+     * When set, {@link assertComponent} enforces it.
+     */
+    protected readonly componentSelector?: string;
+    private componentVerified;
+    constructor(scope: ObjectScope, testSubj: string, componentSelector?: string);
     /**
      * Underlying `Locator` — escape hatch for assertions or scoping the
      * Component Object's API doesn't cover.
      */
     get locator(): Locator;
+    /**
+     * Throw if the element at `testSubj` isn't this component (a `data-test-subj`
+     * isn't unique to a component type). Run automatically before every public
+     * method via the constructor's Proxy. Memoized. Skips when the element is
+     * absent (that's the calling method's concern, not a misuse) and no-op without
+     * a `componentSelector`.
+     */
+    protected assertComponent(): Promise<void>;
 }

package/lib/cjs/playwright/base_object.js

@@ -33,10 +33,36 @@ class BaseObject {
    * when several exist on a page.
    */
 
-  constructor(scope, testSubj) {
+  /**
+   * CSS selector the root must match to be this component (e.g. `.euiComboBox`).
+   * When set, {@link assertComponent} enforces it.
+   */
+
+  componentVerified = false;
+  constructor(scope, testSubj, componentSelector) {
     this.scope = scope instanceof BaseObject ? scope.locator : scope;
     this.root = this.scope.getByTestId(testSubj);
     this.testSubj = testSubj;
+    this.componentSelector = componentSelector;
+
+    // Guard every async public method. A constructor can't be async, so instead
+    // of checking there, a Proxy awaits assertComponent() before each call. Only
+    // async methods are wrapped — the guard is async, so sync methods can't be
+    // guarded and pass through untouched (keeping their sync return type).
+    // Methods run with `target` as `this`, so internal calls don't re-guard.
+    return new Proxy(this, {
+      get(target, prop) {
+        const value = Reflect.get(target, prop, target);
+        const isGuardable = typeof value === 'function' && value.constructor.name === 'AsyncFunction' && prop !== 'assertComponent' && !(prop in Object.prototype);
+        if (!isGuardable) {
+          return value;
+        }
+        return async (...args) => {
+          await target.assertComponent();
+          return Reflect.apply(value, target, args);
+        };
+      }
+    });
   }
 
   /**
@@ -46,5 +72,29 @@ class BaseObject {
   get locator() {
     return this.root;
   }
+
+  /**
+   * Throw if the element at `testSubj` isn't this component (a `data-test-subj`
+   * isn't unique to a component type). Run automatically before every public
+   * method via the constructor's Proxy. Memoized. Skips when the element is
+   * absent (that's the calling method's concern, not a misuse) and no-op without
+   * a `componentSelector`.
+   */
+  async assertComponent() {
+    if (this.componentVerified || !this.componentSelector) {
+      return;
+    }
+    // Only verify when the element is present. An absent element isn't a misuse
+    // to flag — the calling method handles absence itself (e.g. clear() no-ops) —
+    // so skip rather than block waiting for something that may never appear.
+    if ((await this.root.count()) === 0) {
+      return;
+    }
+    const matches = await this.root.and(this.scope.locator(this.componentSelector)).count();
+    if (matches === 0) {
+      throw new Error(`Expected the element with data-test-subj "${this.testSubj}" to match "${this.componentSelector}", ` + `but it does not. Are you using the right Component Object for this element?`);
+    }
+    this.componentVerified = true;
+  }
 }
 exports.BaseObject = BaseObject;

package/lib/cjs/playwright/components/combo_box/object.d.ts

@@ -1,4 +1,4 @@
-import { BaseObject } from '../../base_object';
+import { BaseObject, type ObjectScope } from '../../base_object';
 /**
  * Playwright Component Object for {@link
  * https://eui.elastic.co/docs/components/forms/selection/combo-box/ EuiComboBox}.
@@ -8,6 +8,7 @@ import { BaseObject } from '../../base_object';
  * `comboBoxInput`).
  */
 export declare class EuiComboBoxObject extends BaseObject {
+    constructor(scope: ObjectScope, testSubj: string);
     /**
      * Replace the current selection with `labels`. Set-semantics: order-
      * independent — already-selected labels are kept, missing ones are added,
@@ -15,8 +16,29 @@ export declare class EuiComboBoxObject extends BaseObject {
      *
      * Throws with a descriptive message if any label never appears in the
      * dropdown (catches test/data drift early).
+     *
+     * `timeout` bounds how long each option is awaited in the dropdown after
+     * typing — raise it for slow / server-backed combos whose options load
+     * asynchronously.
+     */
+    setSelectedOptions(labels: string[], { timeout }?: {
+        timeout?: number;
+    }): Promise<void>;
+    /**
+     * Set free-text values on an `onCreateOption` combo box by typing and
+     * committing each with Enter, then verifying it was accepted. Unlike
+     * {@link setSelectedOptions}, this creates values rather than picking
+     * existing options.
+     */
+    setCustomSelectedOptions(labels: string[], { timeout }?: {
+        timeout?: number;
+    }): Promise<void>;
+    /**
+     * Open the dropdown and return the labels of the currently visible options.
+     * Virtualized lists mount only a subset, so this is the visible slice — not
+     * guaranteed to be every option.
      */
-    setSelectedOptions(labels: string[]): Promise<void>;
+    getAllVisibleOptions(): Promise<string[]>;
     /**
      * Clear all selected options. No-op if nothing is selected.
      *
@@ -34,10 +56,8 @@ export declare class EuiComboBoxObject extends BaseObject {
      * Currently selected option labels.
      *
      * - Multi-select / `singleSelection=true` → pill texts.
-     * - `singleSelection={{ asPlainText: true }}` → the input value. EUI
-     *   renders no pills in this mode; the input IS the selection display.
-     *   Works correctly with both `isClearable=true` (default) and
-     *   `isClearable=false`.
+     * - `singleSelection={{ asPlainText: true }}` → the input value (EUI renders
+     *   no pills in this mode).
      * - Nothing selected → `[]`.
      */
     getSelectedOptions(): Promise<string[]>;

package/lib/cjs/playwright/components/combo_box/object.js

@@ -24,6 +24,10 @@ var _selectors = require("../../../components/combo_box/selectors");
  * `comboBoxInput`).
  */
 class EuiComboBoxObject extends _base_object.BaseObject {
+  constructor(scope, testSubj) {
+    super(scope, testSubj, _selectors.EuiComboBoxSelectors.ROOT_SELECTOR);
+  }
+
   /**
    * Replace the current selection with `labels`. Set-semantics: order-
    * independent — already-selected labels are kept, missing ones are added,
@@ -31,8 +35,14 @@ class EuiComboBoxObject extends _base_object.BaseObject {
    *
    * Throws with a descriptive message if any label never appears in the
    * dropdown (catches test/data drift early).
+   *
+   * `timeout` bounds how long each option is awaited in the dropdown after
+   * typing — raise it for slow / server-backed combos whose options load
+   * asynchronously.
    */
-  async setSelectedOptions(labels) {
+  async setSelectedOptions(labels, {
+    timeout = 2_500
+  } = {}) {
     // Dedupe while preserving order.
     const targetLabels = [...new Set(labels)];
     // `[...arr].sort()` (not `arr.sort()`) — sort mutates in place; the copy
@@ -45,19 +55,70 @@ class EuiComboBoxObject extends _base_object.BaseObject {
       return;
     }
 
-    // Naive replace — clear, then add each. A diff-based approach would do
-    // less DOM work but require a per-pill remove primitive we don't ship yet.
-    await this.clear();
+    // Naive replace — clear, then add each. Exception: asPlainText single-select
+    // replaces its selection when a new option is picked, so clearing first is
+    // unnecessary — and its input can hold a non-clearable default (a placeholder
+    // rendered as the value) that clear() can't empty. Still clear when the target
+    // is empty (nothing to select would leave the old selection in place).
+    if (targetLabels.length === 0 || !(await this.isPlainText())) {
+      await this.clear();
+    }
     for (const label of targetLabels) {
-      await this.addOption(label);
+      await this.addOption(label, timeout);
     }
-    if (targetLabels.length > 0) {
+    if (targetLabels.length > 0 && !(await this.isPlainText())) {
       // Blur the input to close the dropdown. Using blur() rather than a
       // keyboard event avoids bubbling Escape to page-level handlers
-      // (modal/flyout close listeners) on the consumer page.
+      // (modal/flyout close listeners) on the consumer page. Skipped for
+      // asPlainText: picking an option there already commits and closes the
+      // dropdown, and an extra blur can race the (often parent-controlled)
+      // selectedOptions update and discard the just-picked value.
+      await this.searchInput.blur();
+    }
+
+    // Poll rather than assert once: an asPlainText selection is committed via
+    // the consumer's onChange, which can land a tick after the click.
+    await _test.expect.poll(() => this.getSelectedOptions().then(options => [...options].sort()), {
+      timeout
+    }).toEqual(sortedTarget);
+  }
+
+  /**
+   * Set free-text values on an `onCreateOption` combo box by typing and
+   * committing each with Enter, then verifying it was accepted. Unlike
+   * {@link setSelectedOptions}, this creates values rather than picking
+   * existing options.
+   */
+  async setCustomSelectedOptions(labels, {
+    timeout = 2_500
+  } = {}) {
+    for (const label of labels) {
+      await this.input.click();
+      await this.searchInput.fill(label);
+      await this.searchInput.press('Enter');
       await this.searchInput.blur();
     }
-    (0, _test.expect)([...(await this.getSelectedOptions())].sort()).toEqual(sortedTarget);
+    // The typed value equals the resulting pill/input label, so membership is
+    // an exact check.
+    for (const label of labels) {
+      await _test.expect.poll(() => this.getSelectedOptions(), {
+        timeout
+      }).toContain(label);
+    }
+  }
+
+  /**
+   * Open the dropdown and return the labels of the currently visible options.
+   * Virtualized lists mount only a subset, so this is the visible slice — not
+   * guaranteed to be every option.
+   */
+  async getAllVisibleOptions() {
+    await this.input.click();
+    const optionsList = this.root.page().locator(_selectors.EuiComboBoxSelectors.optionsListFor(this.testSubj));
+    await optionsList.waitFor({
+      state: 'visible'
+    });
+    return optionsList.getByRole('option').allInnerTexts();
   }
 
   /**
@@ -91,10 +152,8 @@ class EuiComboBoxObject extends _base_object.BaseObject {
    * Currently selected option labels.
    *
    * - Multi-select / `singleSelection=true` → pill texts.
-   * - `singleSelection={{ asPlainText: true }}` → the input value. EUI
-   *   renders no pills in this mode; the input IS the selection display.
-   *   Works correctly with both `isClearable=true` (default) and
-   *   `isClearable=false`.
+   * - `singleSelection={{ asPlainText: true }}` → the input value (EUI renders
+   *   no pills in this mode).
    * - Nothing selected → `[]`.
    */
   async getSelectedOptions() {
@@ -142,28 +201,31 @@ class EuiComboBoxObject extends _base_object.BaseObject {
     }
     await this.searchInput.blur();
   }
-  async addOption(label) {
+  async addOption(label, timeout = 2_500) {
     // Clicking the outer wrapper does not reliably open the dropdown; the
     // inner `comboBoxInput` element does.
     await this.input.click();
 
-    // Don't type to filter: EUI only sets an option's `title` while the input
-    // is empty, and the getByTitle match below relies on it. setSelectedOptions
-    // clears the selection first, so the list is unfiltered and every option
-    // renders its title.
-    //
-    // Options list is rendered in a portal outside `this.root`, so locate
-    // from page level. Use .and(getByTitle) rather than embedding the label
-    // in the CSS string — CSS attribute selectors break on labels containing
-    // quotes, brackets, or backslashes. getByTitle alone would search
-    // descendants; .and() intersects so it matches the option element itself.
-    const option = this.root.page().locator(_selectors.EuiComboBoxSelectors.optionFor(this.testSubj)).and(this.root.page().getByTitle(label, {
-      exact: true
-    }));
-    await option.waitFor({
-      state: 'visible'
-    });
-    await option.click();
+    // Type to filter, then wait for the (now narrowed) options to render.
+    await this.searchInput.fill(label);
+    const options = this.root.page().locator(_selectors.EuiComboBoxSelectors.optionsListFor(this.testSubj)).getByRole('option');
+    await _test.expect.poll(() => options.count(), {
+      timeout
+    }).toBeGreaterThan(0);
+
+    // Match on each option's full text so "ip" doesn't select "clientip" (EUI
+    // wraps the matched substring in `<mark>` while filtering, so a text-node
+    // lookup would match inside a longer option). If the text is truncated and
+    // has no exact match, fall back to keyboard-selecting the highlighted option.
+    const trimmed = label.trim();
+    const texts = await options.allInnerTexts();
+    const exactIndex = texts.findIndex(text => text.trim() === trimmed);
+    if (exactIndex >= 0) {
+      await options.nth(exactIndex).click();
+    } else {
+      await this.searchInput.press('ArrowDown');
+      await this.searchInput.press('Enter');
+    }
   }
 
   /**
@@ -211,7 +273,7 @@ class EuiComboBoxObject extends _base_object.BaseObject {
     return this.root.getByTestId(_selectors.EuiComboBoxSelectors.SEARCH_INPUT_TEST_SUBJ);
   }
   get pills() {
-    return this.root.getByTestId(_selectors.EuiComboBoxSelectors.PILL_TEST_SUBJ);
+    return this.root.locator(_selectors.EuiComboBoxSelectors.PILL_SELECTOR);
   }
   async isPlainText() {
     return (await this.root.locator(_selectors.EuiComboBoxSelectors.PLAIN_TEXT_INPUT_WRAP_SELECTOR).count()) > 0;

package/lib/esm/components/combo_box/selectors.d.ts

@@ -1,72 +1,32 @@
 /**
- * List of available stable selectors for
- * {@link https://eui.elastic.co/docs/components/forms/selection/combo-box/|EuiComboBox}
+ * Stable selectors for
+ * {@link https://eui.elastic.co/docs/components/forms/selection/combo-box/|EuiComboBox}.
+ * `*_SELECTOR` values are CSS; `*_TEST_SUBJ` values are `data-test-subj` names.
  */
 export declare const EuiComboBoxSelectors: {
-    /**
-     * `data-test-subj` identifier of the inner input wrapper element
-     */
+    /** Root element (outer `.euiComboBox` wrapper carrying the consumer's `data-test-subj`). */
+    ROOT_SELECTOR: string;
     INPUT_WRAPPER_TEST_SUBJ: string;
-    /**
-     * `data-test-subj` identifier of the search input field
-     */
     SEARCH_INPUT_TEST_SUBJ: string;
-    /**
-     * `data-test-subj` identifier of the options list
-     */
     OPTIONS_LIST_TEST_SUBJ: string;
-    /**
-     * `data-test-subj` identifier of the options list toggle button
-     */
     OPTIONS_LIST_TOGGLE_BUTTON_TEST_SUBJ: string;
-    /**
-     * `data-test-subj` identifier of the clear button
-     */
     CLEAR_BUTTON_TEST_SUBJ: string;
-    /**
-     * CSS selector for the input wrapper in `singleSelection={{ asPlainText: true }}` mode.
-     * Present when the combo renders the selection inside the input instead of as pills.
-     */
     PLAIN_TEXT_INPUT_WRAP_SELECTOR: string;
     /**
-     * `data-test-subj` identifier of selected option pills.
-     * Only present in non-`asPlainText` mode — in `asPlainText` mode the
-     * selection is shown inside the input, not as pills.
+     * Selected option pills. Read by class, not `data-test-subj`: EUI spreads an
+     * option's own `data-test-subj` onto its pill after the `euiComboBoxPill`
+     * default, so a per-option subj would override it; the class always holds.
      */
-    PILL_TEST_SUBJ: string;
+    PILL_SELECTOR: string;
     /**
-     * CSS selector for all options in a specific combo box's dropdown.
-     *
-     * `testSubj` is the consumer's `data-test-subj` on `<EuiComboBox>`. EUI
-     * propagates this to the options list as `${testSubj}-optionsList`,
-     * letting us disambiguate when multiple combo boxes coexist on one page.
-     *
-     * To target a specific option by label, compose with Playwright's
-     * `getByTitle` to avoid CSS-injection issues with labels that contain
-     * special characters (`"`, `]`, `\`):
-     *
-     * ```ts
-     * page
-     *   .locator(EuiComboBoxSelectors.optionFor(testSubj))
-     *   .and(page.getByTitle(label, { exact: true }))
-     * ```
-     *
-     * Note: the list may be virtualized — type the search string into the
-     * input before asserting on a specific option to ensure it is in DOM.
+     * Options in a specific combo's dropdown. EUI propagates the consumer's
+     * `data-test-subj` to the list as `${testSubj}-optionsList`, so this scopes to
+     * one combo when several coexist. The list may be virtualized — type to filter
+     * before asserting on a specific option.
      */
     optionFor: (testSubj: string) => string;
-    /**
-     * CSS selector for all selected options in a specific combo box's dropdown.
-     * See `optionFor` for `testSubj` rationale and label-targeting guidance.
-     */
+    /** Selected options in a specific combo's dropdown (see `optionFor`). */
     selectedOptionFor: (testSubj: string) => string;
-    /**
-     * CSS selector for a specific combo box's options list container (the
-     * dropdown portal). Matches whether the list has regular options or an
-     * empty-state entry (e.g. "Add X as a custom option" for `onCreateOption`).
-     *
-     * Use this when you only need to wait for the dropdown to open, not when
-     * you need to target a specific option inside it.
-     */
+    /** A specific combo's options list container (the dropdown portal). */
     optionsListFor: (testSubj: string) => string;
 };

package/lib/esm/components/combo_box/selectors.js

@@ -6,75 +6,35 @@
  * Side Public License, v 1.
  */
 /**
- * List of available stable selectors for
- * {@link https://eui.elastic.co/docs/components/forms/selection/combo-box/|EuiComboBox}
+ * Stable selectors for
+ * {@link https://eui.elastic.co/docs/components/forms/selection/combo-box/|EuiComboBox}.
+ * `*_SELECTOR` values are CSS; `*_TEST_SUBJ` values are `data-test-subj` names.
  */
 export const EuiComboBoxSelectors = {
-    /**
-     * `data-test-subj` identifier of the inner input wrapper element
-     */
+    /** Root element (outer `.euiComboBox` wrapper carrying the consumer's `data-test-subj`). */
+    ROOT_SELECTOR: '.euiComboBox',
     INPUT_WRAPPER_TEST_SUBJ: 'comboBoxInput',
-    /**
-     * `data-test-subj` identifier of the search input field
-     */
     SEARCH_INPUT_TEST_SUBJ: 'comboBoxSearchInput',
-    /**
-     * `data-test-subj` identifier of the options list
-     */
     OPTIONS_LIST_TEST_SUBJ: 'comboBoxOptionsList',
-    /**
-     * `data-test-subj` identifier of the options list toggle button
-     */
     OPTIONS_LIST_TOGGLE_BUTTON_TEST_SUBJ: 'comboBoxToggleListButton',
-    /**
-     * `data-test-subj` identifier of the clear button
-     */
     CLEAR_BUTTON_TEST_SUBJ: 'comboBoxClearButton',
-    /**
-     * CSS selector for the input wrapper in `singleSelection={{ asPlainText: true }}` mode.
-     * Present when the combo renders the selection inside the input instead of as pills.
-     */
     PLAIN_TEXT_INPUT_WRAP_SELECTOR: '.euiComboBox__inputWrap--plainText',
     /**
-     * `data-test-subj` identifier of selected option pills.
-     * Only present in non-`asPlainText` mode — in `asPlainText` mode the
-     * selection is shown inside the input, not as pills.
+     * Selected option pills. Read by class, not `data-test-subj`: EUI spreads an
+     * option's own `data-test-subj` onto its pill after the `euiComboBoxPill`
+     * default, so a per-option subj would override it; the class always holds.
      */
-    PILL_TEST_SUBJ: 'euiComboBoxPill',
+    PILL_SELECTOR: '.euiComboBoxPill',
     /**
-     * CSS selector for all options in a specific combo box's dropdown.
-     *
-     * `testSubj` is the consumer's `data-test-subj` on `<EuiComboBox>`. EUI
-     * propagates this to the options list as `${testSubj}-optionsList`,
-     * letting us disambiguate when multiple combo boxes coexist on one page.
-     *
-     * To target a specific option by label, compose with Playwright's
-     * `getByTitle` to avoid CSS-injection issues with labels that contain
-     * special characters (`"`, `]`, `\`):
-     *
-     * ```ts
-     * page
-     *   .locator(EuiComboBoxSelectors.optionFor(testSubj))
-     *   .and(page.getByTitle(label, { exact: true }))
-     * ```
-     *
-     * Note: the list may be virtualized — type the search string into the
-     * input before asserting on a specific option to ensure it is in DOM.
+     * Options in a specific combo's dropdown. EUI propagates the consumer's
+     * `data-test-subj` to the list as `${testSubj}-optionsList`, so this scopes to
+     * one combo when several coexist. The list may be virtualized — type to filter
+     * before asserting on a specific option.
      */
     optionFor: (testSubj) => `[data-test-subj~="${testSubj}-optionsList"] [role="option"]`,
-    /**
-     * CSS selector for all selected options in a specific combo box's dropdown.
-     * See `optionFor` for `testSubj` rationale and label-targeting guidance.
-     */
+    /** Selected options in a specific combo's dropdown (see `optionFor`). */
     selectedOptionFor: (testSubj) => `[data-test-subj~="${testSubj}-optionsList"] [role="option"][aria-selected="true"]`,
-    /**
-     * CSS selector for a specific combo box's options list container (the
-     * dropdown portal). Matches whether the list has regular options or an
-     * empty-state entry (e.g. "Add X as a custom option" for `onCreateOption`).
-     *
-     * Use this when you only need to wait for the dropdown to open, not when
-     * you need to target a specific option inside it.
-     */
+    /** A specific combo's options list container (the dropdown portal). */
     optionsListFor: (testSubj) => `[data-test-subj~="${testSubj}-optionsList"]`,
 };
 //# sourceMappingURL=selectors.js.map

package/lib/esm/components/combo_box/selectors.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectors.js","sourceRoot":"","sources":["../../../../src/components/combo_box/selectors.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC;;OAEG;IACH,uBAAuB,EAAE,eAAe;IAExC;;OAEG;IACH,sBAAsB,EAAE,qBAAqB;IAE7C;;OAEG;IACH,sBAAsB,EAAE,qBAAqB;IAE7C;;OAEG;IACH,oCAAoC,EAAE,0BAA0B;IAEhE;;OAEG;IACH,sBAAsB,EAAE,qBAAqB;IAE7C;;;OAGG;IACH,8BAA8B,EAAE,oCAAoC;IAEpE;;;;OAIG;IACH,cAAc,EAAE,iBAAiB;IAEjC;;;;;;;;;;;;;;;;;;;OAmBG;IACH,SAAS,EAAE,CAAC,QAAgB,EAAU,EAAE,CACtC,qBAAqB,QAAQ,gCAAgC;IAE/D;;;OAGG;IACH,iBAAiB,EAAE,CAAC,QAAgB,EAAU,EAAE,CAC9C,qBAAqB,QAAQ,sDAAsD;IAErF;;;;;;;OAOG;IACH,cAAc,EAAE,CAAC,QAAgB,EAAU,EAAE,CAC3C,qBAAqB,QAAQ,gBAAgB;CAChD,CAAC"}
+{"version":3,"file":"selectors.js","sourceRoot":"","sources":["../../../../src/components/combo_box/selectors.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG;IAClC,4FAA4F;IAC5F,aAAa,EAAE,cAAc;IAE7B,uBAAuB,EAAE,eAAe;IAExC,sBAAsB,EAAE,qBAAqB;IAE7C,sBAAsB,EAAE,qBAAqB;IAE7C,oCAAoC,EAAE,0BAA0B;IAEhE,sBAAsB,EAAE,qBAAqB;IAE7C,8BAA8B,EAAE,oCAAoC;IAEpE;;;;OAIG;IACH,aAAa,EAAE,kBAAkB;IAEjC;;;;;OAKG;IACH,SAAS,EAAE,CAAC,QAAgB,EAAU,EAAE,CACtC,qBAAqB,QAAQ,gCAAgC;IAE/D,yEAAyE;IACzE,iBAAiB,EAAE,CAAC,QAAgB,EAAU,EAAE,CAC9C,qBAAqB,QAAQ,sDAAsD;IAErF,uEAAuE;IACvE,cAAc,EAAE,CAAC,QAAgB,EAAU,EAAE,CAC3C,qBAAqB,QAAQ,gBAAgB;CAChD,CAAC"}

package/lib/esm/playwright/base_object.d.ts

@@ -22,10 +22,24 @@ export declare abstract class BaseObject {
      * when several exist on a page.
      */
     protected readonly testSubj: string;
-    constructor(scope: ObjectScope, testSubj: string);
+    /**
+     * CSS selector the root must match to be this component (e.g. `.euiComboBox`).
+     * When set, {@link assertComponent} enforces it.
+     */
+    protected readonly componentSelector?: string;
+    private componentVerified;
+    constructor(scope: ObjectScope, testSubj: string, componentSelector?: string);
     /**
      * Underlying `Locator` — escape hatch for assertions or scoping the
      * Component Object's API doesn't cover.
      */
     get locator(): Locator;
+    /**
+     * Throw if the element at `testSubj` isn't this component (a `data-test-subj`
+     * isn't unique to a component type). Run automatically before every public
+     * method via the constructor's Proxy. Memoized. Skips when the element is
+     * absent (that's the calling method's concern, not a misuse) and no-op without
+     * a `componentSelector`.
+     */
+    protected assertComponent(): Promise<void>;
 }

package/lib/esm/playwright/base_object.js

@@ -14,10 +14,33 @@
  * Requires `testIdAttribute: 'data-test-subj'` in the Playwright config.
  */
 export class BaseObject {
-    constructor(scope, testSubj) {
+    constructor(scope, testSubj, componentSelector) {
+        this.componentVerified = false;
         this.scope = scope instanceof BaseObject ? scope.locator : scope;
         this.root = this.scope.getByTestId(testSubj);
         this.testSubj = testSubj;
+        this.componentSelector = componentSelector;
+        // Guard every async public method. A constructor can't be async, so instead
+        // of checking there, a Proxy awaits assertComponent() before each call. Only
+        // async methods are wrapped — the guard is async, so sync methods can't be
+        // guarded and pass through untouched (keeping their sync return type).
+        // Methods run with `target` as `this`, so internal calls don't re-guard.
+        return new Proxy(this, {
+            get(target, prop) {
+                const value = Reflect.get(target, prop, target);
+                const isGuardable = typeof value === 'function' &&
+                    value.constructor.name === 'AsyncFunction' &&
+                    prop !== 'assertComponent' &&
+                    !(prop in Object.prototype);
+                if (!isGuardable) {
+                    return value;
+                }
+                return async (...args) => {
+                    await target.assertComponent();
+                    return Reflect.apply(value, target, args);
+                };
+            },
+        });
     }
     /**
      * Underlying `Locator` — escape hatch for assertions or scoping the
@@ -26,5 +49,31 @@ export class BaseObject {
     get locator() {
         return this.root;
     }
+    /**
+     * Throw if the element at `testSubj` isn't this component (a `data-test-subj`
+     * isn't unique to a component type). Run automatically before every public
+     * method via the constructor's Proxy. Memoized. Skips when the element is
+     * absent (that's the calling method's concern, not a misuse) and no-op without
+     * a `componentSelector`.
+     */
+    async assertComponent() {
+        if (this.componentVerified || !this.componentSelector) {
+            return;
+        }
+        // Only verify when the element is present. An absent element isn't a misuse
+        // to flag — the calling method handles absence itself (e.g. clear() no-ops) —
+        // so skip rather than block waiting for something that may never appear.
+        if ((await this.root.count()) === 0) {
+            return;
+        }
+        const matches = await this.root
+            .and(this.scope.locator(this.componentSelector))
+            .count();
+        if (matches === 0) {
+            throw new Error(`Expected the element with data-test-subj "${this.testSubj}" to match "${this.componentSelector}", ` +
+                `but it does not. Are you using the right Component Object for this element?`);
+        }
+        this.componentVerified = true;
+    }
 }
 //# sourceMappingURL=base_object.js.map

package/lib/esm/playwright/base_object.js.map

@@ -1 +1 @@
-{"version":3,"file":"base_object.js","sourceRoot":"","sources":["../../../src/playwright/base_object.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAMH;;;;;;;GAOG;AACH,MAAM,OAAgB,UAAU;IAiB9B,YAAY,KAAkB,EAAE,QAAgB;QAC9C,IAAI,CAAC,KAAK,GAAG,KAAK,YAAY,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;QACjE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAC7C,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC3B,CAAC;IAED;;;OAGG;IACH,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,IAAI,CAAC;IACnB,CAAC;CACF"}
+{"version":3,"file":"base_object.js","sourceRoot":"","sources":["../../../src/playwright/base_object.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAMH;;;;;;;GAOG;AACH,MAAM,OAAgB,UAAU;IAyB9B,YAAY,KAAkB,EAAE,QAAgB,EAAE,iBAA0B;QAFpE,sBAAiB,GAAG,KAAK,CAAC;QAGhC,IAAI,CAAC,KAAK,GAAG,KAAK,YAAY,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC;QACjE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;QAC7C,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;QACzB,IAAI,CAAC,iBAAiB,GAAG,iBAAiB,CAAC;QAE3C,4EAA4E;QAC5E,6EAA6E;QAC7E,2EAA2E;QAC3E,uEAAuE;QACvE,yEAAyE;QACzE,OAAO,IAAI,KAAK,CAAC,IAAI,EAAE;YACrB,GAAG,CAAC,MAAM,EAAE,IAAI;gBACd,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;gBAChD,MAAM,WAAW,GACf,OAAO,KAAK,KAAK,UAAU;oBAC3B,KAAK,CAAC,WAAW,CAAC,IAAI,KAAK,eAAe;oBAC1C,IAAI,KAAK,iBAAiB;oBAC1B,CAAC,CAAC,IAAI,IAAI,MAAM,CAAC,SAAS,CAAC,CAAC;gBAE9B,IAAI,CAAC,WAAW,EAAE,CAAC;oBACjB,OAAO,KAAK,CAAC;gBACf,CAAC;gBAED,OAAO,KAAK,EAAE,GAAG,IAAe,EAAE,EAAE;oBAClC,MAAM,MAAM,CAAC,eAAe,EAAE,CAAC;oBAC/B,OAAO,OAAO,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,CAAC;gBAC5C,CAAC,CAAC;YACJ,CAAC;SACF,CAAC,CAAC;IACL,CAAC;IAED;;;OAGG;IACH,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,IAAI,CAAC;IACnB,CAAC;IAED;;;;;;OAMG;IACO,KAAK,CAAC,eAAe;QAC7B,IAAI,IAAI,CAAC,iBAAiB,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC;YACtD,OAAO;QACT,CAAC;QACD,4EAA4E;QAC5E,8EAA8E;QAC9E,yEAAyE;QACzE,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,CAAC,EAAE,CAAC;YACpC,OAAO;QACT,CAAC;QACD,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI;aAC5B,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;aAC/C,KAAK,EAAE,CAAC;QACX,IAAI,OAAO,KAAK,CAAC,EAAE,CAAC;YAClB,MAAM,IAAI,KAAK,CACb,6CAA6C,IAAI,CAAC,QAAQ,eAAe,IAAI,CAAC,iBAAiB,KAAK;gBAClG,6EAA6E,CAChF,CAAC;QACJ,CAAC;QACD,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;IAChC,CAAC;CACF"}

package/lib/esm/playwright/components/combo_box/object.d.ts

@@ -1,4 +1,4 @@
-import { BaseObject } from '../../base_object';
+import { BaseObject, type ObjectScope } from '../../base_object';
 /**
  * Playwright Component Object for {@link
  * https://eui.elastic.co/docs/components/forms/selection/combo-box/ EuiComboBox}.
@@ -8,6 +8,7 @@ import { BaseObject } from '../../base_object';
  * `comboBoxInput`).
  */
 export declare class EuiComboBoxObject extends BaseObject {
+    constructor(scope: ObjectScope, testSubj: string);
     /**
      * Replace the current selection with `labels`. Set-semantics: order-
      * independent — already-selected labels are kept, missing ones are added,
@@ -15,8 +16,29 @@ export declare class EuiComboBoxObject extends BaseObject {
      *
      * Throws with a descriptive message if any label never appears in the
      * dropdown (catches test/data drift early).
+     *
+     * `timeout` bounds how long each option is awaited in the dropdown after
+     * typing — raise it for slow / server-backed combos whose options load
+     * asynchronously.
+     */
+    setSelectedOptions(labels: string[], { timeout }?: {
+        timeout?: number;
+    }): Promise<void>;
+    /**
+     * Set free-text values on an `onCreateOption` combo box by typing and
+     * committing each with Enter, then verifying it was accepted. Unlike
+     * {@link setSelectedOptions}, this creates values rather than picking
+     * existing options.
+     */
+    setCustomSelectedOptions(labels: string[], { timeout }?: {
+        timeout?: number;
+    }): Promise<void>;
+    /**
+     * Open the dropdown and return the labels of the currently visible options.
+     * Virtualized lists mount only a subset, so this is the visible slice — not
+     * guaranteed to be every option.
      */
-    setSelectedOptions(labels: string[]): Promise<void>;
+    getAllVisibleOptions(): Promise<string[]>;
     /**
      * Clear all selected options. No-op if nothing is selected.
      *
@@ -34,10 +56,8 @@ export declare class EuiComboBoxObject extends BaseObject {
      * Currently selected option labels.
      *
      * - Multi-select / `singleSelection=true` → pill texts.
-     * - `singleSelection={{ asPlainText: true }}` → the input value. EUI
-     *   renders no pills in this mode; the input IS the selection display.
-     *   Works correctly with both `isClearable=true` (default) and
-     *   `isClearable=false`.
+     * - `singleSelection={{ asPlainText: true }}` → the input value (EUI renders
+     *   no pills in this mode).
      * - Nothing selected → `[]`.
      */
     getSelectedOptions(): Promise<string[]>;

package/lib/esm/playwright/components/combo_box/object.js

@@ -17,6 +17,9 @@ import { EuiComboBoxSelectors } from '../../../components/combo_box/selectors';
  * `comboBoxInput`).
  */
 export class EuiComboBoxObject extends BaseObject {
+    constructor(scope, testSubj) {
+        super(scope, testSubj, EuiComboBoxSelectors.ROOT_SELECTOR);
+    }
     /**
      * Replace the current selection with `labels`. Set-semantics: order-
      * independent — already-selected labels are kept, missing ones are added,
@@ -24,8 +27,12 @@ export class EuiComboBoxObject extends BaseObject {
      *
      * Throws with a descriptive message if any label never appears in the
      * dropdown (catches test/data drift early).
+     *
+     * `timeout` bounds how long each option is awaited in the dropdown after
+     * typing — raise it for slow / server-backed combos whose options load
+     * asynchronously.
      */
-    async setSelectedOptions(labels) {
+    async setSelectedOptions(labels, { timeout = 2500 } = {}) {
         // Dedupe while preserving order.
         const targetLabels = [...new Set(labels)];
         // `[...arr].sort()` (not `arr.sort()`) — sort mutates in place; the copy
@@ -37,19 +44,63 @@ export class EuiComboBoxObject extends BaseObject {
             sortedCurrent.every((label, i) => label === sortedTarget[i])) {
             return;
         }
-        // Naive replace — clear, then add each. A diff-based approach would do
-        // less DOM work but require a per-pill remove primitive we don't ship yet.
-        await this.clear();
+        // Naive replace — clear, then add each. Exception: asPlainText single-select
+        // replaces its selection when a new option is picked, so clearing first is
+        // unnecessary — and its input can hold a non-clearable default (a placeholder
+        // rendered as the value) that clear() can't empty. Still clear when the target
+        // is empty (nothing to select would leave the old selection in place).
+        if (targetLabels.length === 0 || !(await this.isPlainText())) {
+            await this.clear();
+        }
         for (const label of targetLabels) {
-            await this.addOption(label);
+            await this.addOption(label, timeout);
         }
-        if (targetLabels.length > 0) {
+        if (targetLabels.length > 0 && !(await this.isPlainText())) {
             // Blur the input to close the dropdown. Using blur() rather than a
             // keyboard event avoids bubbling Escape to page-level handlers
-            // (modal/flyout close listeners) on the consumer page.
+            // (modal/flyout close listeners) on the consumer page. Skipped for
+            // asPlainText: picking an option there already commits and closes the
+            // dropdown, and an extra blur can race the (often parent-controlled)
+            // selectedOptions update and discard the just-picked value.
+            await this.searchInput.blur();
+        }
+        // Poll rather than assert once: an asPlainText selection is committed via
+        // the consumer's onChange, which can land a tick after the click.
+        await expect
+            .poll(() => this.getSelectedOptions().then((options) => [...options].sort()), { timeout })
+            .toEqual(sortedTarget);
+    }
+    /**
+     * Set free-text values on an `onCreateOption` combo box by typing and
+     * committing each with Enter, then verifying it was accepted. Unlike
+     * {@link setSelectedOptions}, this creates values rather than picking
+     * existing options.
+     */
+    async setCustomSelectedOptions(labels, { timeout = 2500 } = {}) {
+        for (const label of labels) {
+            await this.input.click();
+            await this.searchInput.fill(label);
+            await this.searchInput.press('Enter');
             await this.searchInput.blur();
         }
-        expect([...(await this.getSelectedOptions())].sort()).toEqual(sortedTarget);
+        // The typed value equals the resulting pill/input label, so membership is
+        // an exact check.
+        for (const label of labels) {
+            await expect.poll(() => this.getSelectedOptions(), { timeout }).toContain(label);
+        }
+    }
+    /**
+     * Open the dropdown and return the labels of the currently visible options.
+     * Virtualized lists mount only a subset, so this is the visible slice — not
+     * guaranteed to be every option.
+     */
+    async getAllVisibleOptions() {
+        await this.input.click();
+        const optionsList = this.root
+            .page()
+            .locator(EuiComboBoxSelectors.optionsListFor(this.testSubj));
+        await optionsList.waitFor({ state: 'visible' });
+        return optionsList.getByRole('option').allInnerTexts();
     }
     /**
      * Clear all selected options. No-op if nothing is selected.
@@ -81,10 +132,8 @@ export class EuiComboBoxObject extends BaseObject {
      * Currently selected option labels.
      *
      * - Multi-select / `singleSelection=true` → pill texts.
-     * - `singleSelection={{ asPlainText: true }}` → the input value. EUI
-     *   renders no pills in this mode; the input IS the selection display.
-     *   Works correctly with both `isClearable=true` (default) and
-     *   `isClearable=false`.
+     * - `singleSelection={{ asPlainText: true }}` → the input value (EUI renders
+     *   no pills in this mode).
      * - Nothing selected → `[]`.
      */
     async getSelectedOptions() {
@@ -132,26 +181,31 @@ export class EuiComboBoxObject extends BaseObject {
         }
         await this.searchInput.blur();
     }
-    async addOption(label) {
+    async addOption(label, timeout = 2500) {
         // Clicking the outer wrapper does not reliably open the dropdown; the
         // inner `comboBoxInput` element does.
         await this.input.click();
-        // Don't type to filter: EUI only sets an option's `title` while the input
-        // is empty, and the getByTitle match below relies on it. setSelectedOptions
-        // clears the selection first, so the list is unfiltered and every option
-        // renders its title.
-        //
-        // Options list is rendered in a portal outside `this.root`, so locate
-        // from page level. Use .and(getByTitle) rather than embedding the label
-        // in the CSS string — CSS attribute selectors break on labels containing
-        // quotes, brackets, or backslashes. getByTitle alone would search
-        // descendants; .and() intersects so it matches the option element itself.
-        const option = this.root
+        // Type to filter, then wait for the (now narrowed) options to render.
+        await this.searchInput.fill(label);
+        const options = this.root
             .page()
-            .locator(EuiComboBoxSelectors.optionFor(this.testSubj))
-            .and(this.root.page().getByTitle(label, { exact: true }));
-        await option.waitFor({ state: 'visible' });
-        await option.click();
+            .locator(EuiComboBoxSelectors.optionsListFor(this.testSubj))
+            .getByRole('option');
+        await expect.poll(() => options.count(), { timeout }).toBeGreaterThan(0);
+        // Match on each option's full text so "ip" doesn't select "clientip" (EUI
+        // wraps the matched substring in `<mark>` while filtering, so a text-node
+        // lookup would match inside a longer option). If the text is truncated and
+        // has no exact match, fall back to keyboard-selecting the highlighted option.
+        const trimmed = label.trim();
+        const texts = await options.allInnerTexts();
+        const exactIndex = texts.findIndex((text) => text.trim() === trimmed);
+        if (exactIndex >= 0) {
+            await options.nth(exactIndex).click();
+        }
+        else {
+            await this.searchInput.press('ArrowDown');
+            await this.searchInput.press('Enter');
+        }
     }
     /**
      * Focuses the search input and presses Backspace to clear the selection.
@@ -199,7 +253,7 @@ export class EuiComboBoxObject extends BaseObject {
         return this.root.getByTestId(EuiComboBoxSelectors.SEARCH_INPUT_TEST_SUBJ);
     }
     get pills() {
-        return this.root.getByTestId(EuiComboBoxSelectors.PILL_TEST_SUBJ);
+        return this.root.locator(EuiComboBoxSelectors.PILL_SELECTOR);
     }
     async isPlainText() {
         return ((await this.root

package/lib/esm/playwright/components/combo_box/object.js.map

@@ -1 +1 @@
-{"version":3,"file":"object.js","sourceRoot":"","sources":["../../../../../src/playwright/components/combo_box/object.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"object.js","sourceRoot":"","sources":["../../../../../src/playwright/components/combo_box/object.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAoB,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAE,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AAE/E;;;;;;;GAOG;AACH,MAAM,OAAO,iBAAkB,SAAQ,UAAU;IAC/C,YAAY,KAAkB,EAAE,QAAgB;QAC9C,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,oBAAoB,CAAC,aAAa,CAAC,CAAC;IAC7D,CAAC;IAED;;;;;;;;;;;OAWG;IACH,KAAK,CAAC,kBAAkB,CACtB,MAAgB,EAChB,EAAE,OAAO,GAAG,IAAK,KAA2B,EAAE;QAE9C,iCAAiC;QACjC,MAAM,YAAY,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC;QAC1C,yEAAyE;QACzE,qEAAqE;QACrE,MAAM,YAAY,GAAG,CAAC,GAAG,YAAY,CAAC,CAAC,IAAI,EAAE,CAAC;QAE9C,MAAM,aAAa,GAAG,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;QAEpE,0CAA0C;QAC1C,IACE,aAAa,CAAC,MAAM,KAAK,YAAY,CAAC,MAAM;YAC5C,aAAa,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,KAAK,YAAY,CAAC,CAAC,CAAC,CAAC,EAC5D,CAAC;YACD,OAAO;QACT,CAAC;QAED,6EAA6E;QAC7E,2EAA2E;QAC3E,8EAA8E;QAC9E,+EAA+E;QAC/E,uEAAuE;QACvE,IAAI,YAAY,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,CAAC;YAC7D,MAAM,IAAI,CAAC,KAAK,EAAE,CAAC;QACrB,CAAC;QAED,KAAK,MAAM,KAAK,IAAI,YAAY,EAAE,CAAC;YACjC,MAAM,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;QACvC,CAAC;QAED,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,CAAC,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,CAAC;YAC3D,mEAAmE;YACnE,+DAA+D;YAC/D,mEAAmE;YACnE,sEAAsE;YACtE,qEAAqE;YACrE,4DAA4D;YAC5D,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;QAChC,CAAC;QAED,0EAA0E;QAC1E,kEAAkE;QAClE,MAAM,MAAM;aACT,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,GAAG,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,OAAO,EAAE,CAAC;aACzF,OAAO,CAAC,YAAY,CAAC,CAAC;IAC3B,CAAC;IAED;;;;;OAKG;IACH,KAAK,CAAC,wBAAwB,CAC5B,MAAgB,EAChB,EAAE,OAAO,GAAG,IAAK,KAA2B,EAAE;QAE9C,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;YAC3B,MAAM,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;YACzB,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACnC,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YACtC,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;QAChC,CAAC;QACD,0EAA0E;QAC1E,kBAAkB;QAClB,KAAK,MAAM,KAAK,IAAI,MAAM,EAAE,CAAC;YAC3B,MAAM,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,kBAAkB,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QACnF,CAAC;IACH,CAAC;IAED;;;;OAIG;IACH,KAAK,CAAC,oBAAoB;QACxB,MAAM,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;QACzB,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI;aAC1B,IAAI,EAAE;aACN,OAAO,CAAC,oBAAoB,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC/D,MAAM,WAAW,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;QAChD,OAAO,WAAW,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,aAAa,EAAE,CAAC;IACzD,CAAC;IAED;;;;;;;;;;;OAWG;IACH,KAAK,CAAC,KAAK;QACT,IAAI,CAAC,MAAM,IAAI,CAAC,kBAAkB,EAAE,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACnD,OAAO;QACT,CAAC;QAED,IAAI,MAAM,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC;YAC1B,MAAM,IAAI,CAAC,qBAAqB,EAAE,CAAC;YACnC,OAAO;QACT,CAAC;QAED,IAAI,MAAM,IAAI,CAAC,0BAA0B,EAAE,EAAE,CAAC;YAC5C,MAAM,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC/B,OAAO;QACT,CAAC;QAED,MAAM,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACvC,CAAC;IAED;;;;;;;OAOG;IACH,KAAK,CAAC,kBAAkB;QACtB,IAAI,MAAM,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC;YAC1B,OAAO,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAC;QACpC,CAAC;QACD,IAAI,MAAM,IAAI,CAAC,0BAA0B,EAAE,EAAE,CAAC;YAC5C,OAAO,CAAC,MAAM,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,CAAC,CAAC;QAC/C,CAAC;QACD,OAAO,EAAE,CAAC;IACZ,CAAC;IAEO,KAAK,CAAC,QAAQ;QACpB,OAAO,CAAC,MAAM,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,CAAC;IACxC,CAAC;IAED;;;;OAIG;IACK,KAAK,CAAC,qBAAqB;QACjC,OAAO,MAAM,IAAI,CAAC,QAAQ,EAAE,EAAE,CAAC;YAC7B,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;YAC7C,MAAM,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC;YACnD,MAAM,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;QACxD,CAAC;IACH,CAAC;IAED;;;;;;;;OAQG;IACK,KAAK,CAAC,uBAAuB;QACnC,MAAM,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;QAEzB,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI;aACvB,IAAI,EAAE;aACN,OAAO,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QAElE,OAAO,CAAC,MAAM,QAAQ,CAAC,KAAK,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC;YACpC,MAAM,WAAW,GAAG,MAAM,QAAQ,CAAC,KAAK,EAAE,CAAC;YAC3C,MAAM,QAAQ,CAAC,KAAK,EAAE,CAAC,KAAK,EAAE,CAAC;YAC/B,MAAM,MAAM,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,WAAW,CAAC,WAAW,CAAC,CAAC;QACtD,CAAC;QAED,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;IAChC,CAAC;IAEO,KAAK,CAAC,SAAS,CAAC,KAAa,EAAE,OAAO,GAAG,IAAK;QACpD,sEAAsE;QACtE,sCAAsC;QACtC,MAAM,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;QAEzB,sEAAsE;QACtE,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnC,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI;aACtB,IAAI,EAAE;aACN,OAAO,CAAC,oBAAoB,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;aAC3D,SAAS,CAAC,QAAQ,CAAC,CAAC;QACvB,MAAM,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;QAEzE,0EAA0E;QAC1E,0EAA0E;QAC1E,2EAA2E;QAC3E,8EAA8E;QAC9E,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,EAAE,CAAC;QAC7B,MAAM,KAAK,GAAG,MAAM,OAAO,CAAC,aAAa,EAAE,CAAC;QAC5C,MAAM,UAAU,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,OAAO,CAAC,CAAC;QACtE,IAAI,UAAU,IAAI,CAAC,EAAE,CAAC;YACpB,MAAM,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC,KAAK,EAAE,CAAC;QACxC,CAAC;aAAM,CAAC;YACN,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;YAC1C,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACxC,CAAC;IACH,CAAC;IAED;;;;;OAKG;IACK,KAAK,CAAC,iBAAiB;QAC7B,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;QAC1C,oEAAoE;QACpE,qEAAqE;QACrE,sEAAsE;QACtE,8DAA8D;QAC9D,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;QAChC,MAAM,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;IACjD,CAAC;IAED;;;;;;;;;;;;OAYG;IACK,KAAK,CAAC,0BAA0B;QACtC,IAAI,CAAC,CAAC,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC;YAAE,OAAO,KAAK,CAAC;QAC9C,IAAI,CAAC,CAAC,MAAM,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE,CAAC;YAAE,OAAO,KAAK,CAAC;QACzD,OAAO,CAAC,CAAC,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC;IACzC,CAAC;IAEO,KAAK,CAAC,eAAe;QAC3B,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACtD,OAAO,OAAO,EAAE,QAAQ,CAAC,uBAAuB,CAAC,IAAI,KAAK,CAAC;IAC7D,CAAC;IAED,IAAY,KAAK;QACf,OAAO,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,oBAAoB,CAAC,uBAAuB,CAAC,CAAC;IAC7E,CAAC;IAED,IAAY,WAAW;QACrB,OAAO,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,oBAAoB,CAAC,sBAAsB,CAAC,CAAC;IAC5E,CAAC;IAED,IAAY,KAAK;QACf,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC,aAAa,CAAC,CAAC;IAC/D,CAAC;IAEO,KAAK,CAAC,WAAW;QACvB,OAAO,CACL,CAAC,MAAM,IAAI,CAAC,IAAI;aACb,OAAO,CAAC,oBAAoB,CAAC,8BAA8B,CAAC;aAC5D,KAAK,EAAE,CAAC,GAAG,CAAC,CAChB,CAAC;IACJ,CAAC;CACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elastic/eui-test-helpers",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "A library of EUI test helpers for RTL, Cypress and Scout",
   "license": "SEE LICENSE IN LICENSE.txt",
   "repository": {
@@ -58,4 +58,4 @@
     "README.md",
     "licenses"
   ]
-}
+}

package/src/components/combo_box/README.md

@@ -0,0 +1,33 @@
+# EuiComboBoxObject
+
+Playwright Component Object for [EuiComboBox](https://eui.elastic.co/docs/components/forms/selection/combo-box/).
+
+## Usage
+
+```ts
+import { EuiComboBoxObject } from '@elastic/eui-test-helpers';
+
+const comboBox = new EuiComboBoxObject(page, 'myComboBox');
+await comboBox.setSelectedOptions(['Option A', 'Option B']);
+expect(await comboBox.getSelectedOptions()).toEqual(['Option A', 'Option B']);
+```
+
+Set `data-test-subj` on the outer `<EuiComboBox>` wrapper (`.euiComboBox`), not on the inner `comboBoxInput`.
+
+## API
+
+EuiComboBox has two selection modes that affect how the methods behave:
+
+- **Pill mode** — `singleSelection={false}` (default) or `singleSelection={true}`: selected options render as pill elements.
+- **Plain-text mode** — `singleSelection={{ asPlainText: true }}`: the selected option's label appears directly in the search input.
+
+| Method | Description |
+|---|---|
+| `getSelectedOptions()` | Returns the selected option labels as `string[]`. |
+| `setSelectedOptions(labels, { timeout? })` | Selects existing options (replaces the current selection; no-op if already matching). `timeout` (default `2500`ms) bounds how long each option is awaited after typing — raise it for async / fetch-as-you-type combos. |
+| `setCustomSelectedOptions(labels, { timeout? })` | Creates free-text values via `onCreateOption`. Use instead of `setSelectedOptions` when the values don't pre-exist as options. `timeout` defaults to `2500`ms. |
+| `getAllVisibleOptions()` | Opens the dropdown and returns the labels of the currently visible options as `string[]` (virtualized lists mount only a subset). |
+| `clear()` | Clears all selected options. No-op if nothing is selected. |
+
+The Component Object verifies the `data-test-subj` element is actually an `EuiComboBox` (via the `.euiComboBox` class) and throws a clear error otherwise — so pointing it at a different component that happens to share a `data-test-subj` fails loudly instead of silently misbehaving.
+