Targeting dropdown elements in web applications

When automating web-based applications, software robot developers often have to target dropdown form elements.

Dropdowns are a widespread interface pattern used for navigation menus, language selectors, and as components in more complicated interface elements. The strategies to automate them depend on how they are built code-wise. The HTML language offers a very simple implementation of a dropdown: the select tag.

Using a select tag is the simplest and most accessible way to build a dropdown element. However, it is hard to style the same way in all browsers. Its functionality is pretty basic, so many modern web applications create their own dropdown components with more complicated markup and add interactivity to them using custom JavaScript.

Automating regular select HTML elements

Here is an example of a dropdown based on a simple select HTML tag: (you can play with it!)

The example is also available at this URL: https://ccxuf.csb.app

Let's see how a robot that selects the Wall-e option out of that list would look like. To work on an element in our automation script, we will need to come up with a locator for it.

Read How to find user interface elements using locators in web applications to learn all about locators in web applications.

Using the web developer tools, we can see that the markup for the select item looks like this:

<label htmlFor="robots">Choose a famous robot:</label>
<select className="custom-select" name="famous-robots" id="famous-robots">
  <option value="r2d2">R2-D2</option>
  <option value="wall-e">Wall-e</option>
  <option value="johnny-5">Johnny 5</option>
  <option value="bender">Bender</option>
</select>

Pretty simple! You have a <select> HTML tag that wraps a series of <option> tags.

In this case, the web developers gave us an easy way to locate this element: we can use the id attribute of the select tag, which has the value famous-robots. So, id:famous-robots will be our CSS based locator.

Setup your environment and create a new robot.

rpaframework 2.5.1 or later is required! Update your conda.yaml configuration file.

Selenium: RPA.Browser.Selenium

Add this robot code to the tasks.robot file:

*** Settings ***
Documentation     Selecting items from dropdown menus (Selenium).
Library           RPA.Browser.Selenium

*** Tasks ***
Select value from dropdown menu
    Open Available Browser    https://ccxuf.csb.app/
    Wait Until Element Is Visible    id:famous-robots
    Select From List By Value    id:famous-robots    wall-e
    Capture Page Screenshot
    [Teardown]    Close All Browsers

Robot script explained

In the *** Settings *** section, we have added a brief description of the robot, and the RPA.Browser.Selenium library, which gives us keywords to work with web applications, including dropdown menus!

In the *** Tasks *** section, we have added Select value from dropdown menu task, which contains our keywords:

  1. Open Available Browser https://ccxuf.csb.app/ opens a new browser and points it to our test page.
  2. Wait Until Element Is Visible id:famous-robots makes sure that the element we want to work with is visible on the page, and we pass it our locator id:famous-robots.
  3. Select From List By Value id:famous-robots wall-e will select out of the available options in the dropdown menu the wall-e option. The RPA.Browser.Selenium library also provides Select From List By Label, to which we would have provided Wall-e (capital W) as an argument, and Select From List By Index, to which we would have had to send 1, because it starts counting from 0, and Wall-e is the second option in the list.
  4. Capture Page Screenshot: To prove that it worked, we are telling the robot to take a screenshot of the page.
  5. [Teardown] Close All Browsers: We don't need the browser anymore, so let's close it.

Let's run the robot:

Running select robot

Playwright: Browser

The Playwright-based Robot Framework Browser can also handle HTML select elements:

*** Settings ***
Documentation     Selecting items from dropdown menus (Playwright).
Library           Browser

*** Tasks ***
Select value from dropdown menu
    New Page    https://ccxuf.csb.app/
    Select Options By    css=#famous-robots    value    wall-e
    Take Screenshot

Note that there is no need to wait for the element or close the browser, as the library handles those automatically!

Automating custom JavaScript dropdown elements

Here is an example of a custom dropdown based on JavaScript:

The example is also available at this URL: https://e61lk.csb.app/

Let's look at the HTML source of the custom dropdown component, when it is open:

<div class="dropdown-container">
  <label for="my-select">Select a famous robot from the list:</label>
  <div class="btn-group">
    <button type="button" class="btn btn-primary options" style="display: block;">R2-D2</button
    ><button
      id="my-select"
      type="button"
      class="btn btn-primary dropdown-toggle dropdown-toggle-split"
      data-toggle="dropdown"
      aria-haspopup="true"
      aria-expanded="true"
    >
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu" style="display: block;">
      <button id="downshift-1-item-0" class="dropdown-item" style="cursor: pointer;">R2-D2</button
      ><button id="downshift-1-item-1" class="dropdown-item" style="cursor: pointer;">Wall-e</button
      ><button id="downshift-1-item-2" class="dropdown-item" style="cursor: pointer;">Johnny 5</button
      ><button id="downshift-1-item-3" class="dropdown-item" style="cursor: pointer;">Bender</button>
    </div>
  </div>
</div>

Much more markup this time!

Our robot will need to click on the dropdown to open it, then click on the Wall-e option from the list that appears.

So, we will need to locate two HTML elements:

  • the element that opens the dropdown, which is a <button> element with an id attribute with the value my-select. So our selector will be id:my-select
  • the element corresponding to the Wall-e value, which is a <button> element with an id attribute with the value downshift-1-item-1. So our selector for it will be id:downshift-1-item-1

Selenium: RPA.Browser.Selenium

Let's modify the .robot code like this:

*** Settings ***
Documentation     Selecting items from dropdown menus (Selenium).
Library           RPA.Browser.Selenium

*** Tasks ***
Select value from custom dropdown menu
    Open Available Browser    https://e61lk.csb.app/
    Click Element When Visible    id:my-select
    Click Element When Visible    downshift-1-item-1
    Capture Page Screenshot
    [Teardown]    Close All Browsers

Robot script explained

In the *** Tasks section, we have added one task Select value from custom dropdown menu, which contains our keywords:

  1. Open Available Browser https://e61lk.csb.app/ opens a new browser and points it to our test page containing the custom dropdown element.
  2. Click Element When Visible id:my-select waits for and clicks the button that opens the dropdown menu.
  3. Click Element When Visible downshift-1-item-1 will select the Wall-e option.
  4. Capture Page Screenshot: To prove that it worked, we are telling the robot to take a screenshot of the page.
  5. [Teardown] Close All Browsers: We don't need the browser anymore, so let's close it.

Let's run the updated robot:

Running custom dropdown robot

Playwright: Browser

*** Settings ***
Documentation     Selecting items from dropdown menus (Playwright).
Library           Browser

*** Tasks ***
Select value from custom dropdown menu
    New Page    https://e61lk.csb.app/
    Click    css=#my-select
    Click    css=#downshift-1-item-1
    Take Screenshot

Summary

Automating dropdown menus depends on how they have been built. If they are simple select HTML elements, you can use the Select From ... keywords provided by the RPA.Browser.Selenium library.

Often modern web applications use custom dropdowns that have custom HTML markup. In that case, you have to look at the source, identify the elements that make up the custom component, and target them individually.

Learn more about the libraries mentioned on this page: