Selenium click on Highcharts series

Question

I am trying to find a solution to this question posted in the Google Selenium forum a couple years ago (most similar thing I found...unfortunately no posted answer in the forum). In my Selenium testing (Python bindings), how can I click on a Highcharts data series to trigger the onClick event? I am trying to do this for a bar chart, but any examples would work. Manually this works. When I click on a data series, a new div pops up with additional information about that data series, and I would like to verify this action using Selenium. I can get the series tooltip to appear using ActionChains, but for some reason the click() event doesn't seem to fire in Selenium.

I have tried to click on elements with class 'highcharts-series', the children rects of those elements, and the overall parent element 'highcharts-series-group'. The most progress I have is by clicking the children rects of the series, since I can see the tooltip pop up (see screenshot). But no clicking action--Selenium times out waiting for the next step.

One reason might be because the Highcharts group container (highcharts-series-group) has a higher zIndex than the element I want to click (3 vs. 0.1). But clicking the entire group does nothing, and in a real browser, I believe I am clicking on an actual series, not the group container--so I assume that since it works in a real browser, the zIndex shouldn't affect my clicking? You can see how all of these series are arranged in the svg element in the second screenshot.

This is how I am trying the click now. I built this following the solution in this SO question:

    parent = self.browser.find_element_by_id('student_chart')
    data_series = parent.find_elements_by_class_name('highcharts-series')
    data_rect = data_series[0].find_element_by_tag_name('rect')

    builder = ActionChains(self.browser)    

    series_click = builder.click(data_rect)
    series_click.perform()

Thanks for your help!

---

UPDATE

So this seems completely hokey, but if I click on every single series using a for loop, the last one "takes" and the expected onClick event occurs. When I test manually, though, clicking on any single series works. The code which triggers the last series is:

parent = self.browser.find_element_by_id('student_chart')
data_series = parent.find_elements_by_class_name('highcharts-series')

for series in data_series:
    rect = series.find_element_by_tag_name('rect')
    if rect.text == '':
        rect.click()

This seems like a complete hack just to make my test work, so I am wondering if anyone knows a root cause of why clicking on a single element doesn't work, or a cleaner way to do this?

Thanks!

---

UPDATE #2

So I looked at the library that Robbie pointed out in his answer below, which seems to use ActionChains to build out its interactions with HighCharts. The library is cool and obviously works for others, but the author only seems to track mouseover events...and when I tried different variations of the below code for a click event, I could only get the tooltip to appear--no click event. So I still seem stuck. ActionChains seem to work okay for reading tooltips and values from HighCharts with Selenium, but click events still seem a mystery to me...

parent = self.browser.find_element_by_id('student_chart')
data_series = parent.find_elements_by_class_name('highcharts-series')

series_number = 0
for series in data_series:
    if series_number == 0:
        click_object = series.find_element_by_tag_name('rect')
    else:
        pass
    series_number += 1

builder = ActionChains(self.browser)    

click_me = builder.click(click_object)
click_me.perform() 

Answer 1

Have you checked this project? https://github.com/Ardesco/Powder-Monkey/tree/master/src/main/java/com/lazerycode/selenium/graphs

When I was automating Highcharts in Selenium C# last year, I was able to dissect this java project and get a really good understanding, then write my own version in C#.

Perhaps this could give you some ideas and hints