用Selenium选择关系图Highchart SVG图像
根据下面的屏幕截图，我在左边有一张条形图，当我点击时，打开右边的条形图。
这样做是打开另一个条形图，我想点击一个元素。 问题在于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();
}
如果你要为该特定元素编写xpath，然后在WebElement上执行操作，那么它将工作。我提供的代码对我来说工作得很好，你可以试试这个。 如果你想点击每一个矩形标签元素，那么你可以使用for循环，并像rect [i]一样传递递增变量来代替rect [1]中的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();
}
尝试这个。 它可以找到任何地方的课程“highcharts-series-group”
public static void relationalBarChartSelector(InternetExplorerDriver driver)
{
WebElement element = driver.findElement(
By.xpath(".//*[@class='highcharts-series-group']"));
element.click();
}
上一篇: Selecting relational highchart SVG images with Selenium