In my Espresso web test, I am not able to use the following code in my Espresso test to assert that the text we want is on the screen. I thought that maybe the shadow root for the ionic app was the problem. But, now I am not sure. I tried other text above the shadow root and that is also not found. I am not a javascript expert. Can anyone see a problem with my javascript? It returns “null” for any text I put in.
Overall, I have had some trouble with the shadow root in the Espresso web tests. I may be adding “aria-label” soon the app code, for elements that give me trouble like this. I saw in other posts for writing automation tests against ionic apps that adding “aria-label” to the appropriate web element may help in such cases. There are no other ids or usable elements also is a challenge for me. I reached out to the devs, but it’s hard to get assistance with how the work is lined up. So, I don’t expect to be able to get ids or other helpful items added to the app code unless I do it myself from the QA side.
Therefore, I wanted to create my own solution to just use a javascript method that would find the text on the screen no matter where it was located, including underneath shadow root elements and it’s child elements if any exist as well. This way, in case ids, “aria-label”, etc. never get added, I can always find the text by checking every single web element on the page, in and out of shadow roots as well. Thanks for the help in advance!
==================================================================
public static void assertTextIsDisplayedOnScreenUsingJavascript(String text) {
String script = "function getAllElements(root) {" +
" let elements = [];" +
" if (root.shadowRoot) {" +
" elements = elements.concat(getAllElements(root.shadowRoot));" +
" }" +
" let children = root.querySelectorAll('*');" +
" for (let i = 0; i < children.length; i++) {" +
" elements.push(children[i]);" +
" if (children[i].shadowRoot) {" +
" elements = elements.concat(getAllElements(children[i]));" +
" }" +
" }" +
" return elements;" +
"}" +
"const allElements = getAllElements(document);" +
"for (let i = 0; i < allElements.length; i++) {" +
" const element = allElements[i];" +
" const isVisible = element.offsetWidth > 0 || element.offsetHeight > 0 || element.getClientRects().length > 0;" +
" if (isVisible && (element.innerText.trim() === '" + text + "' || element.innerText.includes('" + text + "'))) {" +
" return true;" +
" }" +
"}" +
"return false;";
// Execute JavaScript and capture result in a boolean variable
final boolean[] result = new boolean[1];
final CountDownLatch latch = new CountDownLatch(1);
onView(isAssignableFrom(WebView.class))
.perform(new ViewAction() {
@Override
public Matcher<View> getConstraints() {
return isAssignableFrom(WebView.class);
}
@Override
public String getDescription() {
return "Execute JavaScript and capture result";
}
@Override
public void perform(UiController uiController, View view) {
WebView webView = (WebView) view;
webView.evaluateJavascript(script, value -> {
// Convert JavaScript result to boolean
result[0] = Boolean.parseBoolean(value);
latch.countDown();
});
}
});
// Wait for JavaScript execution to complete
try {
latch.await(5, TimeUnit.SECONDS);
} catch (InterruptedException e) {
e.printStackTrace();
}
// Assert the result
assertTrue(result[0]);
}
========================================
assertTextIsDisplayedOnScreenUsingJavascript("60565");
========================================