search

ui5-community / wdi5

official UI5 end-to-end test framework for UI5 web-apps. wdi5 = Webdriver.IO + UI5 Test API
https://ui5-community.github.io/wdi5/
Apache License 2.0
102 stars 43 forks source link

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

Closed marianfoo closed 4 months ago

marianfoo commented 1 year ago

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

image

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

image

To Reproduce

Steps to reproduce the behavior:

  1. Setup 
    git clone https://github.com/marianfoo/ui5-cc-excelUpload
git checkout test/wdi5-ancestor
pnpm i
npm run copyTestApps
npm run build
  2. Start App 
    npm run start:server
pnpm --filter ordersv2fe71 start
  3. 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):

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 🫠

Siolto commented 1 year ago

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

Siolto commented 1 year ago

@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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

github-actions[bot] commented 1 year ago

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

github-actions[bot] commented 1 year ago

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

Siolto commented 1 year ago

This is still valid

github-actions[bot] commented 1 year ago

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

github-actions[bot] commented 1 year ago

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

marianfoo commented 6 months ago

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 commented 6 months ago

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

Siolto commented 6 months ago

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[bot] commented 5 months ago

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

github-actions[bot] commented 4 months ago

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