'How to automate graphs using Selenium, Java

I inject data into a web application and it generates a graph and a pie chart. I'd like to test the result on the graph is coherent with the given data through Selenium. Any ideas? Thanks, Best regards !!!

javaseleniumselenium-webdriver


Solution 1:[1]

Assuming that your graph has a Javascript Model (e.g. an array) you can assert the contents of such array by using the assertEval command.

Solution 2:[2]

I am posting the most basic but fundamental example for your Pie chart problem, Here I am taking Yahoo's YUI based PIE Chart for my example. Here in each refresh all the sections are created dynamically so I am using contains in the id of the element . Here in the chart the controls are not simple HTML but these are svg (HTML5 controls) so on finding these we need to use //* in xpath.

My motive here is to find these dynamic sections in the PIE chart(Here in the current chart there are 5 sections)

And to click each section and to print tool tip text of these.

The Out put will be like. Violette Part:day: Monday taxes: 2000

Grey Part:day: Friday taxes: 2000

Light Violette Part:day: Thursday taxes: 200

Green Part:day: Wednesday taxes: 4000

Brown Part:day: Tuesday taxes: 50 0.61%

Here is the Demo program for it,anywhere you can execute it... :)

 package tests;

 import java.util.concurrent.TimeUnit;
 import org.openqa.selenium.By; 
 import org.openqa.selenium.WebDriver;
 import org.openqa.selenium.WebElement;
 import org.openqa.selenium.firefox.FirefoxDriver;


 public class testCode {
 public static WebDriver driver;

 public static void main(String[] args) throws InterruptedException {

 driver = new FirefoxDriver();
 driver.get("http://yuilibrary.com/yui/docs/charts/charts-pie.html");

 driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);

 **//FIND DIFFERENT SECTIONS IN PIE CHART**

 WebElement ViolettePart = driver.findElement(By.xpath("//*   [contains(@id,'yui_3_13_0_1_')][contains(@class,'yui3-svgSvgPieSlice')][@fill='#66007f']"));
 WebElement GreenPart = driver.findElement(By.xpath("//*[contains(@id,'yui_3_13_0_1_')][contains(@class,'yui3-svgSvgPieSlice')][@fill='#295454']"));
 WebElement GreyPart = driver.findElement(By.xpath("//*[contains(@id,'yui_3_13_0_1_')][contains(@class,'yui3-svgSvgPieSlice')][@fill='#e8cdb7']"));
 WebElement LightViolettePart = driver.findElement(By.xpath("//*[contains(@id,'yui_3_13_0_1_')][contains(@class,'yui3-svgSvgPieSlice')][@fill='#996ab2']"));
 WebElement BrownPart = driver.findElement(By.xpath("//*[contains(@id,'yui_3_13_0_1_')][contains(@class,'yui3-svgSvgPieSlice')][@fill='#a86f41']"));

 **//TOOLTIP OVER PIE CHART**

 WebElement ToolTip = driver.findElement(By.xpath("//div[contains(@id,'_tooltip')]"));

 **//CLICK EACH SECTION OF PIE CHART AND GET THE TEXT OVER IT**

 ViolettePart.click();
 System.out.println("Violette Part:"+ToolTip.getText());
 GreyPart.click();
 System.out.println("Grey Part:"+ToolTip.getText());
 LightViolettePart.click();
 System.out.println("Light Violete Part:"+ToolTip.getText());
 GreenPart.click();
 System.out.println("Green Part:"+ToolTip.getText());
 BrownPart.click();
 System.out.println("Brown Part:"+ToolTip.getText());
 } }

Solution 3:[3]

Unless you are ok with just verifying metadata about the chart (captions, some JSON properties, etc) you will have to use image comparison. You define a baseline image that represents what the result should like like and your test compares against the reference.

Since it is not trivial to reliably test images you can use a library such as Ocular.

Solution 4:[4]

If it is a bar graph then you can identify all bars and the labels using "findElements", then you can iterate among the labels, get the label text if the text matches with the input that you have given then using Actions class move on that bar, then you can validate the data on the tooltip.

To get any xpath from the graph, you can use the * in you xpath in place of tagname for example

//*[@class='ABC']

you can follow the same process for pie chart but it is going to have few modifications

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Michele Festini
Solution 2
Solution 3 Boris Terzic
Solution 4 Suhail Ahmed

Related Questions