A frequently asked question in automation forums is “how do I click on a Highcharts series?” or “how do I automate Highcharts graphs with Selenium?”.
Highcharts is one of the most popular graph packages for enterprises today. According to their own website, it used by over 80% of the world’s largest companies.
Unfortunately, because Highcharts – and most other charts packages – use a combination of CSS and SVG objects, it can be very hard to automate.
It’s also worth mentioning that actually automating graphs is typically a bad practice, because there are usually other and better ways of getting to the data they visualize, such as calling their data sources directly. However, real life often trumps design patterns, and sometimes there just isn’t any way around it.
So how can graphs like these be automated with Selenium?
One typical scenario is “how do I hover or click on the line graph and read the data in the tool tip”:
Since the month columns (Jan, Feb..Dec) are HTML elements, they can be found with Selenium and so suggested solutions often attempt to get their screen coordinates and then attempt to hit the line graphs above by moving the mouse, using a y-coordinate offset. But it’s a flaky and code-intensive way to solve the problem, and there’s something that’s much easier.
Here is an example of using Leapwork (which uses Selenium) to find a line graph (like the one above) or bar graph and then interact directly with Highcharts using Javascript to click on points and read the data directly from Highcharts' internal data:
Related reading: Codeless Selenium: How to Automate with Selenium without Coding
The following video shows in detail how it all works:
Click here to download the samples used in this video.
Go to the Learning Center or sign up for our webinar on no-code test automation to learn more about automating with codeless Selenium.