How to use intern leadfoot waitForDeletedByXpath function?

Question

On what scenario can i use intern's leadfoot waitForDeletedByXpath function? From the documentation, what I understood is this method waits for the element to become invisible in Page. But while implementing it doesn't seem so. The scenerio i'm using this is as follows:

There is a page in my application where i can search for data with some predefined arguments. After clicking on search button the loading icon appears on the page until the data is loaded in the datagrid and the loading icon disappears after the data is loaded . so I'm trying to use this function to wait until the loading icon disappears from the page so that i can read the data in datagrid without having any issue but it doesn't seems to work that way. Can someone please throw some light on how this function works and point me towards the right direction to achieve what i'm trying to do. thanks

Answer 1

I believe what's happening here is a slight misinterpretation of what the waitForDeletedByXPath method does.

What the documentation for this method says is:
"Waits for all elements inside this element matching the given name attribute to be destroyed."

When your loading icon disappears it is most likely still part of the DOM, albeit it is just set to invisible. This method expects the element to no longer be part of the DOM at all.

What you need to do, from my experience, is set up your own "wait for element to be invisible" method for your loading icon.

For example:

return this.remote .then(function () { const waitForLoadingIconNotDisplayed = function (remoteSession) { return remoteSession .findByCssSelector('your_loading_icon_css_selector') .isDisplayed() .then(function (isDisplayed) { if (isDisplayed) { return waitForLoadingIconNotDisplayed(remoteSession); } return true; }); }; return Promise.all([waitForLoadingIconNotDisplayed(this.parent)]); })

This will loop until the condition is met that your loading icon is no longer set as displayed in the UI using the Promise.all() call.

Hope this helps steer you along the right path!