My Thoughts: Verifying ToolTip information by enabling javascript in browser

Saturday, July 13

Verifying ToolTip information by enabling javascript in browser


These days most of websites are using the ToolTip to provide information to end user.

ToolTip(also known as ScrrenTip) will be visible to the user whenever he/she mouseovers on specific object and it just displays information about the object(button,textbox,link,image etc..).

These tooltips works only when javascript is enabled.

So automating tooltip involves :

  •  Verifying that tooltip presents when we mouse over on specific object 
  •  Verifying that the text that present in the tooltip is correct.
In this site  if you mouse over on "Download" link we will see a tooltip.

ToolTip Screenshot


Here is the program which will check the existence of tooltip and also the text present in the tooltip. In this program I have used HtmlDriver because it provides inbuilt methods for enabling and disabling of javascript.

import org.openqa.selenium.By;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.htmlunit.HtmlUnitDriver;
import org.openqa.selenium.interactions.Action;
import org.openqa.selenium.interactions.Actions;

public class HTMLdriver {
 public static void main(String args[]){
 
 HtmlUnitDriver driver = new HtmlUnitDriver();
 driver.setJavascriptEnabled(true);
 driver.get("http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/");
 WebElement element=driver.findElement(By.linkText("Download"));
 Actions builder = new Actions(driver);  // Configure the Action  
 Action mouseOver =builder.moveToElement(element).build(); // Get the action  
 mouseOver.perform(); // Execute the Action 
   if(driver.findElement(By.id("tooltip")).isDisplayed()){
    System.out.println("Tooltip is coming up fine");
    System.out.println("Here is the tool tip text : "+driver.findElement(By.id("tooltip")).getText());
   }else{
    System.out.println("There is no Tool tip text");
   }

 }
}

If you want to check the correctness of the program then disable javascript and run the program.In this case script will fail as tooltip failed to appear when we mouseover on Download link.
driver.setJavascriptEnabled(false);

5 comments:

  1. Hi Vamshi,

    could please provide me solution to get id of tooltip box(ex: id=tooltip for above example)

    Thanks,
    Ram

    ReplyDelete
  2. Hi Ram,

    You can get the id by using firebug/firepath plugins.

    https://addons.mozilla.org/en-US/firefox/addon/firebug/

    https://addons.mozilla.org/en-US/firefox/addon/firepath/



    Hope it helps..!!

    ReplyDelete
  3. Thank you very much for your reply, i installed firebug and fire path plugins, i can able to get attributes of "download" link but not able to find attributes or properties of tool tip box .
    i have attached screen shot of that screen, please find it.



    can you please suggest me how to find tool tip attributes from firebug


    Thanks,
    Ram

    ReplyDelete
  4. For tooltip , the only way we can find the attributes is with "Search" . Just search for the the tooltip string in the html code. I have added a screenshot for reference.


    Thanks, Vamshi

    ReplyDelete
  5. Please use the below code wherever you found 2 Jquery calendar
    // Calendar Month and Year
    String calYear = null;
    boolean dateNotFound;
    dateNotFound = true;
    expMonth= "March";
    expYear = 2015;

    while(dateNotFound)
    {

    calYear = driver.findElement(By.className("ui-datepicker-year")).getText();

    // CORRECTED CRITICAL MISTAKE IS INSTEAD OF EQUALS METHOD I USED == ( FOR STRING COMPARISION PLEASE USE EQUALS)

    if(driver.findElement(By.xpath("//div[@class='monthBlock first']/div/div/span[1]")).getText().equals(expMonth) && (expYear == Integer.parseInt(calYear)))
    {

    String block="//div[@class='monthBlock first']/table/tbody/tr/td"; // THIS IS FIRST CALENDAR
    selectDate(expDate,block); // it will pass only day number
    dateNotFound = false; // Otherwise it will rotate continuously
    }
    else if(driver.findElement(By.xpath("//div[@class='monthBlock last']/div/div/span[1]")).getText().equals(expMonth) && (expYear == Integer.parseInt(calYear)))
    {
    String block="//div[@class='monthBlock last']/table/tbody/tr/td"; // THIS IS SECOND CALENDAR

    // CORRECTED ONE MORE CRITICAL MISTAKE, PLEASE USE STATIC MEMBER FOR STATIC METHODS OTHERWISE IT WONT ACCEPT.

    selectDate(expDate,block); // PASSING DATE AND CALENDAR
    dateNotFound = false; // Otherwise it will rotate continuously
    }

    // parseInt - Converts String to integer and indexof( It will return the index position of String)
    else
    {
    driver.findElement(By.xpath("//*[@id='ui-datepicker-div']/div[2]/div/a")).click();
    }

    }

    }

    public static void selectDate(String date,String block)
    {
    String monthblock=block;

    List dateWidget = driver.findElements(By.xpath(monthblock));

    for (WebElement cell: dateWidget)
    {
    //Selects Date
    if (cell.getText().equals(date))
    {
    cell.findElement(By.linkText(date)).click();
    break;
    }

    }
    driver.findElement(By.id("SearchBtn")).submit();

    driver.quit();

    }

    ReplyDelete