Selectors not working properly in UI5 Apps deployed to SAP BTP

[waldpark]

Description

I have deployed a UI5 freestyle application to the SAP BTP HTML5 repository, as part of an MTA.
It can run locally and in two SAP BTP environments,

1 – localhost
2 – as a stand-alone app in the HTML5 repository,
3 – as an app inside the SAP Fiori Launch Pad

My UI5 app contains a sap.m.SearchField.

In the environment 2, the search field can be accessed using a selector like so:

    const selectorAllSearchFields = {
        wdio_ui5_key: "allSearchFields",
        selector: {
            controlType: "sap.m.SearchField",
            viewName: "myNamespace.myAppName.view.MyViewName"
        }
    }
    const searchAllFields = await browser.allControls(selectorAllSearchFields)

searchAllFields[0]._domId displays the full ID of the UI5 element as it is inside the DOM and I am able to enter text using

    await searchAllFields[0].enterText('123')

So far so good.

PROBLEM 1:
The selector which directly accesses the search field by ID would not work:

const selectorSearchField = {
    wdio_ui5_key: "searchField",
    forceSelect: true, // make sure we're retrieving from scratch
    selector: {
        id: "idTreeSearchField",
        viewName: "myNamespace.myAppName.view.MyViewName"
    }
}
const searchField = await browser.asControl(selectorSearchField)

searchField._domId is empty!
And I cannot do anything with the searchField object.

PROBLEM 2:
In environment 2, it does not work at all. I can see in the DOM tree that my UI5 app is embedded inside an iFrame. Is this the problem? If yes, is there a way for WDI5 to switch into the iFrame to access UI5 controls of Apps running in the FLP environment?

Note:
In environment 1 (localhost), both selectors work nicely.

To Reproduce
My test script looks like so:

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

    describe('App Test > ', () => {

        it('should login to SAP BTP and test the Search Field‘, async () => {

            await $('#j_username').setValue(username);
            await $('#j_password').setValue(password);
            await $('button[type="submit"]').click();
            await ui5Service.injectUI5()

            const selectorAllSearchFields = {
                wdio_ui5_key: "allSearchFields",
                selector: {
                    controlType: "sap.m.SearchField",
                    viewName: "myNamespace.myAppName.view.MyViewName"
                }
            }
            const searchAllFields = await browser.allControls(selectorAllSearchFields)
            await searchAllFields[0].enterText('123')

            const selectorSearchField = {
                wdio_ui5_key: "searchField",
                forceSelect: true, // make sure we're retrieving from scratch
                selector: {
                    id: "idTreeSearchField",
                    viewName: "myNamespace.myAppName.view.MyViewName"
                }
            }
            const searchField = await browser.asControl(selectorSearchField)
            await searchAllFields[0].enterText('456')

        })

    });

I am using

const { baseConfig } = require("./wdio.base.conf")

as in your examples with

const _config = {
    wdi5: {
		skipInjectUI5OnStart: true,

My UI5 search field is simply a search field inside the toolbar of a tree table:

…
xmlns:t="sap.ui.table"
…
                    <t:extension>
                        <OverflowToolbar style="Clear">
                            <SearchField id="idTreeSearchField"
                                width="auto"
                                liveChange="onTreeSearchLiveChange" />

Expected behavior
should be clear

Logs/Console Output
TypeError: searchField.getProperty is not a function

$> ...

Screenshots
Note: I have tried the selector suggested by the test recorder as well. No success.

Runtime Env:

• wdi5/wdio-ui5-service-version: "^0.9.15"

• UI5 version: 1.108.0

• wdio-version (output of wdio --version): 7.25.4

• node-version (output of node --version): v14.19.3

• OS: MacOS v12.3.1

• chrome 107.0.5304.87

    "@wdio/cli": "^7.25.4",
    "@wdio/local-runner": "^7.20.9",
    "@wdio/mocha-framework": "^7.25.4",
    "@wdio/spec-reporter": "^7.25.4",
    "chromedriver": "latest",
    "wdio-chromedriver-service": "^8.0.0",
    "wdio-ui5-service": "^0.9.15",
  

Additional context
See above in the description

[dominikfeininger]

Hi @waldpark, thanks for the detailed description.

Can you please make sure you didn't mix up the "environments" in your description, since you write two times about environment 2.

Can you please repeat this test with

1. another control type e.g. sap.m.Input
2. using the wdi5 sample testapp deployed on BTP: https://davinci.cpp.cfapps.eu10.hana.ondemand.com/474a7c0c-c364-4075-b53e-983472d76120.basicservice.testSample-1.0.0/index.html

Thank you.

[waldpark]

@dominikfeininger I am sorry, I meant to to write this:

PROBLEM 2:
In environment 3, it does not work at all.

A test with sap.m.Input will follow later today.

[waldpark]

@dominikfeininger: Here is my test:

With "sap.m.Input", PROBLEM 1 does not occur. The selector works in the stand-alone version of the UI5 app deployed to the HTML5 repository. And this is where your sample test app is also running.
I hope this gives you a hint for solving the problem with "sap.m.SearchField".

PROBLEM 2 is still the same. It does not work for a UI5 App deployed to SAP BTP, running in the SAP Fiori Launchpad.

Code-snippets:

    …
    xmlns:t="sap.ui.table"
    …
                    <t:extension>
                        <OverflowToolbar style="Clear">
                            <Input id="idInputField" class="sapUiTinyMarginBegin" value="" width="5rem"/>
                            <SearchField id="idTreeSearchField"
                                width="auto"
                                liveChange="onTreeSearchLiveChange" />

wdi-script:

    const selectorInputField = {
        wdio_ui5_key: "inputField2",
        forceSelect: true, // make sure we're retrieving from scratch
        selector: {
            id: "idInputField",
            viewName: "myNamespace.myAppName.view.MyViewName"
        }
    }
    const inputField = await browser.asControl(selectorInputField2)
    await inputField.enterText('abc')

[github-actions]

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

[gregorwolf]

Good to have this reminders :-). I still need to deploy the sample app to my BTP Free Tier.

[gregorwolf]

This issue is related to #378. Please check my comment regarding a step toward testing that in a stable environment.

[github-actions]

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

[github-actions]

closed 📴 because silencio 🤫 since an additional 14 days after staleness 📠