空手道用户界面:通过CSS查找文本 [英] Karate UI: Locating text via CSS
问题描述
我经常碰到空手道看不见的奇怪可见页面文本，这可能是由于我不太了解的一些时髦的JS魔术.
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.
这是选择器:#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>时间跨度:nth-child(3)
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)
元素的示例片段:
使用通配符{}或{^}不起作用.例如waitFor('{^}关于猫的一些随机事物')返回null
Using the wildcard {} or {^} doesn't work. eg waitFor('{^}A few random things about cats') returns a null
我玩过CSS选择器，并能够使用以下内容突出显示文本:
I played around with CSS selectors and am able to highlight the text using:
- highlight('.analysedText-translation> div> span:nth-child(3)')[0]
我在考虑也许使用waitForText，但不确定如何应用它.有什么建议吗?
I was thinking maybe using waitForText but not sure how to apply it. Any suggestions?
推荐答案
文档之所以不谈论CSS选择器，是因为它是一个标准.顺便说一句，这是开源的，欢迎您提出拉式请求以改进文档.
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自动化非常困难，我不会断言任何框架都可以使其变得异常简单.
UI automation is hard, I'm not going to claim that any framework makes it magically easier.
建议:
- 如果尚未使用VS Code调试器，则可以在交互式控制台中键入
highlight('div.panel-content')之类的内容，并在页面中进行浏览.在此处观看视频演示(55:40) https://youtu.be/yu3uupBZyxc?t=3340 - 打开Chrome devtools控制台并输入
document.querySelector('div.panel-content')之类的内容，以查看匹配的内容 - 获取对任何父元素的引用，然后您可以遍历树": https://github.com/intuit/karate/tree/master/karate-core#tree-walking
- 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
这篇关于空手道用户界面:通过CSS查找文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
