使用空手道 UI 自动化处理 SVG 元素 [重复]答案

【问题标题】：Handling SVG elements using Karate UI Automation [duplicate]使用空手道 UI 自动化处理 SVG 元素 [重复]
【发布时间】：2021-01-20 19:32:33
【问题描述】：

我对空手道 UI 自动化还很陌生，我有一个前端 UI，它有一个 SVG 元素，单击该元素会带来一个下拉菜单。

当我为它编写 UI 测试时，我得到了 javascript 评估错误，因此寻求一些建议/帮助。

以下是屏幕上清晰可见的 UI 元素及其 CSS 定位器的屏幕截图

这就是 CSS 定位器为 SVG 元素显示的方式

这唯一标识了 SVG 元素（加号按钮）

svg[class='svg-inline--fa fa-plus-square fa-w-14 ']

这是我为点击它而编写的部分代码

 And click("svg[class='svg-inline--fa fa-plus-square fa-w-14 ']")

这是我得到的错误：

 javascript evaluation failed: click("svg[class='svg-inline--fa fa-plus-square fa-w-14 ']"), js eval failed twice:document.querySelector("svg[class='svg-inline--fa fa-plus-square fa-w-14 ']").click(), error: {"type":"object","subtype":"error","className":"TypeError","description":"TypeError: Cannot read property 'click' of null\n    at <anonymous>:1:78","objectId":"{\"injectedScriptId\":2,\"id\":3}"}

我尝试了各种可以唯一标识 SVG 元素的方法，例如使用完整的 Xpath 以及使用父类名（尽管它已经是唯一的类名）但它仍然不起作用。我也尝试了通配符定位器，但由于没有元素的文本/名称，它不起作用。当标签说输入或按钮等时，css定位器的工作方式相同，但SVG定位器不适合我。

tagname[unique_id of the element like key=value pair]

我想知道我们是否需要使用不同的方式来识别使用空手道 UI 的 SVG 元素？在 Selenium 中使用相同的路径。

由于这是一个需要 VPN 连接和安全访问的 UI，因此可能无法提供最小代码来尝试和复制它。但如果需要，我很乐意提供更多详细信息。

我的 UI 上有很多这样的 SVG 元素，我们将不胜感激。

【问题讨论】：

The same path when used in Selenium worked. - 这根本没有帮助:(

标签： svg karate

【解决方案1】：

将选择器集线器用作 chrome、firefox、edge 和 opera 的扩展。我只与 chrome 一起使用，它工作得很好，让我可以快速轻松地找到 svg 相对/绝对 xpath。这在大量 svg 元素的查找和点击能力中没有问题（通过空手道脚本）

【讨论】：

【解决方案2】：

2 条建议。

尝试获取附近的一些元素并向后工作：https://stackoverflow.com/a/63988977/143475
找出 SVG 的位置并单击鼠标：https://stackoverflow.com/a/63828083/143475

无法在没有复制方法的情况下为您提供细节，但是 - 应该可以找到“模式”，以便您可以编写文档中描述的自定义函数。所以这可能是你的目标，如下所示：

* svgClick('svg-inline--fa')

【讨论】：