wdi5 asControl() waitForUI5Options waitAsync problems

[mrudolf-udina]

Describe the bug
When trying to use wdi5 for our shop, using any asControl() function runs either into an error saying "all of _getControl() failed because of: Error: waitAsync is already running and cannot be called again at this moment" or "Cannot read properties of undefined (reading 'waitForUI5Options')", which is kind of random what error message pops up and causes the test case to fail.

To Reproduce
Steps to reproduce the behavior:

After cloning a copy of the shop from the dev branch to VS Code, the following steps need to be done

1. run npm i
2. run cf install-plugin DefaultEnv
3. run cf login -a https://api.cf.eu10.hana.ondemand.com -u [EMAIL] -p '[PASSWORD]'
4. run cf default-env udina-commerce-approuter
5. run npm init wdi5@latest -- --js --baseUrl http://localhost:8080/backend/sap/opu/odata/udina/commerce_srv/$metadata --configPath test/ --specs ./test/specs
6. create a .env file in the root directory of the project with the following lines for Basic Authentification for the backend:
   wdi5_username='[USERNAME]
   wdi5_password='[PASSWORD]'
7. paste the following code in the new sample.test.js file:

const { wdi5 } = require("wdio-ui5-service")

describe('UDINA Tests', () => {
   it("Should use asControl", async () => {
        await console.log("1")
        await browser.pause(1500)

        await console.log("2")

        await browser.asControl({
            selector: {
                controlType: "sap.m.Button",
                viewName: "udina.commerce.shop.view.App",
                bindingPath: {
                    path: "",
                    propertyPath: "/User/UserName",
                    modelName: "app",
                }
            }
        }).press();
        
        await console.log("3")
    })
});

8. replace the code in the wdio.conf.js file with the following code:
   wdio.conf.txt
9. in the indexLocal.html add the theme data-sap-ui-theme="sap_fiori_3"
10. run ui5 serve in one terminal
11. open a second terminal and run npx wdio run test/wdio.conf.js or add a script to the package.json file "wdi5": "wdio run test/\\wdio.conf.js" and run the script
12. after logging in into the backend, the worker should get to the point where the main page is loaded and it tries to call the asControl() function with the given selector and runs into either one of the previously mentioned errors
13. See the error in the second terminal on VS Code

Expected behavior
The test should click on the button and be redirected to the new page

Logs/Console Output
waitAsync error:

npx wdio run test/wdio.conf.js

Execution of 1 workers started at 2024-03-27T06:43:22.154Z

[0-0] RUNNING in chrome - file:///C:/Users/rudolf/.a%20Jira%20Tickets/udina.commerce.html5.shop-5/test/specs/sample.test.js

DevTools listening on ws://127.0.0.1:58745/devtools/browser/614f140a-a5ae-4e0a-ac6e-f87fa17dc900
[0-0] 1
[0-0] 2
[0-0] [wdi5] call of _getControl() failed because of: Error: waitAsync is already running and cannot be called again at this moment
[0-0] [wdi5] error retrieving control: udinacommerce.shop.view.Appsap.m.Button{"path":"","propertyPath":"/User/UserName","modelName":"app"}
[0-0] [wdi5] cannot call press(), because control could not be found
[0-0] 3
[0-0] PASSED in chrome - file:///C:/Users/rudolf/.a%20Jira%20Tickets/udina.commerce.html5.shop-5/test/specs/sample.test.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: 6691b0faca1fdad4140b28d5f5211ca2
[chrome 123.0.6312.59 windows #0-0]
[chrome 123.0.6312.59 windows #0-0] » \test\specs\sample.test.js
[chrome 123.0.6312.59 windows #0-0] UDINA Tests
[chrome 123.0.6312.59 windows #0-0]    ✓ Should use asControl
[chrome 123.0.6312.59 windows #0-0]
[chrome 123.0.6312.59 windows #0-0] 1 passing (17.8s)


Spec Files:      1 passed, 1 total (100% completed) in 00:00:26

waitForUI5Options error:

npx wdio run test/wdio.conf.js        

Execution of 1 workers started at 2024-03-27T05:36:20.078Z

[0-0] RUNNING in chrome - file:///C:/Users/rudolf/.a%20Jira%20Tickets/udina.commerce.html5.shop-5/test/specs/sample.test.js

DevTools listening on ws://127.0.0.1:58467/devtools/browser/6e2ca571-6f24-428d-8b0f-794aefa09ecd
[0-0] 1
[0-0] 2
[0-0] 2024-03-27T05:36:40.843Z ERROR webdriver: Request failed with status 500 due to javascript error: javascript error: Cannot read properties of undefined (reading 'waitForUI5Options')
[0-0] JavaScript stack:
[0-0] TypeError: Cannot read properties of undefined (reading 'waitForUI5Options')
[0-0]     at eval (eval at executeAsyncScript (:472:26), <anonymous>:4:65)
[0-0]     at eval (eval at executeAsyncScript (:472:26), <anonymous>:33:8)
[0-0]     at eval (eval at executeAsyncScript (:472:26), <anonymous>:33:33)
[0-0]     at executeAsyncScript (<anonymous>:472:47)
[0-0]     at apply.selector.bindingPath.modelName (<anonymous>:487:29)
[0-0]     at callFunction (<anonymous>:366:22)
[0-0]     at <anonymous>:380:23
[0-0]     at <anonymous>:381:3
[0-0]   (Session info: chrome=123.0.6312.59)
[0-0] javascript error in "UDINA Tests.Should use asControl"
javascript error: javascript error: Cannot read properties of undefined (reading 'waitForUI5Options')
JavaScript stack:
TypeError: Cannot read properties of undefined (reading 'waitForUI5Options')
    at eval (eval at executeAsyncScript (:472:26), <anonymous>:4:65)
    at eval (eval at executeAsyncScript (:472:26), <anonymous>:33:8)
    at eval (eval at executeAsyncScript (:472:26), <anonymous>:33:33)
    at executeAsyncScript (<anonymous>:472:47)
    at apply.selector.bindingPath.modelName (<anonymous>:487:29)
    at callFunction (<anonymous>:366:22)
    at <anonymous>:380:23
    at <anonymous>:381:3
  (Session info: chrome=123.0.6312.59)
    at async clientSide_getControl (C:\Users\rudolf\.a Jira Tickets\udina.commerce.html5.shop-5\node_modules\wdio-ui5-service\client-side-js\getControl.cjs:3:12)
    at async WDI5Control._getControl (file:///C:/Users/rudolf/.a%20Jira%20Tickets/udina.commerce.html5.shop-5/node_modules/wdio-ui5-service/esm/lib/wdi5-control.js:616:26)
    at async WDI5Control.init (file:///C:/Users/rudolf/.a%20Jira%20Tickets/udina.commerce.html5.shop-5/node_modules/wdio-ui5-service/esm/lib/wdi5-control.js:75:31)
    at async Browser.<anonymous> (file:///C:/Users/rudolf/.a%20Jira%20Tickets/udina.commerce.html5.shop-5/node_modules/wdio-ui5-service/esm/lib/wdi5-bridge.js:224:33)
[0-0] FAILED in chrome - file:///C:/Users/rudolf/.a%20Jira%20Tickets/udina.commerce.html5.shop-5/test/specs/sample.test.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: f6d265e4e3e35b61d755eaffa359209d
[chrome 123.0.6312.59 windows #0-0]
[chrome 123.0.6312.59 windows #0-0] » \test\specs\sample.test.js
[chrome 123.0.6312.59 windows #0-0] UDINA Tests
[chrome 123.0.6312.59 windows #0-0]    ✖ Should use asControl
[chrome 123.0.6312.59 windows #0-0]
[chrome 123.0.6312.59 windows #0-0]     at eval (eval at executeAsyncScript (:472:26), <anonymous>:33:33)
[chrome 123.0.6312.59 windows #0-0]     at executeAsyncScript (<anonymous>:472:47)
[chrome 123.0.6312.59 windows #0-0]     at apply.selector.bindingPath.modelName (<anonymous>:487:29)
[chrome 123.0.6312.59 windows #0-0]     at callFunction (<anonymous>:366:22)
[chrome 123.0.6312.59 windows #0-0]     at <anonymous>:380:23
[chrome 123.0.6312.59 windows #0-0]     at <anonymous>:381:3
[chrome 123.0.6312.59 windows #0-0]   (Session info: chrome=123.0.6312.59)
[chrome 123.0.6312.59 windows #0-0]     at async clientSide_getControl (C:\Users\rudolf\.a Jira Tickets\udina.commerce.html5.shop-5\node_modules\wdio-ui5-service\client-side-js\getControl.cjs:3:12)
[chrome 123.0.6312.59 windows #0-0]     at async WDI5Control._getControl (file:///C:/Users/rudolf/.a%20Jira%20Tickets/udina.commerce.html5.shop-5/node_modules/wdio-ui5-service/esm/lib/wdi5-control.js:616:26)
[chrome 123.0.6312.59 windows #0-0]     at async WDI5Control.init (file:///C:/Users/rudolf/.a%20Jira%20Tickets/udina.commerce.html5.shop-5/node_modules/wdio-ui5-service/esm/lib/wdi5-control.js:75:31)
[chrome 123.0.6312.59 windows #0-0]     at async Browser.<anonymous> (file:///C:/Users/rudolf/.a%20Jira%20Tickets/udina.commerce.html5.shop-5/node_modules/wdio-ui5-service/esm/lib/wdi5-bridge.js:224:33)


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

Screenshots

Runtime Env (please complete the following information):

• wdi5/wdio-ui5-service-version: 2.0.6
• UI5 version: 1.120.4
• wdio-version (output of wdio --version): wdio : Die Benennung "wdio" wurde nicht als Name eines Cmdlet [...]
• node-version (output of node --version): v20.11.0
• OS: Windows 11 Pro
• Chrome 123.0.6312.59

Additional context
Other context about the problem:

the target browser is started with "--no-sandbox"
the code for the sample.test.js selector was created via the UI5 Journey Recorder and several different selectors were tested but all of them caused the same errors

[vobu]

first of all, thanks for the very detailed description of your issue 👍
we've seen similar behaviour in UI5 apps where an OData endpoint is continuously polled, causing ongoing async requests, resulting in the UI5 lifecycle to never complete.
To circumvent this, "exclude" the URL that is continuously polled from the UI5 lifecycle via https://ui5-community.github.io/wdi5/#/configuration?id=ignoreautowaiturls

[mrudolf-udina]

For those facing the same problem:

The problem was that wdi5 couldn't be properly injected into the browser. The solution for this is to add the following lines of code into the test.js spec file:

add to the very first line:

const { default: _ui5Service } = require("wdio-ui5-service") 
const ui5Service = new _ui5Service()

and before all tests, add:
await ui5Service.injectUI5()

which does the trick and asControl() can be used now!

[Siolto]

@mrudolf-udina great that you could resolve the issue! Your solution seems to be a workaround for a more underlying issue because with our standard authentication options you should not have to injectUI5 manually again.

Your sample you shared seems like an application you use inside of SAP. As we are not SAP employees do you have a reproducible example which we - as externals - can use?

[vobu]

after some thinking, I feel that I got to the root cause of things:
when basic auth is used in wdi5, and basicAuthUrls is different from baseUrl, the wdi5 injection gets obliterated.

Here's how that happens:

• wdi5 navs to the app under test (baseUrl)
• wdi5 correctly gets injected
• then, wdio gets into the driver seat: it navs to the url to auth against (basicAuthUrls)
• after successful auth, wdio navs back to the app under test (baseUrl) →
  no more wdi5 here, as basicAuthUrls lives on a different page than baseUrl
  thus the need to re-inject wdi5 as @mrudolf-udina explained

Essentially I believe this is a bug 🐛

[github-actions]

hey 👋 - silence for 30 days 🤐 ... anybody? 😀