Select-option dropdowns

DogQ is capable of interacting with pretty much every native HTML element. In this short article we'll be taking a look at the combination of <select> and <option> elements that is commonly used across the web to create dropdown menus.

Normally this interface consists of a <select> element representing the dropdown itself and one or more <option> elements nested inside. Here's an example taken from DogQ Dashboard:

<select id="test_project">
    <option>All Projects</option>
    <option>Name of your project</option>
</select>

How to test a select-option dropdown?

To make a DogQ test of such dropdown we simply recreate the usual flow in a step-by-step manner using Clicks, no extraordinary steps required. Namely, such a test usually involves left-clicking on a <select> element to open the dropdown itself and another left click on the <option> you would like to pick from the menu.

Here we are clicking on the second option available in our example:

It's not recommended trying to skip the left click on <select> and going straight for <option> as it may produce unexpected results and is not a true recreation of a user flow in general.