Question

正如标题所述，我试图让selenium悬停在我的SVG图中的某些元素上。这是HTML：

<div id="chart-impl-year" class="chart-impl" style="display: block;">
  <div style="position: absolute; z-index: 20; opacity: 1;">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="858" height="342">
      <desc>Created with Raphaël</desc>
      <defs>
      <path fill="#ffffff" stroke="#000000" d="M55.5,111.5L55.5,315.5L80.5,315.5L80.5,111.5Z" style="opacity: 0;" opacity="0">
      <path fill="#ffffff" stroke="#000000" d="M120.5,161.5L120.5,315.5L145.5,315.5L145.5,161.5Z" style="opacity: 0;" opacity="0">
      <path fill="#ffffff" stroke="#000000" d="M186.5,315.5L186.5,315.5L211.5,315.5L211.5,315.5Z" style="opacity: 0;" opacity="0">
      <path fill="#ffffff" stroke="#000000" d="M252.5,315.5L252.5,315.5L277.5,315.5L277.5,315.5Z" style="opacity: 0;" opacity="0">
      <path fill="#ffffff" stroke="#000000" d="M317.5,315.5L317.5,315.5L342.5,315.5L342.5,315.5Z" style="opacity: 0;" opacity="0">
      <path fill="#ffffff" stroke="#000000" d="M383.5,315.5L383.5,315.5L408.5,315.5L408.5,315.5Z" style="opacity: 0;" opacity="0">
      <path fill="#ffffff" stroke="#000000" d="M449.5,315.5L449.5,315.5L474.5,315.5L474.5,315.5Z" style="opacity: 0;" opacity="0">
      <path fill="#ffffff" stroke="#000000" d="M514.5,315.5L514.5,315.5L539.5,315.5L539.5,315.5Z" style="opacity: 0;" opacity="0">
      <path fill="#ffffff" stroke="#000000" d="M580.5,315.5L580.5,315.5L605.5,315.5L605.5,315.5Z" style="opacity: 0;" opacity="0">
      <path fill="#ffffff" stroke="#000000" d="M646.5,315.5L646.5,315.5L671.5,315.5L671.5,315.5Z" style="opacity: 0;" opacity="0">
      <path fill="#ffffff" stroke="#000000" d="M711.5,315.5L711.5,315.5L736.5,315.5L736.5,315.5Z" style="opacity: 0;" opacity="0">
      <path fill="#ffffff" stroke="#000000" d="M777.5,315.5L777.5,315.5L802.5,315.5L802.5,315.5Z" style="opacity: 0;" opacity="0">
      <path fill="#ffffff" stroke="#000000" d="M55.5,91.5L55.5,111.5L80.5,111.5L80.5,91.5Z" style="opacity: 0;" opacity="0">
      <path fill="#ffffff" stroke="#000000" d="M120.5,146.5L120.5,161.5L145.5,161.5L145.5,146.5Z" style="opacity: 0;" opacity="0">
      <circle cx="68.5" cy="153.5" r="10" fill="#ffffff" stroke="#000000" style="opacity: 0;" opacity="0">
      <circle cx="134.5" cy="118.5" r="10" fill="#ffffff" stroke="#000000" style="opacity: 0;" opacity="0">
      <circle cx="199.5" cy="113.5" r="10" fill="#ffffff" stroke="#000000" style="opacity: 0;" opacity="0">
      <circle cx="265.5" cy="101.5" r="10" fill="#ffffff" stroke="#000000" style="opacity: 0;" opacity="0">
    </svg>
  </div>
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="858" height="342">
  <div class="label-axis-top label-axis-left" style="left: 0.5px; top: -3.5px;">320 Hours</div>
  <div class="label-axis-top label-axis-right" style="right: -0.5px; top: -3.5px;">120° F</div>
</div>

我的测试

Given(/^I place cursor on the temperature pointer for inside temp on the line graph$/) do
 # page.find_element(:xpath,".//*[@id='chart-impl-year']/div[1]/svg/circle[1]").hover
 # find(:xpath, ".//*[@id='chart-impl-year']/div[1]/local-name()='svg'/circle[1]").hover
 # find(:xpath, ".//*[@cx ='68.5']").hover
end

我已经离开了我尝试在测试中注释掉的方式，因此您可以看到不同的xpath尝试。我无法找到xpath或无效的选择器

Answer 1

你遇到了与SVG类似的东西，我能够主要使用CSS选择器浏览和悬停元素。

这与拖动元素和放入SVG Circle有关，子位置因屏幕大小而异，这也是我也注意到的。希望这会有所帮助..

    WebElement dragHandler = Context.instanceDriver.findElement
    (By.cssSelector("#canvas svg :nth-last-child(41)"));

    Actions actions = new Actions(driver);

    actions.clickAndHold(some element).moveToElement(dragHandler)
     .release(dragHandler).build().perform();

将一个SVG元素悬停在Selenium中

1 个答案: