Handle_Static_Dropdowns_In_Cypress

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!

Share On

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on tumblr
Share on email

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

Lifetime Membership Club

LIFETIME MEMBERSHIP BIG SALE - ALL LIVE COURES JUST - 7000 RS/ 99 USD
Attend All Live courses in just 7000 rs / $99 - offer ends 1st Nov 2024