@elastic/eui-test-helpers 1.3.0 → 1.4.0

package/README.md

@@ -50,6 +50,7 @@ their own version at runtime.
 | `EuiDataGridObject` | [src/components/datagrid/README.md](src/components/datagrid/README.md) |
 | `EuiSuperSelectObject` | [src/components/form/super_select/README.md](src/components/form/super_select/README.md) |
 | `EuiGlobalToastListObject` | [src/components/toast/README.md](src/components/toast/README.md) |
+| `EuiSelectableObject` | [src/components/selectable/README.md](src/components/selectable/README.md) |
 
 ## Contributing
 

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

@@ -0,0 +1,11 @@
+/**
+ * Stable selectors for
+ * {@link https://eui.elastic.co/docs/components/forms/selection/selectable/|EuiSelectable}.
+ * `*_SELECTOR` values are CSS.
+ */
+export declare const EuiSelectableSelectors: {
+    /** Root element (the `.euiSelectable` container carrying the consumer's `data-test-subj`). */
+    ROOT_SELECTOR: string;
+    /** The search box, present only when the selectable is `searchable`. */
+    SEARCH_SELECTOR: string;
+};

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiSelectableSelectors = void 0;
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/**
+ * Stable selectors for
+ * {@link https://eui.elastic.co/docs/components/forms/selection/selectable/|EuiSelectable}.
+ * `*_SELECTOR` values are CSS.
+ */
+const EuiSelectableSelectors = exports.EuiSelectableSelectors = {
+  /** Root element (the `.euiSelectable` container carrying the consumer's `data-test-subj`). */
+  ROOT_SELECTOR: '.euiSelectable',
+  /** The search box, present only when the selectable is `searchable`. */
+  SEARCH_SELECTOR: '.euiSelectableSearch'
+};

package/lib/cjs/index.d.ts

@@ -3,3 +3,4 @@ export { EuiComboBoxObject } from './playwright/components/combo_box/object';
 export { EuiDataGridObject } from './playwright/components/datagrid/object';
 export { EuiSuperSelectObject } from './playwright/components/form/super_select/object';
 export { EuiGlobalToastListObject } from './playwright/components/toast/object';
+export { EuiSelectableObject } from './playwright/components/selectable/object';

package/lib/cjs/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "EuiGlobalToastListObject", {
     return _object4.EuiGlobalToastListObject;
   }
 });
+Object.defineProperty(exports, "EuiSelectableObject", {
+  enumerable: true,
+  get: function () {
+    return _object5.EuiSelectableObject;
+  }
+});
 Object.defineProperty(exports, "EuiSuperSelectObject", {
   enumerable: true,
   get: function () {
@@ -37,4 +43,5 @@ var _base_object = require("./playwright/base_object");
 var _object = require("./playwright/components/combo_box/object");
 var _object2 = require("./playwright/components/datagrid/object");
 var _object3 = require("./playwright/components/form/super_select/object");
-var _object4 = require("./playwright/components/toast/object");
+var _object4 = require("./playwright/components/toast/object");
+var _object5 = require("./playwright/components/selectable/object");

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

@@ -0,0 +1,53 @@
+import type { Locator } from '@playwright/test';
+import { BaseObject, type ObjectScope } from '../../base_object';
+/**
+ * Playwright Component Object for {@link
+ * https://eui.elastic.co/docs/components/forms/selection/selectable/ EuiSelectable}.
+ *
+ * `testSubj` must match the `data-test-subj` set by the consumer on the
+ * `<EuiSelectable>` (EUI spreads it onto the `.euiSelectable` root). When the
+ * selectable renders inside a popover the consumer opens, pass that popover as
+ * `scope` and drive the open/close from the test — the popover is not this
+ * component's concern.
+ */
+export declare class EuiSelectableObject extends BaseObject {
+    constructor(scope: ObjectScope, testSubj: string);
+    /**
+     * The options currently mounted in the list, as a `Locator` so callers keep
+     * Playwright auto-retry for count and content assertions
+     * (e.g. `expect(options).toHaveCount(3)`). The list is virtualized, so this is
+     * the rendered window — `search()` first to filter the target into view
+     * rather than scanning a long list.
+     */
+    get options(): Locator;
+    /**
+     * Selects the option with the given label. A no-op if it is already selected.
+     * EUI reports that as `aria-checked` for a multi-selection list, or
+     * `aria-selected` for a single-selection one, so both are checked.
+     *
+     * Matches on the option's label element (`.euiSelectableListItem__text`), not
+     * its accessible name. `append`/`prepend` badges render in a sibling element,
+     * so they are excluded. EUI appends screen-reader state text inside the label
+     * element (a checked option reads `"<label> . Checked option."`), which always
+     * starts with a `.`, so the match allows an optional `.`-prefixed suffix. That
+     * boundary is what keeps `selectOption('New York')` from also matching
+     * `New York City`: a real longer label continues with a word, not a `.`.
+     *
+     * This is for lists in their default state. Once you call `search()`, EUI
+     * wraps the matched text in `<mark>` and injects highlight markers, so a label
+     * match no longer resolves. On a searched list, select via the option's own
+     * `data-test-subj`, or drive it through {@link options} directly.
+     *
+     * Only matches the plain label. A consumer using a custom `renderOption` to
+     * add its own content (e.g. a description) inside the option renders that
+     * content in the same label element, which breaks the anchored match. Select
+     * those options via {@link options} instead (e.g.
+     * `options.filter({ hasText: label })`).
+     */
+    selectOption(label: string): Promise<void>;
+    /**
+     * Type into the selectable's search box to filter the options. Throws if the
+     * selectable is not searchable (no search box rendered).
+     */
+    search(term: string): Promise<void>;
+}

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

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiSelectableObject = void 0;
+var _base_object = require("../../base_object");
+var _selectors = require("../../../components/selectable/selectors");
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/**
+ * Playwright Component Object for {@link
+ * https://eui.elastic.co/docs/components/forms/selection/selectable/ EuiSelectable}.
+ *
+ * `testSubj` must match the `data-test-subj` set by the consumer on the
+ * `<EuiSelectable>` (EUI spreads it onto the `.euiSelectable` root). When the
+ * selectable renders inside a popover the consumer opens, pass that popover as
+ * `scope` and drive the open/close from the test — the popover is not this
+ * component's concern.
+ */
+class EuiSelectableObject extends _base_object.BaseObject {
+  constructor(scope, testSubj) {
+    super(scope, testSubj, _selectors.EuiSelectableSelectors.ROOT_SELECTOR);
+  }
+
+  /**
+   * The options currently mounted in the list, as a `Locator` so callers keep
+   * Playwright auto-retry for count and content assertions
+   * (e.g. `expect(options).toHaveCount(3)`). The list is virtualized, so this is
+   * the rendered window — `search()` first to filter the target into view
+   * rather than scanning a long list.
+   */
+  get options() {
+    return this.root.getByRole('option');
+  }
+
+  /**
+   * Selects the option with the given label. A no-op if it is already selected.
+   * EUI reports that as `aria-checked` for a multi-selection list, or
+   * `aria-selected` for a single-selection one, so both are checked.
+   *
+   * Matches on the option's label element (`.euiSelectableListItem__text`), not
+   * its accessible name. `append`/`prepend` badges render in a sibling element,
+   * so they are excluded. EUI appends screen-reader state text inside the label
+   * element (a checked option reads `"<label> . Checked option."`), which always
+   * starts with a `.`, so the match allows an optional `.`-prefixed suffix. That
+   * boundary is what keeps `selectOption('New York')` from also matching
+   * `New York City`: a real longer label continues with a word, not a `.`.
+   *
+   * This is for lists in their default state. Once you call `search()`, EUI
+   * wraps the matched text in `<mark>` and injects highlight markers, so a label
+   * match no longer resolves. On a searched list, select via the option's own
+   * `data-test-subj`, or drive it through {@link options} directly.
+   *
+   * Only matches the plain label. A consumer using a custom `renderOption` to
+   * add its own content (e.g. a description) inside the option renders that
+   * content in the same label element, which breaks the anchored match. Select
+   * those options via {@link options} instead (e.g.
+   * `options.filter({ hasText: label })`).
+   */
+  async selectOption(label) {
+    const escaped = label.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const labelText = new RegExp(`^${escaped}(\\s*\\..*)?$`);
+    const option = this.root.getByRole('option').filter({
+      has: this.root.page().locator('.euiSelectableListItem__text', {
+        hasText: labelText
+      })
+    });
+    const [ariaChecked, ariaSelected] = await Promise.all([option.getAttribute('aria-checked'), option.getAttribute('aria-selected')]);
+    if (ariaChecked === 'true' || ariaSelected === 'true') {
+      return;
+    }
+    await option.click();
+  }
+
+  /**
+   * Type into the selectable's search box to filter the options. Throws if the
+   * selectable is not searchable (no search box rendered).
+   */
+  async search(term) {
+    // `fill()` auto-waits for the search box; if the selectable is not
+    // searchable it surfaces a clear locator-timeout on its own.
+    await this.root.locator(_selectors.EuiSelectableSelectors.SEARCH_SELECTOR).fill(term);
+  }
+}
+exports.EuiSelectableObject = EuiSelectableObject;

package/lib/cjs/selectors.d.ts

@@ -2,3 +2,4 @@ export { EuiComboBoxSelectors } from './components/combo_box/selectors';
 export { EuiDataGridSelectors } from './components/datagrid/selectors';
 export { EuiSuperSelectSelectors } from './components/form/super_select/selectors';
 export { EuiGlobalToastListSelectors } from './components/toast/selectors';
+export { EuiSelectableSelectors } from './components/selectable/selectors';

package/lib/cjs/selectors.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "EuiGlobalToastListSelectors", {
     return _selectors4.EuiGlobalToastListSelectors;
   }
 });
+Object.defineProperty(exports, "EuiSelectableSelectors", {
+  enumerable: true,
+  get: function () {
+    return _selectors5.EuiSelectableSelectors;
+  }
+});
 Object.defineProperty(exports, "EuiSuperSelectSelectors", {
   enumerable: true,
   get: function () {
@@ -30,4 +36,5 @@ Object.defineProperty(exports, "EuiSuperSelectSelectors", {
 var _selectors = require("./components/combo_box/selectors");
 var _selectors2 = require("./components/datagrid/selectors");
 var _selectors3 = require("./components/form/super_select/selectors");
-var _selectors4 = require("./components/toast/selectors");
+var _selectors4 = require("./components/toast/selectors");
+var _selectors5 = require("./components/selectable/selectors");

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

@@ -0,0 +1,11 @@
+/**
+ * Stable selectors for
+ * {@link https://eui.elastic.co/docs/components/forms/selection/selectable/|EuiSelectable}.
+ * `*_SELECTOR` values are CSS.
+ */
+export declare const EuiSelectableSelectors: {
+    /** Root element (the `.euiSelectable` container carrying the consumer's `data-test-subj`). */
+    ROOT_SELECTOR: string;
+    /** The search box, present only when the selectable is `searchable`. */
+    SEARCH_SELECTOR: string;
+};

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

@@ -0,0 +1,19 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+/**
+ * Stable selectors for
+ * {@link https://eui.elastic.co/docs/components/forms/selection/selectable/|EuiSelectable}.
+ * `*_SELECTOR` values are CSS.
+ */
+export const EuiSelectableSelectors = {
+    /** Root element (the `.euiSelectable` container carrying the consumer's `data-test-subj`). */
+    ROOT_SELECTOR: '.euiSelectable',
+    /** The search box, present only when the selectable is `searchable`. */
+    SEARCH_SELECTOR: '.euiSelectableSearch',
+};
+//# sourceMappingURL=selectors.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selectors.js","sourceRoot":"","sources":["../../../../src/components/selectable/selectors.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;;GAIG;AACH,MAAM,CAAC,MAAM,sBAAsB,GAAG;IACpC,8FAA8F;IAC9F,aAAa,EAAE,gBAAgB;IAE/B,wEAAwE;IACxE,eAAe,EAAE,sBAAsB;CACxC,CAAC"}

package/lib/esm/index.d.ts

@@ -3,3 +3,4 @@ export { EuiComboBoxObject } from './playwright/components/combo_box/object';
 export { EuiDataGridObject } from './playwright/components/datagrid/object';
 export { EuiSuperSelectObject } from './playwright/components/form/super_select/object';
 export { EuiGlobalToastListObject } from './playwright/components/toast/object';
+export { EuiSelectableObject } from './playwright/components/selectable/object';

package/lib/esm/index.js

@@ -10,4 +10,5 @@ export { EuiComboBoxObject } from './playwright/components/combo_box/object';
 export { EuiDataGridObject } from './playwright/components/datagrid/object';
 export { EuiSuperSelectObject } from './playwright/components/form/super_select/object';
 export { EuiGlobalToastListObject } from './playwright/components/toast/object';
+export { EuiSelectableObject } from './playwright/components/selectable/object';
 //# sourceMappingURL=index.js.map

package/lib/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,UAAU,EAAoB,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,0CAA0C,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAC5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,kDAAkD,CAAC;AACxF,OAAO,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,UAAU,EAAoB,MAAM,0BAA0B,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,0CAA0C,CAAC;AAC7E,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAC5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,kDAAkD,CAAC;AACxF,OAAO,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AAChF,OAAO,EAAE,mBAAmB,EAAE,MAAM,2CAA2C,CAAC"}

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

@@ -0,0 +1,53 @@
+import type { Locator } from '@playwright/test';
+import { BaseObject, type ObjectScope } from '../../base_object';
+/**
+ * Playwright Component Object for {@link
+ * https://eui.elastic.co/docs/components/forms/selection/selectable/ EuiSelectable}.
+ *
+ * `testSubj` must match the `data-test-subj` set by the consumer on the
+ * `<EuiSelectable>` (EUI spreads it onto the `.euiSelectable` root). When the
+ * selectable renders inside a popover the consumer opens, pass that popover as
+ * `scope` and drive the open/close from the test — the popover is not this
+ * component's concern.
+ */
+export declare class EuiSelectableObject extends BaseObject {
+    constructor(scope: ObjectScope, testSubj: string);
+    /**
+     * The options currently mounted in the list, as a `Locator` so callers keep
+     * Playwright auto-retry for count and content assertions
+     * (e.g. `expect(options).toHaveCount(3)`). The list is virtualized, so this is
+     * the rendered window — `search()` first to filter the target into view
+     * rather than scanning a long list.
+     */
+    get options(): Locator;
+    /**
+     * Selects the option with the given label. A no-op if it is already selected.
+     * EUI reports that as `aria-checked` for a multi-selection list, or
+     * `aria-selected` for a single-selection one, so both are checked.
+     *
+     * Matches on the option's label element (`.euiSelectableListItem__text`), not
+     * its accessible name. `append`/`prepend` badges render in a sibling element,
+     * so they are excluded. EUI appends screen-reader state text inside the label
+     * element (a checked option reads `"<label> . Checked option."`), which always
+     * starts with a `.`, so the match allows an optional `.`-prefixed suffix. That
+     * boundary is what keeps `selectOption('New York')` from also matching
+     * `New York City`: a real longer label continues with a word, not a `.`.
+     *
+     * This is for lists in their default state. Once you call `search()`, EUI
+     * wraps the matched text in `<mark>` and injects highlight markers, so a label
+     * match no longer resolves. On a searched list, select via the option's own
+     * `data-test-subj`, or drive it through {@link options} directly.
+     *
+     * Only matches the plain label. A consumer using a custom `renderOption` to
+     * add its own content (e.g. a description) inside the option renders that
+     * content in the same label element, which breaks the anchored match. Select
+     * those options via {@link options} instead (e.g.
+     * `options.filter({ hasText: label })`).
+     */
+    selectOption(label: string): Promise<void>;
+    /**
+     * Type into the selectable's search box to filter the options. Throws if the
+     * selectable is not searchable (no search box rendered).
+     */
+    search(term: string): Promise<void>;
+}

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

@@ -0,0 +1,83 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { BaseObject } from '../../base_object';
+import { EuiSelectableSelectors } from '../../../components/selectable/selectors';
+/**
+ * Playwright Component Object for {@link
+ * https://eui.elastic.co/docs/components/forms/selection/selectable/ EuiSelectable}.
+ *
+ * `testSubj` must match the `data-test-subj` set by the consumer on the
+ * `<EuiSelectable>` (EUI spreads it onto the `.euiSelectable` root). When the
+ * selectable renders inside a popover the consumer opens, pass that popover as
+ * `scope` and drive the open/close from the test — the popover is not this
+ * component's concern.
+ */
+export class EuiSelectableObject extends BaseObject {
+    constructor(scope, testSubj) {
+        super(scope, testSubj, EuiSelectableSelectors.ROOT_SELECTOR);
+    }
+    /**
+     * The options currently mounted in the list, as a `Locator` so callers keep
+     * Playwright auto-retry for count and content assertions
+     * (e.g. `expect(options).toHaveCount(3)`). The list is virtualized, so this is
+     * the rendered window — `search()` first to filter the target into view
+     * rather than scanning a long list.
+     */
+    get options() {
+        return this.root.getByRole('option');
+    }
+    /**
+     * Selects the option with the given label. A no-op if it is already selected.
+     * EUI reports that as `aria-checked` for a multi-selection list, or
+     * `aria-selected` for a single-selection one, so both are checked.
+     *
+     * Matches on the option's label element (`.euiSelectableListItem__text`), not
+     * its accessible name. `append`/`prepend` badges render in a sibling element,
+     * so they are excluded. EUI appends screen-reader state text inside the label
+     * element (a checked option reads `"<label> . Checked option."`), which always
+     * starts with a `.`, so the match allows an optional `.`-prefixed suffix. That
+     * boundary is what keeps `selectOption('New York')` from also matching
+     * `New York City`: a real longer label continues with a word, not a `.`.
+     *
+     * This is for lists in their default state. Once you call `search()`, EUI
+     * wraps the matched text in `<mark>` and injects highlight markers, so a label
+     * match no longer resolves. On a searched list, select via the option's own
+     * `data-test-subj`, or drive it through {@link options} directly.
+     *
+     * Only matches the plain label. A consumer using a custom `renderOption` to
+     * add its own content (e.g. a description) inside the option renders that
+     * content in the same label element, which breaks the anchored match. Select
+     * those options via {@link options} instead (e.g.
+     * `options.filter({ hasText: label })`).
+     */
+    async selectOption(label) {
+        const escaped = label.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        const labelText = new RegExp(`^${escaped}(\\s*\\..*)?$`);
+        const option = this.root
+            .getByRole('option')
+            .filter({ has: this.root.page().locator('.euiSelectableListItem__text', { hasText: labelText }) });
+        const [ariaChecked, ariaSelected] = await Promise.all([
+            option.getAttribute('aria-checked'),
+            option.getAttribute('aria-selected'),
+        ]);
+        if (ariaChecked === 'true' || ariaSelected === 'true') {
+            return;
+        }
+        await option.click();
+    }
+    /**
+     * Type into the selectable's search box to filter the options. Throws if the
+     * selectable is not searchable (no search box rendered).
+     */
+    async search(term) {
+        // `fill()` auto-waits for the search box; if the selectable is not
+        // searchable it surfaces a clear locator-timeout on its own.
+        await this.root.locator(EuiSelectableSelectors.SEARCH_SELECTOR).fill(term);
+    }
+}
+//# sourceMappingURL=object.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"object.js","sourceRoot":"","sources":["../../../../../src/playwright/components/selectable/object.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,EAAE,UAAU,EAAoB,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAE,sBAAsB,EAAE,MAAM,0CAA0C,CAAC;AAElF;;;;;;;;;GASG;AACH,MAAM,OAAO,mBAAoB,SAAQ,UAAU;IACjD,YAAY,KAAkB,EAAE,QAAgB;QAC9C,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IAC/D,CAAC;IAED;;;;;;OAMG;IACH,IAAW,OAAO;QAChB,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;IACvC,CAAC;IAED;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,KAAK,CAAC,YAAY,CAAC,KAAa;QAC9B,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,qBAAqB,EAAE,MAAM,CAAC,CAAC;QAC7D,MAAM,SAAS,GAAG,IAAI,MAAM,CAAC,IAAI,OAAO,eAAe,CAAC,CAAC;QACzD,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI;aACrB,SAAS,CAAC,QAAQ,CAAC;aACnB,MAAM,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,OAAO,CAAC,8BAA8B,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,CAAC,CAAC;QACrG,MAAM,CAAC,WAAW,EAAE,YAAY,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;YACpD,MAAM,CAAC,YAAY,CAAC,cAAc,CAAC;YACnC,MAAM,CAAC,YAAY,CAAC,eAAe,CAAC;SACrC,CAAC,CAAC;QACH,IAAI,WAAW,KAAK,MAAM,IAAI,YAAY,KAAK,MAAM,EAAE,CAAC;YACtD,OAAO;QACT,CAAC;QACD,MAAM,MAAM,CAAC,KAAK,EAAE,CAAC;IACvB,CAAC;IAED;;;OAGG;IACH,KAAK,CAAC,MAAM,CAAC,IAAY;QACvB,mEAAmE;QACnE,6DAA6D;QAC7D,MAAM,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,sBAAsB,CAAC,eAAe,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC7E,CAAC;CACF"}

package/lib/esm/selectors.d.ts

@@ -2,3 +2,4 @@ export { EuiComboBoxSelectors } from './components/combo_box/selectors';
 export { EuiDataGridSelectors } from './components/datagrid/selectors';
 export { EuiSuperSelectSelectors } from './components/form/super_select/selectors';
 export { EuiGlobalToastListSelectors } from './components/toast/selectors';
+export { EuiSelectableSelectors } from './components/selectable/selectors';

package/lib/esm/selectors.js

@@ -9,4 +9,5 @@ export { EuiComboBoxSelectors } from './components/combo_box/selectors';
 export { EuiDataGridSelectors } from './components/datagrid/selectors';
 export { EuiSuperSelectSelectors } from './components/form/super_select/selectors';
 export { EuiGlobalToastListSelectors } from './components/toast/selectors';
+export { EuiSelectableSelectors } from './components/selectable/selectors';
 //# sourceMappingURL=selectors.js.map

package/lib/esm/selectors.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectors.js","sourceRoot":"","sources":["../../src/selectors.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,uBAAuB,EAAE,MAAM,0CAA0C,CAAC;AACnF,OAAO,EAAE,2BAA2B,EAAE,MAAM,8BAA8B,CAAC"}
+{"version":3,"file":"selectors.js","sourceRoot":"","sources":["../../src/selectors.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AACxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,uBAAuB,EAAE,MAAM,0CAA0C,CAAC;AACnF,OAAO,EAAE,2BAA2B,EAAE,MAAM,8BAA8B,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elastic/eui-test-helpers",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "A library of EUI test helpers for RTL, Cypress and Scout",
   "license": "SEE LICENSE IN LICENSE.txt",
   "repository": {

package/src/components/selectable/README.md

@@ -0,0 +1,27 @@
+# EuiSelectableObject
+
+Playwright Component Object for [EuiSelectable](https://eui.elastic.co/docs/components/forms/selection/selectable/).
+
+## Usage
+
+```ts
+import { EuiSelectableObject } from '@elastic/eui-test-helpers';
+
+const selectable = new EuiSelectableObject(page, 'mySelectable');
+await selectable.search('logs');
+await selectable.selectOption('logs-*');
+```
+
+Set `data-test-subj` on the `<EuiSelectable>` (EUI spreads it onto the `.euiSelectable` root, which the component-type guard verifies). When the selectable renders inside a popover, pass the popover as the `scope` and open or close it from your test. The popover is not this component's concern.
+
+## API
+
+| Member | Description |
+|---|---|
+| `options` | `Locator` for the rendered options, keeping Playwright auto-retry for count and content assertions. The list is virtualized, so `search()` first rather than scanning a long list. |
+| `selectOption(label)` | Selects the option with the given label. A no-op if it is already checked. |
+| `search(term)` | Types into the search box. Throws if the selectable is not searchable. |
+
+`selectOption(label)` matches the label element and suits lists in their default state. It tolerates the screen-reader state text EUI appends (a checked option reads `<label> . Checked option.`) and `append` badges, and it will not match a different option whose label merely starts with the same text. Once you call `search()`, EUI injects highlight markers into the option's label, so a label match no longer resolves. On a searched list, select via the option's own `data-test-subj` or drive it through `options` directly.
+
+It also only matches the plain label. A consumer using a custom `renderOption` to add its own content (e.g. a description) inside the option renders that content in the same label element, which breaks the anchored match. Select those options via `options` instead (e.g. `options.filter({ hasText: label })`).