fix: handle toHaveText when receiving an array of elements (#1571)

* refine `executeCommand` function to improve type annotations and documentation * add type assertions across matchers * add support for element arrays in `toHaveText` matcher and update tests and documentation accordingly * update `toHaveElementClass` type definition and add examples * update example in API documentation to use correct selector * add selector property to mock elements * update return type in `enhanceError` * enhance `toHaveText` matcher to handle multiple elements and add test for custom message * alter usage examples for `toHaveElementClass` and `toHaveText` * update JSDoc * fix indentation in`toHaveText` method
webdriverio · Jun 13, 2024 · bedf208 · bedf208
1 parent 14dd6d5
commit bedf208
Show file tree

Hide file tree

Showing 19 changed files with 212 additions and 94 deletions.
diff --git a/__mocks__/@wdio/globals.ts b/__mocks__/@wdio/globals.ts
@@ -67,15 +67,16 @@ export function $$(selector) {
  }
  })
  // Required to refetch
- const parent: any = element;
- parent._length = length;
- els.parent = parent;
+ const parent: any = element
+ parent._length = length
+ els.parent = parent
 
- els.foundWith = "$$";
+ els.foundWith = "$$"
  // Required to check length prop
- els.props = [];
- els.props.length = length;
- return els;
+ els.props = []
+ els.props.length = length
+ els.selector = selector
+ return els
 }
 
 async function waitUntil(condition, { timeout, interval }) {

diff --git a/docs/API.md b/docs/API.md
@@ -564,6 +564,22 @@ await expect(elem).toHaveText('Next-gen browser and mobile automation test frame
 await expect(elem).toHaveText(['Next-gen browser and mobile automation test framework for Node.js', 'Get Started'])
 ```
 
+In case there is a list of elements in the div below, you can assert them using an array.
+```
+<ul>
+ <li>Coffee</li>
+ <li>Tea</li>
+ <li>Milk</li>
+</ul>
+```
+
+##### Usage
+
+```js
+const elem = await $$('ul > li')
+await expect(elem).toHaveText(['Coffee', 'Tea', 'Milk'])
+```
+
 ### toHaveTextContaining
 
 Checks if element contains a specific text. Can also be called with an array as parameter in the case where the element can have different texts.

diff --git a/src/matchers/element/toHaveAttribute.ts b/src/matchers/element/toHaveAttribute.ts
@@ -1,8 +1,12 @@
-import {
- waitUntil, enhanceError, compareText, executeCommand, wrapExpectedWithArray
-} from '../../utils.js'
 import { DEFAULT_OPTIONS } from '../../constants.js'
 import type { WdioElementMaybePromise } from '../../types.js'
+import {
+ compareText,
+ enhanceError,
+ executeCommand,
+ waitUntil,
+ wrapExpectedWithArray
+} from '../../utils.js'
 
 async function conditionAttr(el: WebdriverIO.Element, attribute: string) {
  const attr = await el.getAttribute(attribute)
@@ -30,7 +34,7 @@ export async function toHaveAttributeAndValue(received: WdioElementMaybePromise,
  let attr
  const pass = await waitUntil(async () => {
  const result = await executeCommand.call(this, el, conditionAttrAndValue, options, [attribute, value, options])
- el = result.el
+ el = result.el as WebdriverIO.Element
  attr = result.values
 
  return result.success
@@ -53,7 +57,7 @@ async function toHaveAttributeFn(received: WdioElementMaybePromise, attribute: s
 
  const pass = await waitUntil(async () => {
  const result = await executeCommand.call(this, el, conditionAttr, {}, [attribute])
- el = result.el
+ el = result.el as WebdriverIO.Element
 
  return result.success
  }, isNot, {})

diff --git a/src/matchers/element/toHaveChildren.ts b/src/matchers/element/toHaveChildren.ts
@@ -1,9 +1,13 @@
+import { DEFAULT_OPTIONS } from '../../constants.js'
+import type { WdioElementMaybePromise } from '../../types.js'
 import {
- waitUntil, enhanceError, compareNumbers, numberError, executeCommand,
+ compareNumbers,
+ enhanceError,
+ executeCommand,
+ numberError,
+ waitUntil,
  wrapExpectedWithArray
 } from '../../utils.js'
-import { DEFAULT_OPTIONS } from '../../constants.js'
-import type { WdioElementMaybePromise } from '../../types.js'
 
 async function condition(el: WebdriverIO.Element, options: ExpectWebdriverIO.NumberOptions) {
  const children = await el.$$('./*')
@@ -48,7 +52,7 @@ export async function toHaveChildren(
  let children
  const pass = await waitUntil(async () => {
  const result = await executeCommand.call(this, el, condition, numberOptions, [numberOptions])
- el = result.el
+ el = result.el as WebdriverIO.Element
  children = result.values
 
  return result.success

diff --git a/src/matchers/element/toHaveClass.ts b/src/matchers/element/toHaveClass.ts
@@ -3,8 +3,8 @@ import type { WdioElementMaybePromise } from '../../types.js'
 import { compareText, compareTextWithArray, enhanceError, executeCommand, isAsymmeyricMatcher, waitUntil, wrapExpectedWithArray } from '../../utils.js'
 import { toHaveAttributeAndValue } from './toHaveAttribute.js'
 
-async function condition(el: WdioElementMaybePromise, attribute: string, value: string | RegExp | Array<string | RegExp> | ExpectWebdriverIO.PartialMatcher, options: ExpectWebdriverIO.StringOptions) {
- const actualClass = await (await el).getAttribute(attribute)
+async function condition(el: WebdriverIO.Element, attribute: string, value: string | RegExp | Array<string | RegExp> | ExpectWebdriverIO.PartialMatcher, options: ExpectWebdriverIO.StringOptions) {
+ const actualClass = await el.getAttribute(attribute)
  if (typeof actualClass !== 'string') {
  return { result: false }
  }
@@ -58,7 +58,7 @@ export async function toHaveElementClass(
 
  const pass = await waitUntil(async () => {
  const result = await executeCommand.call(this, el, condition, options, [attribute, expectedValue, options])
- el = result.el
+ el = result.el as WebdriverIO.Element
  attr = result.values
 
  return result.success

diff --git a/src/matchers/element/toHaveComputedLabel.ts b/src/matchers/element/toHaveComputedLabel.ts
@@ -1,13 +1,13 @@
+import { DEFAULT_OPTIONS } from '../../constants.js'
+import type { WdioElementMaybePromise } from '../../types.js'
 import {
- waitUntil,
- enhanceError,
  compareText,
  compareTextWithArray,
+ enhanceError,
  executeCommand,
+ waitUntil,
  wrapExpectedWithArray
 } from '../../utils.js'
-import { DEFAULT_OPTIONS } from '../../constants.js'
-import type { WdioElementMaybePromise } from '../../types.js'
 
 async function condition(
  el: WebdriverIO.Element,
@@ -41,7 +41,7 @@ export async function toHaveComputedLabel(
  const pass = await waitUntil(
  async () => {
  const result = await executeCommand.call(this, el, condition, options, [expectedValue, options])
- el = result.el
+ el = result.el as WebdriverIO.Element
  actualLabel = result.values
 
  return result.success

diff --git a/src/matchers/element/toHaveComputedRole.ts b/src/matchers/element/toHaveComputedRole.ts
@@ -1,13 +1,13 @@
+import { DEFAULT_OPTIONS } from '../../constants.js'
+import type { WdioElementMaybePromise } from '../../types.js'
 import {
- waitUntil,
- enhanceError,
  compareText,
  compareTextWithArray,
+ enhanceError,
  executeCommand,
+ waitUntil,
  wrapExpectedWithArray
 } from '../../utils.js'
-import { DEFAULT_OPTIONS } from '../../constants.js'
-import type { WdioElementMaybePromise } from '../../types.js'
 
 async function condition(
  el: WebdriverIO.Element,
@@ -41,7 +41,7 @@ export async function toHaveComputedRole(
  const pass = await waitUntil(
  async () => {
  const result = await executeCommand.call(this, el, condition, options, [expectedValue, options])
- el = result.el
+ el = result.el as WebdriverIO.Element
  actualRole = result.values
 
  return result.success

diff --git a/src/matchers/element/toHaveElementProperty.ts b/src/matchers/element/toHaveElementProperty.ts
@@ -1,12 +1,12 @@
+import { DEFAULT_OPTIONS } from '../../constants.js'
+import type { WdioElementMaybePromise } from '../../types.js'
 import {
- waitUntil,
- enhanceError,
  compareText,
+ enhanceError,
  executeCommand,
+ waitUntil,
  wrapExpectedWithArray
 } from '../../utils.js'
-import { DEFAULT_OPTIONS } from '../../constants.js'
-import type { WdioElementMaybePromise } from '../../types.js'
 
 async function condition(
  el: WebdriverIO.Element,
@@ -54,7 +54,7 @@ export async function toHaveElementProperty(
  const pass = await waitUntil(
  async () => {
  const result = await executeCommand.call(this, el, condition, options, [property, value])
- el = result.el
+ el = result.el as WebdriverIO.Element
  prop = result.values
 
  return result.success

diff --git a/src/matchers/element/toHaveHTML.ts b/src/matchers/element/toHaveHTML.ts
@@ -1,9 +1,12 @@
+import { DEFAULT_OPTIONS } from '../../constants.js'
+import type { WdioElementMaybePromise } from '../../types.js'
 import {
- waitUntil, enhanceError, compareText, compareTextWithArray, executeCommand,
+ compareText, compareTextWithArray,
+ enhanceError,
+ executeCommand,
+ waitUntil,
  wrapExpectedWithArray
 } from '../../utils.js'
-import { DEFAULT_OPTIONS } from '../../constants.js'
-import type { WdioElementMaybePromise } from '../../types.js'
 
 async function condition(el: WebdriverIO.Element, html: string | RegExp | ExpectWebdriverIO.PartialMatcher | Array<string | RegExp>, options: ExpectWebdriverIO.HTMLOptions) {
  const actualHTML = await el.getHTML(options.includeSelectorTag)
@@ -32,7 +35,7 @@ export async function toHaveHTML(
 
  const pass = await waitUntil(async () => {
  const result = await executeCommand.call(this, el, condition, options, [expectedValue, options])
- el = result.el
+ el = result.el as WebdriverIO.Element
  actualHTML = result.values
 
  return result.success

diff --git a/src/matchers/element/toHaveHeight.ts b/src/matchers/element/toHaveHeight.ts
@@ -1,11 +1,11 @@
+import { DEFAULT_OPTIONS } from '../../constants.js'
+import type { WdioElementMaybePromise } from '../../types.js'
 import {
- waitUntil,
  enhanceError,
  executeCommand,
+ waitUntil,
  wrapExpectedWithArray
 } from '../../utils.js'
-import { DEFAULT_OPTIONS } from '../../constants.js'
-import type { WdioElementMaybePromise } from '../../types.js'
 
 async function condition(el: WebdriverIO.Element, height: number) {
  const actualHeight = await el.getSize('height')
@@ -37,7 +37,7 @@ export async function toHaveHeight(
  async () => {
  const result = await executeCommand.call(this, el, condition, options, [expectedValue, options])
 
- el = result.el
+ el = result.el as WebdriverIO.Element
  actualHeight = result.values
 
  return result.success

diff --git a/src/matchers/element/toHaveSize.ts b/src/matchers/element/toHaveSize.ts
@@ -1,12 +1,12 @@
+import { DEFAULT_OPTIONS } from '../../constants.js';
+import type { WdioElementMaybePromise } from '../../types.js';
 import {
- waitUntil,
+ compareObject,
  enhanceError,
  executeCommand,
+ waitUntil,
  wrapExpectedWithArray,
- compareObject,
-} from '../../utils.js'
-import { DEFAULT_OPTIONS } from '../../constants.js'
-import type { WdioElementMaybePromise } from '../../types.js'
+} from '../../utils.js';
 
 async function condition(el: WebdriverIO.Element, size: { height: number; width: number }): Promise<any> {
  const actualSize = await el.getSize()
@@ -35,7 +35,7 @@ export async function toHaveSize(
  async () => {
  const result = await executeCommand.call(this, el, condition, options, [expectedValue, options])
 
- el = result.el
+ el = result.el as WebdriverIO.Element
  actualSize = result.values
 
  return result.success

diff --git a/src/matchers/element/toHaveStyle.ts b/src/matchers/element/toHaveStyle.ts
@@ -1,8 +1,12 @@
+import { DEFAULT_OPTIONS } from '../../constants.js';
+import type { WdioElementMaybePromise } from '../../types.js';
 import {
- waitUntil, enhanceError, compareStyle, executeCommand, wrapExpectedWithArray
-} from '../../utils.js'
-import { DEFAULT_OPTIONS } from '../../constants.js'
-import type { WdioElementMaybePromise } from '../../types.js'
+ compareStyle,
+ enhanceError,
+ executeCommand,
+ waitUntil,
+ wrapExpectedWithArray
+} from '../../utils.js';
 
 async function condition(el: WebdriverIO.Element, style: { [key: string]: string; }, options: ExpectWebdriverIO.StringOptions) {
  return compareStyle(el, style, options)
@@ -27,7 +31,7 @@ export async function toHaveStyle(
 
  const pass = await waitUntil(async () => {
  const result = await executeCommand.call(this, el, condition, options, [expectedValue, options])
- el = result.el
+ el = result.el as WebdriverIO.Element
  actualStyle = result.values
 
  return result.success

diff --git a/src/matchers/element/toHaveText.ts b/src/matchers/element/toHaveText.ts
@@ -1,20 +1,44 @@
+import { DEFAULT_OPTIONS } from '../../constants.js';
+import { WdioElementMaybePromise, WdioElementsMaybePromise } from '../../types.js';
 import {
- waitUntil, enhanceError, compareText, compareTextWithArray, executeCommand,
+ compareText, compareTextWithArray,
+ enhanceError,
+ executeCommand,
+ waitUntil,
  wrapExpectedWithArray
-} from '../../utils.js'
-import { DEFAULT_OPTIONS } from '../../constants.js'
-import type { WdioElementMaybePromise } from '../../types.js'
+} from '../../utils.js';
 
-async function condition(el: WebdriverIO.Element, text: string | RegExp | ExpectWebdriverIO.PartialMatcher | Array<string | RegExp>, options: ExpectWebdriverIO.StringOptions) {
- const actualText = await el.getText()
- if (Array.isArray(text)) {
- return compareTextWithArray(actualText, text, options)
+async function condition(el: WebdriverIO.Element | WebdriverIO.ElementArray, text: string | RegExp | Array<string | RegExp> | ExpectWebdriverIO.PartialMatcher | Array<string | RegExp>, options: ExpectWebdriverIO.StringOptions) {
+ const actualTextArray = []
+ let actualText, checkAllValuesMatchCondition
+
+ if(Array.isArray(el)){
+ const checkPromises = el.map(async (value) => {
+ actualText = await value.getText()
+ actualTextArray.push(actualText)
+ return Array.isArray(text)
+ ? compareTextWithArray(actualText, text, options).result
+ : compareText(actualText, text, options).result
+ })
+ const results = await Promise.all(checkPromises)
+ checkAllValuesMatchCondition = results.every(result => result);
+ }
+ else{
+ actualText = await (el as WebdriverIO.Element).getText()
+ actualTextArray.push(actualText);
+ checkAllValuesMatchCondition = Array.isArray(text)
+ ? compareTextWithArray(actualText, text, options).result
+ : compareText(actualText, text, options).result
+ }
+
+ return {
+ value: actualTextArray.length === 1 ? actualTextArray[0] : actualTextArray,
+ result: checkAllValuesMatchCondition
  }
- return compareText(actualText, text, options)
 }
 
 export async function toHaveText(
- received: WdioElementMaybePromise,
+ received: WdioElementMaybePromise | WdioElementsMaybePromise,
  expectedValue: string | RegExp | ExpectWebdriverIO.PartialMatcher | Array<string | RegExp>,
  options: ExpectWebdriverIO.StringOptions = DEFAULT_OPTIONS
 ) {

diff --git a/src/matchers/element/toHaveWidth.ts b/src/matchers/element/toHaveWidth.ts
@@ -1,11 +1,11 @@
+import { DEFAULT_OPTIONS } from '../../constants.js'
+import type { WdioElementMaybePromise } from '../../types.js'
 import {
- waitUntil,
  enhanceError,
  executeCommand,
+ waitUntil,
  wrapExpectedWithArray
 } from '../../utils.js'
-import { DEFAULT_OPTIONS } from '../../constants.js'
-import type { WdioElementMaybePromise } from '../../types.js'
 
 async function condition(el: WebdriverIO.Element, width: number): Promise<any> {
  const actualWidth = await el.getSize('width')
@@ -37,7 +37,7 @@ export async function toHaveWidth(
  async () => {
  const result = await executeCommand.call(this, el, condition, options, [expectedValue, options])
 
- el = result.el
+ el = result.el as WebdriverIO.Element
  actualWidth = result.values
 
  return result.success