By Archana Gore
Have you ever heard about the Hidden dropdown?
In our automation every day we deal with one or the other dropdown. We click on the arrow button and we see dropdown values. When you right-click on any of the options and try to inspect, you see a pop-up menu along with dropdown list items.
Let’s understand with the help of a screenshot-
In the above screenshot, we can see dropdown values and a pop-up menu. That’s how a normal dropdown behaves.
Have you ever encountered a dropdown where you click on a dropdown, see dropdown values, and then try to inspect items? Suddenly values disappear. If yes, that’s the Hidden dropdown. Also, we won’t see dropdown values in HTML.
In the above screenshot, we can see a dropdown list when we click on the arrow.
Let’s see what happens when we try to inspect any of the values in the list.
As soon as we right-click on the dropdown value it disappears.
Also, we cannot see dropdown values in HTML. Please refer highlighted area.
Now, how to inspect and automate such a dropdown? Let’s see a trick to inspect. 1. Go to a dropdown. Right-click on it and inspect.
2. Open developer tool. This usually appears on the right side of your screen. There you will see the ‘Event Listeners’ tab, click on it. 3. Click on the ‘blur’ option from the list. 4. Once you click on the blur option, you will see the ‘Remove’ button.
5. Click on the Remove button. 6. Once again go to the same dropdown right click on it and inspect.
This is how it looks after inspection.
7. Now go to the inspect arrow and click on it.
8. Hover on dropdown values. Here you can see wherever you hover it highlights in HTML too.
And also you can see dropdown options are now visible in HTML in the div tag.
The screenshot above shows that highlighted div tags show dropdown options.
Now we can find XPath for options, select an option from the dropdown, count the number of options available, and print those options in the console.
Since the select tag is not available in HTML we cannot use the ‘Select’ class. We cannot use the selectByIndex (), selectByVisibleText (), or selectByValue () methods to handle dropdowns.
Let’s see the code to handle hidden dropdowns.
import java.time.Duration; import java.util.List;
import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver;
public class HiddenDropDownDemo {
public static void main(String[] args) { //start Chrome browser WebDriver driver=new ChromeDriver(); //using implicit wait to avoid synchronization issue driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10)); //start an application driver.get(“https://opensource-demo.orangehrmlive.com/web/index.php/auth/login"); //window maximize driver.manage().window().maximize(); //login to the application driver.findElement(By.name(“username”)).sendKeys(“Admin”); driver.findElement(By.name(“password”)).sendKeys(“admin123”); driver.findElement(By.xpath(“//button[@type=’submit’]”)).click(); //clicking on PIM driver.findElement(By.xpath(“//ul/li[2]/a”)).click(); //first we have to click on dropdown
driver.findElement(By.xpath(“//div[contains(@class,’oxd-grid-4 ‘)]/div[6]//div[2]/div/div[contains(@class,’oxd-select-text’)]”)).click(); //capturing all the options and storing them in the List of WebElements //common XPath for all of the options List<WebElement>options=driver.findElements(By.xpath(“//div[@role=’listbox’]//span”)); //printing size of options in the console System.out.println(“Total number of options:”+options.size()+”\n”); //using advanced for loop to get the elements one by one for(WebElement op:options) { //it will print the inner text of all the elements System.out.println(op.getText()); }
for(WebElement op:options) { //verifying if Text is equal to ‘Content Specialist’ then click on it if(op.getText().equals(“Content Specialist”)) { //clicking on the option op.click(); //breaking the loop break; } } driver.quit();
} }
The output of the program:
Total number of options:25
Account Assistant Chief Executive Officer Chief Financial Officer Chief Technical Officer Content Specialist Customer Success Manager Database Administrator Finance Manager Financial Analyst Head of Support HR Associate HR Manager IT Manager Network Administrator Payroll Administrator Pre-Sales Coordinator QA Engineer QA Lead Sales Representative Social Media Marketer Software Architect Software Engineer Support Specialist VP — Client Services VP — Sales & Marketing
This is all about handling the Hidden dropdown. Here we are passing the parameter directly in the if statement so depending on the test data it will select values from options.
Happy Learning!!!