title: Selecting relational highchart SVG images with Selenium
body: <p>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. </p>
  
  <p>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) 
  <img src="https://i.stack.imgur.com/l6Go8.png" alt="Screenshot 1"></p>
  
  <p>Please see below for the HTML, as I don't think it is clear above</p>
  
  <pre><code>&lt;div id="controller-breakdown" class="two-by-two-chart" style="display: block;" data-highcharts-chart="1"&gt;
  &lt;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;"&gt;
      &lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="588" height="300"&gt;
          &lt;desc&gt;Created with Highcharts 3.0.4&lt;/desc&gt;
          &lt;defs&gt;
          &lt;rect rx="5" ry="5" fill="#FFFFFF" x="0" y="0" width="588" height="300"&gt;
          &lt;g class="highcharts-grid" zIndex="1"&gt;
          &lt;g class="highcharts-grid" zIndex="1"&gt;
          &lt;g class="highcharts-axis" zIndex="2"&gt;
          &lt;g class="highcharts-axis" zIndex="2"&gt;
          &lt;g class="highcharts-series-group" zIndex="3"&gt;
              &lt;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)"&gt;
              &lt;rect fill="#ECB631" x="67.5" y="32.5" width="124" height="183" stroke="#FFFFFF" stroke-width="1" rx="0" ry="0"&gt;
              &lt;rect fill="#ECB631" x="325.5" y="118.5" width="124" height="97" stroke="#FFFFFF" stroke-width="1" rx="0" ry="0"&gt;
          &lt;/g&gt;
          &lt;g class="highcharts-markers" visibility="visible" zIndex="0.1" transform="translate(61,51) scale(1 1)"&gt;
          &lt;/g&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>    public static void relationalBarChartSelector(InternetExplorerDriver driver)
  {
      WebElement parent = driver.findElement(By.id("controller-breakdown"));
      List&lt;WebElement&gt; children = parent.findElements(By.tagName("rect"));
      children.get(0).click();
  }
  </code></pre>
  
  <p>Could anyone provide any assistance please?</p>
  
  <p><strong>ORIGINAL CODE</strong></p>
  
  <p>**</p>
  
  <pre><code>    public static void barChartSelector(InternetExplorerDriver driver)
  {
      driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
      WebElement parent = driver.findElement(By.className("highcharts-series-group"));
      List&lt;WebElement&gt; children = parent.findElements(By.tagName("rect"));
      children.get(0).click();
  }
  </code></pre>