我如何在空手道 UI 中使用 javascript 执行器

Posted 2023-03-23

【中文标题】我如何在空手道 UI 中使用 javascript 执行器

【英文标题】：How do i use javascript executor in Karate UI

【发布时间】：2021-12-23 15:01:12

【问题描述】：

首先，空手道 UI 自动化是非常棒的工具。在使用空手道编写 UI 测试时，我有点享受它。我遇到了一种情况，我试图获取 shadowRoot 元素。我阅读了一些与 javascript executor with karate 相关的类似帖子，并了解到它已经得到了回答。推荐使用 driver.eval。但是在空手道 0.9.5 中没有 eval，它有 script() 或 scriptAll()。我已经多次阅读文档以弄清楚如何在元素中获取元素但没有运气。 使用传统的 selenium+java，我们可以这样获取 shadowRoot： 像 shadowRoot 这样的东西，它位于 div 或 body 等父元素内。

//downloads-manager is the tagname and under that downloads-manager, a shadowRoot element exists
The html looks like this. it is from chrome://downloads.
<downloads-manager>
   #shadow-root(open)

</download-manager>
WebElement downloadManager =driver.findElement(By.tagName("downloads-manager");
WebElement shadowRoot= (WebElement)((JavaScriptExecutor)driver)
                                      .executeScript("return arguments[0].shadowRoot",downloadManager);

所以我在空手道 UI 中尝试了以下操作

  script("downloads-manager","return _.shadowRoot"); //js injection error

  script('downloads-manager', "function(e) return e.shadowRoot;"); // same injection error as mentioned above.

def shadowRoot = locate("downloads-manager").script("function(e)return e.shadowRoot;"); //returns an empty string.

我敢打赌，有一种方法可以使用 Karate UI 获取此 shadowRoot 元素，但我有点用完了选项，无法弄清楚这一点。 有人可以调查一下并帮助我吗？

-桑

【参考方案1】：

您能否切换到 XPath，看看是否有帮助：

* def temp = script('//downloads-manager', '_.innerHTML')

否则，请提交此格式的示例，以便我们进行调试：https://github.com/intuit/karate/tree/develop/examples/ui-test

编辑：在您在 cmets 中发布该视频群聊示例的链接后，我想出了可行的 JS：

* driver 'http://html5-demos.appspot.com/hangouts'
* waitFor('#hangouts')
* def heading = script('hangout-module', "_.shadowRoot.querySelector('h1').textContent")
* match heading == 'Paul Irish'

需要反复试验和摆弄 DevTools 控制台才能解决这个问题。所以好消息是它是可能的，你可以使用你需要的任何 JS，并且你需要知道 哪个 HTML 元素可以调用.shadowRoot。

编辑：其他空手道 JS 示例：https://***.com/a/60800181/143475

【讨论】：

我不是在寻找 html，但需要在这个 downloads-manager 中有一个 child，它是一个 shadowRoot。所以当我尝试使用 xpath 时，我得到一个空字符串。 ``` def shadowRoot = script('//downloads-manager',"_.shadowRoot"); ``` 它给了我一个空字符串。具有 shadowRoot 元素的示例页面是 chrome 下载页面，即 chrome://downloads 谢谢！

@sanm - 如果可以的话，我真的很想要一个 HTML 示例，例如一旦你得到影子根 - 现在是什么。你确定它在硒中有效吗？也许你应该尝试一些其他的 JS。您可以打开一个问题，如果没有样本，我们可能需要等待其他人站出来提供帮助；）

这是一个具有影子根元素的 HTML 页面示例。 html5-demos.appspot.com/hangouts 在此演示页面中，我想在已打开的聊天窗口上获取 header 标题。标题标题为“Paul Irish”。标头 html 标记为：<h1>Paul Irish</h1> 要通过 JS 获取此内容，请转到该元​​素，右键单击该元素并复制 -> 复制 JS 路径。 document.querySelector("#hangouts > hangout-module").shadowRoot.querySelector("hangout-header > h1")。我什至在空手道 UI 中通过脚本方法尝试了上述 js 路径，但没有帮助。

不过我会就此提出一个问题。再次感谢您对此进行调查。