Reading Pie Chart Tool Tip Value In Selenium WebDriver Test

Many web applications contains charts to show different data In chart view. One of the chart they are using Is Pie chart. It Is very Important for us to know how to automate these pie charts In selenium WebDriver test. Few of the charts are very easy to automate but It Is very hard to automate some charts as we are unable to locate parts of pie chart.

Here Is simple example to get tool tip value from pie chart. It will click on different parts of pie chart and get the tool tip values.


package Testing_Pack;

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;
import org.testng.annotations.BeforeTest;
import org.testng.annotations.Test;

public class pieChart {
 
 WebDriver driver;
 
 @BeforeTest
 public void setup() throws Exception {
  driver = new FirefoxDriver();
  driver.manage().window().maximize();
  driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
  driver.get("http://yuilibrary.com/yui/docs/charts/charts-pie.html");
 }
 
 @Test
 public void pieChart(){
  //Locate pie chart elements based on different colors.
  WebElement VioleteColor = driver.findElement(By.xpath("//*[contains(@class,'yui3-svgSvgPieSlice')][@fill='#66007f']"));
  WebElement GreenColor = driver.findElement(By.xpath("//*[contains(@class,'yui3-svgSvgPieSlice')][@fill='#295454']"));
  WebElement GreyColor = driver.findElement(By.xpath("//*[contains(@class,'yui3-svgSvgPieSlice')][@fill='#e8cdb7']"));
  WebElement LightVioleteColor = driver.findElement(By.xpath("//*[contains(@class,'yui3-svgSvgPieSlice')][@fill='#996ab2']"));
  WebElement BrownColor = driver.findElement(By.xpath("//*[contains(@class,'yui3-svgSvgPieSlice')][@fill='#a86f41']"));
  
  //locate tooltip pie chart.
  WebElement ToolTip = driver.findElement(By.xpath("//div[contains(@id,'_tooltip')]"));

  //Click on pie chart parts and get tooltip values.
  System.out.println("-X-X-X-X-X-X-X-X- Violete Part -X-X-X-X-X-X-X-X-");
  VioleteColor.click();  
  System.out.println(ToolTip.getText());
  System.out.println();  
  
  System.out.println("-X-X-X-X-X-X-X-X- Grey Part -X-X-X-X-X-X-X-X-");
  GreyColor.click();
  System.out.println(ToolTip.getText());
  System.out.println();
  
  System.out.println("-X-X-X-X-X-X-X-X- Light Violete Part -X-X-X-X-X-X-X-X-");
  LightVioleteColor.click();
  System.out.println(ToolTip.getText());
  System.out.println();
  
  System.out.println("-X-X-X-X-X-X-X-X- Green Part -X-X-X-X-X-X-X-X-");
  GreenColor.click();
  System.out.println(ToolTip.getText());
  System.out.println();
  
  System.out.println("-X-X-X-X-X-X-X-X- Brown Part -X-X-X-X-X-X-X-X-");
  BrownColor.click();
  System.out.println(ToolTip.getText());  
 }
}

Run above example In eclipse and verify console result on test execution completion. It will print pie chart tool tip values In console.

11 comments:

  1. Thank you for this tutorial. Well, Have a great Day :)

    ReplyDelete
  2. cannot access the website:
    http://yuilibrary.com/yui/docs/charts/charts-pie.html

    ReplyDelete
  3. Hi,

    Thanks for this great tutorial. Is it possible to automate tooltips which are called by ajax or which have images, etc in it ?

    ReplyDelete
  4. Hi,

    How did you get the xpath of below tool tip?

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

    ReplyDelete
  5. What is ToolTip locater? how did you get this. Please reply

    How did you get the xpath of below tool tip?

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

    ReplyDelete
  6. WebElement element = driver.findElement(By.cssSelector("#header>h1 a"));//here use your code
    // Get tooltip text
    String toolTipText = element.getAttribute("title");
    System.out.println("Tool tip text present :- " + toolTipText);

    ReplyDelete
  7. How to get tooltip:
    Goto FireBug, Click on the pie chart, in firebug CTRL+A and copy paste in file and now search the tooptip

    ReplyDelete
  8. Hi I want to automate the follwoing google chart how can i automate this..

    https://developers.google.com/chart/interactive/docs/gallery/piechart

    please check and let me know how to find the element for above..


    Check my below script :

    String sleep= driver.findElement(By.xpath(".//*[@id='piechart']/div/div[1]/div/svg/g[4]/path[1]")).getText(); System.out.println("sleep :" +sleep);

    String work= driver.findElement(By.xpath(".//*[@id='piechart']/div/div[1]/div/svg/g[3]/path[1]")).getText(); System.out.println("work :" +work);

    String Eat= driver.findElement(By.xpath("..//*[@id='piechart']/div/div[1]/div/svg/g[7]/path[1]")).getText(); System.out.println("Eat :" +Eat);

    String Commute= driver.findElement(By.xpath(".//*[@id='piechart']/div/div[1]/div/svg/g[6]/path[1]")).getText(); System.out.println("Commute :" +Commute);

    String WatchTV= driver.findElement(By.xpath(".//*[@id='piechart']/div/div[1]/div/svg/g[5]/text")).getText(); System.out.println("WatchTV :" +WatchTV);

    ReplyDelete
  9. Hi, for
    System.out.println("-X-X-X-X-X-X-X-X- XXXX Part -X-X-X-X-X-X-X-X-");
    GreyColor.click();
    System.out.println(ToolTip.getText());
    System.out.println();
    the last two print nothings. If I am right, it should print the text under the mouse arrow when mouse hover one of the colors.
    I will try and back if I get through.

    Mak

    ReplyDelete
  10. When i run the above code iam getting null pointer exception . why ?

    ReplyDelete