使用空手道UI自动化处理SVG元素

Question

我是空手道UI自动化的新手，我有一个前端UI，它有一个SVG元素，当点击时会带来一个下拉列表。

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

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

​

​

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

​

​

这唯一地标识了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元素的方法，比如使用compelete Xpath和使用父类名(尽管只使用类名已经是惟一的)，但仍然不起作用。我也尝试了通配符定位器，但由于没有元素的文本/名称，因此不起作用。例如，当标签是input或button等时，css定位器同样有效，但SVG定位器不适用于我。

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

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

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

我在我的UI上有很多这样的SVG元素，在这方面的任何帮助都会非常感谢。

Answer 1

使用选择器集线器作为chrome，firefox，edge和opera的扩展。我只使用了chrome，它工作得很好，使我能够快速轻松地找到svg相对/绝对xpath。这在大量svg元素上的查找和点击能力上没有问题(通过空手道脚本)

Answer 2

2.建议。

https://stackoverflow.com/a/63988977/143475：

1. 尝试获取一些附近的元素并向后工作

https://stackoverflow.com/a/63828083/143475：

1. 找出SVG的位置并单击鼠标

如果没有一种复制的方法，就不能给你细节，但是-应该可以找到一个“模式”，这样你就可以像文档中描述的那样编写一个自定义函数。所以这可以是你的目标，就像这样：

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