Karate UI: Locating text via CSS

Question

I'm regularly hitting odd visible page text that karate cannot see, likely due to some funky JS magic that I don't fully understand.

Example image shows text on the page generated after clicking on a translate button: I'm trying to assert that the translated text is present and correct on the page.

This is the selector: #results-panel > div > div > div.thread > div > div.activity.panel.panel-default > div.panel-content > div > div:nth-child(2) > div:nth-child(1) > div > div.analysedText-translation > div > span:nth-child(3)

Example snippet of the element:

Using the wildcard {} or {^} doesn't work. eg waitFor('{^}A few random things about cats') returns a null

I played around with CSS selectors and am able to highlight the text using:

• highlight('.analysedText-translation > div > span:nth-child(3)')[0]

I was thinking maybe using waitForText but not sure how to apply it. Any suggestions?

Answer 1

The reason the docs don't talk much about CSS selectors is that it is a standard. BTW this is open source, you are welcome to contribute pull-requests to improve the documentation.

UI automation is hard, I'm not going to claim that any framework makes it magically easier.

Suggestions:

• if not already, start using the VS Code debugger, you can type things like highlight('div.panel-content') into the interactive console and play around with the page. see a video demo here (55:40) https://youtu.be/yu3uupBZyxc?t=3340
• open the Chrome devtools console and type things like document.querySelector('div.panel-content') to see what gets matched
• get a reference to any parent element and then you can "walk the tree": https://github.com/intuit/karate/tree/master/karate-core#tree-walking

If still stuck, follow this process so that we can fix anything in the framework if needed: https://github.com/intuit/karate/wiki/How-to-Submit-an-Issue