空手道 UI：通过 CSS 定位文本答案

【问题标题】：Karate UI: Locating text via CSS空手道 UI：通过 CSS 定位文本
【发布时间】：2021-04-11 20:35:01
【问题描述】：

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

示例图片显示了单击翻译按钮后生成的页面上的文本：我试图断言页面上的翻译文本存在且正确。

这是选择器： #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)

元素的示例sn-p：

使用通配符 {} 或 {^} 不起作用。例如waitFor('{^}一些关于猫的随机事情') 返回一个null

我玩过 CSS 选择器，并且能够使用以下方法突出显示文本：

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

我在想也许可以使用 waitForText 但不知道如何应用它。有什么建议吗？

【问题讨论】：

标签： karate

【解决方案1】：

文档没有过多谈论 CSS 选择器的原因是它是一个标准。顺便说一句，这是开源的，欢迎您贡献拉取请求以改进文档。

UI 自动化很难，我不会声称任何框架都能神奇地让它变得更容易。

建议：

如果还没有，请开始使用 VS Code 调试器，您可以在交互式控制台中输入诸如 highlight('div.panel-content') 之类的内容并在页面中进行操作。在此处观看视频演示 (55:40) https://youtu.be/yu3uupBZyxc?t=3340
打开 Chrome 开发工具控制台并输入诸如 document.querySelector('div.panel-content') 之类的内容以查看匹配的内容
获取对任何父元素的引用，然后您就可以“遍历树”：https://github.com/intuit/karate/tree/master/karate-core#tree-walking

如果仍然卡住，请按照此流程进行操作，以便我们在需要时修复框架中的任何内容：https://github.com/intuit/karate/wiki/How-to-Submit-an-Issue

【讨论】：

哇，你的反应速度真快！在看到您删除提到的 CSS 的回复之前，我通过帖子进行了编辑。是的，我正在使用运行良好的调试器。我能够遍历 Chrome devtools 以在控制台中定位元素。树的行走会比使用实际的 CSS 选择器更好吗？
另外，如果我冒犯了 CSS 部分，我深表歉意。我明白这是标准的。请不要冒犯，这是你所做的一件伟大的事情。我只是想了解和了解它的细微差别......其中一些对我来说并不是很明显。
@Puti 很大程度上取决于页面和 JS。但是由于tree-walking在幕后使用了JS，它可能更健壮。请注意，您可以执行locateAll('div') 之类的操作，然后遍历结果，获取属性并找到您想要的。有很多方法