How To Handle Ajax Auto Suggest Drop List In Selenium Webdriver

What Is Ajax Auto Suggest Drop List?
Before learning about how to handle ajax auto suggest drop down list In selenium webdriver software testing tool, Let me tell you what Is ajax auto suggest drop down list. If you have visited any software website with search box and that search box Is showing auto suggest list when you type some thing Inside It. Simplest example of ajax auto suggest drop list Is Google search suggestion. When you will type something Inside It, It will show you a list of suggestions as shown In bellow given Image.


This Is only example for your reference. You will find this kind of ajax drop lists In many sites.

How to handle ajax drop list In selenium WebDriver
Now supposing you wants to select some value from that auto suggest list or you wants to store and print all those suggestions then how will you do It?. If you know, It Is very hard to handle such ajax In selenium IDE software testing tools. Let we try to print all those suggestions In console.

Here, Xpath pattern Is same for all ajax auto suggest drop list Items. Only changing Is Value Inside <tr> tag. See bellow xpath of 1st two Items of drop list.

//*[@id='gsr']/table/tbody/tr[1]/td[2]/table/tbody/tr[1]/td/div/table/tbody/tr[1]/td[1]/span
//*[@id='gsr']/table/tbody/tr[1]/td[2]/table/tbody/tr[2]/td/div/table/tbody/tr[1]/td[1]/span

So we will use for loop(As described In my THIS POST) to feed that changing values to xpath of drop list different Items. Other one thing we need to consider Is we don't know how many Items It will show In ajax drop list. Some keywords show you 4 Items and some other will show you more than 4 Items In drop list. To handle this dynamic changing list, We will USE TRY CATCH BLOCK to catch the NoSuchElementException exception if not found next Item In ajax drop list.

In bellow given example, we have used testng @DataProvider annotation. If you know, @DataProvider annotation Is useful for data driven software automation testing. THIS LINKED POST will describe you the usage of @DataProvider annotation with detailed example and explanation.

Run bellow given example In your eclipse with testng and see how It Is retrieving values from ajax drop list and print them In console.

package Testng_Pack;

import java.util.concurrent.TimeUnit;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.testng.annotations.AfterTest;
import org.testng.annotations.BeforeTest;
import org.testng.annotations.DataProvider;
import org.testng.annotations.Test;

public class Ajax_Handle {
 
WebDriver driver = null;
 
 
         @BeforeTest
         public void setup() throws Exception {
             System.setProperty("webdriver.gecko.driver", "D:\\Selenium Files\\geckodriver.exe");
      driver = new FirefoxDriver(); 
             driver.manage().window().maximize();
             driver.manage().timeouts().implicitlyWait(5, TimeUnit.SECONDS);
             driver.get("http://www.google.com"); 
    } 
 
 @AfterTest
 public void tearDown() throws Exception { 
     driver.quit();
     } 
 
 //Data provider Is used for supplying 2 different values to Search_Test method.
 @DataProvider(name="search-data")
 public Object[][] dataProviderTest(){
     return new Object[][]{{"selenium webdriver tutorial"},{"auto s"}};
 }
  
 @Test(dataProvider="search-data")
 public void Search_Test(String Search){ 
   driver.findElement(By.xpath("//input[@id='gbqfq']")).clear();
   driver.findElement(By.xpath("//input[@id='gbqfq']")).sendKeys(Search);
   int i=1;
   int j=i+1;
   try{
    //for loop will run till the NoSuchElementException exception.
    for(i=1; i<j;i++)
      { 
     //Value of variable i Is used for creating xpath of drop list's different elements.
     String suggestion = driver.findElement(By.xpath("//*[@id='gsr']/table/tbody/tr[1]/td[2]/table/tbody/tr["+i+"]/td/div/table/tbody/tr/td[1]/span")).getText();
     System.out.println(suggestion);
     j++;     
      } 
    }catch(Exception e){//Catch block will catch and handle the exception.
     System.out.println("***Please search for another word***"); 
     System.out.println();
    }  
  }
}

This way you can also select specific from that suggestion for your searching purpose. It Is very simple In selenium webdriver software testing tool. You can use other or more search values In above example. To do It simply modify @DataProvider annotation method.

4 comments:

  1. how to open each suggestion in new tab

    ReplyDelete
    Replies
    1. Hi Rahul

      you can use this code

      drv.get("http:\\www.google.com");
      WebElement link = drv.findElement(By.className("gb_P"));
      Actions act = new Actions(drv);
      act.keyDown(Keys.SHIFT).click(link).keyUp(Keys.SHIFT).build().perform();

      In this code using action class we are pressing shift + click to open in new tab.

      But if your question is how we can open new tab from the auto suggestion, i am not sure.. i think we cant even do it manually. Do you know how to do that manually i.e. opening a new tab/window from the auto suggestion on google

      Delete
  2. Thanks that was very helpful.. I used the below xpath instead of the one mentioned above,, looks like it got changed

    String suggestion = drv.findElement(By.xpath("//*[@class='sbsb_b']/li[@role='presentation']["+i+"]")).getText();

    Really nice way of using the exception when you dont know how many items are there in auto suggestion

    ReplyDelete
  3. How To Handle Ajax Auto Suggest Drop down List in flipkart/amazon In Selenium Webdriver

    ReplyDelete