Karate 空手道用户界面：通过CSS定位文本

我经常碰到空手道看不到的奇怪的可见页面文本，可能是因为我不完全理解一些时髦的JS魔法

示例图像显示了单击“翻译”按钮后生成的页面上的文本： 我试图断言翻译的文本在页面上是正确的

这是选择器： #结果面板>div>div>div.thread>div>div.activity.panel.panel-default>div.panel-content>div>div:n个孩子（2）>div:n个孩子（1）>div>div.analysedText-translation>div>span:n个孩子（3）

元素的示例代码段：

使用通配符{}或{^}不起作用。例如waitFor（“{^}关于猫的一些随机事件”）返回空值

我使用CSS选择器，能够使用以下选项突出显示文本：

• 突出显示（'.analysedText translation>div>span:n子级（3）'）[0]

---

我在考虑可能使用waitForText，但不确定如何应用它。有什么建议吗？

文档之所以不太谈论CSS选择器，是因为它是一个标准。顺便说一句，这是开源的，欢迎您提交请求以改进文档

UI自动化很难实现，我不会说任何框架都会让它变得神奇地容易

建议：

• 如果还没有，请开始使用VS代码调试器，您可以在交互控制台中键入类似于“高亮显示（'div.panel-content'）的内容，并对页面进行处理。在这里观看视频演示（55:40）
• 打开Chrome devtools控制台，键入类似于

  document.querySelector（'div.panel-content'）

  的内容，查看匹配的内容
• 获取对任何父元素的引用，然后可以“遍历树”：

---

如果仍然卡在原地，请遵循此过程，以便我们可以在框架中修复任何需要的东西：

哇，您响应速度快！在我看到你的回复之前，我已经编辑了这篇文章，删除了上面提到的CSS。是的，我使用的调试器工作得很好。我能够遍历ChromeDevTools在控制台中找到元素。树行走会比使用实际的CSS选择器更好吗？另外，如果我冒犯了CSS部分，请道歉。我知道这是标准。请不要生气，这是你做的一件大事。我只是想学习和浏览它的细微差别…其中一些对我来说不是很明显。@Puti很大程度上取决于页面和JS。但由于树漫游在幕后使用JS，因此它可能更健壮。请注意，您可以执行类似于

locateAll（'div'）

的操作，然后循环结果，获取属性并找到所需内容。有很多方法