Evaluation failed: DOMException: for List in Dialog

[nilskasseckert]

Hello,

we have a very very simple use case. We want to identify a list that is displayed in a dialog. For this we have the following very simple code:

const oSelector = {
        forceSelect: true,
        selector: {
            controlType: "sap.m.List"
        }
    };

const oList = browser.asControl(oSelector);

When we execute this then we get following error:

Evaluation failed: DOMException: Failed to execute 'querySelector' on 'Document': '#success,[object Object],myObject--dlgSelect-list-trigger,getList,getContent,addContent,insertContent,removeContent,removeAllContent,indexOfContent,destroyContent,bindContent,unbindContent,getContentAnnouncement,getType,setType,getUnread,setUnread,getSelected,setSelected,getCounter,setCounter,getHighlight,setHighlight,getAriaLabelledBy,addAriaLabelledBy,removeAriaLabelledBy,removeAllAriaLabelledBy,attachTap,detachTap,fireTap,attachDetailTap,detachDetailTap,fireDetailTap,attachPress,detachPress,firePress,attachDetailPress,detachDetailPress,fireDetailPress,init,invalidate,getBindingContextPath,isSelectedBoundTwoWay,getListProperty,informList,informSelectedChange,getAccessibilityType,getGroupAnnouncement,getAccessibilityDescription,getAccessibilityInfo,getMode,updateAccessibilityState,getDeleteControl,getDetailControl,getNavigationControl,getSingleSelectControl,getMultiSelectControl,getModeControl,getTypeControl,destroyControls,isActionable,exit,isSelectable,isSelected,updateSelectedDOM,setParent,setBindingContext,isGroupHeader,isIncludedIntoSelection,hasActiveType,setActive,ontap,ontouchstart,ontouchmove,ontouchend,ontouchcancel,onsapspace,onsapenter,onsapdelete,onkeydown,getTabbables,onsaptabnext,onsaptabprevious,onfocusin,onsapup,oncontextmenu,onsapdown,getBlocked,setBlocked,getBusy,setBusy,getBusyIndicatorDelay,setBusyIndicatorDelay,getBusyIndicatorSize,setBusyIndicatorSize,getVisible,setVisible,getFieldGroupIds,setFieldGroupIds,attachValidateFieldGroup,detachValidateFieldGroup,fireValidateFieldGroup,clone,addStyleClass,removeStyleClass,toggleStyleClass,hasStyleClass,isActive,rerender,getDomRef,allowTextSelection,attachBrowserEvent,detachBrowserEvent,placeAt,onselectstart,getIdForLabel,destroy,isBusy,getControlsByFieldGroupId,checkFieldGroupIds,triggerValidateFieldGroup,getTooltip,setTooltip,destroyTooltip,getCustomData,addCustomData,insertCustomData,removeCustomData,removeAllCustomData,indexOfCustomData,destroyCustomData,getLayoutData,setLayoutData,destroyLayoutData,getDependents,addDependent,insertDependent,removeDependent,removeAllDependents,indexOfDependent,destroyDependents,getDragDropConfig,addDragDropConfig,insertDragDropConfig,removeDragDropConfig,removeAllDragDropConfig,indexOfDragDropConfig,destroyDragDropConfig,getInterface,toString,prop,getUIArea,fireEvent,addDelegate,removeDelegate,addEventDelegate,removeEventDelegate,getFocusDomRef,focus,getFocusInfo,applyFocusInfo,getTooltip_AsString,getTooltip_Text,data,findElements,bindElement,unbindElement,getElementBinding,getDomRefForSetting,register,deregister,attachValidationSuccess,detachValidationSuccess,fireValidationSuccess,attachValidationError,detachValidationError,fireValidationError,attachParseError,detachParseError,fireParseError,attachFormatError,detachFormatError,fireFormatError,attachModelContextChange,detachModelContextChange,fireModelContextChange,applySettings,getId,setProperty,getProperty,validateProperty,isPropertyInitial,resetProperty,getOriginInfo,setAssociation,getAssociation,addAssociation,removeAssociation,removeAllAssociation,validateAggregation,setAggregation,indexOfAggregation,insertAggregation,addAggregation,removeAggregation,removeAllAggregation,destroyAggregation,isInvalidateSuppressed,getParent,isBinding,extractBindingInfo,getBindingInfo,bindObject,bindContext,unbindContext,unbindObject,bindProperty,unbindProperty,updateProperty,updateModelProperty,bindAggregation,unbindAggregation,updateAggregation,refreshAggregation,propagateMessages,isTreeBinding,updateBindings,isBound,getObjectBinding,getEventingParent,getBinding,getBindingPath,setElementBindingContext,updateBindingContext,getBindingContext,setModel,addPropagationListener,removePropagationListener,getPropagationListeners,propagateProperties,getModel,hasModel,findAggregatedObjects,attachEvent,attachEventOnce,detachEvent,hasListeners,isA,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,valueOf,toLocaleString,__executeElement_1,success,[object Object],ylpplfilialauswlib--dlgSelect-list-trigger,getList,getContent,addContent,insertContent,removeContent,removeAllContent,indexOfContent,destroyContent,bindContent,unbindContent,getContentAnnouncement,getType,setType,getUnread,setUnread,getSelected,setSelected,getCounter,setCounter,getHighlight,setHighlight,getAriaLabelledBy,addAriaLabelledBy,removeAriaLabelledBy,removeAllAriaLabelledBy,attachTap,detachTap,fireTap,attachDetailTap,detachDetailTap,fireDetailTap,attachPress,detachPress,firePress,attachDetailPress,detachDetailPress,fireDetailPress,init,invalidate,getBindingContextPath,isSelectedBoundTwoWay,getListProperty,informList,informSelectedChange,getAccessibilityType,getGroupAnnouncement,getAccessibilityDescription,getAccessibilityInfo,getMode,updateAccessibilityState,getDeleteControl,getDetailControl,getNavigationControl,getSingleSelectControl,getMultiSelectControl,getModeControl,getTypeControl,destroyControls,isActionable,exit,isSelectable,isSelected,updateSelectedDOM,setParent,setBindingContext,isGroupHeader,isIncludedIntoSelection,hasActiveType,setActive,ontap,ontouchstart,ontouchmove,ontouchend,ontouchcancel,onsapspace,onsapenter,onsapdelete,onkeydown,getTabbables,onsaptabnext,onsaptabprevious,onfocusin,onsapup,oncontextmenu,onsapdown,getBlocked,setBlocked,getBusy,setBusy,getBusyIndicatorDelay,setBusyIndicatorDelay,getBusyIndicatorSize,setBusyIndicatorSize,getVisible,setVisible,getFieldGroupIds,setFieldGroupIds,attachValidateFieldGroup,detachValidateFieldGroup,fireValidateFieldGroup,clone,addStyleClass,removeStyleClass,toggleStyleClass,hasStyleClass,isActive,rerender,getDomRef,allowTextSelection,attachBrowserEvent,detachBrowserEvent,placeAt,onselectstart,getIdForLabel,destroy,isBusy,getControlsByFieldGroupId,checkFieldGroupIds,triggerValidateFieldGroup,getTooltip,setTooltip,destroyTooltip,getCustomData,addCustomData,insertCustomData,removeCustomData,removeAllCustomData,indexOfCustomData,destroyCustomData,getLayoutData,setLayoutData,destroyLayoutData,getDependents,addDependent,insertDependent,removeDependent,removeAllDependents,indexOfDependent,destroyDependents,getDragDropConfig,addDragDropConfig,insertDragDropConfig,removeDragDropConfig,removeAllDragDropConfig,indexOfDragDropConfig,destroyDragDropConfig,getInterface,toString,prop,getUIArea,fireEvent,addDelegate,removeDelegate,addEventDelegate,removeEventDelegate,getFocusDomRef,focus,getFocusInfo,applyFocusInfo,getTooltip_AsString,getTooltip_Text,data,findElements,bindElement,unbindElement,getElementBinding,getDomRefForSetting,register,deregister,attachValidationSuccess,detachValidationSuccess,fireValidationSuccess,attachValidationError,detachValidationError,fireValidationError,attachParseError,detachParseError,fireParseError,attachFormatError,detachFormatError,fireFormatError,attachModelContextChange,detachModelContextChange,fireModelContextChange,applySettings,getId,setProperty,getProperty,validateProperty,isPropertyInitial,resetProperty,getOriginInfo,setAssociation,getAssociation,addAssociation,removeAssociation,removeAllAssociation,validateAggregation,setAggregation,indexOfAggregation,insertAggregation,addAggregation,removeAggregation,removeAllAggregation,destroyAggregation,isInvalidateSuppressed,getParent,isBinding,extractBindingInfo,getBindingInfo,bindObject,bindContext,unbindContext,unbindObject,bindProperty,unbindProperty,updateProperty,updateModelProperty,bindAggregation,unbindAggregation,updateAggregation,refreshAggregation,propagateMessages,isTreeBinding,updateBindings,isBound,getObjectBinding,getEventingParent,getBinding,getBindingPath,setElementBindingContext,updateBindingContext,getBindingContext,setModel,addPropagationListener,removePropagationListener,getPropagationListeners,propagateProperties,getModel,hasModel,findAggregatedObjects,attachEvent,attachEventOnce,detachEvent,hasListeners,isA,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,valueOf,toLocaleString,success,[object Object],ylpplfilialauswlib--dlgSelect-list-trigger,getList,getContent,addContent,insertContent,removeContent,removeAllContent,indexOfContent,destroyContent,bindContent,unbindContent,getContentAnnouncement,getType,setType,getUnread,setUnread,getSelected,setSelected,getCounter,setCounter,getHighlight,setHighlight,getAriaLabelledBy,addAriaLabelledBy,removeAriaLabelledBy,removeAllAriaLabelledBy,attachTap,detachTap,fireTap,attachDetailTap,detachDetailTap,fireDetailTap,attachPress,detachPress,firePress,attachDetailPress,detachDetailPress,fireDetailPress,init,invalidate,getBindingContextPath,isSelectedBoundTwoWay,getListProperty,informList,informSelectedChange,getAccessibilityType,getGroupAnnouncement,getAccessibilityDescription,getAccessibilityInfo,getMode,updateAccessibilityState,getDeleteControl,getDetailControl,getNavigationControl,getSingleSelectControl,getMultiSelectControl,getModeControl,getTypeControl,destroyControls,isActionable,exit,isSelectable,isSelected,updateSelectedDOM,setParent,setBindingContext,isGroupHeader,isIncludedIntoSelection,hasActiveType,setActive,ontap,ontouchstart,ontouchmove,ontouchend,ontouchcancel,onsapspace,onsapenter,onsapdelete,onkeydown,getTabbables,onsaptabnext,onsaptabprevious,onfocusin,onsapup,oncontextmenu,onsapdown,getBlocked,setBlocked,getBusy,setBusy,getBusyIndicatorDelay,setBusyIndicatorDelay,getBusyIndicatorSize,setBusyIndicatorSize,getVisible,setVisible,getFieldGroupIds,setFieldGroupIds,attachValidateFieldGroup,detachValidateFieldGroup,fireValidateFieldGroup,clone,addStyleClass,removeStyleClass,toggleStyleClass,hasStyleClass,isActive,rerender,getDomRef,allowTextSelection,attachBrowserEvent,detachBrowserEvent,placeAt,onselectstart,getIdForLabel,destroy,isBusy,getControlsByFieldGroupId,checkFieldGroupIds,triggerValidateFieldGroup,getTooltip,setTooltip,destroyTooltip,getCustomData,addCustomData,insertCustomData,removeCustomData,removeAllCustomData,indexOfCustomData,destroyCustomData,getLayoutData,setLayoutData,destroyLayoutData,getDependents,addDependent,insertDependent,removeDependent,removeAllDependents,indexOfDependent,destroyDependents,getDragDropConfig,addDragDropConfig,insertDragDropConfig,removeDragDropConfig,removeAllDragDropConfig,indexOfDragDropConfig,destroyDragDropConfig,getInterface,toString,prop,getUIArea,fireEvent,addDelegate,removeDelegate,addEventDelegate,removeEventDelegate,getFocusDomRef,focus,getFocusInfo,applyFocusInfo,getTooltip_AsString,getTooltip_Text,data,findElements,bindElement,unbindElement,getElementBinding,getDomRefForSetting,register,deregister,attachValidationSuccess,detachValidationSuccess,fireValidationSuccess,attachValidationError,detachValidationError,fireValidationError,attachParseError,detachParseError,fireParseError,attachFormatError,detachFormatError,fireFormatError,attachModelContextChange,detachModelContextChange,fireModelContextChange,applySettings,getId,setProperty,getProperty,validateProperty,isPropertyInitial,resetProperty,getOriginInfo,setAssociation,getAssociation,addAssociation,removeAssociation,removeAllAssociation,validateAggregation,setAggregation,indexOfAggregation,insertAggregation,addAggregation,removeAggregation,removeAllAggregation,destroyAggregation,isInvalidateSuppressed,getParent,isBinding,extractBindingInfo,getBindingInfo,bindObject,bindContext,unbindContext,unbindObject,bindProperty,unbindProperty,updateProperty,updateModelProperty,bindAggregation,unbindAggregation,updateAggregation,refreshAggregation,propagateMessages,isTreeBinding,updateBindings,isBound,getObjectBinding,getEventingParent,getBinding,getBindingPath,setElementBindingContext,updateBindingContext,getBindingContext,setModel,addPropagationListener,removePropagationListener,getPropagationListeners,propagateProperties,getModel,hasModel,findAggregatedObjects,attachEvent,attachEventOnce,detachEvent,hasListeners,isA,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,valueOf,toLocaleString' is not a valid selector.

[Chrome 89.0.4389.114 darwin #0-0]     at ExecutionContext._evaluateInternal (/node_modules/puppeteer-core/lib/cjs/puppeteer/common/ExecutionContext.js:218:19)
[Chrome 89.0.4389.114 darwin #0-0]     at processTicksAndRejections (node:internal/process/task_queues:94:5)
[Chrome 89.0.4389.114 darwin #0-0]     at async ElementHandle.evaluateHandle (yrtbfinv/node_modules/puppeteer-core/lib/cjs/puppeteer/common/JSHandle.js:120:16)
[Chrome 89.0.4389.114 darwin #0-0]     at async Object.internalHandler.queryOne (/node_modules/puppeteer-core/lib/cjs/puppeteer/common/QueryHandler.js:24:30)
[Chrome 89.0.4389.114 darwin #0-0]     at async DOMWorld.$ (/node_modules/puppeteer-core/lib/cjs/puppeteer/common/DOMWorld.js:95:23)
[Chrome 89.0.4389.114 darwin #0-0]     at async DevToolsDriver.findElement (/node_modules/devtools/build/utils.js:88:15)
[Chrome 89.0.4389.114 darwin #0-0]     at async Browser.wrappedCommand (node_modules/devtools/build/devtoolsdriver.js:75:26)
[Chrome 89.0.4389.114 darwin #0-0]     at global.$ (/node_modules/@wdio/runner/build/index.js:181:42)
[Chrome 89.0.4389.114 darwin #0-0]     at WDI5._getControl (/node_modules/wdio-ui5-service/src/lib/WDI5.js:574:45)
[Chrome 89.0.4389.114 darwin #0-0]     at new WDI5 (/node_modules/wdio-ui5-service/src/lib/WDI5.js:36:36)
[Chrome 89.0.4389.114 darwin #0-0]     at Browser.<anonymous> (/node_modules/wdio-ui5-service/src/lib/wdioUi5-index.js:467:33)
[Chrome 89.0.4389.114 darwin #0-0]     at Browser.next [as asControl] (/node_modules/@wdio/utils/build/monad.js:149:33)

Looks like a bug in WDI5. The library was presented at the UI5 Con. Is this production ready or rather beta stage?

Regards, Nils

[dominikfeininger]

Hi Nils, in case you have a growing list please check issue 61

[nilskasseckert]

Hi @dominikfeininger ,

thanks for the fast answer. Where should I add this interaction root? In the selector this seems not to be working.

I wrote following code:

 const oSelector = {
        forceSelect: true,
        interaction: "root",
        selector: {
            interaction: "root",
            controlType: "sap.m.List"
        }

[vobu]

masterList: {
        forceSelect: true,
        selector: {
            viewName: "your.view",
            id: "masterList",
            interaction: "root"
        }
    }

[nilskasseckert]

Unfortunately same result

[vobu]

the selector above definitely works for the default ui5 sap.m.List w/ growing enabled. In order to search in open dialogs you might need to searchOpenDialogs: true in the selector. i don't recall explicitly testing wdi5 for that locator strategy. so:

• please test that :)
• @dominikfeininger let's include a specific test for that in wdi5 itself

btw: we're using the exact same selectors as OPA5 and UIveri5 - if it works there/here it works here/there.

[nilskasseckert]

Good morning,

This is exactly our problem. We have a UI5 app with OPA5 tests and we want to migrate it to WDI5. In OPA5 everything is working. WDI5 crashes with the above error.

I debugged this. The mentioned error comes here: https://github.com/js-soft/wdi5/blob/1651f78d76b7b7e5b8c0fe55295006b151079cf8/wdio-ui5-service/src/lib/WDI5.js#L574

But the result from the done success handler here https://github.com/js-soft/wdi5/blob/1651f78d76b7b7e5b8c0fe55295006b151079cf8/wdio-ui5-service/src/lib/WDI5.js#L563 looks good:

["success",{},"ylpmylib--dlgSelect-list",["getBackgroundDesign","setBackgroundDesign","getInset","setInset",
"getHeaderText","setHeaderText","getHeaderDesign","setHeaderDesign","getFooterText","setFooterText","getMode","setMode",
"getWidth","setWidth","getIncludeItemInSelection","setIncludeItemInSelection","getShowUnread","setShowUnread","getNoDataText",
"setNoDataText","getShowNoData","setShowNoData","getEnableBusyIndicator","setEnableBusyIndicator","getModeAnimationOn",
"setModeAnimationOn","getShowSeparators","setShowSeparators","getSwipeDirection","setSwipeDirection","getGrowing","setGrowing",
"getGrowingThreshold","setGrowingThreshold","getGrowingTriggerText","setGrowingTriggerText","getGrowingScrollToLoad",
.....]]"

This OPA5 code works:

this.waitFor({
                id: "ylpmylib--dlgSelect-dialog",
                controlType: "sap.m.Dialog",   
                actions: [oDialog => {
                   //List Found
                }],
                errorMessage: "List not found"
            });

[vobu]

ok, so there are different issues here: judging by your code above, you're querying for a sap.m.Dialog, not a sap.m.List

this.waitFor({
                id: "ylpmylib--dlgSelect-dialog",
                controlType: "sap.m.Dialog",   
                actions: [oDialog => {
                   //List Found
                }],
                errorMessage: "List not found"
            });

in the initial issue report, you were talking about a sap.m.List:

const oSelector = {
        forceSelect: true,
        selector: {
            controlType: "sap.m.List"
        }
    };

const oList = browser.asControl(oSelector);

so please provide the entire code/use case here - my guess is that it's a combination of things.

[nilskasseckert]

Oh Sorry I mixed it up this morning.

But the issue is the same.

WDI5 Code:

 const oSelector = {
        forceSelect: true,
        selector: {
            controlType: "sap.m.Dialog",
            id: "ylpmylib--dlgSelect-dialog"
        }
    };

    const oDialog = browser.asControl(oSelector);

OPA5 Code:

this.waitFor({
                id: "ylpmylib--dlgSelect-dialog",
                controlType: "sap.m.Dialog",   
                actions: [oDialog => {
                   //Dialog Found
                }],
                errorMessage: "Dialog not found"
            });

Same with the list.

I can see at the screen the dialog and the list.

[nilskasseckert]

I have found the issue but currently thinking how to fix.

The array returned is incorrect. This is an array in array in a array https://github.com/js-soft/wdi5/blob/1651f78d76b7b7e5b8c0fe55295006b151079cf8/wdio-ui5-service/src/lib/WDI5.js#L574

If I change the line to:

  this._webdriverRepresentation = $(`#${result[2][2][2]}`);

All is working fine. But this can not be the fix. The done handler seems to be corrupted.

[nilskasseckert]

An possible fix would be:

        while (Array.isArray(result[0])) {
            result = result[0];
        }

        // save the webdriver representation by control id
        if (result[2]) {
            // only if the result is valid
            this._webdriverRepresentation = $(`#${result[2]}`);
        }

@vobu What do you think? Should I create an PR? Seems a problem with Fiori 1.60

[dominikfeininger]

Hi @nilskasseckert, haven't seen this response structure yet. Thanks for investigating. Currently all self test of WDI5 are green. Can you please provide your testcase. We will implement a fix shortly.

[nilskasseckert]

Hi @dominikfeininger, we want to test here a simple Fiori App. When you open the app an simple dialog from an external library is loaded and displayed.

I played a little bit around and it seems that a lot of selectors have problems with 1.60. Did you start your test with Fiori Version 1.60.31?

[vobu]

An possible fix would be:

        while (Array.isArray(result[0])) {
            result = result[0];
        }

        // save the webdriver representation by control id
        if (result[2]) {
            // only if the result is valid
            this._webdriverRepresentation = $(`#${result[2]}`);
        }

@vobu What do you think? Should I create an PR? Seems a problem with Fiori 1.60

well, most certainly! PRs mega-welcome! might take a look at https://github.com/js-soft/wdi5/blob/1651f78d76b7b7e5b8c0fe55295006b151079cf8/wdio-ui5-service/src/lib/wdioUi5-index.js#L84 where some version checking is done

[nilskasseckert]

Good morning,

sorry for the late response. I am on it right now but there is a lot to do. The multiversion tests were run only for the basic.tests.

All other tests were not run in multi version. With version 1.60 everything crashes except the basic tests.

Of course, if you don't run the tests, then it looks like everything is working.

I will try to fix as much as possible, but can't promise it.

Regards, Nils

[vobu]

right on! sorry to hear that older UI5 version cause so many troubles w/ the UI5 Testing API and thus wdi5 :( Let us know if you need a helping hand once you got the first batch coded 👍

[nilskasseckert]

Hi @vobu,

Thank you for the offer. I have started. Here is the link to it: https://github.com/nilskasseckert/wdi5

Now if you run "npm run test:multiversion", it will only run the navigation hash test. I have fixed some bugs there but the ones that are still there now I have no idea right now.

Can you please have a look?

Thanks!

Regards, Nils

[nilskasseckert]

Good morning,

I found the error. In 1.60 it is mandatory that you access the lists always with "interaction: true". Otherwise it is not working.

Regards, Nils

[vobu]

Good morning,

I found the error. In 1.60 it is mandatory that you access the lists always with "interaction: true". Otherwise it is not working.

🙌

[vobu]

Hi @vobu,

Thank you for the offer. I have started. Here is the link to it: https://github.com/nilskasseckert/wdi5

Now if you run "npm run test:multiversion", it will only run the navigation hash test. I have fixed some bugs there but the ones that are still there now I have no idea right now.

Can you please have a look?

yes, we'll try and have a look. could you please do a PR with your current implementation effort? then we'll work from there on.

[nilskasseckert]

Hi @vobu ,

PR is opened: https://github.com/js-soft/wdi5/pull/77

Lets discuss there. Currently some other tests failing and the error is strange.

I think we can close this issue or and work in the PR?

Regards, Nils

[vobu]

yep, closing this. thanks for your efforts so far!!!