expect-webdriverio 4.3.0 → 4.4.1

package/lib/matchers/element/toHaveComputedLabel.js

@@ -0,0 +1,26 @@
+import { waitUntil, enhanceError, compareText, compareTextWithArray, executeCommand, wrapExpectedWithArray, updateElementsArray, } from '../../utils.js';
+async function condition(el, label, options) {
+    const actualLabel = await el.getComputedLabel();
+    if (Array.isArray(label)) {
+        return compareTextWithArray(actualLabel, label, options);
+    }
+    return compareText(actualLabel, label, options);
+}
+export async function toHaveComputedLabel(received, label, options = {}) {
+    const isNot = this.isNot;
+    const { expectation = 'computed label', verb = 'have' } = this;
+    let el = await received;
+    let actualLabel;
+    const pass = await waitUntil(async () => {
+        const result = await executeCommand.call(this, el, condition, options, [label, options]);
+        el = result.el;
+        actualLabel = result.values;
+        return result.success;
+    }, isNot, options);
+    updateElementsArray(pass, received, el);
+    const message = enhanceError(el, wrapExpectedWithArray(el, actualLabel, label), actualLabel, this, verb, expectation, '', options);
+    return {
+        pass,
+        message: () => message,
+    };
+}

package/lib/matchers/element/toHaveComputedLabelContaining.js

@@ -0,0 +1,7 @@
+import { toHaveComputedLabel } from './toHaveComputedLabel.js';
+export function toHaveComputedLabelContaining(el, label, options = {}) {
+    return toHaveComputedLabel.call(this, el, label, {
+        ...options,
+        containing: true
+    });
+}

package/lib/matchers/element/toHaveComputedRole.js

@@ -0,0 +1,26 @@
+import { waitUntil, enhanceError, compareText, compareTextWithArray, executeCommand, wrapExpectedWithArray, updateElementsArray, } from '../../utils.js';
+async function condition(el, role, options) {
+    const actualRole = await el.getComputedRole();
+    if (Array.isArray(role)) {
+        return compareTextWithArray(actualRole, role, options);
+    }
+    return compareText(actualRole, role, options);
+}
+export async function toHaveComputedRole(received, role, options = {}) {
+    const isNot = this.isNot;
+    const { expectation = 'computed role', verb = 'have' } = this;
+    let el = await received;
+    let actualRole;
+    const pass = await waitUntil(async () => {
+        const result = await executeCommand.call(this, el, condition, options, [role, options]);
+        el = result.el;
+        actualRole = result.values;
+        return result.success;
+    }, isNot, options);
+    updateElementsArray(pass, received, el);
+    const message = enhanceError(el, wrapExpectedWithArray(el, actualRole, role), actualRole, this, verb, expectation, '', options);
+    return {
+        pass,
+        message: () => message,
+    };
+}

package/lib/matchers/element/toHaveComputedRoleContaining.js

@@ -0,0 +1,7 @@
+import { toHaveComputedRole } from './toHaveComputedRole.js';
+export function toHaveComputedRoleContaining(el, role, options = {}) {
+    return toHaveComputedRole.call(this, el, role, {
+        ...options,
+        containing: true
+    });
+}

package/lib/matchers/element/toHaveHTML.js

@@ -0,0 +1,26 @@
+import { waitUntil, enhanceError, compareText, compareTextWithArray, executeCommand, wrapExpectedWithArray, updateElementsArray } from '../../utils.js';
+async function condition(el, html, options) {
+    const actualHTML = await el.getHTML(options.includeSelectorTag);
+    if (Array.isArray(html)) {
+        return compareTextWithArray(actualHTML, html, options);
+    }
+    return compareText(actualHTML, html, options);
+}
+export async function toHaveHTML(received, html, options = {}) {
+    const isNot = this.isNot;
+    const { expectation = 'HTML', verb = 'have' } = this;
+    let el = await received;
+    let actualHTML;
+    const pass = await waitUntil(async () => {
+        const result = await executeCommand.call(this, el, condition, options, [html, options]);
+        el = result.el;
+        actualHTML = result.values;
+        return result.success;
+    }, isNot, options);
+    updateElementsArray(pass, received, el);
+    const message = enhanceError(el, wrapExpectedWithArray(el, actualHTML, html), actualHTML, this, verb, expectation, '', options);
+    return {
+        pass,
+        message: () => message
+    };
+}

package/lib/matchers/element/toHaveHTMLContaining.js

@@ -0,0 +1,7 @@
+import { toHaveHTML } from './toHaveHTML.js';
+export function toHaveHTMLContaining(el, html, options = {}) {
+    return toHaveHTML.call(this, el, html, {
+        ...options,
+        containing: true
+    });
+}

package/lib/matchers/element/toHaveHeight.js

@@ -0,0 +1,26 @@
+import { waitUntil, enhanceError, executeCommand, wrapExpectedWithArray, updateElementsArray, } from '../../utils.js';
+async function condition(el, height) {
+    const actualHeight = await el.getSize('height');
+    return {
+        value: actualHeight,
+        result: actualHeight === height,
+    };
+}
+export async function toHaveHeight(received, height, options = {}) {
+    const isNot = this.isNot;
+    const { expectation = 'height', verb = 'have' } = this;
+    let el = await received;
+    let actualHeight;
+    const pass = await waitUntil(async () => {
+        const result = await executeCommand.call(this, el, condition, options, [height, options]);
+        el = result.el;
+        actualHeight = result.values;
+        return result.success;
+    }, isNot, options);
+    updateElementsArray(pass, received, el);
+    const message = enhanceError(el, wrapExpectedWithArray(el, actualHeight, height), actualHeight, this, verb, expectation, '', options);
+    return {
+        pass,
+        message: () => message,
+    };
+}

package/lib/matchers/element/toHaveSize.js

@@ -0,0 +1,23 @@
+import { waitUntil, enhanceError, executeCommand, wrapExpectedWithArray, updateElementsArray, compareObject, } from '../../utils.js';
+async function condition(el, size) {
+    const actualSize = await el.getSize();
+    return compareObject(actualSize, size);
+}
+export async function toHaveSize(received, size, options = {}) {
+    const isNot = this.isNot;
+    const { expectation = 'size', verb = 'have' } = this;
+    let el = await received;
+    let actualSize;
+    const pass = await waitUntil(async () => {
+        const result = await executeCommand.call(this, el, condition, options, [size, options]);
+        el = result.el;
+        actualSize = result.values;
+        return result.success;
+    }, isNot, options);
+    updateElementsArray(pass, received, el);
+    const message = enhanceError(el, wrapExpectedWithArray(el, actualSize, size), actualSize, this, verb, expectation, '', options);
+    return {
+        pass,
+        message: () => message,
+    };
+}

package/lib/matchers/element/toHaveWidth.js

@@ -0,0 +1,26 @@
+import { waitUntil, enhanceError, executeCommand, wrapExpectedWithArray, updateElementsArray, } from '../../utils.js';
+async function condition(el, width) {
+    const actualWidth = await el.getSize('width');
+    return {
+        value: actualWidth,
+        result: actualWidth === width,
+    };
+}
+export async function toHaveWidth(received, width, options = {}) {
+    const isNot = this.isNot;
+    const { expectation = 'width', verb = 'have' } = this;
+    let el = await received;
+    let actualWidth;
+    const pass = await waitUntil(async () => {
+        const result = await executeCommand.call(this, el, condition, options, [width, options]);
+        el = result.el;
+        actualWidth = result.values;
+        return result.success;
+    }, isNot, options);
+    updateElementsArray(pass, received, el);
+    const message = enhanceError(el, wrapExpectedWithArray(el, actualWidth, width), actualWidth, this, verb, expectation, '', options);
+    return {
+        pass,
+        message: () => message,
+    };
+}

package/lib/utils.js

@@ -1,3 +1,4 @@
+import isEqual from 'lodash.isequal';
 import { executeCommand } from './util/executeCommand.js';
 import { wrapExpectedWithArray, updateElementsArray } from './util/elementsUtil.js';
 import { enhanceError, enhanceErrorBe, numberError } from './util/formatMessage.js';
@@ -11,12 +12,12 @@ const waitUntil = async (condition, isNot = false, { wait = DEFAULT_OPTIONS.wait
         let error;
         const start = Date.now();
         while (true) {
-            if ((Date.now() - start) > wait) {
+            if (Date.now() - start > wait) {
                 throw new Error('timeout');
             }
             error = undefined;
             try {
-                const result = isNot !== await condition();
+                const result = isNot !== (await condition());
                 if (result) {
                     break;
                 }
@@ -49,7 +50,7 @@ async function executeCommandBe(received, command, options) {
     const message = enhanceErrorBe(el, pass, this, verb, expectation, options);
     return {
         pass,
-        message: () => message
+        message: () => message,
     };
 }
 const compareNumbers = (actual, options = {}) => {
@@ -67,11 +68,11 @@ const compareNumbers = (actual, options = {}) => {
     }
     return false;
 };
-export const compareText = (actual, expected, { ignoreCase = false, trim = true, containing = false, atStart = false, atEnd = false, atIndex, replace }) => {
+export const compareText = (actual, expected, { ignoreCase = false, trim = true, containing = false, atStart = false, atEnd = false, atIndex, replace, }) => {
     if (typeof actual !== 'string') {
         return {
             value: actual,
-            result: false
+            result: false,
         };
     }
     if (trim) {
@@ -89,43 +90,43 @@ export const compareText = (actual, expected, { ignoreCase = false, trim = true,
     if (expected instanceof RegExp) {
         return {
             value: actual,
-            result: !!actual.match(expected)
+            result: !!actual.match(expected),
         };
     }
     if (containing) {
         return {
             value: actual,
-            result: actual.includes(expected)
+            result: actual.includes(expected),
         };
     }
     if (atStart) {
         return {
             value: actual,
-            result: actual.startsWith(expected)
+            result: actual.startsWith(expected),
         };
     }
     if (atEnd) {
         return {
             value: actual,
-            result: actual.endsWith(expected)
+            result: actual.endsWith(expected),
         };
     }
     if (atIndex) {
         return {
             value: actual,
-            result: actual.substring(atIndex, actual.length).startsWith(expected)
+            result: actual.substring(atIndex, actual.length).startsWith(expected),
         };
     }
     return {
         value: actual,
-        result: actual === expected
+        result: actual === expected,
     };
 };
-export const compareTextWithArray = (actual, expectedArray, { ignoreCase = false, trim = false, containing = false, atStart = false, atEnd = false, atIndex, replace }) => {
+export const compareTextWithArray = (actual, expectedArray, { ignoreCase = false, trim = false, containing = false, atStart = false, atEnd = false, atIndex, replace, }) => {
     if (typeof actual !== 'string') {
         return {
             value: actual,
-            result: false
+            result: false,
         };
     }
     if (trim) {
@@ -136,7 +137,7 @@ export const compareTextWithArray = (actual, expectedArray, { ignoreCase = false
     }
     if (ignoreCase) {
         actual = actual.toLowerCase();
-        expectedArray = expectedArray.map(item => (item instanceof RegExp) ? item : item.toLowerCase());
+        expectedArray = expectedArray.map((item) => (item instanceof RegExp ? item : item.toLowerCase()));
     }
     const textInArray = expectedArray.some((expected) => {
         if (expected instanceof RegExp) {
@@ -158,7 +159,19 @@ export const compareTextWithArray = (actual, expectedArray, { ignoreCase = false
     });
     return {
         value: actual,
-        result: textInArray
+        result: textInArray,
+    };
+};
+export const compareObject = (actual, expected) => {
+    if (typeof actual !== 'object' || Array.isArray(actual)) {
+        return {
+            value: actual,
+            result: false,
+        };
+    }
+    return {
+        value: actual,
+        result: isEqual(actual, expected),
     };
 };
 export const compareStyle = async (actualEl, style, { ignoreCase = true, trim = false }) => {
@@ -181,21 +194,21 @@ export const compareStyle = async (actualEl, style, { ignoreCase = true, trim =
     }
     return {
         value: actual,
-        result
+        result,
     };
 };
-function aliasFn(fn, { verb, expectation } = {}, ...args) {
+function aliasFn(fn, { verb, expectation, } = {}, ...args) {
     this.verb = verb;
     this.expectation = expectation;
     return fn.apply(this, args);
 }
-export { updateElementsArray, wrapExpectedWithArray, enhanceError, numberError, executeCommand, executeCommandBe, waitUntil, compareNumbers, aliasFn };
+export { updateElementsArray, wrapExpectedWithArray, enhanceError, numberError, executeCommand, executeCommandBe, waitUntil, compareNumbers, aliasFn, };
 function replaceActual(replace, actual) {
-    const hasMultipleReplacers = replace.every(r => Array.isArray(r));
+    const hasMultipleReplacers = replace.every((r) => Array.isArray(r));
     const replacers = hasMultipleReplacers
         ? replace
         : [replace];
-    if (replacers.some(r => Array.isArray(r) && r.length !== 2)) {
+    if (replacers.some((r) => Array.isArray(r) && r.length !== 2)) {
         throw new Error('Replacers need to have a searchValue and a replaceValue');
     }
     for (const replacer of replacers) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "expect-webdriverio",
-  "version": "4.3.0",
+  "version": "4.4.1",
   "author": "Mykola Grybyk <mykola.grybyk@gmail.com>",
   "description": "WebdriverIO Assertion Library",
   "license": "MIT",
@@ -60,6 +60,7 @@
   "devDependencies": {
     "@types/debug": "^4.1.8",
     "@types/jest": "^29.5.4",
+    "@types/lodash.isequal": "^4.5.6",
     "@types/node": "^20.6.0",
     "@typescript-eslint/eslint-plugin": "^6.7.0",
     "@typescript-eslint/parser": "^6.7.0",
@@ -75,7 +76,7 @@
     "rimraf": "^5.0.1",
     "shelljs": "^0.8.5",
     "typescript": "^5.2.2",
-    "vitest": "0.34.5",
+    "vitest": "0.34.6",
     "webdriverio": "^8.16.7"
   },
   "optionalDependencies": {
@@ -84,6 +85,7 @@
   },
   "dependencies": {
     "expect": "^29.7.0",
-    "jest-matcher-utils": "^29.7.0"
+    "jest-matcher-utils": "^29.7.0",
+    "lodash.isequal": "^4.5.0"
   }
 }

package/types/expect-webdriverio.d.ts

@@ -1,7 +1,3 @@
-type searchValue = string | RegExp
-type replaceValue = string | ((substring: string, ...args: any[]) => string)
-type Replacer = [searchValue, replaceValue]
-
 declare namespace ExpectWebdriverIO {
     function expect<T = unknown, R extends void | Promise<void> = void | Promise<void>>(
         actual: T
@@ -38,6 +34,13 @@ declare namespace ExpectWebdriverIO {
         message?: string
     }
 
+    interface HTMLOptions extends StringOptions {
+        /**
+         * return the HTML with the selector tag included
+         */
+        includeSelectorTag?: boolean
+    }
+
     interface StringOptions extends CommandOptions {
         /**
          * apply `toLowerCase` to both actual and expected values
@@ -77,7 +80,7 @@ declare namespace ExpectWebdriverIO {
          * replace the actual value (example: strip newlines from the value) and expect it to match the expected value
          * Otherwise strict equal
          */
-        replace?: Replacer | Replacer[]
+        replace?: [string | RegExp, string | Function] | Array<[string | RegExp, string | Function]>
 
         /**
          * might be helpful to force converting property value to string
@@ -268,6 +271,7 @@ declare namespace ExpectWebdriverIO {
 
         /**
          * `WebdriverIO.Element` -> `getText`
+         * Element's text equals the text provided
          */
         toHaveText(
             text: string | RegExp | Array<string | RegExp>,
@@ -282,6 +286,72 @@ declare namespace ExpectWebdriverIO {
             options?: ExpectWebdriverIO.StringOptions
         ): R
 
+        /**
+         * `WebdriverIO.Element` -> `getHTML`
+         * Element's html equals the html provided
+         */
+        toHaveHTML(html: string | RegExp | Array<string | RegExp>, options?: ExpectWebdriverIO.HTMLOptions): R
+        /**
+         * `WebdriverIO.Element` -> `getHTML`
+         * Element's html includes the html provided
+         */
+        toHaveHTMLContaining(
+            html: string | RegExp | Array<string | RegExp>,
+            options?: ExpectWebdriverIO.HTMLOptions
+        ): R
+
+        /**
+         * `WebdriverIO.Element` -> `getComputedLabel`
+         * Element's computed label equals the computed label provided
+         */
+        toHaveComputedLabel(
+            computedLabel: string | RegExp | Array<string | RegExp>,
+            options?: ExpectWebdriverIO.StringOptions
+        ): R
+        /**
+         * `WebdriverIO.Element` -> `getComputedLabel`
+         * Element's computed label includes the computed label provided
+         */
+        toHaveComputedLabelContaining(
+            computedLabel: string | RegExp | Array<string | RegExp>,
+            options?: ExpectWebdriverIO.StringOptions
+        ): R
+
+        /**
+         * `WebdriverIO.Element` -> `getComputedRole`
+         * Element's computed role equals the computed role provided
+         */
+        toHaveComputedRole(
+            computedRole: string | RegExp | Array<string | RegExp>,
+            options?: ExpectWebdriverIO.StringOptions
+        ): R
+        /**
+         * `WebdriverIO.Element` -> `getComputedRole`
+         * Element's computed role includes the computed role provided
+         */
+        toHaveComputedRoleContaining(
+            computedRole: string | RegExp | Array<string | RegExp>,
+            options?: ExpectWebdriverIO.StringOptions
+        ): R
+
+        /**
+         * `WebdriverIO.Element` -> `getSize('width')`
+         * Element's width equals the width provided
+         */
+        toHaveWidth(width: number, options?: ExpectWebdriverIO.CommandOptions): R
+
+        /**
+         * `WebdriverIO.Element` -> `getSize('height')`
+         * Element's height equals the height provided
+         */
+        toHaveHeight(height: number, options?: ExpectWebdriverIO.CommandOptions): R
+
+        /**
+         * `WebdriverIO.Element` -> `getSize()`
+         * Element's size equals the size provided
+         */
+        toHaveHeight(size: { height: number; width: number }, options?: ExpectWebdriverIO.CommandOptions): R
+
         /**
          * `WebdriverIO.Element` -> `getAttribute("style")`
          */