help with using WaitUntil when passing $$ selected page object elements to a separate function

[troyyer]

hi there,

I know I'm doing this wrong but I am not sure how to correct my incorrect logic. So I have a WaitUntil piece of code that works correctly within the Test Script but when I try to move it to a separate function I am not getting it to work properly
the below will work as expected.

//in my pageoject file
get ActiveProductListings ()    { return $$(`//div[@mydetails_mydetails][@data-product]`); }
  
//in test.js
 await browser.waitUntil(
    async () => await CommunityPOPage.ActiveProductListings.length >= 1,
    {
      timeout: 15000,
      timeoutMsg: 'expected the Product array to have some records'
    }
  )

but if i now want to try and make this a repeatable function it doesnt work

//function in webUtils.js
async waitUntilArrayNotEmpty(webElementArray, timeout = 15000, timeoutMsg = '') {
  await browser.waitUntil(
    async () => await webElementArray.length >= 1,
    { timeout, timeoutMsg }
  );
};

//in test spec file (note page object is same as above)
  
 await webUtils.waitUntilArrayNotEmpty(
    await CommunityPOPage.ActiveProductListings, 
    15000, 
    'expected the Product List array to have some records');
  

Any guidance would be greatly appreciated.

[christian-bromann]

@troyyer what's the error you are seeing? The code looks ok to me.

[troyyer]

@christian-bromann
Apologies, I didn't provide enough information in the first post. So after I had refactored the code to trial a common function, when I pass in the page object $$ element to the function, the code always seems to timeout with the timeoutMsg supplied to the function. So the code doesnt break, it just doesn't seem to locate the element/retry looking for the element (it should be constantly retrying to find the element correct?) even thou it has appeared on the page. As mentioned in the earlier post, if I just use the existing code within the test script, it works as expected of the framework.

To add more information,

1. On my page being tested, the elements that are checked, appear a few seconds after the page load.
2. I am still using V7 of webdriverIO. I was updating to V8 but found the issue from this ticket [🐛 Bug]: element.scrollIntoView() throws "Request failed with status 500 due to move target out of bounds: move target out of bounds" #11866 to clog up the terminal and logs a bit too much so will wait until after to retry V8

I had read your comment in this discussion #6746 (reply in thread) and you had mentioned that " if you define this value before then it would never be updated." so is this potentially the issue I am facing because I am passing the Page object to the function?

[christian-bromann]

I am still using V7 of webdriverIO.

A lot of things have changed since v7 (internally) so for me it is hard to guess what could be the issue. I recommend to update to v8.

Maybe you can provide a very simplistic example I could run on my machine that reproduces what you experience.

[troyyer]

@christian-bromann, yup I will definitely be going to update to V8 in the near future
Here is a sample test where i could reproduce the error with v8
https://github.com/troyyer/wdiosampleforwaituntil

i have 3 tests running and the test named "tests dynamic loading length to function" always fails for me
this is the terminal logs from my last run from the step prior to the failure

[0-0] 2024-01-14T09:08:39.301Z INFO webdriver: DATA { using: 'xpath', value: '//*[@id="start"]/button' }
[0-0] 2024-01-14T09:08:39.308Z INFO webdriver: RESULT {
[0-0]   'element-6066-11e4-a52e-4f735466cecf': 'E0BF813FD5C0ABDB4E54EC073966E989_element_34'
[0-0] }
[0-0] 2024-01-14T09:08:39.310Z INFO webdriver: COMMAND elementClick("E0BF813FD5C0ABDB4E54EC073966E989_element_34")
[0-0] 2024-01-14T09:08:39.310Z INFO webdriver: [POST] http://0.0.0.0:53916/session/05f68f0b7876db5aec7bfdadc32609b8/element/E0BF813FD5C0ABDB4E54EC073966E989_element_34/click
[0-0] 2024-01-14T09:08:39.334Z INFO webdriver: RESULT null
[0-0] 2024-01-14T09:08:39.334Z INFO webdriver: COMMAND findElements("css selector", "#finish")
[0-0] 2024-01-14T09:08:39.335Z INFO webdriver: [POST] http://0.0.0.0:53916/session/05f68f0b7876db5aec7bfdadc32609b8/elements
[0-0] 2024-01-14T09:08:39.335Z INFO webdriver: DATA { using: 'css selector', value: '#finish' }
[0-0] 2024-01-14T09:08:39.341Z INFO webdriver: RESULT []
[0-0] Error in "dynamic loading.tests dynamic loading length to function "
Error: expected the array to have some records
    at async LoginPage.waitUntilArrayNotEmpty (C:\code\sample\test\pageobjects\login.page.js:17:3)
    at async Context.<anonymous> (C:\code\sample\test\specs\test.e2e.js:34:5)
[0-0] 2024-01-14T09:08:54.360Z INFO webdriver: COMMAND deleteSession()
[0-0] 2024-01-14T09:08:54.361Z INFO webdriver: [DELETE] http://0.0.0.0:53916/session/05f68f0b7876db5aec7bfdadc32609b8
[0-0] 2024-01-14T09:08:54.470Z INFO webdriver: RESULT null
 "spec" Reporter:
------------------------------------------------------------------
[chrome 120.0.6099.130 windows #0-0] Running: chrome (v120.0.6099.130) on windows
[chrome 120.0.6099.130 windows #0-0] Session ID: 05f68f0b7876db5aec7bfdadc32609b8
[chrome 120.0.6099.130 windows #0-0]
[chrome 120.0.6099.130 windows #0-0] » \test\specs\test.e2e.js
[chrome 120.0.6099.130 windows #0-0] dynamic loading
[chrome 120.0.6099.130 windows #0-0]    ✓ tests dynamic loading
[chrome 120.0.6099.130 windows #0-0]    ✓ tests dynamic loading length
[chrome 120.0.6099.130 windows #0-0]    ✖ tests dynamic loading length to function
[chrome 120.0.6099.130 windows #0-0]
[chrome 120.0.6099.130 windows #0-0] 2 passing (30.5s)
[chrome 120.0.6099.130 windows #0-0] 1 failing
[chrome 120.0.6099.130 windows #0-0]
[chrome 120.0.6099.130 windows #0-0] 1) dynamic loading tests dynamic loading length to function
[chrome 120.0.6099.130 windows #0-0] expected the array to have some records
[chrome 120.0.6099.130 windows #0-0] Error: expected the array to have some records
[chrome 120.0.6099.130 windows #0-0]     at async LoginPage.waitUntilArrayNotEmpty (C:\code\sample\test\pageobjects\login.page.js:17:3)
[chrome 120.0.6099.130 windows #0-0]     at async Context.<anonymous> (C:\code\sample\test\specs\test.e2e.js:34:5)

[christian-bromann]

Hey @troyyer , thanks for providing the example, it made things very clear. As you already have mentioned above when fetching elements through WebdriverIO, you will obtain an element reference which doesn't update unless you refetch it. In your function you pass in an element reference (of an empty element array) and continue to ask for the length which always remains 0. A workaround would be:

async waitUntilArrayNotEmpty(webElementArray, timeout = 15000, timeoutMsg = '') {
  await browser.waitUntil(
    async () => (await $$(webElementArray.selector)).length >= 1,
    { timeout, timeoutMsg }
  );
};

The selector property enables you to make the same request again and get an updated value from the element by refetching it. I think this is the best way to move forward.

[troyyer]

@christian-bromann
Thanks for your help. Yes your code correction got the code to work now. Thanks for your time again!
Sorry to take more of your time but would you be able to provide some more explaination as to why does it work when the Page Object value is referenced within the test script but when the object is passed into a function it doesn't (or it does and my technical understanding and implementation within the framework is wrong)? Is it something to do with javascript/nodejs or is it a webdriver quirk?

[christian-bromann]

It is a JavaScript quirk .. if you define PageObjects with getter, the request to the element is made when access the page object element property which is why you get your element in time when you need it and don't pass around references.