How to Click on Highchart Elements During Automation

Question

Is there any way of getting the locator (sclocator or xpath, etc) of the elements in a SmartGWT hightchart graph? I need to automate the clicking action over the series legend of a graph (the series that appear in the right hand side of the graph).

These are the things I've tried to identify a valida locators for this graph's elements:

• Using Relative Xpath Helper plug in. After clicking on any element of the highchart graph, I get the message: "No Unique Identifiers found".
• Using Selenium IDE set up with 'user-extensions.js' and 'user-extensions-ide.js' selenium libraries for smartgwt. After trying to identify the locator of those series or any other element inside the graph, I get message: "LOCATOR_DETECTION_FAILED".
• Using Selenium Page Object Generator plug in. After generating the java file, no information related to the image has been generated in the java file.

Any help will be highly appreciated.

Thanks in advance!

<g class="highcharts-legend" zIndex="7" transform="translate(-32,110)">
  <g zIndex="1" clip-path="url(#highcharts-2)">
    <g transform="translate(0,1)">
      <g class="highcharts-legend-item" zIndex="1" transform="translate(8,3)">
        <path fill="none" d="M 0 11 L 16 11" stroke-dasharray="none" stroke="#C00000" stroke-width="2"></path>
        <path fill="#C00000" d="M 8 9 C 10.664 9 10.664 13 8 13 C 5.336 13 5.336 9 8 9 Z"></path>
        <text x="21" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;cursor:pointer;color:#274b6d;fill:#274b6d;" text-anchor="start" zIndex="2">
          <tspan x="21">Worst Inventory On Site</tspan>
        </text>
      </g>
      <g class="highcharts-legend-item" zIndex="1" transform="translate(8,21)">
        <path fill="none" d="M 0 11 L 16 11" stroke-dasharray="none" stroke="#3A5723" stroke-width="2"></path>
        <path fill="#3A5723" d="M 8 9 C 10.664 9 10.664 13 8 13 C 5.336 13 5.336 9 8 9 Z"></path>
        <text x="21" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;cursor:pointer;color:#274b6d;fill:#274b6d;" text-anchor="start" zIndex="2">
          <tspan x="21">Total Ins</tspan>
        </text>
      </g>
      <g class="highcharts-legend-item" zIndex="1" transform="translate(8,39)">
        <path fill="none" d="M 0 11 L 16 11" stroke-dasharray="none" stroke="#CCC" stroke-width="2"></path>
        <path fill="#CCC" d="M 8 9 C 10.664 9 10.664 13 8 13 C 5.336 13 5.336 9 8 9 Z"></path>
        <text x="21" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;cursor:pointer;color:#CCC;fill:#CCC;" text-anchor="start" zIndex="2">
        <tspan x="21">Total Outs</tspan>
       </text>
      </g>
      <g class="highcharts-legend-item" zIndex="1" transform="translate(8,57)">
        <path fill="none" d="M 0 11 L 16 11" stroke-dasharray="2,2" stroke="#CCC" stroke-width="2"></path>
        <path fill="#CCC" d="M 8 9 C 10.664 9 10.664 13 8 13 C 5.336 13 5.336 9 8 9 Z"></path>
        <text x="21" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;cursor:pointer;color:#CCC;fill:#CCC;" text-anchor="start" zIndex="2">
          <tspan x="21">Inventory On Site</tspan>
       </text>
      </g>
      <g class="highcharts-legend-item" zIndex="1" transform="translate(8,75)">
        <path fill="none" d="M 0 11 L 16 11" stroke-dasharray="6,2" stroke="#CCC" stroke-width="2"></path>
        <path fill="#CCC" d="M 8 9 C 10.664 9 10.664 13 8 13 C 5.336 13 5.336 9 8 9 Z"></path>
        <text x="21" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;cursor:pointer;color:#CCC;fill:#CCC;" text-anchor="start" zIndex="2">
        <tspan x="21">Inventory On Transit</tspan>
       </text>
      </g>
    </g>
  </g>
</g>

Answer 1

Thank you @dangi13 for your help. However I found a solution using a different xpath structure:

sharedData.appInstance.findElement(By.xpath("//[name()='g' and @class='highcharts-legend']//[name()='text']//*[name()='tspan' and text()='Worst Inventory on Site']")).click();

Answer 2

You can use below code for clicking on HighChart Elements :

/**
     * @param graphName Use one of below values.
     * Worst Inventory On Site
     * Total Ins
     * Total Outs
     * Inventory On Site
     * Inventory On Transit
     */
    public void clickOnGraph(String graphName) {
         WebElement graphElement = driver.findElement(By.xpath("//g[@class='highcharts-legend-item']//tspan[text()='" + graphName + "']"));
         graphElement.click();
    }

For further HighChart element manipulations. You can refer :

https://github.com/Ardesco/Powder-Monkey/blob/master/src/main/java/com/lazerycode/selenium/graphs/HighCharts.java

It is very helpful for HighCharts related Selenium operations.

If normal click does not work, you can try clicking using JavaScriptExecutor or Actions class.

Please do let me know if that helps you :)