使用 Selenium 选择关系型高图 SVG 图像答案

【问题标题】：Selecting relational highchart SVG images with Selenium使用 Selenium 选择关系型高图 SVG 图像
【发布时间】：2015-01-23 15:27:47
【问题描述】：

根据下面的屏幕截图，我在左侧有一个条形图，当我单击它时，会打开右侧的条形图。

然后这样做是打开另一个条形图，我想单击其中的一个元素。问题是className是“Highcharts-series-group”，和我之前使用的元素定位器一样。我在下面附上了我要选择的选项的屏幕截图（它是右边的图表）

请参阅下面的 HTML，因为我认为上面不清楚

<div id="controller-breakdown" class="two-by-two-chart" style="display: block;" data-highcharts-chart="1">
<div id="highcharts-2" class="highcharts-container" style="position: relative; overflow: hidden; width: 588px; height: 300px; text-align: left; line-height: normal; z-index: 0; font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,Arial,Helvetica,sans-serif; font-size: 12px; left: 0.083313px; top: 0.916672px;">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="588" height="300">
        <desc>Created with Highcharts 3.0.4</desc>
        <defs>
        <rect rx="5" ry="5" fill="#FFFFFF" x="0" y="0" width="588" height="300">
        <g class="highcharts-grid" zIndex="1">
        <g class="highcharts-grid" zIndex="1">
        <g class="highcharts-axis" zIndex="2">
        <g class="highcharts-axis" zIndex="2">
        <g class="highcharts-series-group" zIndex="3">
            <g class="highcharts-series highcharts-tracker" visibility="visible" zIndex="0.1" transform="translate(61,51) scale(1 1)" style="cursor:pointer;" clip-path="url(#highcharts-3)">
            <rect fill="#ECB631" x="67.5" y="32.5" width="124" height="183" stroke="#FFFFFF" stroke-width="1" rx="0" ry="0">
            <rect fill="#ECB631" x="325.5" y="118.5" width="124" height="97" stroke="#FFFFFF" stroke-width="1" rx="0" ry="0">
        </g>
        <g class="highcharts-markers" visibility="visible" zIndex="0.1" transform="translate(61,51) scale(1 1)">
        </g>

我要做的是找到父元素 (div id='controller-breakdown') 并从那里向下钻取到 'g class="highcharts-series highcharts tracker' 以便我可以选择其中一个'rect' 值以单击条形图。但是，因为这是一个 SVG 图像，所以我在执行此操作时遇到了问题。我尝试在 Selenium 中编写的代码如下：

    public static void relationalBarChartSelector(InternetExplorerDriver driver)
{
    WebElement parent = driver.findElement(By.id("controller-breakdown"));
    List<WebElement> children = parent.findElements(By.tagName("rect"));
    children.get(0).click();
}

有人可以帮忙吗？

原始代码

    public static void barChartSelector(InternetExplorerDriver driver)
{
    driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
    WebElement parent = driver.findElement(By.className("highcharts-series-group"));
    List<WebElement> children = parent.findElements(By.tagName("rect"));
    children.get(0).click();
}

【问题讨论】：

标签： java eclipse selenium svg highcharts

【解决方案1】：

如果您将为该特定元素编写 xpath，然后在 WebElement 上执行操作，那么它将起作用。我提供的代码对我来说工作正常。你可以试试这个。如果要单击每个 rect 标记元素，则可以使用 for 循环并传递递增变量来代替 rect[1] 中的 1，如 rect[i]。

public static void relationalBarChartSelector(InternetExplorerDriver driver)
{
    WebElement element = driver.findElement(By.xpath("//div[@id='highcharts-2']/svg/defs/g[6]/rect[1]"));
    element.click();
}

【讨论】：

嗨，Subodh，感谢您的评论。不幸的是，这不起作用，但后来我意识到我没有正确地重新对齐上面提供的 HTML。当我将 'g[6]' 更改为 'g[5]' 时，我仍然无法让它运行，我相信它应该是。有什么想法吗？
作为额外注释，使用 FirePath，relativeXPath 为：.//*[@id='highcharts-2']/svg/g[5]/g[1]/rect[1 ] 这看起来与您放置的内容相似，但 selenium 无法找到该元素，允许我单击它。
在 driver.findelement(...) 语句上方写一个等待语句 10 秒并尝试它或者您可以尝试使用另一个 xpath "//rect[@width='124' 和 @height ='183']" 我认为它应该可以正常工作.. :)
嗨，Subh，我已经尝试过了，不幸的是它仍然无法正常工作。当我单击第一张图时，我编写了上面的代码（标题：'ORIGINAL CODE'），它起作用了.....问题是我使用的类名不是唯一的，所以我想我需要类似的东西来点击第二张图。这就是为什么我认为通过 'div id="controller-breakdown"' id 向下钻取是前进的方向，但我无法找到最好的方法

【解决方案2】：

试试这个。它将定位到任何类“highcharts-series-group”

public static void relationalBarChartSelector(InternetExplorerDriver driver)
{
    WebElement element = driver.findElement(
      By.xpath(".//*[@class='highcharts-series-group']"));
    element.click(); 
}

【讨论】：