@axinom/mosaic-e2e-ui-selectors 0.1.0-rc.3

package/README.md

@@ -0,0 +1,55 @@
+# @axinom/mosaic-e2e-ui-selectors
+
+## About the Package
+
+This package is part of the Axinom Mosaic development platform. More information
+can be found at https://portal.axinom.com/mosaic.
+
+This library models components in the Mosaic UI library, `@axinom/mosaic-ui` for
+use in Playwright tests. Exported class `UiWorkflowsModel` provides a model to
+navigate the DOM tree and to perform operations and assertions with Playwright.
+
+This library should be used to model customized services. It should be used in
+concert with `@axinom/mosaic-page-models` which models the Mosaic management
+system including the shell UI and managed services.
+
+## License
+
+This package can be licensed under the
+[Axinom Products Licensing Agreement](https://portal.axinom.com/mosaic/contracts/products-licensing-agreement)
+or evaluated under the
+[Axinom Products Evaluation Agreement](https://portal.axinom.com/mosaic/contracts/products-evaluation-agreement).  
+No part of Axinom's software may be copied, modified, propagated, or distributed
+except in accordance with the terms contained in the Axinom Products Licensing
+Agreement and Axinom Products Evaluation Agreement.
+
+## Library Conventions
+
+Many conventions should be obvious from reading the code. Still, for clarity
+there are some, maybe less obvious, conventions described here. The library is
+designed to leverage the capabilities of intellisense to guide a test author and
+to minimise the need to refer to documentation and source. Conventions are
+designed to foster intuition in the user, and to improve readability of tests.
+
+- All models are extended from the `ComponentModel` class.
+- If the desired functionality of an element can be achieved with a `Locator`
+  then return a `Locator` rather than modelling behavior through additional
+  methods and properties.
+
+Exposing `Locators` empowers the test author, e.g. by enabling expressive
+`expect` statements which wait gracefully. There are exceptions to the rule,
+e.g. where an element is a generic container that could contain any other UI
+components, a `ComponentModel` can be more flexible as it has the `getChild`
+method.
+
+- Classes extending `ComponentModel` should mirror components defined in the UI
+  library where possible. The naming and structure should be aligned.
+- Method parameters should be simple. Preferably just strings and numbers with
+  sufficient doc comments to guide the user.
+
+Enums and typed objects as parameters are good for enforcing type safety but
+they require an additional level of introspection when authoring tests. If a
+test fails due to a string typo its easy to fix. If there is a limited set of
+options which can be codified, consider a method for each so that intellisense
+will list them alongside other methods and properties (e.g. see
+`UntypedFormField`).

package/dist/component-model.d.ts

@@ -0,0 +1,58 @@
+import { FrameLocator, Locator, Page } from 'playwright-core';
+/** Interface for a ComponentModel constructor. */
+interface ComponentModelType<TModel extends ComponentModel> {
+    new (parent: Page | FrameLocator | ComponentModel, xpath?: string, nth?: number): TModel;
+}
+/**
+ * Base class for UI component models. A component model is an abstraction of
+ * a playwright locator. Specific UI components can be modelled by extending
+ * this class and a UI structure can be represented through composition.
+ *
+ * A component model is initiated with a parent object and an xpath. The DOM
+ * element which is represented by the model is found by applying the xpath
+ * relative to the parent.
+ *
+ * The `getLocator` method exposes a playwright locator. This method can be
+ * used with 0 arguments to get a locator directly to the DOM element the model
+ * represents, or it  can be used with an xpath argument to get a relative
+ * element.
+ *
+ * Only XPATH selectors can be used. This is because xpaths are combined
+ * through string concatenation so that the selector for a component model is
+ * always absolute. An absolute xpath is convenient when debugging failed
+ * matches as it can be copied and analyzed with browser dev tools. This
+ * approach was preferred over using Playwright relative locators because
+ * relative locators are logged in test output as a series of selectors,
+ * possibly using mixed technologies.
+ */
+export declare class ComponentModel {
+    /**
+     * A model which represents a DOM element.
+     * @param parent  The playwright page object, frame or component model to be used as the parent of this component.
+     * @param xpath  A relative xpath to this component from the parent.
+     * @param nth  Optional position of this component among xpath matches. Position is 1 indexed. Negative numbers count from the end.
+     */
+    constructor(parent: Page | FrameLocator | ComponentModel, xpath: string, nth?: number);
+    /** The root playwright entity from which to resolve this component model's xpath. */
+    protected root: Page | FrameLocator;
+    /** An absolute xpath to the DOM element that this component model represents. */
+    readonly xpath: string;
+    /** This method gets a locator to the DOM element represented by this component model. */
+    getLocator(): Locator;
+    /**
+     * This method gets a locator to a DOM element relative to the element represented by this component model.
+     * @param xpath  An xpath relative to this component.
+     * @param nth  Optional position among matches. Position is 1 indexed. Negative numbers count from the end.
+     */
+    getLocator(xpath: string, nth?: number): Locator;
+    /**
+     * This method gets a child component model with a provided type. This is useful
+     * for modelling a page where the UI is composed in a custom manner.
+     * @param model  A ComponentModel type. e.g. `ToggleButton` / `Modal`
+     * @param xpath  An optional xpath relative to this component. If not provided, the model's default xpath will be used.
+     * @param nth  Optional position among matches. Position is 1 indexed. Negative numbers count from the end.
+     */
+    getChildOfType<TModel extends ComponentModel>(model: ComponentModelType<TModel>, xpath?: string, nth?: number): TModel;
+}
+export {};
+//# sourceMappingURL=component-model.d.ts.map

package/dist/component-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-model.d.ts","sourceRoot":"","sources":["../src/component-model.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAE9D,kDAAkD;AAClD,UAAU,kBAAkB,CAAC,MAAM,SAAS,cAAc;IACxD,KACE,MAAM,EAAE,IAAI,GAAG,YAAY,GAAG,cAAc,EAC5C,KAAK,CAAC,EAAE,MAAM,EACd,GAAG,CAAC,EAAE,MAAM,GACX,MAAM,CAAC;CACX;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,cAAc;IACzB;;;;;OAKG;gBAED,MAAM,EAAE,IAAI,GAAG,YAAY,GAAG,cAAc,EAC5C,KAAK,EAAE,MAAM,EACb,GAAG,CAAC,EAAE,MAAM;IAgBd,qFAAqF;IACrF,SAAS,CAAC,IAAI,EAAE,IAAI,GAAG,YAAY,CAAC;IAEpC,iFAAiF;IACjF,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IAEvB,yFAAyF;IACzF,UAAU,IAAI,OAAO;IACrB;;;;OAIG;IACH,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO;IAWhD;;;;;;OAMG;IACH,cAAc,CAAC,MAAM,SAAS,cAAc,EAC1C,KAAK,EAAE,kBAAkB,CAAC,MAAM,CAAC,EACjC,KAAK,CAAC,EAAE,MAAM,EACd,GAAG,CAAC,EAAE,MAAM,GACX,MAAM;CAGV"}

package/dist/component-model.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ComponentModel = void 0;
+/**
+ * Base class for UI component models. A component model is an abstraction of
+ * a playwright locator. Specific UI components can be modelled by extending
+ * this class and a UI structure can be represented through composition.
+ *
+ * A component model is initiated with a parent object and an xpath. The DOM
+ * element which is represented by the model is found by applying the xpath
+ * relative to the parent.
+ *
+ * The `getLocator` method exposes a playwright locator. This method can be
+ * used with 0 arguments to get a locator directly to the DOM element the model
+ * represents, or it  can be used with an xpath argument to get a relative
+ * element.
+ *
+ * Only XPATH selectors can be used. This is because xpaths are combined
+ * through string concatenation so that the selector for a component model is
+ * always absolute. An absolute xpath is convenient when debugging failed
+ * matches as it can be copied and analyzed with browser dev tools. This
+ * approach was preferred over using Playwright relative locators because
+ * relative locators are logged in test output as a series of selectors,
+ * possibly using mixed technologies.
+ */
+class ComponentModel {
+    /**
+     * A model which represents a DOM element.
+     * @param parent  The playwright page object, frame or component model to be used as the parent of this component.
+     * @param xpath  A relative xpath to this component from the parent.
+     * @param nth  Optional position of this component among xpath matches. Position is 1 indexed. Negative numbers count from the end.
+     */
+    constructor(parent, xpath, nth) {
+        // If the parent is a ComponentModel, copy it's root and combine the xpaths
+        if (parent instanceof ComponentModel) {
+            this.root = parent.root;
+            xpath = parent.xpath + xpath;
+        }
+        else {
+            this.root = parent;
+        }
+        // Apply position argument
+        if (nth !== undefined) {
+            xpath = applyPositionToXpath(xpath, nth);
+        }
+        this.xpath = xpath;
+    }
+    getLocator(xpath = '', nth) {
+        // Combine xpaths
+        xpath = this.xpath + xpath;
+        // Apply position argument
+        if (nth !== undefined) {
+            xpath = applyPositionToXpath(xpath, nth);
+        }
+        return this.root.locator(xpath);
+    }
+    /**
+     * This method gets a child component model with a provided type. This is useful
+     * for modelling a page where the UI is composed in a custom manner.
+     * @param model  A ComponentModel type. e.g. `ToggleButton` / `Modal`
+     * @param xpath  An optional xpath relative to this component. If not provided, the model's default xpath will be used.
+     * @param nth  Optional position among matches. Position is 1 indexed. Negative numbers count from the end.
+     */
+    getChildOfType(model, xpath, nth) {
+        return new model(this, xpath, nth);
+    }
+}
+exports.ComponentModel = ComponentModel;
+/**
+ * This method applies a position to an xpath to match single DOM element.
+ * Position is 1 indexed. Negative numbers count from the end (1 is the first match, -1 is the last).
+ */
+function applyPositionToXpath(xpath, position) {
+    if (position === 0) {
+        throw new Error('Unexpected value 0 for 1-indexed position argument.');
+    }
+    if (position !== Math.floor(position)) {
+        throw new Error('Unexpected non-integer value for position argument.');
+    }
+    if (position === -1) {
+        return `(${xpath})[last()]`;
+    }
+    if (position < -1) {
+        // The negative symbol on the number becomes an operator:
+        return `(${xpath})[position() = (last()${position + 1})]`;
+    }
+    return `(${xpath})[${position}]`;
+}
+//# sourceMappingURL=component-model.js.map

package/dist/component-model.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component-model.js","sourceRoot":"","sources":["../src/component-model.ts"],"names":[],"mappings":";;;AAWA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAa,cAAc;IACzB;;;;;OAKG;IACH,YACE,MAA4C,EAC5C,KAAa,EACb,GAAY;QAEZ,2EAA2E;QAC3E,IAAI,MAAM,YAAY,cAAc,EAAE;YACpC,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC;YACxB,KAAK,GAAG,MAAM,CAAC,KAAK,GAAG,KAAK,CAAC;SAC9B;aAAM;YACL,IAAI,CAAC,IAAI,GAAG,MAAM,CAAC;SACpB;QACD,0BAA0B;QAC1B,IAAI,GAAG,KAAK,SAAS,EAAE;YACrB,KAAK,GAAG,oBAAoB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;SAC1C;QACD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACrB,CAAC;IAgBD,UAAU,CAAC,KAAK,GAAG,EAAE,EAAE,GAAY;QACjC,iBAAiB;QACjB,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QAC3B,0BAA0B;QAC1B,IAAI,GAAG,KAAK,SAAS,EAAE;YACrB,KAAK,GAAG,oBAAoB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;SAC1C;QACD,OAAO,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAClC,CAAC;IAED;;;;;;OAMG;IACH,cAAc,CACZ,KAAiC,EACjC,KAAc,EACd,GAAY;QAEZ,OAAO,IAAI,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,GAAG,CAAC,CAAC;IACrC,CAAC;CACF;AAhED,wCAgEC;AAED;;;GAGG;AACH,SAAS,oBAAoB,CAAC,KAAa,EAAE,QAAgB;IAC3D,IAAI,QAAQ,KAAK,CAAC,EAAE;QAClB,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC,CAAC;KACxE;IACD,IAAI,QAAQ,KAAK,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE;QACrC,MAAM,IAAI,KAAK,CAAC,qDAAqD,CAAC,CAAC;KACxE;IACD,IAAI,QAAQ,KAAK,CAAC,CAAC,EAAE;QACnB,OAAO,IAAI,KAAK,WAAW,CAAC;KAC7B;IACD,IAAI,QAAQ,GAAG,CAAC,CAAC,EAAE;QACjB,yDAAyD;QACzD,OAAO,IAAI,KAAK,yBAAyB,QAAQ,GAAG,CAAC,IAAI,CAAC;KAC3D;IACD,OAAO,IAAI,KAAK,KAAK,QAAQ,GAAG,CAAC;AACnC,CAAC"}

package/dist/component-models/accordion.d.ts

@@ -0,0 +1,44 @@
+import { FrameLocator, Page } from 'playwright-core';
+import { ComponentModel } from '../component-model';
+/**
+ * A model for an AccordionItem component.
+ */
+export declare class AccordionItem extends ComponentModel {
+    /** A locator to the row for this accordion item that is always displayed. */
+    readonly row: import("playwright-core").Locator;
+    /** A locator to the content for this accordion item that is only shown when expanded. */
+    readonly content: import("playwright-core").Locator;
+    /**
+     * This method expands the accordion item.
+     * If it is already expanded an error will be raised.
+     */
+    expand(): Promise<void>;
+    /**
+     * This method contracts the accordion item.
+     * If it is not expanded an error will be raised
+     */
+    contract(): Promise<void>;
+}
+/**
+ * A model for an Accordion component with methods to get models for the
+ * header and individual items.
+ */
+export declare class Accordion extends ComponentModel {
+    /**
+     * A model for an accordion component.
+     * @param parent  The parent playwright page, frame or component model.
+     * @param xpath  A relative xpath selector to this element from the parent.
+     */
+    constructor(parent: Page | FrameLocator | ComponentModel, xpath?: string);
+    /** A locator to the header row. */
+    readonly header: import("playwright-core").Locator;
+    /** This method gets a visible accordion item by position. Position is 1 indexed. Negative numbers count from the end. */
+    getItem(position: number): AccordionItem;
+    /**
+     * This method gets a visible accordion item by matching text in the accordion
+     * row. If multiple items match the text, the 'nth' parameter can be used to
+     * select which is returned (the first by default).
+     */
+    getItemContainingText(text: string, nth?: number): AccordionItem;
+}
+//# sourceMappingURL=accordion.d.ts.map

package/dist/component-models/accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../src/component-models/accordion.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD;;GAEG;AACH,qBAAa,aAAc,SAAQ,cAAc;IAC/C,6EAA6E;IAC7E,QAAQ,CAAC,GAAG,oCAGV;IAEF,yFAAyF;IACzF,QAAQ,CAAC,OAAO,oCAGd;IAEF;;;OAGG;IACG,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAU7B;;;OAGG;IACG,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;CAShC;AAED;;;GAGG;AACH,qBAAa,SAAU,SAAQ,cAAc;IAC3C;;;;OAIG;gBAED,MAAM,EAAE,IAAI,GAAG,YAAY,GAAG,cAAc,EAE5C,KAAK,SAAiD;IAKxD,mCAAmC;IACnC,QAAQ,CAAC,MAAM,oCAGb;IAEF,yHAAyH;IACzH,OAAO,CAAC,QAAQ,EAAE,MAAM,GAAG,aAAa;IASxC;;;;OAIG;IACH,qBAAqB,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,SAAI,GAAG,aAAa;CAU5D"}

package/dist/component-models/accordion.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = exports.AccordionItem = void 0;
+const component_model_1 = require("../component-model");
+/**
+ * A model for an AccordionItem component.
+ */
+class AccordionItem extends component_model_1.ComponentModel {
+    constructor() {
+        super(...arguments);
+        /** A locator to the row for this accordion item that is always displayed. */
+        this.row = this.getLocator(
+        //TODO: improve selector
+        '//*[contains(@class, "AccordionItem_row")]');
+        /** A locator to the content for this accordion item that is only shown when expanded. */
+        this.content = this.getLocator(
+        //TODO: improve selector. only selects expanded content
+        '//*[contains(@class, "AccordionItem_expanded")]//*[contains(@class, "AccordionItem_content")]');
+    }
+    /**
+     * This method expands the accordion item.
+     * If it is already expanded an error will be raised.
+     */
+    async expand() {
+        try {
+            this.content.waitFor({ state: 'hidden' });
+        }
+        catch (_a) {
+            throw new Error('Accordion entry is already expanded.');
+        }
+        await this.row.click();
+        await this.content.waitFor({ state: 'visible' });
+    }
+    /**
+     * This method contracts the accordion item.
+     * If it is not expanded an error will be raised
+     */
+    async contract() {
+        try {
+            this.content.waitFor({ state: 'visible' });
+        }
+        catch (_a) {
+            throw new Error('Accordion entry is not expanded');
+        }
+        await this.row.click();
+        await this.content.waitFor({ state: 'hidden' });
+    }
+}
+exports.AccordionItem = AccordionItem;
+/**
+ * A model for an Accordion component with methods to get models for the
+ * header and individual items.
+ */
+class Accordion extends component_model_1.ComponentModel {
+    /**
+     * A model for an accordion component.
+     * @param parent  The parent playwright page, frame or component model.
+     * @param xpath  A relative xpath selector to this element from the parent.
+     */
+    constructor(parent, 
+    //TODO: improve selector
+    xpath = '//*[contains(@class, "Accordion_container")]') {
+        super(parent, xpath);
+        /** A locator to the header row. */
+        this.header = this.getLocator(
+        //TODO: improve selector
+        '//*[contains(@class, "Accordion_header")]');
+    }
+    /** This method gets a visible accordion item by position. Position is 1 indexed. Negative numbers count from the end. */
+    getItem(position) {
+        return new AccordionItem(this, 
+        //TODO: improve selector
+        '/div/div[not(@class)', position);
+    }
+    /**
+     * This method gets a visible accordion item by matching text in the accordion
+     * row. If multiple items match the text, the 'nth' parameter can be used to
+     * select which is returned (the first by default).
+     */
+    getItemContainingText(text, nth = 1) {
+        //TODO: improve selector
+        const rowFilter = `//*[contains(@class, "AccordionItem_row") and .//*[contains(text(), "${text}")]]`;
+        return new AccordionItem(this, 
+        //TODO: improve selector
+        `/div/div[not(@class) and .${rowFilter}]`, nth);
+    }
+}
+exports.Accordion = Accordion;
+//# sourceMappingURL=accordion.js.map

package/dist/component-models/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sourceRoot":"","sources":["../../src/component-models/accordion.ts"],"names":[],"mappings":";;;AACA,wDAAoD;AAEpD;;GAEG;AACH,MAAa,aAAc,SAAQ,gCAAc;IAAjD;;QACE,6EAA6E;QACpE,QAAG,GAAG,IAAI,CAAC,UAAU;QAC5B,wBAAwB;QACxB,4CAA4C,CAC7C,CAAC;QAEF,yFAAyF;QAChF,YAAO,GAAG,IAAI,CAAC,UAAU;QAChC,uDAAuD;QACvD,+FAA+F,CAChG,CAAC;IA6BJ,CAAC;IA3BC;;;OAGG;IACH,KAAK,CAAC,MAAM;QACV,IAAI;YACF,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC;SAC3C;QAAC,WAAM;YACN,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;SACzD;QACD,MAAM,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC;QACvB,MAAM,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;IACnD,CAAC;IAED;;;OAGG;IACH,KAAK,CAAC,QAAQ;QACZ,IAAI;YACF,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;SAC5C;QAAC,WAAM;YACN,MAAM,IAAI,KAAK,CAAC,iCAAiC,CAAC,CAAC;SACpD;QACD,MAAM,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,CAAC;QACvB,MAAM,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC;IAClD,CAAC;CACF;AAxCD,sCAwCC;AAED;;;GAGG;AACH,MAAa,SAAU,SAAQ,gCAAc;IAC3C;;;;OAIG;IACH,YACE,MAA4C;IAC5C,wBAAwB;IACxB,KAAK,GAAG,8CAA8C;QAEtD,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QAGvB,mCAAmC;QAC1B,WAAM,GAAG,IAAI,CAAC,UAAU;QAC/B,wBAAwB;QACxB,2CAA2C,CAC5C,CAAC;IANF,CAAC;IAQD,yHAAyH;IACzH,OAAO,CAAC,QAAgB;QACtB,OAAO,IAAI,aAAa,CACtB,IAAI;QACJ,wBAAwB;QACxB,sBAAsB,EACtB,QAAQ,CACT,CAAC;IACJ,CAAC;IAED;;;;OAIG;IACH,qBAAqB,CAAC,IAAY,EAAE,GAAG,GAAG,CAAC;QACzC,wBAAwB;QACxB,MAAM,SAAS,GAAG,wEAAwE,IAAI,MAAM,CAAC;QACrG,OAAO,IAAI,aAAa,CACtB,IAAI;QACJ,wBAAwB;QACxB,6BAA6B,SAAS,GAAG,EACzC,GAAG,CACJ,CAAC;IACJ,CAAC;CACF;AA7CD,8BA6CC"}

package/dist/component-models/actions.d.ts

@@ -0,0 +1,20 @@
+import { FrameLocator, Locator, Page } from 'playwright-core';
+import { ComponentModel } from '../component-model';
+/**
+ * An model for an Actions component with methods to retrieve individual actions.
+ */
+export declare class Actions extends ComponentModel {
+    /**
+     * An model for an Actions component with methods to retrieve individual actions.
+     * @param parent  The parent playwright page, frame or component model.
+     * @param xpath  A relative xpath selector to this element from the parent.
+     */
+    constructor(parent: Page | FrameLocator | ComponentModel, xpath?: string);
+    /** A locator to the confirm button which may show after clicking an action. */
+    readonly confirmButton: Locator;
+    /** This method finds an action button by position. Position is 1 indexed. Negative numbers count from the end. */
+    getAction(position: number): Locator;
+    /** This method finds an action button by label. the label must match exactly. */
+    getActionByLabel(label: string): Locator;
+}
+//# sourceMappingURL=actions.d.ts.map

package/dist/component-models/actions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions.d.ts","sourceRoot":"","sources":["../../src/component-models/actions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD;;GAEG;AACH,qBAAa,OAAQ,SAAQ,cAAc;IACzC;;;;OAIG;gBAED,MAAM,EAAE,IAAI,GAAG,YAAY,GAAG,cAAc,EAC5C,KAAK,SAAiC;IAKxC,+EAA+E;IAC/E,QAAQ,CAAC,aAAa,UAEpB;IAEF,kHAAkH;IAClH,SAAS,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO;IAIpC,iFAAiF;IACjF,gBAAgB,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO;CAKzC"}

package/dist/component-models/actions.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Actions = void 0;
+const component_model_1 = require("../component-model");
+/**
+ * An model for an Actions component with methods to retrieve individual actions.
+ */
+class Actions extends component_model_1.ComponentModel {
+    /**
+     * An model for an Actions component with methods to retrieve individual actions.
+     * @param parent  The parent playwright page, frame or component model.
+     * @param xpath  A relative xpath selector to this element from the parent.
+     */
+    constructor(parent, xpath = '//*[@data-test-id="actions"]') {
+        super(parent, xpath);
+        /** A locator to the confirm button which may show after clicking an action. */
+        this.confirmButton = this.getLocator(`//*[@data-test-id="action"]//*[@data-test-id="confirm"]`);
+    }
+    /** This method finds an action button by position. Position is 1 indexed. Negative numbers count from the end. */
+    getAction(position) {
+        return this.getLocator('//*[@data-test-id="action"]', position);
+    }
+    /** This method finds an action button by label. the label must match exactly. */
+    getActionByLabel(label) {
+        return this.getLocator(`//*[@data-test-id="action" and .//*[@data-test-id="label" and text()="${label}"]]`);
+    }
+}
+exports.Actions = Actions;
+//# sourceMappingURL=actions.js.map

package/dist/component-models/actions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"actions.js","sourceRoot":"","sources":["../../src/component-models/actions.ts"],"names":[],"mappings":";;;AACA,wDAAoD;AAEpD;;GAEG;AACH,MAAa,OAAQ,SAAQ,gCAAc;IACzC;;;;OAIG;IACH,YACE,MAA4C,EAC5C,KAAK,GAAG,8BAA8B;QAEtC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QAGvB,+EAA+E;QACtE,kBAAa,GAAG,IAAI,CAAC,UAAU,CACtC,yDAAyD,CAC1D,CAAC;IALF,CAAC;IAOD,kHAAkH;IAClH,SAAS,CAAC,QAAgB;QACxB,OAAO,IAAI,CAAC,UAAU,CAAC,6BAA6B,EAAE,QAAQ,CAAC,CAAC;IAClE,CAAC;IAED,iFAAiF;IACjF,gBAAgB,CAAC,KAAa;QAC5B,OAAO,IAAI,CAAC,UAAU,CACpB,yEAAyE,KAAK,KAAK,CACpF,CAAC;IACJ,CAAC;CACF;AA7BD,0BA6BC"}

package/dist/component-models/breadcrumbs.d.ts

@@ -0,0 +1,35 @@
+import { FrameLocator, Page } from 'playwright-core';
+import { ComponentModel } from '../component-model';
+/**
+ * A model for an individual breadcrumb.
+ */
+export declare class Breadcrumb extends ComponentModel {
+    /** A locator to the element containing the label text. */
+    readonly label: import("playwright-core").Locator;
+    /** A locator to the breadcrumb anchor (\<a href=".."\>). */
+    readonly anchor: import("playwright-core").Locator;
+    /** This method clicks the breadcrumb and waits for navigation to complete. */
+    navigate(): Promise<void>;
+}
+/**
+ * A model for a Breadcrumbs bar with methods to retrieve individual breadcrumbs.
+ */
+export declare class Breadcrumbs extends ComponentModel {
+    /**
+     * A model for a breadcrumbs bar with methods to retrieve individual breadcrumbs.
+     * @param parent  The playwright page or frame.
+     * @param xpath  An absolute XPath selector to this element. Default: //*[@data-test-id="breadcrumbs"]
+     */
+    constructor(parent: Page | FrameLocator, xpath?: string);
+    /** This method expands the drop-down menu if it is visible enabling hidden breadcrumbs to be selected. */
+    expand(): Promise<void>;
+    /**
+     * This method finds a breadcrumb by position. Position is 1 indexed. Negative numbers count from the end.
+     */
+    getBreadcrumb(position: number): Breadcrumb;
+    /** The method finds a breadcrumb by label. The label must match exactly. */
+    getBreadcrumbByLabel(label: string): Breadcrumb;
+    /** The method finds a breadcrumb by URL. The URL must match exactly. */
+    getBreadcrumbByURL(url: string): Breadcrumb;
+}
+//# sourceMappingURL=breadcrumbs.d.ts.map

package/dist/component-models/breadcrumbs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../src/component-models/breadcrumbs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAGpD;;GAEG;AACH,qBAAa,UAAW,SAAQ,cAAc;IAC5C,0DAA0D;IAC1D,QAAQ,CAAC,KAAK,oCAA4D;IAE1E,4DAA4D;IAC5D,QAAQ,CAAC,MAAM,oCAAqB;IAEpC,8EAA8E;IACxE,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC;CAIhC;AAED;;GAEG;AACH,qBAAa,WAAY,SAAQ,cAAc;IAC7C;;;;OAIG;gBAED,MAAM,EAAE,IAAI,GAAG,YAAY,EAC3B,KAAK,SAAqC;IAK5C,0GAA0G;IACpG,MAAM,IAAI,OAAO,CAAC,IAAI,CAAC;IAS7B;;OAEG;IACH,aAAa,CAAC,QAAQ,EAAE,MAAM,GAAG,UAAU;IAI3C,4EAA4E;IAC5E,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,UAAU;IAO/C,wEAAwE;IACxE,kBAAkB,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU;CAG5C"}

package/dist/component-models/breadcrumbs.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Breadcrumbs = exports.Breadcrumb = void 0;
+const component_model_1 = require("../component-model");
+const helpers_1 = require("../helpers");
+/**
+ * A model for an individual breadcrumb.
+ */
+class Breadcrumb extends component_model_1.ComponentModel {
+    constructor() {
+        super(...arguments);
+        /** A locator to the element containing the label text. */
+        this.label = this.getLocator('//*[@data-test-id="breadcrumb-label"]');
+        /** A locator to the breadcrumb anchor (\<a href=".."\>). */
+        this.anchor = this.getLocator();
+    }
+    /** This method clicks the breadcrumb and waits for navigation to complete. */
+    async navigate() {
+        this.getLocator().click();
+        await (0, helpers_1.waitForPageTransition)(this.root);
+    }
+}
+exports.Breadcrumb = Breadcrumb;
+/**
+ * A model for a Breadcrumbs bar with methods to retrieve individual breadcrumbs.
+ */
+class Breadcrumbs extends component_model_1.ComponentModel {
+    /**
+     * A model for a breadcrumbs bar with methods to retrieve individual breadcrumbs.
+     * @param parent  The playwright page or frame.
+     * @param xpath  An absolute XPath selector to this element. Default: //*[@data-test-id="breadcrumbs"]
+     */
+    constructor(parent, xpath = '//*[@data-test-id="breadcrumbs"]') {
+        super(parent, xpath);
+    }
+    /** This method expands the drop-down menu if it is visible enabling hidden breadcrumbs to be selected. */
+    async expand() {
+        const dropdown = this.getLocator('//*[@data-test-id="breadcrumbs-dropdown"]');
+        if (await dropdown.isVisible()) {
+            await dropdown.hover();
+        }
+    }
+    /**
+     * This method finds a breadcrumb by position. Position is 1 indexed. Negative numbers count from the end.
+     */
+    getBreadcrumb(position) {
+        return new Breadcrumb(this, '//a', position);
+    }
+    /** The method finds a breadcrumb by label. The label must match exactly. */
+    getBreadcrumbByLabel(label) {
+        return new Breadcrumb(this, `//a[.//*[@data-test-id="breadcrumb-label" and text()="${label}"]]`);
+    }
+    /** The method finds a breadcrumb by URL. The URL must match exactly. */
+    getBreadcrumbByURL(url) {
+        return new Breadcrumb(this, `//a[@href="${url}"]`);
+    }
+}
+exports.Breadcrumbs = Breadcrumbs;
+//# sourceMappingURL=breadcrumbs.js.map

package/dist/component-models/breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.js","sourceRoot":"","sources":["../../src/component-models/breadcrumbs.ts"],"names":[],"mappings":";;;AACA,wDAAoD;AACpD,wCAAmD;AAEnD;;GAEG;AACH,MAAa,UAAW,SAAQ,gCAAc;IAA9C;;QACE,0DAA0D;QACjD,UAAK,GAAG,IAAI,CAAC,UAAU,CAAC,uCAAuC,CAAC,CAAC;QAE1E,4DAA4D;QACnD,WAAM,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC;IAOtC,CAAC;IALC,8EAA8E;IAC9E,KAAK,CAAC,QAAQ;QACZ,IAAI,CAAC,UAAU,EAAE,CAAC,KAAK,EAAE,CAAC;QAC1B,MAAM,IAAA,+BAAqB,EAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACzC,CAAC;CACF;AAZD,gCAYC;AAED;;GAEG;AACH,MAAa,WAAY,SAAQ,gCAAc;IAC7C;;;;OAIG;IACH,YACE,MAA2B,EAC3B,KAAK,GAAG,kCAAkC;QAE1C,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACvB,CAAC;IAED,0GAA0G;IAC1G,KAAK,CAAC,MAAM;QACV,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAC9B,2CAA2C,CAC5C,CAAC;QACF,IAAI,MAAM,QAAQ,CAAC,SAAS,EAAE,EAAE;YAC9B,MAAM,QAAQ,CAAC,KAAK,EAAE,CAAC;SACxB;IACH,CAAC;IAED;;OAEG;IACH,aAAa,CAAC,QAAgB;QAC5B,OAAO,IAAI,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;IAC/C,CAAC;IAED,4EAA4E;IAC5E,oBAAoB,CAAC,KAAa;QAChC,OAAO,IAAI,UAAU,CACnB,IAAI,EACJ,yDAAyD,KAAK,KAAK,CACpE,CAAC;IACJ,CAAC;IAED,wEAAwE;IACxE,kBAAkB,CAAC,GAAW;QAC5B,OAAO,IAAI,UAAU,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI,CAAC,CAAC;IACrD,CAAC;CACF;AA1CD,kCA0CC"}

package/dist/component-models/dynamic-data-list.d.ts

@@ -0,0 +1,80 @@
+import { FrameLocator, Locator, Page } from 'playwright-core';
+import { ComponentModel } from '../component-model';
+import { InlineMenu } from './inline-menu';
+/**
+ * A model for a data entry cell.
+ */
+export declare class DynamicDataEntryCell extends ComponentModel {
+    /** A locator to an input element (text entry). */
+    readonly input: Locator;
+    /** A locator to a select element (dropdown). */
+    readonly select: Locator;
+}
+/**
+ * A model for a list row cell.
+ */
+export declare class DynamicListCell extends ComponentModel {
+    /** A locator to the element containing the value. */
+    readonly content: Locator;
+    /** This method verifies that the cell is visible and gets the cell value. */
+    getValue(): Promise<string>;
+}
+/**
+ * A model for a dynamic data list header.
+ */
+export declare class DynamicListHeader extends ComponentModel {
+    getLabel(position: number): Locator;
+    getLabelByPropertyName(name: string): Locator;
+}
+/**
+ * A model for a data entry row which is used to enter new data.
+ */
+export declare class DynamicListDataEntry extends ComponentModel {
+    /**
+     * A locator to the add button ('+'). Depending on the configuration of the
+     * data list this may add a row directly or open a mod*a*l. Use the mod*a*l
+     * property on the form component mod*e*l for a mod*a*l opened in this way.
+     */
+    readonly addButton: Locator;
+    getCell(position: number): DynamicDataEntryCell;
+    getCellByPropertyName(name: string): DynamicDataEntryCell;
+}
+/**
+ * A model for a dynamic data list row.
+ */
+export declare class DynamicListRow extends ComponentModel {
+    /** A locator to the remove button for this row ('X'). */
+    readonly removeButton: Locator;
+    /** A model for the the inline menu for this row (e.g. '...'). */
+    readonly inlineMenu: InlineMenu;
+    getCell(position: number): DynamicListCell;
+    getCellByPropertyName(name: string): DynamicListCell;
+}
+/**
+ * A model for a DynamicDataList component.
+ */
+export declare class DynamicDataList extends ComponentModel {
+    /**
+     * A model representing a dynamic data list component.
+     * @param parent  The parent playwright page, frame or component model.
+     * @param xpath  A relative xpath selector to this element from the parent.
+     */
+    constructor(parent: Page | FrameLocator | ComponentModel, xpath?: string);
+    /** A model representing the dynamic data list header row. */
+    readonly header: DynamicListHeader;
+    /** A model representing the data entry row. */
+    readonly dataEntryRow: DynamicListDataEntry;
+    /** A locator to all visible rows. Useful for getting a count. */
+    readonly allVisibleRows: Locator;
+    /** This method gets a visible row by position. Position is 1 indexed. Negative numbers count from the end. */
+    getRow(position: number): DynamicListRow;
+    /**
+     * This method gets a row by matching the value of a property. If multiple
+     * rows share the same property value, the 'nth' parameter can be used to
+     * select which is returned (the first by default).
+     */
+    getRowByPropertyValue(propertyName: string, propertyValue: string, nth?: number): DynamicListRow;
+    /** This method waits for transitions of new or removed rows of data to be completed. */
+    waitForData(): Promise<void>;
+}
+//# sourceMappingURL=dynamic-data-list.d.ts.map

package/dist/component-models/dynamic-data-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dynamic-data-list.d.ts","sourceRoot":"","sources":["../../src/component-models/dynamic-data-list.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C;;GAEG;AACH,qBAAa,oBAAqB,SAAQ,cAAc;IACtD,kDAAkD;IAClD,QAAQ,CAAC,KAAK,UAA8B;IAE5C,gDAAgD;IAChD,QAAQ,CAAC,MAAM,UAA+B;CAC/C;AAED;;GAEG;AACH,qBAAa,eAAgB,SAAQ,cAAc;IACjD,qDAAqD;IACrD,QAAQ,CAAC,OAAO,UAAqB;IAErC,6EAA6E;IACvE,QAAQ,IAAI,OAAO,CAAC,MAAM,CAAC;CAIlC;AAED;;GAEG;AACH,qBAAa,iBAAkB,SAAQ,cAAc;IAEnD,QAAQ,CAAC,QAAQ,EAAE,MAAM,GAAG,OAAO;IAQnC,sBAAsB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;CAK9C;AAED;;GAEG;AACH,qBAAa,oBAAqB,SAAQ,cAAc;IACtD;;;;OAIG;IACH,QAAQ,CAAC,SAAS,UAEhB;IAGF,OAAO,CAAC,QAAQ,EAAE,MAAM,GAAG,oBAAoB;IAS/C,qBAAqB,CAAC,IAAI,EAAE,MAAM,GAAG,oBAAoB;CAM1D;AAED;;GAEG;AACH,qBAAa,cAAe,SAAQ,cAAc;IAChD,yDAAyD;IACzD,QAAQ,CAAC,YAAY,UAEnB;IAEF,iEAAiE;IACjE,QAAQ,CAAC,UAAU,aAAwB;IAG3C,OAAO,CAAC,QAAQ,EAAE,MAAM,GAAG,eAAe;IAS1C,qBAAqB,CAAC,IAAI,EAAE,MAAM,GAAG,eAAe;CAMrD;AAED;;GAEG;AACH,qBAAa,eAAgB,SAAQ,cAAc;IACjD;;;;OAIG;gBAED,MAAM,EAAE,IAAI,GAAG,YAAY,GAAG,cAAc,EAC5C,KAAK,SAA2C;IAKlD,6DAA6D;IAC7D,QAAQ,CAAC,MAAM,oBAGb;IAEF,+CAA+C;IAC/C,QAAQ,CAAC,YAAY,uBAGnB;IAEF,iEAAiE;IACjE,QAAQ,CAAC,cAAc,UAErB;IAEF,8GAA8G;IAC9G,MAAM,CAAC,QAAQ,EAAE,MAAM,GAAG,cAAc;IAQxC;;;;OAIG;IACH,qBAAqB,CACnB,YAAY,EAAE,MAAM,EACpB,aAAa,EAAE,MAAM,EACrB,GAAG,CAAC,EAAE,MAAM,GACX,cAAc;IASjB,wFAAwF;IAClF,WAAW,IAAI,OAAO,CAAC,IAAI,CAAC;CAKnC"}