Waiting for Element With jQuery Mobile & WebDriverJS
Selenium’s webdriver API provides a convenient way to wait until an element is visible and ready, a common thing to do when testing AJAXy web apps.
Unfortunately I encountered an issue almost immediately waiting for an element to visible and available when using jQuery Mobile, and surprisingly could find little help in the usual places (read: google). This is how I solved it.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
There are three tricks here.
- WebDriverJS is 100% non-blocking, we thus have to use the provided Promises construct, adding just a little bit of complexity.
- jQuery Mobile, particularly in regards to paging, heavily utilizes hiding/showing elements so we have to ensure that the element exists AND that it is visible.
- WebDriverJS’ findElement() method will throw an error that is not suppressible. So we have to be careful using it when we fully expect an element not exist for a while.
This method helps us solve all three. It first waits for the element to exist in the DOM, it then waits for the element to be visible and then it fulfills our promise. For example Selenium correctly complains when we try to click an element that exists, but is not visible.
For further clarification here is a sample usage:
1 2 3 4 5
Just a note if the element never becomes available and visible, the error thrown by WebDriverJs’ wait method will be propagated through.