用硒选择关系型高分子SVG图像 [英] Selecting relational highchart SVG images with Selenium

问题描述

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

As per the below screenshot I have a bar chart on the left which, when I click on, opens the bar chart on the right.

然后，它打开另一个条形图，我想点击一个元素。问题是className是Highcharts-series-group，与之前使用的元素定位器相同。我附上了我想要选择的选项的截图（这是右图）

What this then does is open up another bar graph, and I want to click on an element on that. The problem is that the className is "Highcharts-series-group", the same as the previous element locator I used. I've attached a screenshot below of the option I am trying to select (it's the graph on the right)

请参阅下面的HTML，因为我不认为在

Please see below for the HTML, as I don't think it is clear above

<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系列高分辨率跟踪器，以便我可以选择一个rect值来点击条形图，但是，因为这是一个SVG图像，所以我在做这个我试图在Selenium中写的代码如下：

What I am trying to do is locate the parent element (div id='controller-breakdown') and from there drill down to the 'g class="highcharts-series highcharts tracker' so that I can select one of the 'rect' values to click on the bar chart. However, because this is an SVG image I am having issue doing this. The code I have attempted to write in Selenium is below:

    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();
}

推荐答案

它将定位到任何类别highcharts-series-group的任何地方

Try this. It will locate anywhere class "highcharts-series-group"

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

这篇关于用硒选择关系型高分子SVG图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！