Working cases of toHaveWidth and toHaveHTML with $$()

Author: dprevost-LMI

src/matchers/element/toBeSelected.ts

@@ -6,6 +6,7 @@ export async function toBeSelected(
     received: WdioElementOrArrayMaybePromise,
     options: ExpectWebdriverIO.CommandOptions = DEFAULT_OPTIONS
 ) {
+    this.verb = this.verb || 'be'
     this.expectation = this.expectation || 'selected'
     this.matcherName = this.matcherName || 'toBeSelected'
 
@@ -26,6 +27,7 @@ export async function toBeSelected(
 }
 
 export async function toBeChecked (received: WdioElementOrArrayMaybePromise, options: ExpectWebdriverIO.CommandOptions = DEFAULT_OPTIONS) {
+    this.verb = 'be'
     this.expectation = 'checked'
     this.matcherName = 'toBeChecked'
 

src/matchers/element/toHaveHTML.ts

@@ -4,10 +4,11 @@ import { DEFAULT_OPTIONS } from '../../constants.js'
 import {
     compareText, compareTextWithArray,
     enhanceError,
-    executeCommand,
     waitUntil,
     wrapExpectedWithArray
 } from '../../utils.js'
+import { executeCommandWithArray } from '../../util/executeCommand.js'
+import { map } from '../../util/elementsUtil.js'
 
 async function condition(el: WebdriverIO.Element, html: string | RegExp | WdioAsymmetricMatcher<string> | Array<string | RegExp>, options: ExpectWebdriverIO.HTMLOptions) {
     const actualHTML = await el.getHTML(options)
@@ -31,22 +32,22 @@ export async function toHaveHTML(
         options,
     })
 
-    let el = 'getElement' in received
-        ? await received?.getElement()
-        : 'getElements' in received
-            ? await received?.getElements()
-            : received
+    let elements
     let actualHTML
 
     const pass = await waitUntil(async () => {
-        const result = await executeCommand.call(this, el, condition, options, [expectedValue, options])
-        el = result.el as WebdriverIO.Element
-        actualHTML = result.values
+        const result = await executeCommandWithArray.call(this, received, async (element) =>  await map(element, async (el) => await condition(el, expectedValue, options)) )
+        elements = result.elementOrElements
+        actualHTML = result.valueOrValues
 
         return result.success
-    }, isNot, options)
+    }, isNot, {
+        wait: options.wait,
+        interval: options.interval
+    })
 
-    const message = enhanceError(el, wrapExpectedWithArray(el, actualHTML, expectedValue), actualHTML, this, verb, expectation, '', options)
+    const expectedValues = wrapExpectedWithArray(elements, actualHTML, expectedValue)
+    const message = enhanceError(elements, expectedValues, actualHTML, this, verb, expectation, '', options)
 
     const result: ExpectWebdriverIO.AssertionResult = {
         pass,

src/matchers/element/toHaveText.ts

@@ -1,12 +1,13 @@
-import type { ChainablePromiseElement, ChainablePromiseArray } from 'webdriverio'
 import { DEFAULT_OPTIONS } from '../../constants.js'
 import {
     compareText, compareTextWithArray,
     enhanceError,
-    executeCommand,
     waitUntil,
     wrapExpectedWithArray
 } from '../../utils.js'
+import { executeCommandWithArray } from '../../util/executeCommand.js'
+import { map } from '../../util/elementsUtil.js'
+import type { WdioElementOrArrayMaybePromise } from '../../types.js'
 
 async function condition(el: WebdriverIO.Element | WebdriverIO.ElementArray, text: string | RegExp | Array<string | RegExp> | WdioAsymmetricMatcher<string>, options: ExpectWebdriverIO.StringOptions) {
     const actualTextArray: string[] = []
@@ -38,7 +39,7 @@ async function condition(el: WebdriverIO.Element | WebdriverIO.ElementArray, tex
 }
 
 export async function toHaveText(
-    received: ChainablePromiseElement | ChainablePromiseArray,
+    received: WdioElementOrArrayMaybePromise,
     expectedValue: string | RegExp | WdioAsymmetricMatcher<string> | Array<string | RegExp>,
     options: ExpectWebdriverIO.StringOptions = DEFAULT_OPTIONS
 ) {
@@ -51,22 +52,22 @@ export async function toHaveText(
         options,
     })
 
-    let el = 'getElement' in received
-        ? await received?.getElement()
-        : 'getElements' in received
-            ? await received?.getElements()
-            : received
+    let elementOrElements
     let actualText
 
     const pass = await waitUntil(async () => {
-        const result = await executeCommand.call(this, el, condition, options, [expectedValue, options])
-        el = result.el
-        actualText = result.values
+        const result = await executeCommandWithArray.call(this, received,
+            async (element) =>  await map(element, async (el) => await condition(el, expectedValue, options)) )
+        elementOrElements = result.elementOrElements
+        actualText = result.valueOrValues
 
         return result.success
-    }, isNot, options)
+    }, isNot, {
+        wait: options.wait,
+        interval: options.interval
+    })
 
-    const message = enhanceError(el, wrapExpectedWithArray(el, actualText, expectedValue), actualText, this, verb, expectation, '', options)
+    const message = enhanceError(elementOrElements, wrapExpectedWithArray(elementOrElements, actualText, expectedValue), actualText, this, verb, expectation, '', options)
     const result: ExpectWebdriverIO.AssertionResult = {
         pass,
         message: (): string => message

src/matchers/element/toHaveWidth.ts

@@ -1,14 +1,15 @@
 import { DEFAULT_OPTIONS } from '../../constants.js'
-import type { WdioElementMaybePromise } from '../../types.js'
+import type { WdioElementOrArrayMaybePromise } from '../../types.js'
+import { map, wrapExpectedWithArray } from '../../util/elementsUtil.js'
+import { executeCommandWithArray } from '../../util/executeCommand.js'
 import {
     compareNumbers,
     enhanceError,
-    executeCommand,
     numberError,
     waitUntil,
 } from '../../utils.js'
 
-async function condition(el: WebdriverIO.Element, width: number, options: ExpectWebdriverIO.NumberOptions) {
+async function condition(el: WebdriverIO.Element, options: ExpectWebdriverIO.NumberOptions) {
     const actualWidth = await el.getSize('width')
 
     return {
@@ -18,49 +19,51 @@ async function condition(el: WebdriverIO.Element, width: number, options: Expect
 }
 
 export async function toHaveWidth(
-    received: WdioElementMaybePromise,
+    received: WdioElementOrArrayMaybePromise,
     expectedValue: number | ExpectWebdriverIO.NumberOptions,
     options: ExpectWebdriverIO.CommandOptions = DEFAULT_OPTIONS
 ) {
     const isNot = this.isNot
     const { expectation = 'width', verb = 'have' } = this
+    this.matcherName = 'toHaveWidth'
 
     await options.beforeAssertion?.({
-        matcherName: 'toHaveWidth',
+        matcherName: this.matcherName,
         expectedValue,
         options,
     })
 
-    // type check
+    // validate expectedValue
     let numberOptions: ExpectWebdriverIO.NumberOptions
     if (typeof expectedValue === 'number') {
         numberOptions = { eq: expectedValue } as ExpectWebdriverIO.NumberOptions
     } else if (!expectedValue || (typeof expectedValue.eq !== 'number' && typeof expectedValue.gte !== 'number' && typeof expectedValue.lte !== 'number')) {
-        throw new Error('Invalid params passed to toHaveHeight.')
+        throw new Error(`Invalid params passed to ${this.matcherName}.`)
     } else {
         numberOptions = expectedValue
     }
 
-    let el = await received?.getElement()
+    let elements
     let actualWidth
 
     const pass = await waitUntil(
         async () => {
-            const result = await executeCommand.call(this, el, condition, numberOptions, [expectedValue, numberOptions])
+            const result = await executeCommandWithArray.call(this, received, (elements) => map(elements, (el) => condition(el, numberOptions)))
 
-            el = result.el as WebdriverIO.Element
-            actualWidth = result.values
+            elements = result.elementOrElements
+            actualWidth = result.valueOrValues
 
             return result.success
         },
         isNot,
-        { ...numberOptions, ...options }
+        { wait: options.wait, interval: options.interval }
     )
 
-    const error = numberError(numberOptions)
+    const expextedFailureMessage = numberError(numberOptions)
+    const expectedValues = wrapExpectedWithArray(elements, actualWidth, expextedFailureMessage)
     const message = enhanceError(
-        el,
-        error,
+        elements,
+        expectedValues,
         actualWidth,
         this,
         verb,
@@ -75,7 +78,7 @@ export async function toHaveWidth(
     }
 
     await options.afterAssertion?.({
-        matcherName: 'toHaveWidth',
+        matcherName: this.matcherName,
         expectedValue,
         options,
         result

src/util/elementsUtil.ts

@@ -1,4 +1,4 @@
-import type { WdioElementOrArrayMaybePromise } from '../types'
+import type { WdioElementOrArrayMaybePromise, WdioElements } from '../types'
 
 /**
  * if el is an array of elements and actual value is an array
@@ -7,9 +7,9 @@ import type { WdioElementOrArrayMaybePromise } from '../types'
  * @param actual actual result or results array
  * @param expected expected result
  */
-export const wrapExpectedWithArray = (el: WebdriverIO.Element | WebdriverIO.ElementArray, actual: unknown, expected: unknown) => {
-    if (Array.isArray(el) && el.length > 1 && Array.isArray(actual)) {
-        expected = [expected]
+export const wrapExpectedWithArray = (el: WebdriverIO.Element | WdioElements | undefined, actual: unknown, expected: unknown) => {
+    if (Array.isArray(el) && Array.isArray(actual) && !Array.isArray(expected)) {
+        expected = Array(actual.length).fill(expected)
     }
     return expected
 }

src/util/executeCommand.ts

@@ -32,18 +32,18 @@ export async function executeCommand(
  * @param options - Optional configuration options
  * @param params - Additional parameters
  */
-export async function executeCommandWithArray(
+export async function executeCommandWithArray<T>(
     nonAwaitedElements: WdioElementOrArrayMaybePromise,
-    condition: (awaitedElements: WdioElements) => Promise<{
-        results: boolean[];
-        values?: unknown;
-    }>,
-): Promise<{ elementOrElements: WdioElements | WebdriverIO.Element | undefined; success: boolean; values?: unknown; }> {
+    condition: (awaitedElements: WdioElements) => Promise<
+        { result: boolean; value?: T }[]
+    >,
+): Promise<{ elementOrElements: WdioElements | WebdriverIO.Element | undefined; success: boolean; valueOrValues: T | undefined | Array<T | undefined> }> {
     const { elements: awaitedElements, isSingleElement } = await awaitElements(nonAwaitedElements)
-    const results = awaitedElements ? await condition(awaitedElements) : { results: [], values: undefined }
+    const results = awaitedElements ? await condition(awaitedElements) : [{ result: false, value: undefined }]
+
     return {
         elementOrElements: isSingleElement && awaitedElements?.length === 1 ? awaitedElements[0] : awaitedElements,
-        success: results.results.every(Boolean),
-        values: results.values,
+        success: results.every((res) => res.result === true),
+        valueOrValues: isSingleElement && results.length === 1 ? results[0].value : results.map(({ value }) => value),
     }
 }

src/utils.ts

@@ -42,7 +42,7 @@ async function executeCommandBe(
             const result = await executeCommandWithArray.call(
                 this,
                 nonAwaitedElements,
-                async (awaitedElements: WdioElements) => ({ results: await map(awaitedElements, async (element) => await command(element)) }),
+                async (awaitedElements: WdioElements) => (await map(awaitedElements, async (element) => ({ result: await command(element) }))),
             )
             awaitedElements = result.elementOrElements
             return result.success