Add missing element case and index out of bound from $()[x]

Author: dprevost-LMI

test/__mocks__/@wdio/globals.ts

@@ -179,6 +179,30 @@ export function chainableElementArrayFactory(selector: string, length: number) {
     // Ensure `'getElements' in chainableElements` is false while allowing to use `await chainableElement.getElements()`
     const runtimeChainablePromiseArray = new Proxy(chainablePromiseArray, {
         get(target, prop) {
+            if (typeof prop === 'string' && /^\d+$/.test(prop)) {
+                const index = parseInt(prop, 10)
+                if (index >= length) {
+                    const error = new Error(`Index out of bounds! $$(${selector}) returned only ${length} elements.`)
+                    return new Proxy(Promise.resolve(), {
+                        get(target, prop) {
+                            if (prop === 'then') {
+                                return (resolve: any, reject: any) => reject(error)
+                            }
+                            // Allow resolving methods like 'catch', 'finally' normally from the promise if needed,
+                            // but usually we want any interaction to fail?
+                            // Actually, standard promise methods might be accessed.
+                            // But the user requirements says: `$$('foo')[3].getText()` should return a promise (that rejects).
+
+                            // If accessing a property that exists on Promise (like catch, finally, Symbol.toStringTag), maybe we should be careful.
+                            // However, the test expects `el` (the proxy) to be a Promise instance.
+                            // And `el.getText()` to return a promise.
+
+                            // If I return a function that returns a rejected promise for everything else:
+                            return () => Promise.reject(error)
+                        }
+                    })
+                }
+            }
             if (elementArray && prop in elementArray) {
                 return elementArray[prop as keyof WebdriverIO.ElementArray]
             }

test/globals_mock.test.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect, vi } from 'vitest'
 import { $, $$ } from '@wdio/globals'
+import { notFoundElementFactory } from './__mocks__/@wdio/globals.js'
 
 vi.mock('@wdio/globals')
 
@@ -90,5 +91,52 @@ describe('globals mock', () => {
 
             expect(await els.getElements()).toEqual(els)
         })
+
+        it('should return a promise-like object when accessing index out of bounds', () => {
+            const el = $$('foo')[3]
+            // It shouldn't throw synchronously
+            expect(el).toBeDefined()
+            expect(el).toBeInstanceOf(Promise)
+            expect(typeof (el as any).then).toBe('function')
+
+            // Methods should return a Promise
+            const p1 = el.getElement()
+            expect(p1).toBeInstanceOf(Promise)
+            // catch unhandled rejection to avoid warnings
+            p1.catch(() => {})
+
+            const p2 = el.getText()
+            expect(p2).toBeInstanceOf(Promise)
+            // catch unhandled rejection to avoid warnings
+            p2.catch(() => {})
+        })
+
+        it('should throw "Index out of bounds" when awaiting index out of bounds', async () => {
+            await expect(async () => await $$('foo')[3]).rejects.toThrow('Index out of bounds! $$(foo) returned only 2 elements.')
+            await expect(async () => await $$('foo')[3].getElement()).rejects.toThrow('Index out of bounds! $$(foo) returned only 2 elements.')
+            await expect(async () => await $$('foo')[3].getText()).rejects.toThrow('Index out of bounds! $$(foo) returned only 2 elements.')
+        })
+    })
+
+    describe('notFoundElementFactory', () => {
+        it('should return false for isExisting', async () => {
+            const el = notFoundElementFactory('not-found')
+            expect(await el.isExisting()).toBe(false)
+        })
+
+        it('should resolve to itself when calling getElement', async () => {
+            const el = notFoundElementFactory('not-found')
+            expect(await el.getElement()).toBe(el)
+        })
+
+        it('should throw error on method calls', async () => {
+            const el = notFoundElementFactory('not-found')
+            expect(() => el.click()).toThrow("Can't call click on element with selector not-found because element wasn't found")
+        })
+
+        it('should throw error when awaiting a method call (sync throw)', async () => {
+            const el = notFoundElementFactory('not-found')
+            expect(() => el.getText()).toThrow("Can't call getText on element with selector not-found because element wasn't found")
+        })
     })
 })

test/matchers/element/toHaveText.test.ts

@@ -2,6 +2,7 @@ import { $, $$ } from '@wdio/globals'
 import { beforeEach, describe, expect, test, vi } from 'vitest'
 import { toHaveText } from '../../../src/matchers/element/toHaveText.js'
 import type { ChainablePromiseArray, ChainablePromiseElement } from 'webdriverio'
+import { notFoundElementFactory } from '../../__mocks__/@wdio/globals.js'
 
 vi.mock('@wdio/globals')
 
@@ -639,6 +640,20 @@ Expected: "webdriverio"
 Received: undefined`)
         })
 
+        // TODO view later to handle this case more gracefully
+        test('given element is not found then it throws error when an element does not exists', async () => {
+            const element: WebdriverIO.Element = notFoundElementFactory('sel')
+
+            await expect(thisContext.toHaveText(element, 'webdriverio')).rejects.toThrow("Can't call getText on element with selector sel because element wasn't found")
+        })
+
+        // TODO view later to handle this case more gracefully
+        test('given element from out of bound ChainableArray, then it throws error when an element does not exists', async () => {
+            const element: ChainablePromiseElement = $$('elements')[3]
+
+            await expect(thisContext.toHaveText(element, 'webdriverio')).rejects.toThrow('Index out of bounds! $$(elements) returned only 2 elements.')
+        })
+
         test.for([
             { actual: undefined, selectorName: 'undefined' },
             { actual: null, selectorName: 'null' },