Question

在SVG中，您可以具有只能在笔触处单击的内容，例如因为没有填充或因为pointer-events: stroke。

示例：

document.querySelector("#path1").addEventListener("click", function(e) {
  console.log("Click1!")
})
document.querySelector("#path2").addEventListener("click", function(e) {
  console.log("Click2!")
})

#path1:hover {
  stroke: red;
}

#path2:hover {
  stroke: green;
}

<svg height="300" width="300">
  <path d="M64,116 C100,100 400,100 96,39" stroke="blue" stroke-width="7" fill="none" id="path1" />
  <path d="M134,186 C100,100 400,100 126,69" stroke="blue" stroke-width="7" fill="none" id="path2" />
</svg>

在我的项目中，我要编写Selenium测试，因为我有一个动态生成的SVG <path>，要使用Selenium单击它，问题是元素^{1 不一定是可单击的（因为只有路径的笔触才可以）。}

我有一些想法：

单击固定的偏移量：一种可能，但是由于生成的路径具有很高的动态性，因此需要对偏移量进行大量修改才能使其正确，并且可能必须更改测试很多未来。
通过代码触发点击事件：可以工作，但是会使测试的用处不大，因为这种方式无法测试路径的笔划是否确实可点击。这样可以避免某些错误被测试检测到。
通过代码设置非none fill或替换/添加<path>周围的区域：设置fill可能无法保证该中心是可点击的。 <rect>可以使用，但是多个路径的可点击区域会重叠，这可能意味着错误的路径会获得点击。

这些方法都不是理想的。还有其他可能性吗？

（我正在将Selenium用于Python，但对于其他编程语言的Selenium解决方案也可以，因为通常很容易移植。）

_{1）这是Selenium在使用未指定偏移量的函数时单击的默认位置，或者它是自WebDriver协议的最新版本以来在元素可见区域的中心，但是我正在使用情况下，可以假定所有内容都是完全可见的。}

P.S。该演示演示了为什么将fill设置为none以外的其他内容将无济于事（或将pointer-events设置为all）的问题：

document.querySelector("#path1").addEventListener("click", function(e) {
  console.log("Click1!")
})
document.querySelector("#path2").addEventListener("click", function(e) {
  console.log("Click2!")
})

#path1:hover {
  stroke: red;
}

#path2:hover {
  stroke: green;
}

<svg height="300" width="300">
  <path d="M64,116 C100,100 400,100 96,39" stroke="blue" stroke-width="7" fill="turquoise" id="path1" />
  <path d="M134,186 C100,100 400,100 126,69" stroke="blue" stroke-width="7" fill="yellow" id="path2" />
</svg>

使用Selenium单击动态路径的笔触

我有一些想法：

0 个答案: