To select value from ajax dropdown elements having same classname using Selenium

1
votes

I am trying to select a particular value from two Ajax drop down fields. But both the ajax value container is having same classname 'ac_results'. So only the value from the first ajax dropdown field is getting selected and its not identifying the second ajax dropdown value. Please help me with this regard. HTML code:

 <div class="ac_results" style="display: none; position: absolute; width: 150px; top: 225px; left: 489.317px;">

    <ul style="max-height: 180px; overflow: auto;">

        <li class="ac_even"></li>
        <li class="ac_odd"></li>
        <li class="ac_even"></li>
        <li class="ac_odd"></li>
        <li class="ac_even"></li>
        <li class="ac_odd"></li>
        <li class="ac_even"></li>
    </ul>

</div>
<div class="ac_results" style="display: none; position: absolute; width: 150px; top: 225px; left: 781.733px;">

    <ul style="max-height: 180px; overflow: auto;">

        <li class="ac_even"></li>
        <li class="ac_odd"></li>
        <li class="ac_even"></li>
        <li class="ac_odd"></li>
    </ul>

Code:

//get the from field
		WebElement fromCity = driver.findElement(By.id("txtStationFrom"));
		
		//Enter the value into the from city field
		fromCity.sendKeys("ban");
		
		//wait for some time
		Thread.sleep(2000);
		
		//get the ajax container having values
		WebElement ajaxContainer1 = driver.findElement(By.className("ac_results"));
		
		WebElement ajaxHolder1 = ajaxContainer1.findElement(By.tagName("ul"));
		
		//Values in the container
		List<WebElement> ajaxValues1 = ajaxHolder1.findElements(By.tagName("li"));
		
		for (WebElement value1 : ajaxValues1) {
			if(value1.getText().equals("BANGALORE CY JN- SBC")){
				value1.click();
				break;
			}
		}
		
		//Get the to city field
		WebElement toCity = driver.findElement(By.id("txtStationTo"));
		
		//pass the value to the field  
		toCity.sendKeys("sub");
		
		//Wait for some time
		Thread.sleep(2000);
		
		//get the container of the ajax toCity
		
		WebElement ajaxContainer2 = driver.findElement(By.className("ac_results"));
		
		WebElement ajaxHolder2 = ajaxContainer2.findElement(By.tagName("ul"));
		
		List<WebElement> ajaxValues2 = ajaxHolder2.findElements(By.tagName("li"));
		
		for (WebElement value2 : ajaxValues2) {
			
			if(value2.getText().equals("SUBRAHMANYA ROAD- SBHR")){
				value2.click();
				break;
			}		
		}
2
javaajaxseleniumdrop-down-menuselenium-webdriver
Did you try using xpath? - Helping Hands
@HelpingHands No i did not use xpath. - Chetan Kumar T
Then you should try. - Helping Hands
HTML you have shared is of not actual dropdown, you might be using some plugin/framework which generated dropdown out of it. - Ajinkya
@HelpingHands: I tried xpath, but getting "NoSuchElementException" error. - Chetan Kumar T

2 Answers

0
votes

you can use something like this 

//div[@class='ac_results'][0] // For first Drop Down
//div[@class='ac_results'][1] // For second Drop Down

or
List<WebElement> dropDowns = driver.findElements(By.className('ac_results'));
WebElement dropDownOne = dropDowns.get(0); // perform further action using this WebElement
WebElement dropDownTwo = dropDowns.get(1); // Second drop down
0
votes

I have tried, but not getting web elements list

Its google search tab Test script where just search for random thing : "ran" my code : 

@Test
enter code herepublic void checkDropDownofSearchBox(){
    int i = 0;
    WebElement dropDown = driver.findElement(By.className("sbdd_a"));
    WebElement ajaxHolder1 = dropDown.findElement(By.className("sbdd_b"));

    List<WebElement> ajaxValues1 = ajaxHolder1.findElements(By.tagName("li"));

    for (WebElement value1 : ajaxValues1) {
        System.out.println(value1.getText());
        i++;
    }
    System.out.println(i);
}