Automating SVG and Interactive Charts in Selenium-JavascriptExecutor



In this tutorial we will discuss about automating the Interactive Charts and SVG [Scalable Vector Graphics] in Selenium.

To automate these Interactive Charts, Selenium Locators such as Xpath and Css-Selector are not helpful. We should depend on an Interface called JavascriptExecutor to identify the SVG and read the values available in these charts.

Javascript Commands:

Reading Attributes of SVG graph[Scalable Vector Graphics]
document.getElementsByTagName('svg')[0].getAttribute('class')

Scalable Vector Graphics - SVG

Scalable Vector Graphics – SVG


Reading Data from the Chart
document.getElementsByTagName('path')[0].getAttribute('d')
Interactive Chart-Line Chart

Interactive Chart-Line Chart

Executing the Javascript Commands in Selenium WebDriver

Output:

M 84.5 73 L 84.5 359
Basic line | Highcharts



References:

JavaScript HTML DOM Document
Interactive Charts

Conclusion:

Therefore, using Javascript Commands we can automate the SVG and Interactive Charts in Selenium.

3 comments on “Automating SVG and Interactive Charts in Selenium-JavascriptExecutor

  1. Smruthi

    Thank you for explaining how to execute javascript command in selenium. I wanted to know how to validate the results? Compare the output against what? How to decide on the expected result?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *