Using highchart SVG images with Selenium

Question

I'm after some help when running a Selenium test in java where I have SVG high chart images on a page. The issue I have is that I am having trouble getting selenium to recognise each element on the high chart, and in turn clicking on them to fire off another event.

I've attached a screenshot below, which I hope highlights what I am trying to do

I don't think the HTML snippet is clear on the screen shot, so I have outlined this below:

    <div id="status-action-counts" class="two-by-two-chart" data-highcharts-chart="0">
        <div id="highcharts-0" 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.133331px; 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(62,51) scale(1 1)" style="cursor:pointer;" clip-path="url(#highcharts-1)">
                        <rect fill="#ECB631" x="26.5" y="52.5" width="49" height="121" stroke="#FFFFFF" stroke-width="1" rx="0" ry="0">
                        <rect fill="#ECB631" x="130.5" y="150.5" width="49" height="23" stroke="#FFFFFF" stroke-width="1" rx="0" ry="0">
                        <rect fill="#ECB631" x="233.5" y="168.5" width="49" height="5" stroke="#FFFFFF" stroke-width="1" rx="0" ry="0">
                        <rect fill="#ECB631" x="336.5" y="162.5" width="49" height="11" stroke="#FFFFFF" stroke-width="1" rx="0" ry="0">
                        <rect fill="#ECB631" x="439.5" y="17.5" width="49" height="156" stroke="#FFFFFF" stroke-width="1" rx="0" ry="0">
                    </g>
                    <g class="highcharts-markers" visibility="visible" zIndex="0.1" transform="translate(62,51) scale(1 1)">
                </g>

Essentially, I want to click on the 'Instruct Agents' highchart, which will then fire off an event and allow me to continue with my test. If anyone can provide some help to set me on my way, I'd appreciate it.

CODE SNIPPET

    public static void terminatedReportCompletedBarGraphSelect(InternetExplorerDriver driver)
    {
        WebElement parent = driver.findElement(By.className("highcharts-series-group"));
        List<WebElement> children = parent.findElements(By.tagName("rect"));
        children[0].Click();
    }

UPATE - 25/11/14 Hi there, I was hoping you might be able to help with the next issue I have come across. I've now been able to select the bar graph, thanks to your help. 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)

Here is a snippet of the HTML, just incase it isn't visible:

<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>

I was hoping that by writing the below code, I could select one of the bars from the graph on the right-hand side. My thinking is that I somehow need to use the 'div id="controller-breakdown' element to identify the block of code I am trying to reach, as this is unique.

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

What are your thoughts?

Answer 1

希望这会有所帮助-HighCharts

Answer 2

This worked for me (c# I'm afraid). There isn't an easy way to identify which data is in which rectangle, so unless you already know the order of the series it may be a problem:

IList<IWebElement> bars = MyWebDriver.Driver.FindElements(By.TagName("rect"));
foreach (var bar in bars)
{
    Thread.Sleep(500);
    try
    {
        bar.Click();
    }
    catch (Exception e)
    {
    }
}