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

Question

The Source code for the react element looks like below:

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

I'm trying to locate and right click the below element

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

using

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

but this doesn't seem to work. Is there a better way to locate such react based elements using selenium webdriver?

PS : The class name changes ie is dynamic, so I can't use the class name in the xpath.

Answer 1

You can avoid dynamic class names for a specific class:

:global(.yourClassName) {
  ...
}

That way, your element will keep the correct class name and you can use the class name for your selection.

Source: https://github.com/css-modules/css-modules

Answer 2

XPath has some limitations when used on a SVG DOM element. So you are better off using a CSS selector:

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']"