Question

react元素的源代码如下所示：

<g transform="translate(0 80)" style="transform: translate3d(0px, 80px, 0px);">
 <g class="sc-hMrMfs bRtpcM">
  <rect class="sc-drlKqa gwqdPs" x="-40" y="-20" height="40" width="80" rx="20" ry="20">
  <path class="sc-bIqbHp fiTNSa" d=" M -8 -6.666666666666667 l -6.666666666666667 6.666666666666667 l 6.666666666666667 6.666666666666667 ">
  <path class="sc-bIqbHp fiTNSa" d=" M 8 -6.666666666666667 l 6.666666666666667 6.666666666666667 l -6.666666666666667 6.666666666666667 ">
  <path class="sc-bIqbHp fiTNSa" d="M -13.333333333333334 0 h 26.666666666666668">
  <rect class="sc-jxGEyO lfiaEG" x="-40" y="-20" height="40" width="80">
 </g>
</g>

我试图找到并右键点击下面的元素

<rect class="sc-jxGEyO lfiaEG" x="-40" y="-20" height="40" width="80">

使用

slider = driver.find_element_by_xpath('//*[@transform="translate(0 80)"]/g/rect[2]')
ActionChains(driver).context_click(slider).perform()

但这似乎不起作用。有没有更好的方法来使用selenium webdriver找到这种基于反应的元素？

P.S：班级名称更改，即动态，因此我无法在xpath中使用班级名称。

Answer 1

您可以避免特定类的动态类名称：

:global(.yourClassName) {
  ...
}

这样，您的元素将保留正确的类名，您可以使用类名进行选择。

来源：https://github.com/css-modules/css-modules

Answer 2

在SVG DOM元素上使用时，XPath有一些限制。所以你最好使用CSS选择器：

g[transform='translate(0 80)'] > g > rect:nth-child(2)

Answer 3

我们可以看到您要查找的元素位于<g>标记内，该标记最终位于<svg>标记内，因此我们可以尝试使用以下xpath来查找元素：

"//*[name()='svg'//*[name()='g' and @transform='translate(0 80)']/*[name()='g']/*[name()='rect' and x='-40' and y='-20']"

如何使用Selenium python定位基于React的元素

3 个答案: