@agnos-ui/base-po/index.js

Base class to build page objects for end-to-end tests with Playwright.

function i(r) {
  return "waitFor" in r;
}
class c {
  #t;
  #o;
  #e;
  /**
   * Playwright page object from which the page object has been created.
   * It can be convenient for situation where you can't work (internally) with the locatorRoot
   */
  _page;
  /**
   *
   * @param container - Container locator (page if there is no container) where the component is located
   * @param index - If you have multiple components **inside the container**, you must provide the index to select the component to work with. You can omit this parameter if you have a single component.
   */
  constructor(t, e = null) {
    this.#t = t, this.#o = e, this._page = i(t) ? t.page() : t;
  }
  /**
   * The root locator of your page object.
   * It can be used to be chain with internal locators.
   *
   * It is built with the provided `container` from the constructor, the `getComponentSelector` (one of them must be provided, at least) and the optional `index` parameter from the contructor.
   *
   * @example
   *
   * ```typescript
   *
   * // Button locator in this component
   * get locatorButton() {
   *    return this.locatorRoot().locator('button').nth(0);
   * }
   * ```
   */
  get locatorRoot() {
    let t = this.#e;
    if (!t) {
      const e = this.getComponentSelector();
      let o = this.#t;
      if (e) {
        o = o.locator(e);
        const a = this.#o;
        a !== null && (o = o.nth(a));
      }
      t = i(o) ? o : o.locator("html"), this.#e = t;
    }
    return t;
  }
  /**
   * Returns the root selector for the component
   * This method must be usually overriden to return the css selector of your component
   *
   * @example
   *
   * ```typescript
   * getComponentSelector(): string {
   *  return 'app-component';
   * }
   * ```
   * Will target the html component:
   * ```html
   * <app-component>...</app-component>
   * ```
   */
  getComponentSelector() {
    return "";
  }
  /**
   * Wait for the locatorRoot to be displayed in the page
   */
  async waitLoaded() {
    i(this.locatorRoot) && await this.locatorRoot.waitFor();
  }
}
export {
  c as BasePO
};