How to automate Dropdown menu selections


#1

Select a value from dropdown menu

If you ever had to test some registration forms, you have probably encountered some dropdowns with options to pick from. To handle dropdowns and multi-select lists we are using the Select class that exposes several “Select By” and “Deselect By” type methods.
This class is the part of the selenium package, and you can read more about it here. For TypeScript projects with Protractor check out this topic about using the Select class to handle dropdowns.

There are a few different ways to select an option from a dropdown using the following methods:

  • selectByVisibleText()
  • selectByIndex()
  • selectByValue()

Luckily, Ranorex Webtestit offers you a very simple and fast way to handle selecting options, by using the in-built snippet that allows you to select an item by using the selectByIndex() method.

In this example, we are going to create a short example in Java project to test the the guru99 demo site dropdown and select some options from it.

The dropdown contains countries sorted alphabetically, so let’s suppose we have to automate the selection of a specific country (Argentina) which has the index of 8.

The steps for selecting this option are the following:

  • Use Ranorex Selocity to generate a selector for the dropdown options

    dw1

  • While dragging the element to the code, pick “Click nth element” option

    The auto-generated code should look like this:

    public RegisterPo selectCountryByIndex(Integer index) {
       this.wait.until(ExpectedConditions.visibilityOfElementLocated(this.country));
       List<WebElement> countryAllElements = driver.findElements(this.country);
          
       WebElement countryElementByIdx = countryAllElements.get(index);
       countryElementByIdx.click();
      
       return this;
      }
    
  • Use your method in the test
    In your test file call the selectCountryByIndex method and provide the appropriate index number:

    @Test
    public void SelectArgentina() {
          WebDriver driver = getDriver();
      
          // Instantiate PO file
          DropDownPO selectOption = new DropDownPO(driver);
          selectOption.open("http://demo.guru99.com/test/newtours/register.php");
    
          // Select Argentina
          selectOption.selectCountryByIndex(8);
    }
    

Of course, you can also use the “traditional” way to perform the select from the dropdown by using the select method in your page object.

Note that the selector used for the previuos test was [name=‘country’] option. We appended the
option tag to include all the available options from the selection in a List, and then select “Austria” using the index number.
For this, selectByVisibleText() method, the selector would be [name=‘country’] , so without the option tag

For example, if we want to select an option by using selectByVisibleText() method, the steps would be the following:

  • Use Ranorex Selocity to generate a selector for the dropdown options

    WebElement countryElement = this.wait.until(ExpectedConditions.visibilityOfElementLocated(this.country));
    
  • Instantiate the Select method and add your WebElement as a parameter.

    Select sel = new Select(countryElement);
    
  • Call the SelectByVisibleText method

    sel.selectByVisibleText(text);
    

    The whole step would look like this:

     public RegisterPo selectByVisibleText(String text) {
    
         // Locate the element
         WebElement countryElement = this.wait.until(ExpectedConditions.visibilityOfElementLocated(this.country));
    
         // Instantiate the Select class
         Select sel = new Select(countryElement);
    
         // Perform the mehtod
         sel.selectByVisibleText(text);
    
         return this;
     }
    
  • Use your method in the test

    @Test
    public void SelectByText() {
          WebDriver driver = getDriver();
    
          // Instantiate the PO file
          DropDownPO selectOption = new DropDownPO(driver);
          selectOption.open("http://demo.guru99.com/test/newtours/register.php");
    
    
          // Select Austria using the selectByVisibleText() method
          selectOption.selectByVisibleText("AUSTRIA");
    }
    

You can use the selectBy, selectByIndex and selectByValue Methods in the same fashion.


For more information about the Select class, you can visit the official Selenium or Protractor documentation site.