[🐛 Bug]: Fetch multiple elements issue ($$ command)

[Nikola-Dz]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

WebdriverIO Version

v8.34.1 & v8.35.0

Node.js Version

v20.11.0

Mode

WDIO Testrunner

Which capabilities are you using?

No response

What happened?

Since the release of v8.35.00 - #12530 I'm getting an error if I try to fetch elements which are not displayed or not existing.

The test file contains 4 cases:

1. Elements exist in DOM
   1.1 Case 1 - toBeDisplayed (Synchronous assignment)
   1.2 Case 2 - toBeDisplayed (Asynchronous assignment)

2. Elements don't exist in DOM
   2.1 Case 1 - not.toBeDisplayed (Synchronous assignment)
   2.2 Case 2 - not.toBeDisplayed (Asynchronous assignment)

In older versions all 4 listed cases work perfectly fine. In v8.35.00, case 2.1 doesn't work and throws this error:

Error: Index out of bounds! $$(.div-holder-2 .paragraph-class) returned only 0 elements.

What is your expected behavior?

No response

How to reproduce the bug.

To reproduce the bug:

1. Clone repository - https://github.com/Nikola-Dz/Fetch_multiple_elements_issue.git
2. Run npm install in both folders - wdio_v8.34.1 and wdio_v8.35.0
3. Run test with command npm run wdio in each folder
4. Compare terminal logs

Relevant log output

> wdio
> wdio run ./wdio.conf.js


Execution of 1 workers started at 2024-03-25T12:48:31.351Z

[0-0] RUNNING in chrome - file:///C:/Users/uSER/Desktop/Fetch_multiple_elements_issue/test/test.e2e.js

DevTools listening on ws://127.0.0.1:53150/devtools/browser/de09977a-ef94-4703-9929-d2d8ed76e4b7
[0-0] Error in "Fetch multiple elements issue.Paragraphs don't exist in DOM.Case 1 - not.toBeDisplayed (Synchronous assi
gnment)"                                                                                                                Error: Index out of bounds! $$(.div-holder-2 .paragraph-class) returned only 0 elements.
    at async Object.executeCommandBe (file:///C:/Users/uSER/Desktop/Fetch_multiple_elements_issue/wdio_v8.35.0/node_modu
les/expect-webdriverio/lib/utils.js:52:16)                                                                                  at async Object.toBeDisplayed (file:///C:/Users/uSER/Desktop/Fetch_multiple_elements_issue/wdio_v8.35.0/node_modules
/expect-webdriverio/lib/matchers/element/toBeDisplayed.js:9:20)                                                             at async Context.<anonymous> (C:\Users\uSER\Desktop\Fetch_multiple_elements_issue\test\test.e2e.js:30:13)
[0-0] FAILED in chrome - file:///C:/Users/uSER/Desktop/Fetch_multiple_elements_issue/test/test.e2e.js

 "spec" Reporter:
------------------------------------------------------------------
[chrome 123.0.6312.59 windows #0-0] Running: chrome (v123.0.6312.59) on windows
[chrome 123.0.6312.59 windows #0-0] Session ID: a269e353d6fc95f1d78a3dbb6ca62be3
[chrome 123.0.6312.59 windows #0-0]
[chrome 123.0.6312.59 windows #0-0] » C:\Users\uSER\Desktop\Fetch_multiple_elements_issue\test\test.e2e.js
[chrome 123.0.6312.59 windows #0-0] Fetch multiple elements issue
[chrome 123.0.6312.59 windows #0-0]     Paragraphs exist in DOM
[chrome 123.0.6312.59 windows #0-0]        ✓ Case 1 - toBeDisplayed (Synchronous assignment)
[chrome 123.0.6312.59 windows #0-0]        ✓ Case 2 - toBeDisplayed (Asynchronous assignment)
[chrome 123.0.6312.59 windows #0-0]
[chrome 123.0.6312.59 windows #0-0]     Paragraphs don't exist in DOM
[chrome 123.0.6312.59 windows #0-0]        ✖ Case 1 - not.toBeDisplayed (Synchronous assignment)
[chrome 123.0.6312.59 windows #0-0]        ✓ Case 2 - not.toBeDisplayed (Asynchronous assignment)
[chrome 123.0.6312.59 windows #0-0]
[chrome 123.0.6312.59 windows #0-0] 3 passing (10.8s)
[chrome 123.0.6312.59 windows #0-0] 1 failing
[chrome 123.0.6312.59 windows #0-0]
[chrome 123.0.6312.59 windows #0-0] 1) Paragraphs don't exist in DOM Case 1 - not.toBeDisplayed (Synchronous assignment)
[chrome 123.0.6312.59 windows #0-0] Index out of bounds! $$(.div-holder-2 .paragraph-class) returned only 0 elements.   [chrome 123.0.6312.59 windows #0-0] Error: Index out of bounds! $$(.div-holder-2 .paragraph-class) returned only 0 eleme
nts.                                                                                                                    [chrome 123.0.6312.59 windows #0-0]     at async Object.executeCommandBe (file:///C:/Users/uSER/Desktop/Fetch_multiple_e
lements_issue/wdio_v8.35.0/node_modules/expect-webdriverio/lib/utils.js:52:16)                                          [chrome 123.0.6312.59 windows #0-0]     at async Object.toBeDisplayed (file:///C:/Users/uSER/Desktop/Fetch_multiple_elem
ents_issue/wdio_v8.35.0/node_modules/expect-webdriverio/lib/matchers/element/toBeDisplayed.js:9:20)                     [chrome 123.0.6312.59 windows #0-0]     at async Context.<anonymous> (C:\Users\uSER\Desktop\Fetch_multiple_elements_issu
e\test\test.e2e.js:30:13)                                                                                               

Spec Files:      0 passed, 1 failed, 1 total (100% completed) in 00:00:15

Code of Conduct

• I agree to follow this project's Code of Conduct

Is there an existing issue for this?

• I have searched the existing issues

[christian-bromann]

@Nikola-Dz thanks for raising an issue. I recently made some changes around this logic and didn't kept this use case in mind. I will look for a patch for this as it is a valid use case. Thanks for providing a reproducible example.