Tutorial 27 – Handle static dropdowns in cypress
Launch http://demo.automationtesting.in/Register.html
You would see a static dropdown against the field ‘Skills’. In a static dropdown, the list of items to choose from is fixed
Click the dropdown, you would see lot of skills in the dropdown, see below
Our goal is to select one of the skills from the dropdown, example
After selecting a skill, I want to verify the value of this option.
Let us inspect the ‘Skills’ dropdown
Notice below, Tagname of the dropdown is ‘select’
Also, we can use the ‘id’ attribute to identify this dropdown
Now expand the ‘select’ tag by clicking 
You would see various ‘option’ tags having values in the ‘value’ tag. These values are present in the ‘skills’ dropdown.
Let us write the script in cypress.
After getting the dropdown element, we are selecting a value from the dropdown
Save and run script, see below. ‘AutoCAD’ is selected
Next, copy the value of this dropdown choice from the HTML viz AutoCAD, see below
We will now assert whether the value that we have selected from the dropdown matches with the value present in HTML. We will use ‘should’ assertion and we can now paste the value
Save and run script. Notice below that assertion gets passed
Let us intentionally incorrect the value in the ‘should’ assertion, so instead of AutoCAD, we are writing AutoCaD
Save and run script. Notice below that assertion gets failed
Let us switch back to correct value
Similarly let us now inspect ‘Country static dropdown
Notice again that it is represented by ‘select’ tag
The line#7 explains that
Save and run script. Notice that ‘Albania’ gets selected in the ‘Country’ dropdown. The assertion too gets passed
Similarly inspect ‘year’ dropdown against the ‘Date Of Birth’ field. This too is represented by ‘select’ tagname. Note down the value of it’s ‘id’ attribute
So we have
Similarly inspect ‘Month’ dropdown against the ‘Date Of Birth’ field. This too is represented by ‘select’ tagname. Note down the value of it’s ‘placeholder’ attribute (since this element does not have ‘id’ attribute)
Copy the value of cssSelector and use it in script.
So we have
Similarly inspect ‘Day’ dropdown against the ‘Date Of Birth’ field. This too is represented by ‘select’ tagname. Note down the value of it’s ‘id’ attribute
So we have
Below is the entire script
Save the script, notice that all 5 assertions pass and respective values are selected in the dropdowns
So this is how we work with static dropdowns.
Thank you for reading!
