@elastic/eui-test-helpers 2.0.0 → 2.1.0

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

@@ -1,13 +1,17 @@
 /**
  * Stable selectors for
  * {@link https://eui.elastic.co/docs/components/forms/color-picker/|EuiColorPicker}.
- * `*_SELECTOR` values are CSS.
+ * `*_SELECTOR` values are CSS, `*_TEST_SUBJ` values are `data-test-subj` names EUI sets itself.
  */
 export declare const EuiColorPickerSelectors: {
-    /** The default text-input anchor. A custom `button` prop has no class of its own. */
+    /** Token EUI adds to the anchor's `data-test-subj`, on the default input and on a custom `button` alike. */
+    ANCHOR_TEST_SUBJ: string;
+    /** The anchor, whether the default text input or a custom `button`. */
     ANCHOR_SELECTOR: string;
     /** The popover panel, rendered in a portal and only while open. */
     PANEL_SELECTOR: string;
     /** A swatch button inside the panel. */
     SWATCH_SELECTOR: string;
+    /** The hex input inside the panel. Present only when `secondaryInputDisplay` is `top` or `bottom`. */
+    SECONDARY_INPUT_SELECTOR: string;
 };

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

@@ -15,13 +15,17 @@ exports.EuiColorPickerSelectors = void 0;
 /**
  * Stable selectors for
  * {@link https://eui.elastic.co/docs/components/forms/color-picker/|EuiColorPicker}.
- * `*_SELECTOR` values are CSS.
+ * `*_SELECTOR` values are CSS, `*_TEST_SUBJ` values are `data-test-subj` names EUI sets itself.
  */
 const EuiColorPickerSelectors = exports.EuiColorPickerSelectors = {
-  /** The default text-input anchor. A custom `button` prop has no class of its own. */
-  ANCHOR_SELECTOR: '.euiColorPicker__input',
+  /** Token EUI adds to the anchor's `data-test-subj`, on the default input and on a custom `button` alike. */
+  ANCHOR_TEST_SUBJ: 'euiColorPickerAnchor',
+  /** The anchor, whether the default text input or a custom `button`. */
+  ANCHOR_SELECTOR: '[data-test-subj~="euiColorPickerAnchor"]',
   /** The popover panel, rendered in a portal and only while open. */
   PANEL_SELECTOR: '[data-popover-panel].euiColorPicker__popoverPanel',
   /** A swatch button inside the panel. */
-  SWATCH_SELECTOR: '.euiColorPickerSwatch'
+  SWATCH_SELECTOR: '.euiColorPickerSwatch',
+  /** The hex input inside the panel. Present only when `secondaryInputDisplay` is `top` or `bottom`. */
+  SECONDARY_INPUT_SELECTOR: '[data-test-subj^="euiColorPickerInput_"]'
 };

package/lib/cjs/playwright/base_object.js

@@ -13,11 +13,13 @@ exports.BaseObject = void 0;
  */
 
 /**
- * Matches one space-separated token in `data-test-subj`, not the whole
- * attribute value. `getByTestId` does an exact match and misses components
- * like `EuiColorPicker` that add their own token to the consumer's subj.
+ * Matches space-separated tokens in `data-test-subj`, not the whole attribute
+ * value. `getByTestId` does an exact match and misses components like
+ * `EuiColorPicker` that add their own token to the consumer's subj. A
+ * `testSubj` with spaces (`colorEditorColorPicker 0`, a Kibana convention) is
+ * split so every token must be present, in any order.
  */
-const testSubjSelector = testSubj => `[data-test-subj~="${testSubj.replace(/\\/g, '\\\\').replace(/"/g, '\\"')}"]`;
+const testSubjSelector = testSubj => testSubj.trim().split(/\s+/).map(token => `[data-test-subj~="${token.replace(/\\/g, '\\\\').replace(/"/g, '\\"')}"]`).join('');
 
 /**
  * Base class for Playwright Component Objects — semantic wrappers around a

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

@@ -1,12 +1,12 @@
-import type { Locator } from '@playwright/test';
+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/color-picker/ EuiColorPicker}.
  *
- * `testSubj` must be set on `EuiColorPicker` itself. Covers only the default
- * text-input anchor, not a custom `button` prop. See the package README for
- * what this does not cover.
+ * `testSubj` must be set on `EuiColorPicker` itself. `locator` is the anchor:
+ * the default text input, or the element passed as the `button` prop. See the
+ * package README for what this does not cover.
  */
 export declare class EuiColorPickerObject extends BaseObject {
     constructor(scope: ObjectScope, testSubj: string);
@@ -17,4 +17,25 @@ export declare class EuiColorPickerObject extends BaseObject {
     get panel(): Locator;
     /** The swatch buttons inside {@link panel}. */
     get swatches(): Locator;
+    /**
+     * Type `color` into the hex input and verify it was accepted. With the
+     * default anchor that input is the anchor itself. With a custom `button`
+     * the input lives inside the panel, so the picker is opened, filled and
+     * closed again. Throws if the panel has no input
+     * (`secondaryInputDisplay="none"`).
+     */
+    setColor(color: string): Promise<void>;
+    /**
+     * The color shown in the hex input, uppercased. With a custom `button` the
+     * picker is opened to read it and closed again.
+     */
+    getColor(): Promise<string>;
+    private isInputAnchor;
+    /**
+     * Click a custom `button` anchor, which toggles the panel, and wait for the
+     * panel to follow. Only used with a custom `button`: the default input
+     * anchor opens on click but does not close on a second one.
+     */
+    private toggle;
+    private secondaryInput;
 }

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiColorPickerObject = void 0;
+var _test = require("@playwright/test");
 var _base_object = require("../../base_object");
 var _selectors = require("../../../components/color_picker/selectors");
 /*
@@ -18,9 +19,9 @@ var _selectors = require("../../../components/color_picker/selectors");
  * Playwright Component Object for {@link
  * https://eui.elastic.co/docs/components/forms/color-picker/ EuiColorPicker}.
  *
- * `testSubj` must be set on `EuiColorPicker` itself. Covers only the default
- * text-input anchor, not a custom `button` prop. See the package README for
- * what this does not cover.
+ * `testSubj` must be set on `EuiColorPicker` itself. `locator` is the anchor:
+ * the default text input, or the element passed as the `button` prop. See the
+ * package README for what this does not cover.
  */
 class EuiColorPickerObject extends _base_object.BaseObject {
   constructor(scope, testSubj) {
@@ -39,5 +40,69 @@ class EuiColorPickerObject extends _base_object.BaseObject {
   get swatches() {
     return this.panel.locator(_selectors.EuiColorPickerSelectors.SWATCH_SELECTOR);
   }
+
+  /**
+   * Type `color` into the hex input and verify it was accepted. With the
+   * default anchor that input is the anchor itself. With a custom `button`
+   * the input lives inside the panel, so the picker is opened, filled and
+   * closed again. Throws if the panel has no input
+   * (`secondaryInputDisplay="none"`).
+   */
+  async setColor(color) {
+    // EUI echoes the value back uppercased.
+    const expected = color.toUpperCase();
+    if (await this.isInputAnchor()) {
+      await this.root.fill(color);
+      await (0, _test.expect)(this.root).toHaveValue(expected);
+      await this.root.blur();
+      return;
+    }
+    await this.toggle();
+    const input = await this.secondaryInput();
+    await input.fill(color);
+    await (0, _test.expect)(input).toHaveValue(expected);
+    await this.toggle();
+  }
+
+  /**
+   * The color shown in the hex input, uppercased. With a custom `button` the
+   * picker is opened to read it and closed again.
+   */
+  async getColor() {
+    if (await this.isInputAnchor()) {
+      return this.root.inputValue();
+    }
+    await this.toggle();
+    const value = await (await this.secondaryInput()).inputValue();
+    await this.toggle();
+    return value;
+  }
+  async isInputAnchor() {
+    return this.root.evaluate(el => el.tagName === 'INPUT');
+  }
+
+  /**
+   * Click a custom `button` anchor, which toggles the panel, and wait for the
+   * panel to follow. Only used with a custom `button`: the default input
+   * anchor opens on click but does not close on a second one.
+   */
+  async toggle() {
+    const wasOpen = (await this.panel.count()) > 0;
+    await this.root.click();
+    if (wasOpen) {
+      await this.panel.waitFor({
+        state: 'detached'
+      });
+    } else {
+      await (0, _test.expect)(this.panel).toHaveAttribute('data-popover-open', 'true');
+    }
+  }
+  async secondaryInput() {
+    const input = this.panel.locator(_selectors.EuiColorPickerSelectors.SECONDARY_INPUT_SELECTOR);
+    if ((await input.count()) === 0) {
+      throw new Error(`EuiColorPicker "${this.testSubj}" uses a custom button and its panel has no hex input. ` + `Set secondaryInputDisplay to "top" or "bottom" to read or set its color.`);
+    }
+    return input;
+  }
 }
 exports.EuiColorPickerObject = EuiColorPickerObject;

package/lib/cjs/selectors.d.ts

@@ -16,9 +16,11 @@ export declare const selectors: {
         HEADER_CELL_SELECTOR_PREFIX: string;
     };
     readonly colorPicker: {
+        ANCHOR_TEST_SUBJ: string;
         ANCHOR_SELECTOR: string;
         PANEL_SELECTOR: string;
         SWATCH_SELECTOR: string;
+        SECONDARY_INPUT_SELECTOR: string;
     };
     readonly comboBox: {
         ROOT_SELECTOR: string;

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

@@ -1,13 +1,17 @@
 /**
  * Stable selectors for
  * {@link https://eui.elastic.co/docs/components/forms/color-picker/|EuiColorPicker}.
- * `*_SELECTOR` values are CSS.
+ * `*_SELECTOR` values are CSS, `*_TEST_SUBJ` values are `data-test-subj` names EUI sets itself.
  */
 export declare const EuiColorPickerSelectors: {
-    /** The default text-input anchor. A custom `button` prop has no class of its own. */
+    /** Token EUI adds to the anchor's `data-test-subj`, on the default input and on a custom `button` alike. */
+    ANCHOR_TEST_SUBJ: string;
+    /** The anchor, whether the default text input or a custom `button`. */
     ANCHOR_SELECTOR: string;
     /** The popover panel, rendered in a portal and only while open. */
     PANEL_SELECTOR: string;
     /** A swatch button inside the panel. */
     SWATCH_SELECTOR: string;
+    /** The hex input inside the panel. Present only when `secondaryInputDisplay` is `top` or `bottom`. */
+    SECONDARY_INPUT_SELECTOR: string;
 };

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

@@ -8,14 +8,18 @@
 /**
  * Stable selectors for
  * {@link https://eui.elastic.co/docs/components/forms/color-picker/|EuiColorPicker}.
- * `*_SELECTOR` values are CSS.
+ * `*_SELECTOR` values are CSS, `*_TEST_SUBJ` values are `data-test-subj` names EUI sets itself.
  */
 export const EuiColorPickerSelectors = {
-    /** The default text-input anchor. A custom `button` prop has no class of its own. */
-    ANCHOR_SELECTOR: '.euiColorPicker__input',
+    /** Token EUI adds to the anchor's `data-test-subj`, on the default input and on a custom `button` alike. */
+    ANCHOR_TEST_SUBJ: 'euiColorPickerAnchor',
+    /** The anchor, whether the default text input or a custom `button`. */
+    ANCHOR_SELECTOR: '[data-test-subj~="euiColorPickerAnchor"]',
     /** The popover panel, rendered in a portal and only while open. */
     PANEL_SELECTOR: '[data-popover-panel].euiColorPicker__popoverPanel',
     /** A swatch button inside the panel. */
     SWATCH_SELECTOR: '.euiColorPickerSwatch',
+    /** The hex input inside the panel. Present only when `secondaryInputDisplay` is `top` or `bottom`. */
+    SECONDARY_INPUT_SELECTOR: '[data-test-subj^="euiColorPickerInput_"]',
 };
 //# sourceMappingURL=selectors.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"selectors.js","sourceRoot":"","sources":["../../../../src/components/color_picker/selectors.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;;GAIG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,qFAAqF;IACrF,eAAe,EAAE,wBAAwB;IAEzC,mEAAmE;IACnE,cAAc,EAAE,mDAAmD;IAEnE,wCAAwC;IACxC,eAAe,EAAE,uBAAuB;CACzC,CAAC"}
+{"version":3,"file":"selectors.js","sourceRoot":"","sources":["../../../../src/components/color_picker/selectors.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH;;;;GAIG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG;IACrC,4GAA4G;IAC5G,gBAAgB,EAAE,sBAAsB;IAExC,uEAAuE;IACvE,eAAe,EAAE,0CAA0C;IAE3D,mEAAmE;IACnE,cAAc,EAAE,mDAAmD;IAEnE,wCAAwC;IACxC,eAAe,EAAE,uBAAuB;IAExC,sGAAsG;IACtG,wBAAwB,EAAE,0CAA0C;CACrE,CAAC"}

package/lib/esm/playwright/base_object.js

@@ -6,11 +6,17 @@
  * Side Public License, v 1.
  */
 /**
- * Matches one space-separated token in `data-test-subj`, not the whole
- * attribute value. `getByTestId` does an exact match and misses components
- * like `EuiColorPicker` that add their own token to the consumer's subj.
+ * Matches space-separated tokens in `data-test-subj`, not the whole attribute
+ * value. `getByTestId` does an exact match and misses components like
+ * `EuiColorPicker` that add their own token to the consumer's subj. A
+ * `testSubj` with spaces (`colorEditorColorPicker 0`, a Kibana convention) is
+ * split so every token must be present, in any order.
  */
-const testSubjSelector = (testSubj) => `[data-test-subj~="${testSubj.replace(/\\/g, '\\\\').replace(/"/g, '\\"')}"]`;
+const testSubjSelector = (testSubj) => testSubj
+    .trim()
+    .split(/\s+/)
+    .map((token) => `[data-test-subj~="${token.replace(/\\/g, '\\\\').replace(/"/g, '\\"')}"]`)
+    .join('');
 /**
  * Base class for Playwright Component Objects — semantic wrappers around a
  * single root `Locator` resolved from a `data-test-subj` inside the given

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;;;;GAIG;AACH,MAAM,gBAAgB,GAAG,CAAC,QAAgB,EAAU,EAAE,CACpD,qBAAqB,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAAC;AAEhF;;;;;;;;;;GAUG;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,OAAO,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC3D,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"}
+{"version":3,"file":"base_object.js","sourceRoot":"","sources":["../../../src/playwright/base_object.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAMH;;;;;;GAMG;AACH,MAAM,gBAAgB,GAAG,CAAC,QAAgB,EAAU,EAAE,CACpD,QAAQ;KACL,IAAI,EAAE;KACN,KAAK,CAAC,KAAK,CAAC;KACZ,GAAG,CACF,CAAC,KAAK,EAAE,EAAE,CACR,qBAAqB,KAAK,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,IAAI,CAC7E;KACA,IAAI,CAAC,EAAE,CAAC,CAAC;AAEd;;;;;;;;;;GAUG;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,OAAO,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC3D,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/color_picker/object.d.ts

@@ -1,12 +1,12 @@
-import type { Locator } from '@playwright/test';
+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/color-picker/ EuiColorPicker}.
  *
- * `testSubj` must be set on `EuiColorPicker` itself. Covers only the default
- * text-input anchor, not a custom `button` prop. See the package README for
- * what this does not cover.
+ * `testSubj` must be set on `EuiColorPicker` itself. `locator` is the anchor:
+ * the default text input, or the element passed as the `button` prop. See the
+ * package README for what this does not cover.
  */
 export declare class EuiColorPickerObject extends BaseObject {
     constructor(scope: ObjectScope, testSubj: string);
@@ -17,4 +17,25 @@ export declare class EuiColorPickerObject extends BaseObject {
     get panel(): Locator;
     /** The swatch buttons inside {@link panel}. */
     get swatches(): Locator;
+    /**
+     * Type `color` into the hex input and verify it was accepted. With the
+     * default anchor that input is the anchor itself. With a custom `button`
+     * the input lives inside the panel, so the picker is opened, filled and
+     * closed again. Throws if the panel has no input
+     * (`secondaryInputDisplay="none"`).
+     */
+    setColor(color: string): Promise<void>;
+    /**
+     * The color shown in the hex input, uppercased. With a custom `button` the
+     * picker is opened to read it and closed again.
+     */
+    getColor(): Promise<string>;
+    private isInputAnchor;
+    /**
+     * Click a custom `button` anchor, which toggles the panel, and wait for the
+     * panel to follow. Only used with a custom `button`: the default input
+     * anchor opens on click but does not close on a second one.
+     */
+    private toggle;
+    private secondaryInput;
 }

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

@@ -5,15 +5,16 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+import { expect } from '@playwright/test';
 import { BaseObject } from '../../base_object';
 import { EuiColorPickerSelectors } from '../../../components/color_picker/selectors';
 /**
  * Playwright Component Object for {@link
  * https://eui.elastic.co/docs/components/forms/color-picker/ EuiColorPicker}.
  *
- * `testSubj` must be set on `EuiColorPicker` itself. Covers only the default
- * text-input anchor, not a custom `button` prop. See the package README for
- * what this does not cover.
+ * `testSubj` must be set on `EuiColorPicker` itself. `locator` is the anchor:
+ * the default text input, or the element passed as the `button` prop. See the
+ * package README for what this does not cover.
  */
 export class EuiColorPickerObject extends BaseObject {
     constructor(scope, testSubj) {
@@ -30,5 +31,66 @@ export class EuiColorPickerObject extends BaseObject {
     get swatches() {
         return this.panel.locator(EuiColorPickerSelectors.SWATCH_SELECTOR);
     }
+    /**
+     * Type `color` into the hex input and verify it was accepted. With the
+     * default anchor that input is the anchor itself. With a custom `button`
+     * the input lives inside the panel, so the picker is opened, filled and
+     * closed again. Throws if the panel has no input
+     * (`secondaryInputDisplay="none"`).
+     */
+    async setColor(color) {
+        // EUI echoes the value back uppercased.
+        const expected = color.toUpperCase();
+        if (await this.isInputAnchor()) {
+            await this.root.fill(color);
+            await expect(this.root).toHaveValue(expected);
+            await this.root.blur();
+            return;
+        }
+        await this.toggle();
+        const input = await this.secondaryInput();
+        await input.fill(color);
+        await expect(input).toHaveValue(expected);
+        await this.toggle();
+    }
+    /**
+     * The color shown in the hex input, uppercased. With a custom `button` the
+     * picker is opened to read it and closed again.
+     */
+    async getColor() {
+        if (await this.isInputAnchor()) {
+            return this.root.inputValue();
+        }
+        await this.toggle();
+        const value = await (await this.secondaryInput()).inputValue();
+        await this.toggle();
+        return value;
+    }
+    async isInputAnchor() {
+        return this.root.evaluate((el) => el.tagName === 'INPUT');
+    }
+    /**
+     * Click a custom `button` anchor, which toggles the panel, and wait for the
+     * panel to follow. Only used with a custom `button`: the default input
+     * anchor opens on click but does not close on a second one.
+     */
+    async toggle() {
+        const wasOpen = (await this.panel.count()) > 0;
+        await this.root.click();
+        if (wasOpen) {
+            await this.panel.waitFor({ state: 'detached' });
+        }
+        else {
+            await expect(this.panel).toHaveAttribute('data-popover-open', 'true');
+        }
+    }
+    async secondaryInput() {
+        const input = this.panel.locator(EuiColorPickerSelectors.SECONDARY_INPUT_SELECTOR);
+        if ((await input.count()) === 0) {
+            throw new Error(`EuiColorPicker "${this.testSubj}" uses a custom button and its panel has no hex input. ` +
+                `Set secondaryInputDisplay to "top" or "bottom" to read or set its color.`);
+        }
+        return input;
+    }
 }
 //# sourceMappingURL=object.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"object.js","sourceRoot":"","sources":["../../../../../src/playwright/components/color_picker/object.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,EAAE,UAAU,EAAoB,MAAM,mBAAmB,CAAC;AACjE,OAAO,EAAE,uBAAuB,EAAE,MAAM,4CAA4C,CAAC;AAErF;;;;;;;GAOG;AACH,MAAM,OAAO,oBAAqB,SAAQ,UAAU;IAClD,YAAY,KAAkB,EAAE,QAAgB;QAC9C,KAAK,CAAC,KAAK,EAAE,QAAQ,EAAE,uBAAuB,CAAC,eAAe,CAAC,CAAC;IAClE,CAAC;IAED;;;OAGG;IACH,IAAW,KAAK;QACd,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,OAAO,CAAC,uBAAuB,CAAC,cAAc,CAAC,CAAC;IAC1E,CAAC;IAED,+CAA+C;IAC/C,IAAW,QAAQ;QACjB,OAAO,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,uBAAuB,CAAC,eAAe,CAAC,CAAC;IACrE,CAAC;CACF"}
+{"version":3,"file":"object.js","sourceRoot":"","sources":["../../../../../src/playwright/components/color_picker/object.ts"],"names":[],"mappings":"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"}

package/lib/esm/selectors.d.ts

@@ -16,9 +16,11 @@ export declare const selectors: {
         HEADER_CELL_SELECTOR_PREFIX: string;
     };
     readonly colorPicker: {
+        ANCHOR_TEST_SUBJ: string;
         ANCHOR_SELECTOR: string;
         PANEL_SELECTOR: string;
         SWATCH_SELECTOR: string;
+        SECONDARY_INPUT_SELECTOR: string;
     };
     readonly comboBox: {
         ROOT_SELECTOR: string;

package/package.json

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

package/src/components/color_picker/README.md

@@ -8,23 +8,25 @@ Playwright Component Object for [EuiColorPicker](https://eui.elastic.co/docs/com
 import { EuiColorPickerObject } from '@elastic/eui-test-helpers';
 
 const colorPicker = new EuiColorPickerObject(page, 'myColorPicker');
-await colorPicker.locator.click();
-await colorPicker.swatches.first().click();
+await colorPicker.setColor('#ff0000');
+expect(await colorPicker.getColor()).toBe('#FF0000');
 ```
 
 Set `data-test-subj` on `EuiColorPicker` itself. `EuiColorPicker` renders it on its anchor as `euiColorPickerAnchor <yourSubj>`, a compound value the shared root lookup matches by token. Without that, `getByTestId` on your own subj finds nothing.
 
+`locator` is the anchor: the default text input, or the element you passed as the `button` prop.
+
 ## API
 
 | Member | Description |
 |---|---|
+| `setColor(color)` | Type `color` into the hex input and verify it was accepted. With the default anchor that input is the anchor itself. With a custom `button` the input is inside the panel, so the picker is opened, filled and closed again. Throws if the panel has no input (`secondaryInputDisplay="none"`). |
+| `getColor()` | The color shown in the hex input, uppercased. With a custom `button` the picker is opened to read it and closed again. |
 | `panel` | `Locator` for the popover panel. Rendered in a portal, so it is found on the page, not under the anchor. Resolves to zero elements while closed, and gets `data-popover-open="true"` once open. |
 | `swatches` | `Locator` for the swatch buttons inside `panel`. |
 
-`locator` is the anchor, a plain text input. Click it to open the picker, and use Playwright's own `inputValue()`/`fill()` to read or set the color.
-
 ## Deliberately out of scope
 
-- **A custom `button` prop**: only the default text-input anchor has a class the component-type guard can rely on. A custom button has none, so it is not supported.
 - **`open()`/`close()` methods**: `EuiPopover` only sets `aria-expanded`/`aria-controls` on button-like toggles, and the default anchor is an input, so the signal `EuiPopoverObject` relies on is missing. Click `locator` and assert on `panel` instead.
+- **`display="inline"`**: there is no anchor and no popover, the picker renders in place. Use plain Playwright locators.
 - **Several pickers open at once**: `panel` is found by class on the page, so two open pickers would both match. No consumer has needed this.