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 if using Robocorp Lab or run pip install --upgrade rpaframework if updating manually.

Add this robot code to the tasks.robot file:

*** Settings ***
Documentation     Example robot selecting items from dropdown menus.
Library           RPA.Browser

*** 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 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 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

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

Let's modify the .robot code like this:

*** Settings ***
Documentation     Example robot selecting items from dropdown menus.
Library           RPA.Browser

*** 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

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 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.