Tutorial 28 – Handle dynamic dropdowns in cypress
What you will Learn :
Handle dynamic dropdown in cypress
click({force:true}) usage
type('{enter}') usage
Handle dynamic dropdown in cypress
Launch http://demo.automationtesting.in/Register.html
You would see a dynamic dropdown against the field ‘Languages’. In a dynamic dropdown, the list of items would be loaded at runtime
Click the dropdown, you would see lot of languages in the dropdown, see below
Unlike static dropdown, you can select more than one option from the dynamic dropdown. You can select any number of languages from the dropdown, just click the desired languages. See below, whatever languages we selected, they appear in the languages field. So we can select multiple languages at the same time
Let us see how to handle this kind of dynamic dropdown in cypress.
Let us inspect the languages field. Notice that this field is represented by ‘div’ tagname unlike ‘select’ tagname that we saw for a static dropdown field in previous tutorial
We have to first perform the ‘click’ operation on the ‘Languages’ field. This operation would show us all the options in the dropdown. We can use the ‘id’ attribute to identify the field and will use the click() operation
Save and run the script
Notice below that click operation is performed successfully and we can see the languages in the dropdown
We cannot use ‘select’ method to select a value from dropdown. Let us see what happens when we do that, see line#7 below
Save and run script, notice the cypress error below. The error says that we can use select() method only for ‘select’ tagnames (like we saw in static dropdown)
So, let us comment the line#7
Let us inspect any one language option. Notice that all the languages are part of list viz ‘li’ tag.
Further, each ‘li’ tag contains an anchor tag ‘a' and each anchor tag contains a common classname ‘ui-corner-all’, see below
So we can use this common classname as a locator to locate all the language options in the dropdown. So below command will give us all the options in the dropdown
Next, we will put an assertion to verify whether these list of options contain the ‘Arabic’ language
If the options contain ‘Arabic’ than we will perform the click operation to select it
Save the script and run. Notice below that ‘Arabic’ language gets selected
Let us add one more language
Save the script and run. Notice below that ‘Arabic’ and ‘Dutch’ languages get selected
Now we will see another type of dynamic dropdown element ‘Select Country’, see below
When you click this dropdown, you will see lot of countries in the dropdown
When we type ‘De’ in the field, the dropdown options get narrowed down to 2 viz Bangladesh and Denmark
Similarly when you type ‘Den’, you now see only one option in the dropdown ‘Denmark’
Now press ‘Enter’. You would see that ‘Denmark’ gets selected
Let us refresh the page and inspect the ‘Select Country’ field
As seen above, the element is represented by ‘span’ tagname. We can use the attribute ‘role’ to create the cssSelector. So below identifies the ‘Select Country’ dropdown field
To perform the click operation on this field, we use the click() method
So our entire code so far contains 2 test case (2 ‘it’ blocks)
Save the script and run. Notice below that we get a cypress error. The reason being, ‘Select Country’ dropdown is hidden by ‘Languages’ dropdown and hence cypress is not able to select any value from the ‘Select Country’ dropdown
To resolve this error, instead of click(), just use “click({force:true})”
Save script and run. Notice below that ‘Select Country’ dropdown is clicked this time
Next, we will inspect the text field where we would be typing
It is of the ‘input’ type tagname. We will use the ‘role’ attribute to identify this
To type ‘Den’, we can use ‘type’ method
So our test case so far is
Save and run. Notice that ‘Den’ is typed in the types
Next, we have to press ‘Enter’key from the keyword. To do that, we can use the method type('{enter}') on the text field cy.get("input[role='textbox']")
Save and run the script, see below, Denmark gets selected
To refer the other keyboard commands, you can refer https://docs.cypress.io/api/commands/type.html#Arguments
Below is complete code
So this is how we work with dynamic dropdowns.
Thank you for reading!