Karate UI: Locating text via CSS

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 but can't seem to get that to work either. Speaking of using CSS selectors, there are very few examples to learn from and little in the documentation goes into it other than 'you can use CSS selectors'.

How would I find and assert against it?

https://stackoverflow.com/questions/65589979/karate-ui-locating-text-via-css January 06, 2021 at 11:55AM