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

如何解决使用空手道UI自动化处理SVG元素

我对空手道UI自动化还很陌生，并且我的前端UI包含一个SVG元素，单击该元素会弹出一个下拉列表。

当我为其编写UI测试时，出现javascript评估错误，因此寻求一些建议/帮助。

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

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

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

public int interpolationFramesCount = 45; // Number of frames to completely interpolate between the 2 positions
int elapsedFrames = 0;

void Update()
{
    float interpolationRatio = (float)elapsedFrames / interpolationFramesCount;

    Vector3 interpolatedPosition = Vector3.Lerp(Vector3.up,Vector3.forward,interpolationRatio);

    elapsedFrames = (elapsedFrames + 1) % (interpolationFramesCount + 1);  // reset elapsedFrames to zero after it reached (interpolationFramesCount + 1)

    Debug.DrawLine(Vector3.zero,Vector3.up,Color.green);
    Debug.DrawLine(Vector3.zero,Color.blue);
    Debug.DrawLine(Vector3.zero,interpolatedPosition,Color.yellow);
}

这是我编写的单击代码的一部分

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

这是我得到的错误：

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

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

 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}"}

我想知道我们是否需要使用其他方法通过空手道UI识别SVG元素？在Selenium中使用时，相同的路径起作用。

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

我的UI上有很多这样的SVG元素，对此将提供任何帮助。

解决方法

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

,

2条建议。

1. 尝试获取附近的一些元素并向后工作：https://stackoverflow.com/a/63988977/143475

2. 找出SVG的位置，然后单击鼠标：https://stackoverflow.com/a/63828083/143475

无法提供您无法复制的详细信息，但是-应该可以找到“模式”，以便您可以按照文档中的说明编写自定义函数。这样可以成为您的目标，就像这样：

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