用硒選擇相關的海圖SVG圖像

Question

根據下面的屏幕截圖，我在左側有一個條形圖，單擊該條形圖可在右側打開條形圖。

然后，它要做的是打開另一個條形圖，我想單擊該元素上的一個元素。 問題在於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();
}

Answer 1

如果您要為該特定元素編寫xpath然后在WebElement上執行操作，則它將正常工作。我提供的代碼對我來說很好用，您可以嘗試一下。 如果要單擊每個rect標簽元素，則可以使用for循環，並在rect [1]中傳遞與rect [i]類似的遞增變量代替1。

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

Answer 2

嘗試這個。 它將位於“ highcharts-series-group”類的任何位置

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