@badisi/wdio-harness 1.0.5 → 2.0.0

package/README.md

@@ -1,13 +1,31 @@
-# @badisi/wdio-harness
-
-🔬 [WebdriverIO][wdio] support for Angular component test harnesses.
-
-[![npm version](https://img.shields.io/npm/v/@badisi/wdio-harness.svg?color=blue&logo=npm)][npm]
-[![npm downloads](https://img.shields.io/npm/dw/@badisi/wdio-harness.svg?color=7986CB&logo=npm)][npm-dl]
-[![license](https://img.shields.io/npm/l/@badisi/wdio-harness.svg?color=ff69b4)][license]
-
-[![build status](https://github.com/badisi/wdio-harness/workflows/CI%20tests/badge.svg)][ci-tests]
-[![PRs welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)][pullrequest]
+<h1 align="center">
+    @badisi/wdio-harness
+</h1>
+
+<p align="center">
+    <i>🔬 <a href="https://webdriver.io" alt="wdio">WebdriverIO</a> support for Angular component test harnesses.</i><br/>
+</p>
+
+<p align="center">
+    <a href="https://www.npmjs.com/package/@badisi/wdio-harness">
+        <img src="https://img.shields.io/npm/v/@badisi/wdio-harness.svg?color=blue&logo=npm" alt="npm version" />
+    </a>
+    <a href="https://npmcharts.com/compare/@badisi/wdio-harness?minimal=true">
+        <img src="https://img.shields.io/npm/dw/@badisi/wdio-harness.svg?color=7986CB&logo=npm" alt="npm donwloads" />
+    </a>
+    <a href="https://github.com/badisi/wdio-harness/blob/main/LICENSE">
+        <img src="https://img.shields.io/npm/l/@badisi/wdio-harness.svg?color=ff69b4" alt="license" />
+    </a>
+</p>
+
+<p align="center">
+    <a href="https://github.com/Badisi/wdio-harness/actions/workflows/ci_tests.yml">
+        <img src="https://github.com/Badisi/wdio-harness/actions/workflows/ci_tests.yml/badge.svg" alt="build status" />
+    </a>
+    <a href="https://github.com/badisi/wdio-harness/blob/main/CONTRIBUTING.md#-submitting-a-pull-request-pr">
+        <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome" />
+    </a>
+</p>
 
 <hr/>
 
@@ -17,6 +35,7 @@
 
 [More info](https://material.angular.io/cdk/test-harnesses/overview)
 
+<hr/>
 
 ## Installation
 
@@ -33,8 +52,10 @@ yarn add @badisi/wdio-harness --dev
 
 __Methods__
 
-- `createHarnessEnvironment(documentRoot)` - gets a HarnessLoader instance for the given HTML element
-- `getHarness(query)` - searches for an instance of the given ComponentHarness class or HarnessPredicate
+- `createHarnessEnvironment(rootElement)` - gets a HarnessLoader instance from a given element (defaults to body)
+- `getHarness(harnessType, element)` - searches for an harness instance from a given ComponentHarness class and element
+- `getHarness(harnessType)` - searches for an harness instance from a given ComponentHarness class
+- `getHarness(query)` - searches for an harness instance from a given HarnessPredicate
 - `getAllHarnesses(query)` - acts like getHarness, but returns an array of harness instances
 - `waitForAngular()` - waits for Angular to finish bootstrapping
 
@@ -47,12 +68,11 @@ __Example__
 
 /** ESM / Typescript */
 import { MatDatepickerInputHarness } from '@angular/material/datepicker/testing';
-import { getHarness, waitForAngular } from '@badisi/wdio-harness';
+import { getHarness } from '@badisi/wdio-harness';
 
 describe('Angular Material Harness', () => {
     beforeEach(async () => {
         await browser.url('http://localhost:4200');
-        await waitForAngular();
     });
 
     it('MatDatePicker', async () => {
@@ -93,13 +113,7 @@ Please read and follow the [Code of Conduct][codeofconduct] and help me keep thi
 
 
 
-[npm]: https://www.npmjs.com/package/@badisi/wdio-harness
-[npm-dl]: https://npmcharts.com/compare/@badisi/wdio-harness?minimal=true
-[ci-tests]: https://github.com/badisi/wdio-harness/actions?query=workflow:CI%20tests
-[pullrequest]: https://github.com/badisi/wdio-harness/blob/main/CONTRIBUTING.md#-submitting-a-pull-request-pr
-[license]: https://github.com/badisi/wdio-harness/blob/main/LICENSE
 [developer]: https://github.com/badisi/wdio-harness/blob/main/DEVELOPER.md
 [contributing]: https://github.com/badisi/wdio-harness/blob/main/CONTRIBUTING.md
 [codeofconduct]: https://github.com/badisi/wdio-harness/blob/main/CODE_OF_CONDUCT.md
-[wdio]: https://webdriver.io/
 [examples]: https://github.com/badisi/wdio-harness/blob/main/projects/tests-e2e/harness.e2e.ts

package/{cjs/WebdriverIOHarnessEnvironment.d.ts → WebdriverIOHarnessEnvironment.d.ts}

@@ -1,5 +1,5 @@
-/// <reference types="webdriverio/async" />
-import { HarnessEnvironment, HarnessLoader, TestElement } from '@angular/cdk/testing';
+/// <reference types="@wdio/globals/types" />
+import { ComponentHarness, ComponentHarnessConstructor, HarnessEnvironment, TestElement } from '@angular/cdk/testing';
 /**
  * A `HarnessEnvironment` implementation for WebdriverIO.
  */
@@ -13,7 +13,7 @@ export declare class WebdriverIOHarnessEnvironment extends HarnessEnvironment<We
         documentRoot: WebdriverIO.Element;
     });
     /** Creates a `HarnessLoader` rooted at the document root. */
-    static loader(documentRoot: WebdriverIO.Element): Promise<HarnessLoader>;
+    static loader(documentRoot: WebdriverIO.Element): Promise<WebdriverIOHarnessEnvironment>;
     /**
      * Flushes change detection and async tasks captured in the Angular zone.
      * In most cases it should not be necessary to call this manually. However, there may be some edge
@@ -21,12 +21,14 @@ export declare class WebdriverIOHarnessEnvironment extends HarnessEnvironment<We
      */
     forceStabilize(): Promise<void>;
     waitForTasksOutsideAngular(): Promise<void>;
+    /** Creates a `ComponentHarness` for the given harness type with the given raw host element. */
+    createComponentHarness<T extends ComponentHarness>(harnessType: ComponentHarnessConstructor<T>, element: WebdriverIO.Element): T;
+    /** Gets a list of all elements matching the given selector under this environment's root element. */
+    protected getAllRawElements(selector: string): Promise<WebdriverIO.ElementArray>;
     /** Gets the root element for the document. */
     protected getDocumentRoot(): WebdriverIO.Element;
     /** Creates a `TestElement` from a raw element. */
     protected createTestElement(element: WebdriverIO.Element): TestElement;
     /** Creates a `HarnessLoader` rooted at the given raw element. */
     protected createEnvironment(element: WebdriverIO.Element): HarnessEnvironment<WebdriverIO.Element>;
-    /** Gets a list of all elements matching the given selector under this environment's root element. */
-    protected getAllRawElements(selector: string): Promise<WebdriverIO.ElementArray>;
 }

package/{esm/WebdriverIOHarnessEnvironment.js → WebdriverIOHarnessEnvironment.js}

@@ -1,13 +1,19 @@
 import { HarnessEnvironment } from '@angular/cdk/testing';
 import logger from '@wdio/logger';
-import { magenta, green } from '@colors/colors/safe';
-import { WebdriverIOTestElement } from './WebdriverIOTestElement';
+import { WebdriverIOTestElement } from './WebdriverIOTestElement.js';
+import colors from '@colors/colors/safe.js';
+const { magenta, green } = colors;
 /** Registers the environment logger. */
 const log = logger('wdio-harness');
 /**
  * A `HarnessEnvironment` implementation for WebdriverIO.
  */
 export class WebdriverIOHarnessEnvironment extends HarnessEnvironment {
+    /**
+     * Keep a reference to the `document` element because `rawRootElement`
+     * will be the root element of the harness's environment.
+     */
+    documentRoot;
     constructor(rawRootElement, options) {
         super(rawRootElement);
         this.documentRoot = options.documentRoot;
@@ -27,9 +33,18 @@ export class WebdriverIOHarnessEnvironment extends HarnessEnvironment {
             window.requestAnimationFrame(done);
         `, []);*/
     }
-    waitForTasksOutsideAngular() {
+    async waitForTasksOutsideAngular() {
         throw new Error('Method not implemented.');
     }
+    /** Creates a `ComponentHarness` for the given harness type with the given raw host element. */
+    createComponentHarness(harnessType, element) {
+        return super.createComponentHarness(harnessType, element);
+    }
+    /** Gets a list of all elements matching the given selector under this environment's root element. */
+    async getAllRawElements(selector) {
+        log.info(`${magenta('GET_ALL_RAW_ELEMENTS')} ${green(selector.toString())}`);
+        return await this.rawRootElement.$$(selector);
+    }
     /** Gets the root element for the document. */
     getDocumentRoot() {
         return this.documentRoot;
@@ -44,9 +59,4 @@ export class WebdriverIOHarnessEnvironment extends HarnessEnvironment {
             documentRoot: this.documentRoot
         });
     }
-    /** Gets a list of all elements matching the given selector under this environment's root element. */
-    async getAllRawElements(selector) {
-        log.info(`${magenta('GET_ALL_RAW_ELEMENTS')} ${green(selector.toString())}`);
-        return await this.rawRootElement.$$(selector);
-    }
 }

package/{cjs/WebdriverIOTestElement.d.ts → WebdriverIOTestElement.d.ts}

@@ -1,11 +1,22 @@
-/// <reference types="webdriverio/async" />
+/// <reference types="@wdio/globals/types" />
 import { ElementDimensions, EventData, ModifierKeys, TestElement, TestKey, TextOptions } from '@angular/cdk/testing';
+/** Module augmentation to expose the host element as a public api */
+declare module '@angular/cdk/testing' {
+    interface ComponentHarness {
+        element(): WebdriverIO.Element;
+    }
+    interface TestElement {
+        element(): WebdriverIO.Element;
+    }
+}
 /**
  * A `TestElement` implementation for WebdriverIO.
  */
 export declare class WebdriverIOTestElement implements TestElement {
-    readonly element: WebdriverIO.Element;
-    constructor(element: WebdriverIO.Element);
+    readonly hostElement: WebdriverIO.Element;
+    constructor(hostElement: WebdriverIO.Element);
+    /** Return the host element. */
+    element(): WebdriverIO.Element;
     /** Blur the element. */
     blur(): Promise<void>;
     /** Clear the element's input (for input and textarea elements only). */
@@ -70,12 +81,12 @@ export declare class WebdriverIOTestElement implements TestElement {
     selectOptions(...optionIndexes: number[]): Promise<void>;
     /** Dispatches an event with a particular name. */
     dispatchEvent(name: string, data?: Record<string, EventData>): Promise<void>;
-    /** Dispatches all the events that are part of a click event sequence. */
-    private dispatchClickEventSequence;
     /** Performs a key-down action. */
     keyDown(value: string): Promise<void>;
     /** Performs a key-up action. */
     keyUp(value: string): Promise<void>;
+    /** Dispatches all the events that are part of a click event sequence. */
+    private dispatchClickEventSequence;
     /** Writes info to the console outputs. */
     private logAction;
 }

package/{esm/WebdriverIOTestElement.js → WebdriverIOTestElement.js}

@@ -1,6 +1,8 @@
-import { TestKey } from '@angular/cdk/testing';
+import { TestKey, ComponentHarness } from '@angular/cdk/testing';
+import { browser } from '@wdio/globals';
 import logger from '@wdio/logger';
-import { magenta, green } from '@colors/colors/safe';
+import colors from '@colors/colors/safe.js';
+const { magenta, green } = colors;
 var Button;
 (function (Button) {
     Button["LEFT"] = "left";
@@ -42,6 +44,9 @@ const keyMap = {
     [TestKey.F12]: 'F12',
     [TestKey.META]: 'Meta'
 };
+ComponentHarness.prototype.element = function () {
+    return this.locatorFactory.rootElement.element();
+};
 /** Converts a `ModifierKeys` object to a list of WebdriverIO `Key`s. */
 const toWebdriverIOModifierKeys = (modifiers) => {
     const result = [];
@@ -63,52 +68,57 @@ const toWebdriverIOModifierKeys = (modifiers) => {
  * A `TestElement` implementation for WebdriverIO.
  */
 export class WebdriverIOTestElement {
-    constructor(element) {
-        this.element = element;
+    hostElement;
+    constructor(hostElement) {
+        this.hostElement = hostElement;
+    }
+    /** Return the host element. */
+    element() {
+        return this.hostElement;
     }
     /** Blur the element. */
-    blur() {
+    async blur() {
         this.logAction('BLUR');
-        return browser.executeScript('arguments[0].blur()', [this.element]);
+        return browser.executeScript('arguments[0].blur()', [this.hostElement]);
     }
     /** Clear the element's input (for input and textarea elements only). */
-    clear() {
+    async clear() {
         this.logAction('CLEAR');
-        return this.element.clearValue();
+        return this.hostElement.clearValue();
     }
-    click(...args) {
+    async click(...args) {
         this.logAction('CLICK');
         return this.dispatchClickEventSequence(args, Button.LEFT);
     }
-    rightClick(...args) {
+    async rightClick(...args) {
         this.logAction('RIGHT_CLICK');
         return this.dispatchClickEventSequence(args, Button.RIGHT);
     }
     /** Focus the element. */
-    focus() {
+    async focus() {
         this.logAction('FOCUS');
-        return browser.executeScript('arguments[0].focus()', [this.element]);
+        return browser.executeScript('arguments[0].focus()', [this.hostElement]);
     }
     /** Get the computed value of the given CSS property for the element. */
     async getCssValue(property) {
         this.logAction('GET_CSS_VALUE');
-        return (await this.element.getCSSProperty(property)).value || '';
+        return (await this.hostElement.getCSSProperty(property)).value ?? '';
     }
     /** Hovers the mouse over the element. */
-    hover() {
+    async hover() {
         this.logAction('HOVER');
-        return this.element.moveTo();
+        return this.hostElement.moveTo();
     }
     /** Moves the mouse away from the element. */
-    mouseAway() {
+    async mouseAway() {
         this.logAction('MOUSE_AWAY');
-        return this.element.moveTo({ xOffset: -1, yOffset: -1 });
+        return this.hostElement.moveTo({ xOffset: -1, yOffset: -1 });
     }
-    sendKeys(...modifiersAndKeys) {
+    async sendKeys(...modifiersAndKeys) {
         let modifiers;
         let rest;
         const first = modifiersAndKeys[0];
-        if (typeof first !== 'string' && typeof first !== 'number') {
+        if (first !== undefined && typeof first !== 'string' && typeof first !== 'number') {
             modifiers = first;
             rest = modifiersAndKeys.slice(1);
         }
@@ -128,10 +138,13 @@ export class WebdriverIOTestElement {
             return arr.concat(k);
         }, []);
         this.logAction('SEND_KEYS', `[${keys.join(', ')}]`);
-        return this.element.setValue(keys);
+        if (keys.length !== 0) {
+            await this.focus();
+            return browser.keys(keys);
+        }
     }
     /** Gets the text from the element. */
-    text(options) {
+    async text(options) {
         this.logAction('TEXT', `{ exclude: ${options?.exclude} }`);
         if (options?.exclude) {
             return browser.executeScript(`
@@ -140,16 +153,16 @@ export class WebdriverIOTestElement {
                 for (let i = 0; i < exclusions.length; i++) {
                     exclusions[i].remove();
                 }
-                return (clone.textContent || '').trim();
-            `, [this.element, options.exclude]);
+                return (clone.textContent ?? '').trim();
+            `, [this.hostElement, options.exclude]);
         }
         // We don't go through WebdriverIO's `getText`, because it excludes text from hidden elements.
-        return browser.executeScript(`return (arguments[0].textContent || '').trim()`, [this.element]);
+        return browser.executeScript(`return (arguments[0].textContent ?? '').trim()`, [this.hostElement]);
     }
     /** Gets the value for the given attribute from the element. */
-    getAttribute(name) {
+    async getAttribute(name) {
         this.logAction('GET_ATTRIBUTE', name);
-        return this.element.getAttribute(name);
+        return this.hostElement.getAttribute(name);
     }
     /** Checks whether the element has the given class. */
     async hasClass(name) {
@@ -160,36 +173,36 @@ export class WebdriverIOTestElement {
     /** Gets the dimensions of the element. */
     async getDimensions() {
         this.logAction('GET_DIMENSIONS');
-        const { width, height } = await this.element.getSize();
-        const { x: left, y: top } = await this.element.getLocation();
+        const { width, height } = await this.hostElement.getSize();
+        const { x: left, y: top } = await this.hostElement.getLocation();
         return { width, height, left, top };
     }
     /** Gets the value of a property of an element. */
-    getProperty(name) {
+    async getProperty(name) {
         this.logAction('GET_PROPERTY', name);
-        return this.element.getProperty(name);
+        return this.hostElement.getProperty(name);
     }
     /** Checks whether this element matches the given selector. */
-    matchesSelector(selector) {
+    async matchesSelector(selector) {
         this.logAction('MATCHES_SELECTOR', selector);
         return browser.executeScript(`
-            return (Element.prototype.matches || Element.prototype.msMatchesSelector).call(arguments[0], arguments[1])
-        `, [this.element, selector]);
+            return (Element.prototype.matches ?? Element.prototype.msMatchesSelector).call(arguments[0], arguments[1])
+        `, [this.hostElement, selector]);
     }
     /** Checks whether the element is focused. */
-    isFocused() {
+    async isFocused() {
         this.logAction('IS_FOCUSED');
-        return this.element.isFocused();
+        return this.hostElement.isFocused();
     }
     /** Sets the value of a property of an input. */
-    setInputValue(value) {
+    async setInputValue(value) {
         this.logAction('SET_INPUT_VALUE', value);
-        return this.element.setValue(value);
+        return this.hostElement.setValue(value);
     }
     /** Selects the options at the specified indexes inside of a native `select` element. */
     async selectOptions(...optionIndexes) {
         this.logAction('SELECT_OPTIONS', `[${optionIndexes.join(', ')}]`);
-        const options = await this.element.$$('option');
+        const options = await this.hostElement.$$('option');
         const indexes = new Set(optionIndexes); // Convert to a set to remove duplicates.
         if (options.length && indexes.size) {
             // Reset the value so all the selected states are cleared. We can
@@ -207,7 +220,7 @@ export class WebdriverIOTestElement {
         }
     }
     /** Dispatches an event with a particular name. */
-    dispatchEvent(name, data) {
+    async dispatchEvent(name, data) {
         this.logAction('DISPATCH_EVENT', name);
         return browser.executeScript(`
             const event = document.createEvent('Event');
@@ -216,7 +229,25 @@ export class WebdriverIOTestElement {
                 Object.assign(event, arguments[2]);
             }
             arguments[1]['dispatchEvent'](event);
-        `, [name, this.element, data]);
+        `, [name, this.hostElement, data]);
+    }
+    /** Performs a key-down action. */
+    async keyDown(value) {
+        this.logAction('KEY_DOWN:', value);
+        return browser.performActions([{
+                id: 'keyboard',
+                type: 'key',
+                actions: [{ type: 'keyDown', value }],
+            }]);
+    }
+    /** Performs a key-up action. */
+    async keyUp(value) {
+        this.logAction('KEY_UP:', value);
+        return browser.performActions([{
+                id: 'keyboard',
+                type: 'key',
+                actions: [{ type: 'keyUp', value }],
+            }]);
     }
     // --- HELPER(s) ---
     /** Dispatches all the events that are part of a click event sequence. */
@@ -230,35 +261,17 @@ export class WebdriverIOTestElement {
         // This is the default behavior we want, so we use an empty array of offsetArgs if
         // no args remain after popping the modifiers from the args passed to this function.
         const offsetArgs = (args.length === 2 ? { xOffset: Number(args[0]), yOffset: Number(args[1]) } : undefined);
-        await this.element.moveTo(offsetArgs);
+        await this.hostElement.moveTo(offsetArgs);
         for (const modifierKey of modifierKeys) {
             this.keyDown(modifierKey);
         }
-        await this.element.click({ button });
+        await this.hostElement.click({ button });
         for (const modifierKey of modifierKeys) {
             this.keyUp(modifierKey);
         }
     }
-    /** Performs a key-down action. */
-    keyDown(value) {
-        this.logAction('KEY_DOWN:', value);
-        return browser.performActions([{
-                id: 'keyboard',
-                type: 'key',
-                actions: [{ type: 'keyDown', value }],
-            }]);
-    }
-    /** Performs a key-up action. */
-    keyUp(value) {
-        this.logAction('KEY_UP:', value);
-        return browser.performActions([{
-                id: 'keyboard',
-                type: 'key',
-                actions: [{ type: 'keyUp', value }],
-            }]);
-    }
     /** Writes info to the console outputs. */
     logAction(action, args) {
-        log.info(`${magenta(action)} ${green(this.element.selector.toString())} ${args ? args : ''}`);
+        log.info(`${magenta(action)} ${green(this.hostElement.selector.toString())} ${args ? args : ''}`);
     }
 }

package/{esm/index.d.ts → index.d.ts}

@@ -1,27 +1,28 @@
-/// <reference types="webdriverio/async" />
-import { ComponentHarness, HarnessLoader, HarnessQuery } from '@angular/cdk/testing/';
+import { ComponentHarness, HarnessQuery } from '@angular/cdk/testing';
+import { WebdriverIOHarnessEnvironment } from './WebdriverIOHarnessEnvironment.js';
 /**
- * Returns a base harness environment instance.
- * @return An HarnessLoader instance for the current HTML document, rooted at the document's root element
+ * Searches for all instances of the component corresponding to the given harness type under the
+ * `HarnessLoader`'s root element, and returns a list of `ComponentHarness` for each instance.
+ * @param query A query for a harness to create
+ * @return A list of instances of the given harness type
  */
-export declare const createHarnessEnvironment: (documentRoot?: WebdriverIO.Element | undefined) => Promise<HarnessLoader>;
+export declare const getAllHarnesses: <T extends ComponentHarness>(query: HarnessQuery<T>) => Promise<T[]>;
 /**
- * Searches for an instance of the component corresponding to the given harness type under the
- * `HarnessLoader`'s root element, and returns a `ComponentHarness` for that instance. If multiple
- * matching components are found, a harness for the first one is returned. If no matching
+ * Searches for an instance of the component corresponding to the given harness type or host element
+ * under the `HarnessLoader`'s root element, and returns a `ComponentHarness` for that instance. If
+ * multiple matching components are found, a harness for the first one is returned. If no matching
  * component is found, an error is thrown.
  * @param query A query for a harness to create
+ * @param element A raw host element for a harness to create
  * @return An instance of the given harness type
- * @throws If a matching component instance can't be found.
+ * @throws If a matching component instance can't be found
  */
-export declare const getHarness: <T extends ComponentHarness>(query: HarnessQuery<T>) => Promise<T>;
+export declare const getHarness: <T extends ComponentHarness>(query: HarnessQuery<T>, element?: WebdriverIO.Element) => Promise<T>;
 /**
- * Searches for all instances of the component corresponding to the given harness type under the
- * `HarnessLoader`'s root element, and returns a list `ComponentHarness` for each instance.
- * @param query A query for a harness to create
- * @return A list instances of the given harness type.
+ * Returns a base harness environment instance.
+ * @return An HarnessLoader instance for the current HTML document, rooted at the document's root element
  */
-export declare const getAllHarnesses: <T extends ComponentHarness>(query: HarnessQuery<T>) => Promise<T[]>;
+export declare const createHarnessEnvironment: (rootElement?: WebdriverIO.Element) => Promise<WebdriverIOHarnessEnvironment>;
 /**
  * Returns a promise that resolves when the application is "stable".
  * The promise might be rejected due to timeouts, or async tasks in the client

package/{esm/index.js → index.js}

@@ -1,31 +1,37 @@
-import { WebdriverIOHarnessEnvironment } from './WebdriverIOHarnessEnvironment';
+import { browser, $ } from '@wdio/globals';
+import { WebdriverIOHarnessEnvironment } from './WebdriverIOHarnessEnvironment.js';
 /**
- * Returns a base harness environment instance.
- * @return An HarnessLoader instance for the current HTML document, rooted at the document's root element
+ * Searches for all instances of the component corresponding to the given harness type under the
+ * `HarnessLoader`'s root element, and returns a list of `ComponentHarness` for each instance.
+ * @param query A query for a harness to create
+ * @return A list of instances of the given harness type
  */
-export const createHarnessEnvironment = async (documentRoot) => {
-    return WebdriverIOHarnessEnvironment.loader(documentRoot || await $('body'));
+export const getAllHarnesses = async (query) => {
+    return (await createHarnessEnvironment()).getAllHarnesses(query);
 };
 /**
- * Searches for an instance of the component corresponding to the given harness type under the
- * `HarnessLoader`'s root element, and returns a `ComponentHarness` for that instance. If multiple
- * matching components are found, a harness for the first one is returned. If no matching
+ * Searches for an instance of the component corresponding to the given harness type or host element
+ * under the `HarnessLoader`'s root element, and returns a `ComponentHarness` for that instance. If
+ * multiple matching components are found, a harness for the first one is returned. If no matching
  * component is found, an error is thrown.
  * @param query A query for a harness to create
+ * @param element A raw host element for a harness to create
  * @return An instance of the given harness type
- * @throws If a matching component instance can't be found.
+ * @throws If a matching component instance can't be found
  */
-export const getHarness = async (query) => {
-    return (await createHarnessEnvironment()).getHarness(query);
+export const getHarness = async (query, element) => {
+    const env = await createHarnessEnvironment(element);
+    if (element) {
+        return env.createComponentHarness(query, element);
+    }
+    return env.getHarness(query);
 };
 /**
- * Searches for all instances of the component corresponding to the given harness type under the
- * `HarnessLoader`'s root element, and returns a list `ComponentHarness` for each instance.
- * @param query A query for a harness to create
- * @return A list instances of the given harness type.
+ * Returns a base harness environment instance.
+ * @return An HarnessLoader instance for the current HTML document, rooted at the document's root element
  */
-export const getAllHarnesses = async (query) => {
-    return (await createHarnessEnvironment()).getAllHarnesses(query);
+export const createHarnessEnvironment = async (rootElement) => {
+    return WebdriverIOHarnessEnvironment.loader(rootElement || await $('body'));
 };
 /**
  * Returns a promise that resolves when the application is "stable".

package/package.json

@@ -1,19 +1,18 @@
 {
     "name": "@badisi/wdio-harness",
-    "version": "1.0.5",
+    "version": "2.0.0",
     "description": "WebdriverIO support for Angular component test harnesses.",
     "homepage": "https://github.com/badisi/wdio-harness",
     "license": "MIT",
     "author": {
         "name": "Badisi"
     },
-    "main": "cjs/index.js",
-    "module": "esm/index.js",
-    "types": "esm/index.d.ts",
+    "type": "module",
+    "module": "index.js",
+    "types": "index.d.ts",
     "exports": {
         ".": {
-            "require": "./cjs/index.js",
-            "import": "./esm/index.js"
+            "import": "./index.js"
         }
     },
     "repository": {
@@ -33,10 +32,13 @@
         "webdriver",
         "webdriverio"
     ],
+    "engines": {
+        "node": "^16.13 || >=18"
+    },
     "peerDependencies": {
-        "@angular/cdk": ">= 10 < 13",
-        "@wdio/logger": ">= 7 < 8",
-        "webdriverio": ">= 7 < 8"
+        "@angular/cdk": ">= 13 < 16",
+        "@wdio/logger": ">= 8 < 9",
+        "webdriverio": ">= 8 < 9"
     },
     "dependencies": {
         "@colors/colors": "^1.5.0"

package/cjs/WebdriverIOHarnessEnvironment.js

@@ -1,63 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WebdriverIOHarnessEnvironment = void 0;
-const tslib_1 = require("tslib");
-const testing_1 = require("@angular/cdk/testing");
-const logger_1 = tslib_1.__importDefault(require("@wdio/logger"));
-const safe_1 = require("@colors/colors/safe");
-const WebdriverIOTestElement_1 = require("./WebdriverIOTestElement");
-/** Registers the environment logger. */
-const log = logger_1.default('wdio-harness');
-/**
- * A `HarnessEnvironment` implementation for WebdriverIO.
- */
-class WebdriverIOHarnessEnvironment extends testing_1.HarnessEnvironment {
-    constructor(rawRootElement, options) {
-        super(rawRootElement);
-        this.documentRoot = options.documentRoot;
-    }
-    /** Creates a `HarnessLoader` rooted at the document root. */
-    static loader(documentRoot) {
-        return tslib_1.__awaiter(this, void 0, void 0, function* () {
-            return new WebdriverIOHarnessEnvironment(documentRoot, { documentRoot });
-        });
-    }
-    /**
-     * Flushes change detection and async tasks captured in the Angular zone.
-     * In most cases it should not be necessary to call this manually. However, there may be some edge
-     * cases where it is needed to fully flush animation events.
-     */
-    forceStabilize() {
-        return tslib_1.__awaiter(this, void 0, void 0, function* () {
-            /* await browser.executeAsyncScript(`
-                const done = arguments[0];
-                window.requestAnimationFrame(done);
-            `, []);*/
-        });
-    }
-    waitForTasksOutsideAngular() {
-        throw new Error('Method not implemented.');
-    }
-    /** Gets the root element for the document. */
-    getDocumentRoot() {
-        return this.documentRoot;
-    }
-    /** Creates a `TestElement` from a raw element. */
-    createTestElement(element) {
-        return new WebdriverIOTestElement_1.WebdriverIOTestElement(element);
-    }
-    /** Creates a `HarnessLoader` rooted at the given raw element. */
-    createEnvironment(element) {
-        return new WebdriverIOHarnessEnvironment(element, {
-            documentRoot: this.documentRoot
-        });
-    }
-    /** Gets a list of all elements matching the given selector under this environment's root element. */
-    getAllRawElements(selector) {
-        return tslib_1.__awaiter(this, void 0, void 0, function* () {
-            log.info(`${safe_1.magenta('GET_ALL_RAW_ELEMENTS')} ${safe_1.green(selector.toString())}`);
-            return yield this.rawRootElement.$$(selector);
-        });
-    }
-}
-exports.WebdriverIOHarnessEnvironment = WebdriverIOHarnessEnvironment;

package/cjs/WebdriverIOTestElement.js

@@ -1,279 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.WebdriverIOTestElement = void 0;
-const tslib_1 = require("tslib");
-const testing_1 = require("@angular/cdk/testing");
-const logger_1 = tslib_1.__importDefault(require("@wdio/logger"));
-const safe_1 = require("@colors/colors/safe");
-var Button;
-(function (Button) {
-    Button["LEFT"] = "left";
-    Button["MIDDLE"] = "middle";
-    Button["RIGHT"] = "right";
-})(Button || (Button = {}));
-/** Registers the element logger. */
-const log = logger_1.default('wdio-harness');
-/** Maps the `TestKey` constants to WebdriverIO's `Key` constants. */
-const keyMap = {
-    [testing_1.TestKey.BACKSPACE]: 'Backspace',
-    [testing_1.TestKey.TAB]: 'Tab',
-    [testing_1.TestKey.ENTER]: 'Enter',
-    [testing_1.TestKey.SHIFT]: 'Shift',
-    [testing_1.TestKey.CONTROL]: 'Control',
-    [testing_1.TestKey.ALT]: 'Alt',
-    [testing_1.TestKey.ESCAPE]: 'Escape',
-    [testing_1.TestKey.PAGE_UP]: 'PageUp',
-    [testing_1.TestKey.PAGE_DOWN]: 'PageDown',
-    [testing_1.TestKey.END]: 'End',
-    [testing_1.TestKey.HOME]: 'Home',
-    [testing_1.TestKey.LEFT_ARROW]: 'ArrowLeft',
-    [testing_1.TestKey.UP_ARROW]: 'ArrowUp',
-    [testing_1.TestKey.RIGHT_ARROW]: 'ArrowRight',
-    [testing_1.TestKey.DOWN_ARROW]: 'ArrowDown',
-    [testing_1.TestKey.INSERT]: 'Insert',
-    [testing_1.TestKey.DELETE]: 'Delete',
-    [testing_1.TestKey.F1]: 'F1',
-    [testing_1.TestKey.F2]: 'F2',
-    [testing_1.TestKey.F3]: 'F3',
-    [testing_1.TestKey.F4]: 'F4',
-    [testing_1.TestKey.F5]: 'F5',
-    [testing_1.TestKey.F6]: 'F6',
-    [testing_1.TestKey.F7]: 'F7',
-    [testing_1.TestKey.F8]: 'F8',
-    [testing_1.TestKey.F9]: 'F9',
-    [testing_1.TestKey.F10]: 'F10',
-    [testing_1.TestKey.F11]: 'F11',
-    [testing_1.TestKey.F12]: 'F12',
-    [testing_1.TestKey.META]: 'Meta'
-};
-/** Converts a `ModifierKeys` object to a list of WebdriverIO `Key`s. */
-const toWebdriverIOModifierKeys = (modifiers) => {
-    const result = [];
-    if (modifiers.control) {
-        result.push(keyMap[testing_1.TestKey.CONTROL]);
-    }
-    if (modifiers.alt) {
-        result.push(keyMap[testing_1.TestKey.ALT]);
-    }
-    if (modifiers.shift) {
-        result.push(keyMap[testing_1.TestKey.SHIFT]);
-    }
-    if (modifiers.meta) {
-        result.push(keyMap[testing_1.TestKey.META]);
-    }
-    return result;
-};
-/**
- * A `TestElement` implementation for WebdriverIO.
- */
-class WebdriverIOTestElement {
-    constructor(element) {
-        this.element = element;
-    }
-    /** Blur the element. */
-    blur() {
-        this.logAction('BLUR');
-        return browser.executeScript('arguments[0].blur()', [this.element]);
-    }
-    /** Clear the element's input (for input and textarea elements only). */
-    clear() {
-        this.logAction('CLEAR');
-        return this.element.clearValue();
-    }
-    click(...args) {
-        this.logAction('CLICK');
-        return this.dispatchClickEventSequence(args, Button.LEFT);
-    }
-    rightClick(...args) {
-        this.logAction('RIGHT_CLICK');
-        return this.dispatchClickEventSequence(args, Button.RIGHT);
-    }
-    /** Focus the element. */
-    focus() {
-        this.logAction('FOCUS');
-        return browser.executeScript('arguments[0].focus()', [this.element]);
-    }
-    /** Get the computed value of the given CSS property for the element. */
-    getCssValue(property) {
-        return tslib_1.__awaiter(this, void 0, void 0, function* () {
-            this.logAction('GET_CSS_VALUE');
-            return (yield this.element.getCSSProperty(property)).value || '';
-        });
-    }
-    /** Hovers the mouse over the element. */
-    hover() {
-        this.logAction('HOVER');
-        return this.element.moveTo();
-    }
-    /** Moves the mouse away from the element. */
-    mouseAway() {
-        this.logAction('MOUSE_AWAY');
-        return this.element.moveTo({ xOffset: -1, yOffset: -1 });
-    }
-    sendKeys(...modifiersAndKeys) {
-        let modifiers;
-        let rest;
-        const first = modifiersAndKeys[0];
-        if (typeof first !== 'string' && typeof first !== 'number') {
-            modifiers = first;
-            rest = modifiersAndKeys.slice(1);
-        }
-        else {
-            modifiers = {};
-            rest = modifiersAndKeys;
-        }
-        const KeyNULL = String.fromCharCode(57344);
-        const modifierKeys = toWebdriverIOModifierKeys(modifiers);
-        const keys = rest
-            .map(k => (typeof k === 'string' ? k.split('') : [keyMap[k]]))
-            .reduce((arr, k) => arr.concat(k), [])
-            .reduce((arr, k) => {
-            if (modifierKeys.length > 0) {
-                return arr.concat(...modifierKeys, k, KeyNULL);
-            }
-            return arr.concat(k);
-        }, []);
-        this.logAction('SEND_KEYS', `[${keys.join(', ')}]`);
-        return this.element.setValue(keys);
-    }
-    /** Gets the text from the element. */
-    text(options) {
-        this.logAction('TEXT', `{ exclude: ${options === null || options === void 0 ? void 0 : options.exclude} }`);
-        if (options === null || options === void 0 ? void 0 : options.exclude) {
-            return browser.executeScript(`
-                const clone = arguments[0].cloneNode(true) as Element;
-                const exclusions = clone.querySelectorAll(arguments[1]);
-                for (let i = 0; i < exclusions.length; i++) {
-                    exclusions[i].remove();
-                }
-                return (clone.textContent || '').trim();
-            `, [this.element, options.exclude]);
-        }
-        // We don't go through WebdriverIO's `getText`, because it excludes text from hidden elements.
-        return browser.executeScript(`return (arguments[0].textContent || '').trim()`, [this.element]);
-    }
-    /** Gets the value for the given attribute from the element. */
-    getAttribute(name) {
-        this.logAction('GET_ATTRIBUTE', name);
-        return this.element.getAttribute(name);
-    }
-    /** Checks whether the element has the given class. */
-    hasClass(name) {
-        return tslib_1.__awaiter(this, void 0, void 0, function* () {
-            this.logAction('HAS_CLASS', name);
-            const classes = (yield this.getAttribute('class')) || '';
-            return new Set(classes.split(/\s+/).filter(c => c)).has(name);
-        });
-    }
-    /** Gets the dimensions of the element. */
-    getDimensions() {
-        return tslib_1.__awaiter(this, void 0, void 0, function* () {
-            this.logAction('GET_DIMENSIONS');
-            const { width, height } = yield this.element.getSize();
-            const { x: left, y: top } = yield this.element.getLocation();
-            return { width, height, left, top };
-        });
-    }
-    /** Gets the value of a property of an element. */
-    getProperty(name) {
-        this.logAction('GET_PROPERTY', name);
-        return this.element.getProperty(name);
-    }
-    /** Checks whether this element matches the given selector. */
-    matchesSelector(selector) {
-        this.logAction('MATCHES_SELECTOR', selector);
-        return browser.executeScript(`
-            return (Element.prototype.matches || Element.prototype.msMatchesSelector).call(arguments[0], arguments[1])
-        `, [this.element, selector]);
-    }
-    /** Checks whether the element is focused. */
-    isFocused() {
-        this.logAction('IS_FOCUSED');
-        return this.element.isFocused();
-    }
-    /** Sets the value of a property of an input. */
-    setInputValue(value) {
-        this.logAction('SET_INPUT_VALUE', value);
-        return this.element.setValue(value);
-    }
-    /** Selects the options at the specified indexes inside of a native `select` element. */
-    selectOptions(...optionIndexes) {
-        return tslib_1.__awaiter(this, void 0, void 0, function* () {
-            this.logAction('SELECT_OPTIONS', `[${optionIndexes.join(', ')}]`);
-            const options = yield this.element.$$('option');
-            const indexes = new Set(optionIndexes); // Convert to a set to remove duplicates.
-            if (options.length && indexes.size) {
-                // Reset the value so all the selected states are cleared. We can
-                // reuse the input-specific method since the logic is the same.
-                yield this.setInputValue('');
-                for (let i = 0; i < options.length; i++) {
-                    if (indexes.has(i)) {
-                        // We have to hold the control key while clicking on options so that multiple can be
-                        // selected in multi-selection mode. The key doesn't do anything for single selection.
-                        yield this.keyDown(keyMap[testing_1.TestKey.CONTROL]);
-                        yield options[i].click();
-                        yield this.keyUp(keyMap[testing_1.TestKey.CONTROL]);
-                    }
-                }
-            }
-        });
-    }
-    /** Dispatches an event with a particular name. */
-    dispatchEvent(name, data) {
-        this.logAction('DISPATCH_EVENT', name);
-        return browser.executeScript(`
-            const event = document.createEvent('Event');
-            event.initEvent(arguments[0]);
-            if (arguments[2]) {
-                Object.assign(event, arguments[2]);
-            }
-            arguments[1]['dispatchEvent'](event);
-        `, [name, this.element, data]);
-    }
-    // --- HELPER(s) ---
-    /** Dispatches all the events that are part of a click event sequence. */
-    dispatchClickEventSequence(args, button) {
-        return tslib_1.__awaiter(this, void 0, void 0, function* () {
-            let modifiers = {};
-            if (args.length && typeof args[args.length - 1] === 'object') {
-                modifiers = args.pop();
-            }
-            const modifierKeys = toWebdriverIOModifierKeys(modifiers);
-            // Omitting the offset argument to mouseMove results in clicking the center.
-            // This is the default behavior we want, so we use an empty array of offsetArgs if
-            // no args remain after popping the modifiers from the args passed to this function.
-            const offsetArgs = (args.length === 2 ? { xOffset: Number(args[0]), yOffset: Number(args[1]) } : undefined);
-            yield this.element.moveTo(offsetArgs);
-            for (const modifierKey of modifierKeys) {
-                this.keyDown(modifierKey);
-            }
-            yield this.element.click({ button });
-            for (const modifierKey of modifierKeys) {
-                this.keyUp(modifierKey);
-            }
-        });
-    }
-    /** Performs a key-down action. */
-    keyDown(value) {
-        this.logAction('KEY_DOWN:', value);
-        return browser.performActions([{
-                id: 'keyboard',
-                type: 'key',
-                actions: [{ type: 'keyDown', value }],
-            }]);
-    }
-    /** Performs a key-up action. */
-    keyUp(value) {
-        this.logAction('KEY_UP:', value);
-        return browser.performActions([{
-                id: 'keyboard',
-                type: 'key',
-                actions: [{ type: 'keyUp', value }],
-            }]);
-    }
-    /** Writes info to the console outputs. */
-    logAction(action, args) {
-        log.info(`${safe_1.magenta(action)} ${safe_1.green(this.element.selector.toString())} ${args ? args : ''}`);
-    }
-}
-exports.WebdriverIOTestElement = WebdriverIOTestElement;

package/cjs/index.d.ts

@@ -1,30 +0,0 @@
-/// <reference types="webdriverio/async" />
-import { ComponentHarness, HarnessLoader, HarnessQuery } from '@angular/cdk/testing/';
-/**
- * Returns a base harness environment instance.
- * @return An HarnessLoader instance for the current HTML document, rooted at the document's root element
- */
-export declare const createHarnessEnvironment: (documentRoot?: WebdriverIO.Element | undefined) => Promise<HarnessLoader>;
-/**
- * Searches for an instance of the component corresponding to the given harness type under the
- * `HarnessLoader`'s root element, and returns a `ComponentHarness` for that instance. If multiple
- * matching components are found, a harness for the first one is returned. If no matching
- * component is found, an error is thrown.
- * @param query A query for a harness to create
- * @return An instance of the given harness type
- * @throws If a matching component instance can't be found.
- */
-export declare const getHarness: <T extends ComponentHarness>(query: HarnessQuery<T>) => Promise<T>;
-/**
- * Searches for all instances of the component corresponding to the given harness type under the
- * `HarnessLoader`'s root element, and returns a list `ComponentHarness` for each instance.
- * @param query A query for a harness to create
- * @return A list instances of the given harness type.
- */
-export declare const getAllHarnesses: <T extends ComponentHarness>(query: HarnessQuery<T>) => Promise<T[]>;
-/**
- * Returns a promise that resolves when the application is "stable".
- * The promise might be rejected due to timeouts, or async tasks in the client
- * app that never finish (timers, etc).
- */
-export declare const waitForAngular: () => Promise<void>;

package/cjs/index.js

@@ -1,56 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.waitForAngular = exports.getAllHarnesses = exports.getHarness = exports.createHarnessEnvironment = void 0;
-const tslib_1 = require("tslib");
-const WebdriverIOHarnessEnvironment_1 = require("./WebdriverIOHarnessEnvironment");
-/**
- * Returns a base harness environment instance.
- * @return An HarnessLoader instance for the current HTML document, rooted at the document's root element
- */
-const createHarnessEnvironment = (documentRoot) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-    return WebdriverIOHarnessEnvironment_1.WebdriverIOHarnessEnvironment.loader(documentRoot || (yield $('body')));
-});
-exports.createHarnessEnvironment = createHarnessEnvironment;
-/**
- * Searches for an instance of the component corresponding to the given harness type under the
- * `HarnessLoader`'s root element, and returns a `ComponentHarness` for that instance. If multiple
- * matching components are found, a harness for the first one is returned. If no matching
- * component is found, an error is thrown.
- * @param query A query for a harness to create
- * @return An instance of the given harness type
- * @throws If a matching component instance can't be found.
- */
-const getHarness = (query) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-    return (yield exports.createHarnessEnvironment()).getHarness(query);
-});
-exports.getHarness = getHarness;
-/**
- * Searches for all instances of the component corresponding to the given harness type under the
- * `HarnessLoader`'s root element, and returns a list `ComponentHarness` for each instance.
- * @param query A query for a harness to create
- * @return A list instances of the given harness type.
- */
-const getAllHarnesses = (query) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-    return (yield exports.createHarnessEnvironment()).getAllHarnesses(query);
-});
-exports.getAllHarnesses = getAllHarnesses;
-/**
- * Returns a promise that resolves when the application is "stable".
- * The promise might be rejected due to timeouts, or async tasks in the client
- * app that never finish (timers, etc).
- */
-const waitForAngular = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
-    yield browser.waitUntil(() => browser.executeScript(`
-        return Array.isArray(window.frameworkStabilizers)
-    `, []));
-    yield browser.executeAsyncScript(`
-        const done = arguments[0];
-        const promises = window.frameworkStabilizers.map(stabilizer => {
-            // Stabilizer will invoke the resolve function with a
-            // boolean to indicate whether any work is done.
-            return new Promise(resolve => stabilizer(resolve));
-        });
-        Promise.all(promises).then(done);
-    `, []);
-});
-exports.waitForAngular = waitForAngular;

package/cjs/package.json

@@ -1,3 +0,0 @@
-{
-    "type": "commonjs"
-}

package/esm/WebdriverIOHarnessEnvironment.d.ts

@@ -1,32 +0,0 @@
-/// <reference types="webdriverio/async" />
-import { HarnessEnvironment, HarnessLoader, TestElement } from '@angular/cdk/testing';
-/**
- * A `HarnessEnvironment` implementation for WebdriverIO.
- */
-export declare class WebdriverIOHarnessEnvironment extends HarnessEnvironment<WebdriverIO.Element> {
-    /**
-     * Keep a reference to the `document` element because `rawRootElement`
-     * will be the root element of the harness's environment.
-     */
-    private documentRoot;
-    protected constructor(rawRootElement: WebdriverIO.Element, options: {
-        documentRoot: WebdriverIO.Element;
-    });
-    /** Creates a `HarnessLoader` rooted at the document root. */
-    static loader(documentRoot: WebdriverIO.Element): Promise<HarnessLoader>;
-    /**
-     * Flushes change detection and async tasks captured in the Angular zone.
-     * In most cases it should not be necessary to call this manually. However, there may be some edge
-     * cases where it is needed to fully flush animation events.
-     */
-    forceStabilize(): Promise<void>;
-    waitForTasksOutsideAngular(): Promise<void>;
-    /** Gets the root element for the document. */
-    protected getDocumentRoot(): WebdriverIO.Element;
-    /** Creates a `TestElement` from a raw element. */
-    protected createTestElement(element: WebdriverIO.Element): TestElement;
-    /** Creates a `HarnessLoader` rooted at the given raw element. */
-    protected createEnvironment(element: WebdriverIO.Element): HarnessEnvironment<WebdriverIO.Element>;
-    /** Gets a list of all elements matching the given selector under this environment's root element. */
-    protected getAllRawElements(selector: string): Promise<WebdriverIO.ElementArray>;
-}

package/esm/WebdriverIOTestElement.d.ts

@@ -1,81 +0,0 @@
-/// <reference types="webdriverio/async" />
-import { ElementDimensions, EventData, ModifierKeys, TestElement, TestKey, TextOptions } from '@angular/cdk/testing';
-/**
- * A `TestElement` implementation for WebdriverIO.
- */
-export declare class WebdriverIOTestElement implements TestElement {
-    readonly element: WebdriverIO.Element;
-    constructor(element: WebdriverIO.Element);
-    /** Blur the element. */
-    blur(): Promise<void>;
-    /** Clear the element's input (for input and textarea elements only). */
-    clear(): Promise<void>;
-    /**
-     * Click the element at the default location for the current environment. If you need to guarantee
-     * the element is clicked at a specific location, consider using `click('center')` or
-     * `click(x, y)` instead.
-     */
-    click(modifiers?: ModifierKeys): Promise<void>;
-    /** Click the element at the element's center. */
-    click(location: 'center', modifiers?: ModifierKeys): Promise<void>;
-    /**
-     * Click the element at the specified coordinates relative to the top-left of the element.
-     * @param relativeX Coordinate within the element, along the X-axis at which to click.
-     * @param relativeY Coordinate within the element, along the Y-axis at which to click.
-     * @param modifiers Modifier keys held while clicking
-     */
-    click(relativeX: number, relativeY: number, modifiers?: ModifierKeys): Promise<void>;
-    /**
-     * Right clicks on the element at the specified coordinates relative to the top-left of it.
-     * @param relativeX Coordinate within the element, along the X-axis at which to click.
-     * @param relativeY Coordinate within the element, along the Y-axis at which to click.
-     * @param modifiers Modifier keys held while clicking
-     */
-    rightClick(relativeX: number, relativeY: number, modifiers?: ModifierKeys): Promise<void>;
-    /** Focus the element. */
-    focus(): Promise<void>;
-    /** Get the computed value of the given CSS property for the element. */
-    getCssValue(property: string): Promise<string>;
-    /** Hovers the mouse over the element. */
-    hover(): Promise<void>;
-    /** Moves the mouse away from the element. */
-    mouseAway(): Promise<void>;
-    /**
-     * Sends the given string to the input as a series of key presses. Also fires input events
-     * and attempts to add the string to the Element's value.
-     */
-    sendKeys(...keys: (string | TestKey)[]): Promise<void>;
-    /**
-     * Sends the given string to the input as a series of key presses. Also fires input events
-     * and attempts to add the string to the Element's value.
-     */
-    sendKeys(modifiers: ModifierKeys, ...keys: (string | TestKey)[]): Promise<void>;
-    /** Gets the text from the element. */
-    text(options?: TextOptions): Promise<string>;
-    /** Gets the value for the given attribute from the element. */
-    getAttribute(name: string): Promise<string | null>;
-    /** Checks whether the element has the given class. */
-    hasClass(name: string): Promise<boolean>;
-    /** Gets the dimensions of the element. */
-    getDimensions(): Promise<ElementDimensions>;
-    /** Gets the value of a property of an element. */
-    getProperty(name: string): Promise<any>;
-    /** Checks whether this element matches the given selector. */
-    matchesSelector(selector: string): Promise<boolean>;
-    /** Checks whether the element is focused. */
-    isFocused(): Promise<boolean>;
-    /** Sets the value of a property of an input. */
-    setInputValue(value: string): Promise<void>;
-    /** Selects the options at the specified indexes inside of a native `select` element. */
-    selectOptions(...optionIndexes: number[]): Promise<void>;
-    /** Dispatches an event with a particular name. */
-    dispatchEvent(name: string, data?: Record<string, EventData>): Promise<void>;
-    /** Dispatches all the events that are part of a click event sequence. */
-    private dispatchClickEventSequence;
-    /** Performs a key-down action. */
-    keyDown(value: string): Promise<void>;
-    /** Performs a key-up action. */
-    keyUp(value: string): Promise<void>;
-    /** Writes info to the console outputs. */
-    private logAction;
-}

package/esm/package.json

@@ -1,3 +0,0 @@
-{
-    "type": "module"
-}