Test SVG Graphs Using Selenium WebDriver

At times, during functional testing validating the data in the graphs or charts become crucial to proceed further.On further analysis on dom structure, graph appears to be built on SVG. This complicates the automation testing.

Many a times, testers just leave the particular scenarios as not automatable saying Graphs / images are not automatable. But, that is not right. We'll have one or the other solution to automate everything. Yes! may not be 100 percent.

Sample SVG Graphs: SVG Sample Graphs

Below approach let you know a way to automate SVG graphs using Selenium WebDriver.

Sample 1: SVG Graph within a embed Tag

URL: https://jwatt.org/svg/demos/scripting-across-embed.html

Script :

System.setProperty("webdriver.chrome.driver","C:/pathtofolder/chromedriver.exe");

WebDriver cdrv = new ChromeDriver();

cdrv.get("https://jwatt.org/svg/demos/scripting-across-embed.html");

cdrv.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

//Get the source value of the svg and navigate to the graph

String svgSource = cdrv.findElement(By.id("embed")).getAttribute("src");

cdrv.navigate().to(svgSource);

cdrv.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

//Find the specific element & get the required value.

WebElement svgpart = cdrv.findElement(By.xpath("//*[name()='svg']/*[name()='rect']"));

WebElement svgpart2 = cdrv.findElement(By.xpath("//*[name()='svg']/*[name()='line'][2]"));

System.out.println(svgpart.getAttribute("fill"));

System.out.println(svgpart2.getAttribute("stroke"));

//Navigate back to the actual page.

cdrv.navigate().back();

cdrv.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

cdrv.quit();

Sample 2: SVG Graph directly under div

URL: http://referencewebapp.qaautomation.net/svg.php

Script:

System.setProperty("webdriver.chrome.driver","C:/pathtofolder/chromedriver.exe");

WebDriver cdrv = new ChromeDriver();

cdrv.get("http://referencewebapp.qaautomation.net/svg.php");

cdrv.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

//Find the specific pie div & get the text.

WebElement VioletePartElm = cdrv.findElement(By.cssSelector("#svgchart > div > svg > g:nth-child(4) > g:nth-child(1) > text")); 

System.out.println(VioletePartElm.getText());

cdrv.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);

cdrv.quit();