@axinom/mosaic-e2e-ui-selectors 0.14.0-rc.11 → 0.14.0-rc.13

package/dist/component-models/form/form-field.d.ts

@@ -1,4 +1,4 @@
-import { FrameLocator, Page } from 'playwright-core';
+import { FrameLocator, Locator, Page } from 'playwright-core';
 import { ComponentModel } from '../../component-model';
 /**
  * Abstract base class for all FormField component models.
@@ -12,9 +12,9 @@ export declare abstract class FormField extends ComponentModel {
      */
     constructor(parent: Page | FrameLocator | ComponentModel, xpath?: string, nth?: number);
     /** A locator to the field label. */
-    readonly label: import("playwright-core").Locator;
+    readonly label: Locator;
     /** A locator to the field error message. */
-    readonly error: import("playwright-core").Locator;
+    readonly error: Locator;
 }
 /**
  * Abstract base class for FormField component models of a specific type.
@@ -22,6 +22,8 @@ export declare abstract class FormField extends ComponentModel {
 export declare abstract class TypedFormField extends FormField {
     /** A selector which will match the field if the element type is correct. */
     protected abstract get fieldTypeValidator(): string;
+    /** A helper method to create global locators - This helps with locating globally across the entire DOM, rather than being scoped to the form */
+    protected getGlobalLocator(selector: string): Locator;
     /**
      * This method verifies that the field is visible, and that the actual
      * element matches the model being used.

package/dist/component-models/form/form-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-field.d.ts","sourceRoot":"","sources":["../../../src/component-models/form/form-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD;;GAEG;AACH,8BAAsB,SAAU,SAAQ,cAAc;IACpD;;;;;OAKG;gBAED,MAAM,EAAE,IAAI,GAAG,YAAY,GAAG,cAAc,EAC5C,KAAK,SAAoC,EACzC,GAAG,SAAI;IAKT,oCAAoC;IACpC,QAAQ,CAAC,KAAK,oCAA4D;IAE1E,4CAA4C;IAC5C,QAAQ,CAAC,KAAK,oCAA4D;CAC3E;AAED;;GAEG;AACH,8BAAsB,cAAe,SAAQ,SAAS;IACpD,4EAA4E;IAC5E,SAAS,CAAC,QAAQ,KAAK,kBAAkB,IAAI,MAAM,CAAC;IAEpD;;;OAGG;IACG,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC;CAWvC"}
+{"version":3,"file":"form-field.d.ts","sourceRoot":"","sources":["../../../src/component-models/form/form-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEvD;;GAEG;AACH,8BAAsB,SAAU,SAAQ,cAAc;IACpD;;;;;OAKG;gBAED,MAAM,EAAE,IAAI,GAAG,YAAY,GAAG,cAAc,EAC5C,KAAK,SAAoC,EACzC,GAAG,SAAI;IAKT,oCAAoC;IACpC,QAAQ,CAAC,KAAK,UAA4D;IAE1E,4CAA4C;IAC5C,QAAQ,CAAC,KAAK,UAA4D;CAC3E;AAED;;GAEG;AACH,8BAAsB,cAAe,SAAQ,SAAS;IACpD,4EAA4E;IAC5E,SAAS,CAAC,QAAQ,KAAK,kBAAkB,IAAI,MAAM,CAAC;IAEpD,gJAAgJ;IAChJ,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO;IAIrD;;;OAGG;IACG,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC;CAWvC"}

package/dist/component-models/form/form-field.js

@@ -25,6 +25,10 @@ exports.FormField = FormField;
  * Abstract base class for FormField component models of a specific type.
  */
 class TypedFormField extends FormField {
+    /** A helper method to create global locators - This helps with locating globally across the entire DOM, rather than being scoped to the form */
+    getGlobalLocator(selector) {
+        return this.root.locator(selector);
+    }
     /**
      * This method verifies that the field is visible, and that the actual
      * element matches the model being used.

package/dist/component-models/form/form-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-field.js","sourceRoot":"","sources":["../../../src/component-models/form/form-field.ts"],"names":[],"mappings":";;;AACA,2DAAuD;AAEvD;;GAEG;AACH,MAAsB,SAAU,SAAQ,gCAAc;IACpD;;;;;OAKG;IACH,YACE,MAA4C,EAC5C,KAAK,GAAG,iCAAiC,EACzC,GAAG,GAAG,CAAC;QAEP,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;QAG5B,oCAAoC;QAC3B,UAAK,GAAG,IAAI,CAAC,UAAU,CAAC,uCAAuC,CAAC,CAAC;QAE1E,4CAA4C;QACnC,UAAK,GAAG,IAAI,CAAC,UAAU,CAAC,uCAAuC,CAAC,CAAC;IAN1E,CAAC;CAOF;AApBD,8BAoBC;AAED;;GAEG;AACH,MAAsB,cAAe,SAAQ,SAAS;IAIpD;;;OAGG;IACH,KAAK,CAAC,eAAe;QACnB,IAAI;YACF,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,OAAO,CAAC;gBACrD,KAAK,EAAE,SAAS;aACjB,CAAC,CAAC;SACJ;QAAC,WAAM;YACN,MAAM,IAAI,KAAK,CACb,2DAA2D,CAC5D,CAAC;SACH;IACH,CAAC;CACF;AAnBD,wCAmBC"}
+{"version":3,"file":"form-field.js","sourceRoot":"","sources":["../../../src/component-models/form/form-field.ts"],"names":[],"mappings":";;;AACA,2DAAuD;AAEvD;;GAEG;AACH,MAAsB,SAAU,SAAQ,gCAAc;IACpD;;;;;OAKG;IACH,YACE,MAA4C,EAC5C,KAAK,GAAG,iCAAiC,EACzC,GAAG,GAAG,CAAC;QAEP,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;QAG5B,oCAAoC;QAC3B,UAAK,GAAG,IAAI,CAAC,UAAU,CAAC,uCAAuC,CAAC,CAAC;QAE1E,4CAA4C;QACnC,UAAK,GAAG,IAAI,CAAC,UAAU,CAAC,uCAAuC,CAAC,CAAC;IAN1E,CAAC;CAOF;AApBD,8BAoBC;AAED;;GAEG;AACH,MAAsB,cAAe,SAAQ,SAAS;IAIpD,gJAAgJ;IACtI,gBAAgB,CAAC,QAAgB;QACzC,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACrC,CAAC;IAED;;;OAGG;IACH,KAAK,CAAC,eAAe;QACnB,IAAI;YACF,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,OAAO,CAAC;gBACrD,KAAK,EAAE,SAAS;aACjB,CAAC,CAAC;SACJ;QAAC,WAAM;YACN,MAAM,IAAI,KAAK,CACb,2DAA2D,CAC5D,CAAC;SACH;IACH,CAAC;CACF;AAxBD,wCAwBC"}

package/dist/component-models/form/select-field.d.ts

@@ -1,3 +1,4 @@
+import { Locator } from 'playwright-core';
 import { TypedFormField } from './form-field';
 /**
  * A model for a SelectField (dropdown) component.
@@ -5,8 +6,12 @@ import { TypedFormField } from './form-field';
 export declare class SelectField extends TypedFormField {
     /** @inheritdoc */
     protected get fieldTypeValidator(): string;
+    protected readonly input: Locator;
+    protected readonly listbox: Locator;
     /** A locator to the select element (<select>..). */
-    protected readonly select: import("playwright-core").Locator;
+    protected readonly select: Locator;
+    /** A locator to the select an option from the combobox. */
+    protected readonly option: (value: string) => Locator;
     /** This method verifies the field type and sets the selected value. */
     setValue(value: string): Promise<void>;
     /**

package/dist/component-models/form/select-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select-field.d.ts","sourceRoot":"","sources":["../../../src/component-models/form/select-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C;;GAEG;AACH,qBAAa,WAAY,SAAQ,cAAc;IAC7C,kBAAkB;IAClB,cAAuB,kBAAkB,IAAI,MAAM,CAElD;IAED,oDAAoD;IACpD,SAAS,CAAC,QAAQ,CAAC,MAAM,oCAA+B;IAExD,uEAAuE;IACjE,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAM5C;;;OAGG;IACG,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAMnD,0EAA0E;IACpE,QAAQ,IAAI,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;CAKzC"}
+{"version":3,"file":"select-field.d.ts","sourceRoot":"","sources":["../../../src/component-models/form/select-field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C;;GAEG;AACH,qBAAa,WAAY,SAAQ,cAAc;IAC7C,kBAAkB;IAClB,cAAuB,kBAAkB,IAAI,MAAM,CAElD;IAED,SAAS,CAAC,QAAQ,CAAC,KAAK,UAAgD;IACxE,SAAS,CAAC,QAAQ,CAAC,OAAO,UAAkD;IAE5E,oDAAoD;IACpD,SAAS,CAAC,QAAQ,CAAC,MAAM,UAA+B;IAExD,2DAA2D;IAC3D,SAAS,CAAC,QAAQ,CAAC,MAAM,UAAW,MAAM,KAAG,OAAO,CAGhD;IAEJ,uEAAuE;IACjE,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAW5C;;;OAGG;IACG,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAWnD,0EAA0E;IACpE,QAAQ,IAAI,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC;CAKzC"}

package/dist/component-models/form/select-field.js

@@ -8,8 +8,12 @@ const form_field_1 = require("./form-field");
 class SelectField extends form_field_1.TypedFormField {
     constructor() {
         super(...arguments);
+        this.input = this.getLocator('//input[@role="combobox"]');
+        this.listbox = this.getGlobalLocator('//ul[@role="listbox"]');
         /** A locator to the select element (<select>..). */
         this.select = this.getLocator('//select');
+        /** A locator to the select an option from the combobox. */
+        this.option = (value) => this.getGlobalLocator(`//li[@role="option" and normalize-space(text())="${value}"]`);
     }
     /** @inheritdoc */
     get fieldTypeValidator() {
@@ -19,7 +23,12 @@ class SelectField extends form_field_1.TypedFormField {
     async setValue(value) {
         // sanity check
         await this.verifyFieldType();
-        await this.select.selectOption(value);
+        await this.input.click();
+        await this.input.type(value);
+        await this.listbox.waitFor({ state: 'visible' });
+        const optionElement = this.option(value);
+        await optionElement.waitFor({ state: 'visible' });
+        await optionElement.click();
     }
     /**
      * This method verifies the field type and sets the selected value by label.
@@ -28,14 +37,18 @@ class SelectField extends form_field_1.TypedFormField {
     async setValueByLabel(label) {
         // sanity check
         await this.verifyFieldType();
-        await this.select.selectOption({ label });
+        await this.input.click();
+        await this.input.type(label);
+        await this.listbox.waitFor({ state: 'visible' });
+        const optionElement = this.option(label);
+        await optionElement.waitFor({ state: 'visible' });
+        await optionElement.click();
     }
     /** This method verifies the field type and returns the selected value. */
     async getValue() {
-        var _a;
         // sanity check
         await this.verifyFieldType();
-        return (_a = (await this.select.inputValue())) !== null && _a !== void 0 ? _a : '';
+        return await this.input.inputValue();
     }
 }
 exports.SelectField = SelectField;

package/dist/component-models/form/select-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-field.js","sourceRoot":"","sources":["../../../src/component-models/form/select-field.ts"],"names":[],"mappings":";;;AAAA,6CAA8C;AAE9C;;GAEG;AACH,MAAa,WAAY,SAAQ,2BAAc;IAA/C;;QAME,oDAAoD;QACjC,WAAM,GAAG,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;IAyB1D,CAAC;IA/BC,kBAAkB;IAClB,IAAuB,kBAAkB;QACvC,OAAO,4BAA4B,CAAC;IACtC,CAAC;IAKD,uEAAuE;IACvE,KAAK,CAAC,QAAQ,CAAC,KAAa;QAC1B,eAAe;QACf,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC;QAC7B,MAAM,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC;IAED;;;OAGG;IACH,KAAK,CAAC,eAAe,CAAC,KAAa;QACjC,eAAe;QACf,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC;QAC7B,MAAM,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAC5C,CAAC;IAED,0EAA0E;IAC1E,KAAK,CAAC,QAAQ;;QACZ,eAAe;QACf,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC;QAC7B,OAAO,MAAA,CAAC,MAAM,IAAI,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,mCAAI,EAAE,CAAC;IAChD,CAAC;CACF;AAhCD,kCAgCC"}
+{"version":3,"file":"select-field.js","sourceRoot":"","sources":["../../../src/component-models/form/select-field.ts"],"names":[],"mappings":";;;AACA,6CAA8C;AAE9C;;GAEG;AACH,MAAa,WAAY,SAAQ,2BAAc;IAA/C;;QAMqB,UAAK,GAAG,IAAI,CAAC,UAAU,CAAC,2BAA2B,CAAC,CAAC;QACrD,YAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,uBAAuB,CAAC,CAAC;QAE5E,oDAAoD;QACjC,WAAM,GAAG,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;QAExD,2DAA2D;QACxC,WAAM,GAAG,CAAC,KAAa,EAAW,EAAE,CACrD,IAAI,CAAC,gBAAgB,CACnB,oDAAoD,KAAK,IAAI,CAC9D,CAAC;IAmCN,CAAC;IAlDC,kBAAkB;IAClB,IAAuB,kBAAkB;QACvC,OAAO,4BAA4B,CAAC;IACtC,CAAC;IAcD,uEAAuE;IACvE,KAAK,CAAC,QAAQ,CAAC,KAAa;QAC1B,eAAe;QACf,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC;QAC7B,MAAM,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;QACzB,MAAM,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC7B,MAAM,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;QACjD,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACzC,MAAM,aAAa,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;QAClD,MAAM,aAAa,CAAC,KAAK,EAAE,CAAC;IAC9B,CAAC;IAED;;;OAGG;IACH,KAAK,CAAC,eAAe,CAAC,KAAa;QACjC,eAAe;QACf,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC;QAC7B,MAAM,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;QACzB,MAAM,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC7B,MAAM,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;QACjD,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACzC,MAAM,aAAa,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;QAClD,MAAM,aAAa,CAAC,KAAK,EAAE,CAAC;IAC9B,CAAC;IAED,0EAA0E;IAC1E,KAAK,CAAC,QAAQ;QACZ,eAAe;QACf,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC;QAC7B,OAAO,MAAM,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;IACvC,CAAC;CACF;AAnDD,kCAmDC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axinom/mosaic-e2e-ui-selectors",
-  "version": "0.14.0-rc.11",
+  "version": "0.14.0-rc.13",
   "description": "Component models for testing Axinom Mosaic applications with Playwright.",
   "author": "Axinom",
   "license": "PROPRIETARY",
@@ -32,5 +32,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "45f7a689961673ef06813544d1f2af49f7e352ee"
+  "gitHead": "f53dafedbd92684becb0b4aba9b2aea25da2f6c4"
 }

package/src/component-models/form/form-field.ts

@@ -1,4 +1,4 @@
-import { FrameLocator, Page } from 'playwright-core';
+import { FrameLocator, Locator, Page } from 'playwright-core';
 import { ComponentModel } from '../../component-model';
 
 /**
@@ -33,6 +33,11 @@ export abstract class TypedFormField extends FormField {
   /** A selector which will match the field if the element type is correct. */
   protected abstract get fieldTypeValidator(): string;
 
+  /** A helper method to create global locators - This helps with locating globally across the entire DOM, rather than being scoped to the form */
+  protected getGlobalLocator(selector: string): Locator {
+    return this.root.locator(selector);
+  }
+
   /**
    * This method verifies that the field is visible, and that the actual
    * element matches the model being used.

package/src/component-models/form/select-field.ts

@@ -1,3 +1,4 @@
+import { Locator } from 'playwright-core';
 import { TypedFormField } from './form-field';
 
 /**
@@ -9,14 +10,28 @@ export class SelectField extends TypedFormField {
     return '[@data-test-type="Select"]';
   }
 
+  protected readonly input = this.getLocator('//input[@role="combobox"]');
+  protected readonly listbox = this.getGlobalLocator('//ul[@role="listbox"]');
+
   /** A locator to the select element (<select>..). */
   protected readonly select = this.getLocator('//select');
 
+  /** A locator to the select an option from the combobox. */
+  protected readonly option = (value: string): Locator =>
+    this.getGlobalLocator(
+      `//li[@role="option" and normalize-space(text())="${value}"]`,
+    );
+
   /** This method verifies the field type and sets the selected value. */
   async setValue(value: string): Promise<void> {
     // sanity check
     await this.verifyFieldType();
-    await this.select.selectOption(value);
+    await this.input.click();
+    await this.input.type(value);
+    await this.listbox.waitFor({ state: 'visible' });
+    const optionElement = this.option(value);
+    await optionElement.waitFor({ state: 'visible' });
+    await optionElement.click();
   }
 
   /**
@@ -26,13 +41,18 @@ export class SelectField extends TypedFormField {
   async setValueByLabel(label: string): Promise<void> {
     // sanity check
     await this.verifyFieldType();
-    await this.select.selectOption({ label });
+    await this.input.click();
+    await this.input.type(label);
+    await this.listbox.waitFor({ state: 'visible' });
+    const optionElement = this.option(label);
+    await optionElement.waitFor({ state: 'visible' });
+    await optionElement.click();
   }
 
   /** This method verifies the field type and returns the selected value. */
   async getValue(): Promise<string | null> {
     // sanity check
     await this.verifyFieldType();
-    return (await this.select.inputValue()) ?? '';
+    return await this.input.inputValue();
   }
 }