Make type Element[] work with toBeElementsArrayOfSize

package.json

@@ -63,6 +63,7 @@
     "ts:mocha": "cd test-types/mocha && tsc --project ./tsconfig.json",
     "ts:jasmine": "cd test-types/jasmine && tsc --project ./tsconfig.json",
     "ts:jasmine-async": "cd test-types/jasmine-async && tsc --project ./tsconfig.json",
+    "checks:all": "npm run build && npm run compile && npm run tsc:root-types && npm run test && npm run ts",
     "watch": "npm run compile -- --watch",
     "prepare": "husky install"
   },

src/matchers/elements/toBeElementsArrayOfSize.ts

@@ -1,7 +1,7 @@
 import { waitUntil, enhanceError, compareNumbers, numberError } from '../../utils.js'
 import { refetchElements } from '../../util/refetchElements.js'
 import { DEFAULT_OPTIONS } from '../../constants.js'
-import type { WdioElementsMaybePromise } from '../../types.js'
+import type { WdioElements, WdioElementsMaybePromise } from '../../types.js'
 
 export async function toBeElementsArrayOfSize(
     received: WdioElementsMaybePromise,
@@ -17,17 +17,16 @@ export async function toBeElementsArrayOfSize(
         options,
     })
 
-    // type check
     let numberOptions: ExpectWebdriverIO.NumberOptions
     if (typeof expectedValue === 'number') {
-        numberOptions = { eq: expectedValue } as ExpectWebdriverIO.NumberOptions
+        numberOptions = { eq: expectedValue } satisfies ExpectWebdriverIO.NumberOptions
     } else if (!expectedValue || (typeof expectedValue.eq !== 'number' && typeof expectedValue.gte !== 'number' && typeof expectedValue.lte !== 'number')) {
         throw new Error('Invalid params passed to toBeElementsArrayOfSize.')
     } else {
         numberOptions = expectedValue
     }
 
-    let elements = await received as WebdriverIO.ElementArray
+    let elements = await received as WdioElements
     const originalLength = elements.length
     const pass = await waitUntil(async () => {
         /**

src/types.ts

@@ -5,12 +5,14 @@ export type WdioElementMaybePromise =
     WebdriverIO.Element |
     ChainablePromiseElement
 
+export type WdioElements = WebdriverIO.ElementArray | WebdriverIO.Element[]
+
 export type WdioElementsMaybePromise =
-    WebdriverIO.ElementArray |
+    WdioElements |
     ChainablePromiseArray
 
 export type RawMatcherFn<Context extends MatcherContext = MatcherContext> = {
     (this: Context, actual: unknown, ...expected: unknown[]): ExpectationResult;
 }
 
-export type WdioMatchersObject = Map<string, RawMatcherFn>
+export type WdioMatchersObject = Map<string, RawMatcherFn>

src/util/elementsUtil.ts

@@ -11,3 +11,7 @@ export const wrapExpectedWithArray = (el: WebdriverIO.Element | WebdriverIO.Elem
     }
     return expected
 }
+
+export const isElementArray = (obj: unknown): obj is WebdriverIO.ElementArray => {
+    return obj !== null && typeof obj === 'object' && 'selector' in obj && 'foundWith' in obj && 'parent' in obj
+}

src/util/formatMessage.ts

@@ -1,5 +1,7 @@
 import { printDiffOrStringify, printExpected, printReceived } from 'jest-matcher-utils'
 import { equals } from '../jasmineUtils.js'
+import type { WdioElements } from '../types.js'
+import { isElementArray } from './elementsUtil.js'
 
 const EXPECTED_LABEL = 'Expected'
 const RECEIVED_LABEL = 'Received'
@@ -15,15 +17,15 @@ export const getSelector = (el: WebdriverIO.Element | WebdriverIO.ElementArray)
     return result
 }
 
-export const getSelectors = (el: WebdriverIO.Element | WebdriverIO.ElementArray) => {
+export const getSelectors = (el: WebdriverIO.Element | WdioElements) => {
     const selectors = []
-    let parent: WebdriverIO.Element | WebdriverIO.Browser | WebdriverIO.MultiRemoteBrowser | undefined
+    let parent: WebdriverIO.ElementArray['parent'] | undefined
 
-    if (Array.isArray(el)) {
-        selectors.push(`${(el as WebdriverIO.ElementArray).foundWith}(\`${getSelector(el)}\`)`)
+    if (isElementArray(el)) {
+        selectors.push(`${(el).foundWith}(\`${getSelector(el)}\`)`)
         parent = el.parent
-    } else {
-        parent = el as WebdriverIO.Element
+    } else if (!Array.isArray(el)) {
+        parent = el
     }
 
     while (parent && 'selector' in parent) {
@@ -42,7 +44,7 @@ export const not = (isNot: boolean): string => {
 }
 
 export const enhanceError = (
-    subject: string | WebdriverIO.Element | WebdriverIO.ElementArray,
+    subject: string | WebdriverIO.Element | WdioElements,
     expected: unknown,
     actual: unknown,
     context: { isNot: boolean },

src/util/refetchElements.ts

@@ -1,19 +1,19 @@
 import { DEFAULT_OPTIONS } from '../constants.js'
+import type { WdioElements } from '../types.js'
+import { isElementArray } from './elementsUtil.js'
 
 /**
- * refetch elements array
- * @param elements WebdriverIO.ElementArray
+ * Refetch elements array or return when elements is not of type WebdriverIO.ElementArray
+ * @param elements WebdriverIO.ElementArray | WebdriverIO.Element[]
  */
 export const refetchElements = async (
-    elements: WebdriverIO.ElementArray,
+    elements: WdioElements,
     wait = DEFAULT_OPTIONS.wait,
     full = false
-): Promise<WebdriverIO.ElementArray> => {
-    if (elements) {
-        if (wait > 0 && (elements.length === 0 || full)) {
-            // @ts-ignore
-            elements = (await elements.parent[elements.foundWith](elements.selector, ...elements.props) as WebdriverIO.ElementArray)
-        }
+): Promise<WdioElements> => {
+    if (elements && wait > 0 && (elements.length === 0 || full) && isElementArray(elements) && elements.parent && elements.foundWith && elements.foundWith in elements.parent) {
+        const fetchFunction = elements.parent[elements.foundWith as keyof typeof elements.parent] as Function
+        elements = await fetchFunction(elements.selector, ...elements.props)
     }
     return elements
 }

test-types/mocha/types-mocha.test.ts

@@ -7,6 +7,7 @@ describe('type assertions', () => {
 
     const element: WebdriverIO.Element = {} as unknown as WebdriverIO.Element
     const elementArray: WebdriverIO.ElementArray = [] as unknown as WebdriverIO.ElementArray
+    const elements: WebdriverIO.Element[] = [] as unknown as WebdriverIO.Element[]
 
     const networkMock: WebdriverIO.Mock = {} as unknown as WebdriverIO.Mock
 
@@ -323,6 +324,26 @@ describe('type assertions', () => {
                 expectVoid = expect(chainableArray).toBeElementsArrayOfSize({ lte: 10 })
             })
 
+            it('should work correctly when actual is element array', async () => {
+                expectPromiseVoid = expect(elementArray).toBeElementsArrayOfSize(5)
+                expectPromiseVoid = expect(elementArray).toBeElementsArrayOfSize({ lte: 10 })
+
+                // @ts-expect-error
+                expectVoid = expect(elementArray).toBeElementsArrayOfSize(5)
+                // @ts-expect-error
+                expectVoid = expect(elementArray).toBeElementsArrayOfSize({ lte: 10 })
+            })
+
+            it('should work correctly when actual is element[]', async () => {
+                expectPromiseVoid = expect(elements).toBeElementsArrayOfSize(5)
+                expectPromiseVoid = expect(elements).toBeElementsArrayOfSize({ lte: 10 })
+
+                // @ts-expect-error
+                expectVoid = expect(elements).toBeElementsArrayOfSize(5)
+                // @ts-expect-error
+                expectVoid = expect(elements).toBeElementsArrayOfSize({ lte: 10 })
+            })
+
             it('should not work when actual is not chainableArray', async () => {
             // @ts-expect-error
                 await expect(chainableElement).toBeElementsArrayOfSize(5)