Can´t get control with `ancestor` selector in UI5 version `1.71` #491

marianfoo · 2023-06-21T18:06:07Z

Describe the bug

I try to get sap.m.OverflowToolbar with ancestor selector.

XML View

  <exceldialog:ExcelDialog contentWidth="{= ${device>/system/phone} ? '100%' : '40vw' }" contentHeight="150px" verticalScrolling="false">
    <exceldialog:customHeader >
      <OverflowToolbar>
        <Title text="{i18n>excelupload}" />
        <ToolbarSpacer/>
        <Button press="showPreview" text="{i18n>showPreview}" icon="sap-icon://display" visible="{= !${info>/hidePreview}}"/>
        <Button press="onTempDownload" text="{i18n>downloadTemplate}" icon="sap-icon://download-from-cloud" />
        <Button press="onOpenOptionsDialog" text="{i18n>showOptionMenu}" visible="{= ${info>/showOptions}}">
          <layoutData>
            <OverflowToolbarLayoutData priority="AlwaysOverflow"/>
          </layoutData>
        </Button>
      </OverflowToolbar>
    </exceldialog:customHeader>
    <exceldialog:content>
      <FlexBox direction="Column" height="100%" width="80%" alignItems="Stretch" justifyContent="Center" fitContainer="true" class="centered">
        <MessageStrip xmlns:core="sap.ui.core" core:require="{ formatMessage: 'sap/base/strings/formatMessage' }" visible="{= ${info>/dataRows} > 0}" text="{
        parts: [
          'i18n>dataRows',
          'info>/dataRows'
        ],
        formatter: 'formatMessage'
      }" type="Success" enableFormattedText="true" showIcon="true">
          <layoutData>
            <FlexItemData growFactor="1" styleClass="centeredFlex" />
          </layoutData>
        </MessageStrip>
        <upload:FileUploader placeholder="{i18n>exceluploadPlaceholder}" fileType="xlsx,xls,csv" change="onFileUpload" sameFilenameAllowed="true" width="100%">
          <upload:layoutData>
            <FlexItemData growFactor="5" styleClass="centeredFlex"/>
          </upload:layoutData>
        </upload:FileUploader>
      </FlexBox>
    </exceldialog:content>
    <exceldialog:buttons>
      <Button text="{i18n>upload}" press="onUploadSet" type="Emphasized" enabled="{= ${info>/dataRows} > 0}" />
      <Button press="onCloseDialog" text="{i18n>close}" />
    </exceldialog:buttons>
  </exceldialog:ExcelDialog>

UI5 Inspector

Test

https://github.com/marianfoo/ui5-cc-excelUpload/blob/4f31a5fb93a2222cb0b07decc2ba16704610319a/examples/test/specs/all/SetAvailableOptionsListReport.test.js#L61-L69

		const overflowToolbar = await browser.asControl({
			forceSelect: true,
			selector: {
				ancestor: {
					controlType: "cc.excelUpload.v0_19_0.ExcelDialog"
				},
				controlType: "sap.m.OverflowToolbar"
			}
		});

Error

To Reproduce

Steps to reproduce the behavior:

Setup

git clone https://github.com/marianfoo/ui5-cc-excelUpload
git checkout test/wdi5-ancestor
pnpm i
npm run copyTestApps
npm run build

Start App

npm run start:server
pnpm --filter ordersv2fe71 start

Run Test

pnpm --filter  ui5-cc-excelupload-sample  test -- ordersv2fe 71 --spec SetAvailableOptionsListReport.test

Expected behavior
Get the overflow toolbar.

Logs/Console Output

 pnpm --filter  ui5-cc-excelupload-sample  test -- ordersv2fe 71 --spec SetAvailableOptionsListReport.test
Debugger attached.

> ui5-cc-excelupload-sample@0.0.0 test /Users/marianzeis/DEV/ui5-cc-excelUpload/examples
> wdio run ./test/wdio-base.conf.js "ordersv2fe" "71" "--spec" "SetAvailableOptionsListReport.test"

Debugger attached.

Execution of 1 spec files started at 2023-06-21T17:56:43.489Z

[0-0] RUNNING in chrome - /test/specs/all/SetAvailableOptionsListReport.test.js
[0-0] [wdi5] call of _getControl() failed because of: Error: No DOM element found using the control selector {"matchers":[null],"sOriginalControlType":"sap.m.OverflowToolbar"}
[0-0] [wdi5] error retrieving control: sapm.OverflowToolbar{"controlType":"cc.excelUpload.v0_19_0.ExcelDialog"}
[0-0] TypeError in "Upload File List Report Open Options Menu"
TypeError: overflowToolbar.getId is not a function
    at Context.<anonymous> (/Users/marianzeis/DEV/ui5-cc-excelUpload/examples/test/specs/all/SetAvailableOptionsListReport.test.js:70:51)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Context.executeAsync (/Users/marianzeis/DEV/ui5-cc-excelUpload/node_modules/.pnpm/@wdio+utils@7.0.0/node_modules/@wdio/utils/build/shim.js:137:16)
    at async Context.exports.testFrameworkFnWrapper (/Users/marianzeis/DEV/ui5-cc-excelUpload/node_modules/.pnpm/@wdio+utils@7.0.0/node_modules/@wdio/utils/build/test-framework/testFnWrapper.js:51:18)
[0-0] [wdi5] call of _getControl() failed because of: Error: No DOM element found using the control selector {"matchers":[null],"sOriginalControlType":"sap.ui.layout.Grid"}
[0-0] [wdi5] error retrieving control: sapui.layout.Grid{"id":"__form0"}
[0-0] TypeError in "Upload File List Report Check only strict available"
TypeError: grid.getContent is not a function
    at Context.<anonymous> (/Users/marianzeis/DEV/ui5-cc-excelUpload/examples/test/specs/all/SetAvailableOptionsListReport.test.js:94:30)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Context.executeAsync (/Users/marianzeis/DEV/ui5-cc-excelUpload/node_modules/.pnpm/@wdio+utils@7.0.0/node_modules/@wdio/utils/build/shim.js:137:16)
    at async Context.exports.testFrameworkFnWrapper (/Users/marianzeis/DEV/ui5-cc-excelUpload/node_modules/.pnpm/@wdio+utils@7.0.0/node_modules/@wdio/utils/build/test-framework/testFnWrapper.js:51:18)
[0-0] FAILED in chrome - /test/specs/all/SetAvailableOptionsListReport.test.js

 "spec" Reporter:
------------------------------------------------------------------
[chrome 114.0.5735.133 mac os x #0-0] Spec: /Users/marianzeis/DEV/ui5-cc-excelUpload/examples/test/specs/all/SetAvailableOptionsListReport.test.js
[chrome 114.0.5735.133 mac os x #0-0] Running: chrome (v114.0.5735.133) on mac os x
[chrome 114.0.5735.133 mac os x #0-0] Session ID: 20aca72763de97d47c0fb01cac35826b
[chrome 114.0.5735.133 mac os x #0-0]
[chrome 114.0.5735.133 mac os x #0-0] Upload File List Report
[chrome 114.0.5735.133 mac os x #0-0]    ✓ should trigger search on ListReport page
[chrome 114.0.5735.133 mac os x #0-0]    ✓ Open ExcelUpload Dialog
[chrome 114.0.5735.133 mac os x #0-0]    ✖ Open Options Menu
[chrome 114.0.5735.133 mac os x #0-0]    ✖ Check only strict available
[chrome 114.0.5735.133 mac os x #0-0]
[chrome 114.0.5735.133 mac os x #0-0] 2 passing (3.7s)
[chrome 114.0.5735.133 mac os x #0-0] 2 failing
[chrome 114.0.5735.133 mac os x #0-0]
[chrome 114.0.5735.133 mac os x #0-0] 1) Upload File List Report Open Options Menu
[chrome 114.0.5735.133 mac os x #0-0] overflowToolbar.getId is not a function
[chrome 114.0.5735.133 mac os x #0-0] TypeError: overflowToolbar.getId is not a function
[chrome 114.0.5735.133 mac os x #0-0]     at Context.<anonymous> (/Users/marianzeis/DEV/ui5-cc-excelUpload/examples/test/specs/all/SetAvailableOptionsListReport.test.js:70:51)
[chrome 114.0.5735.133 mac os x #0-0]     at processTicksAndRejections (node:internal/process/task_queues:95:5)
[chrome 114.0.5735.133 mac os x #0-0]     at async Context.executeAsync (/Users/marianzeis/DEV/ui5-cc-excelUpload/node_modules/.pnpm/@wdio+utils@7.0.0/node_modules/@wdio/utils/build/shim.js:137:16)
[chrome 114.0.5735.133 mac os x #0-0]     at async Context.exports.testFrameworkFnWrapper (/Users/marianzeis/DEV/ui5-cc-excelUpload/node_modules/.pnpm/@wdio+utils@7.0.0/node_modules/@wdio/utils/build/test-framework/testFnWrapper.js:51:18)
[chrome 114.0.5735.133 mac os x #0-0]
[chrome 114.0.5735.133 mac os x #0-0] 2) Upload File List Report Check only strict available
[chrome 114.0.5735.133 mac os x #0-0] grid.getContent is not a function
[chrome 114.0.5735.133 mac os x #0-0] TypeError: grid.getContent is not a function
[chrome 114.0.5735.133 mac os x #0-0]     at Context.<anonymous> (/Users/marianzeis/DEV/ui5-cc-excelUpload/examples/test/specs/all/SetAvailableOptionsListReport.test.js:94:30)
[chrome 114.0.5735.133 mac os x #0-0]     at processTicksAndRejections (node:internal/process/task_queues:95:5)
[chrome 114.0.5735.133 mac os x #0-0]     at async Context.executeAsync (/Users/marianzeis/DEV/ui5-cc-excelUpload/node_modules/.pnpm/@wdio+utils@7.0.0/node_modules/@wdio/utils/build/shim.js:137:16)
[chrome 114.0.5735.133 mac os x #0-0]     at async Context.exports.testFrameworkFnWrapper (/Users/marianzeis/DEV/ui5-cc-excelUpload/node_modules/.pnpm/@wdio+utils@7.0.0/node_modules/@wdio/utils/build/test-framework/testFnWrapper.js:51:18)


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

Waiting for the debugger to disconnect...

Screenshots
if applicable, add screenshots to help explain your problem.

Runtime Env (please complete the following information):

wdi5/wdio-ui5-service-version: 1.5.0
UI5 version: 1.108.14
wdio-version (output of wdio --version): v7
node-version (output of node --version): 18.14.0
OS: macOS
Browser + Version Chrome 1.114

Additional context

It works with version 1.84 and up see this workflow run:
https://github.com/marianfoo/ui5-cc-excelUpload/actions/runs/5335263656

Current workaround with regex 😣

const overflowToolbar = await browser.asControl({
			selector: {
				controlType: "sap.m.OverflowToolbar",
				id: new RegExp('^__toolbar.*', 'gm')

			}
		});

I can´t use a fixed id because they are different with every ui5 version 🫠

The text was updated successfully, but these errors were encountered:

Siolto · 2023-06-22T08:01:30Z

Hi @marianfoo the declarative ancestor matcher is only available since 1.72 😞. Let me check if I can find a workaround

Siolto · 2023-06-22T13:05:42Z

@marianfoo I had a look again at our coding and forgot that we already tried to fix this by instantiating the relevant matchers programmatically. So it should work with 1.71 and below
We will look into this!

Siolto · 2023-06-28T08:47:06Z

@vobu @dominikfeininger: we have to discuss about this issue. Some matchers like ancestor or descendent worked differently before 1.72. Maybe we should drop the support for the old versions.

marianfoo · 2023-06-28T09:01:06Z

I thought about dropping support for the version 1.71 too, but this version is in maintenance till end of 2027 or 2030.
If there are no other options to implement this, what about warnings like i suggestes here in #493 ?

Siolto · 2023-06-28T09:27:08Z

agree. I would extend your #493 with all the problematic matchers and remove the support from the coding or even make a hint there

vobu · 2023-07-14T13:32:38Z

after an ad-hoc maintainer meeting (😸), we agreed to

support the ancestor selector for 1.71 with a dedicated id for the parent
log a warning to the console if that selector is used wrongly
provide a recipe on how to use the ancestor selector with its' parent id with UI5 1.71
@Siolto

github-actions · 2023-08-14T02:02:33Z

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

github-actions · 2023-08-28T02:04:06Z

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

Siolto · 2023-08-28T07:22:29Z

This is still valid

github-actions · 2023-09-29T02:04:52Z

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

github-actions · 2023-10-13T02:08:25Z

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

marianfoo · 2024-04-19T04:28:24Z

I have just stumbled across the problem again :/

But this time i guess bindingPath is not working for 1.71?

const settingsButton = await browser.asControl({
			selector: {
				controlType: "sap.m.Button",
				properties: {
					icon: "sap-icon://action-settings"
				},
				bindingPath: {
					path: "",
					propertyPath: "/showOptions",
					modelName: "info"
				},
				searchOpenDialogs: true
			}
		});

Siolto · 2024-04-19T07:45:48Z

Thanks for reminding us! We need to have a look at this...

Siolto · 2024-04-19T10:14:17Z

So for the ancestor/descendant case as already discussed:

When we have a stable id we can do something like this in 1.71:

await browser.asControl({
    selector: {
        controlType: "sap.m.StandardListItem",
        viewName: "my.super.view.Name",
        ancestor: "myStableId"
    }
})

When we do not have a stable Id we have to retrieve the control id first:

const ancestorId = await browser.asControl({
            selector: {
                controlType: "sap.m.List",
                viewName: "my.super.view.Name",
            }
        }).getId()

await browser.asControl({
            selector: {
                controlType: "sap.m.StandardListItem",
                viewName: "my.super.view.Name",
                ancestor: ancestorId,
            }
        });

I have also checked the bindingPath case and for me it looks like that it should behave the same in 1.71. like in the higher versions

github-actions · 2024-05-20T02:18:32Z

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

marianfoo mentioned this issue Jun 21, 2023

Error on using the method getFormContainers on sap.ui.layout.form.Form #488

Closed

marianfoo mentioned this issue Jun 22, 2023

docs: add warning for ancestor for ui5 api availability #493

Closed

Siolto added the bug Something isn't working label Jun 22, 2023

Siolto self-assigned this Jun 22, 2023

github-actions bot added the stale label Aug 14, 2023

github-actions bot closed this as completed Aug 28, 2023

Siolto reopened this Aug 28, 2023

github-actions bot removed the stale label Aug 29, 2023

github-actions bot added the stale label Sep 29, 2023

github-actions bot closed this as completed Oct 13, 2023

Siolto reopened this Apr 19, 2024

github-actions bot removed the stale label Apr 20, 2024

github-actions bot added the stale label May 20, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Can´t get control with `ancestor` selector in UI5 version `1.71` #491

Can´t get control with `ancestor` selector in UI5 version `1.71` #491

marianfoo commented Jun 21, 2023 •

edited

Siolto commented Jun 22, 2023

Siolto commented Jun 22, 2023 •

edited

Siolto commented Jun 28, 2023

marianfoo commented Jun 28, 2023

Siolto commented Jun 28, 2023

vobu commented Jul 14, 2023

github-actions bot commented Aug 14, 2023

github-actions bot commented Aug 28, 2023

Siolto commented Aug 28, 2023

github-actions bot commented Sep 29, 2023

github-actions bot commented Oct 13, 2023

marianfoo commented Apr 19, 2024 •

edited

Siolto commented Apr 19, 2024

Siolto commented Apr 19, 2024

github-actions bot commented May 20, 2024

Can´t get control with ancestor selector in UI5 version 1.71 #491

Can´t get control with ancestor selector in UI5 version 1.71 #491

Comments

marianfoo commented Jun 21, 2023 • edited

Describe the bug

XML View

UI5 Inspector

Test

Error

To Reproduce

Additional context

Siolto commented Jun 22, 2023

Siolto commented Jun 22, 2023 • edited

Siolto commented Jun 28, 2023

marianfoo commented Jun 28, 2023

Siolto commented Jun 28, 2023

vobu commented Jul 14, 2023

github-actions bot commented Aug 14, 2023

github-actions bot commented Aug 28, 2023

Siolto commented Aug 28, 2023

github-actions bot commented Sep 29, 2023

github-actions bot commented Oct 13, 2023

marianfoo commented Apr 19, 2024 • edited

Siolto commented Apr 19, 2024

Siolto commented Apr 19, 2024

github-actions bot commented May 20, 2024

Can´t get control with `ancestor` selector in UI5 version `1.71` #491

Can´t get control with `ancestor` selector in UI5 version `1.71` #491

marianfoo commented Jun 21, 2023 •

edited

Siolto commented Jun 22, 2023 •

edited

marianfoo commented Apr 19, 2024 •

edited