How to Handle Dropdown in Cypress

Dropdown is an input method largely used when the input has to be one of the values among the given set of values. Usually used in forms, dropdowns are an input UI element that is important for the user experience, hence needs UI Testing. 

Cypress framework provides an easy and straightforward way of handling Dropdown. Cypress has the chaining command select() using which can easily select the drop-down values. The chaining command select() is used in conjunction with get() and contains() .

Different Ways to Select the Dropdown Option

An option in the select dropdown can be selected using its,

• Value
• Text
• Index

Let us consider BrowserStack’s demo website for referring to the select dropdown

As observed, the Order by select drop-down has three options

• Select – default value
• Lowest to highest
• Highest to lowest

To select the options by index

• Index 0 – Select
• Index 1 – Lowest to highest
• Index 2 – Highest to lowest

To select the options by value

• value=”lowestprice”
• value=”highestprice”

To select the options by text

• Select
• Lowest to highest
• Highest to lowest

Writing Cypress Tests to Select Dropdown Options

Let’s see how to write cypress tests for selecting dropdown options with the three ways discussed above.

Cypress test for selecting drop-down option by its index

it.only("Validate the dropdown option selection by it's index", () => {
cy.visit("https://www.bstackdemo.com/")
cy.get("select").select(1).invoke("val").should("eq", "lowestprice")
})

In the above code example, first finding the element using get() and then using chained command select() to pass the index(index starts from 0). In order to ensure that the value selected is proper, you can invoke the element’s value using invoke(“val”) and assert using should()

Cypress test for selecting Drop-Down option by its value

it.only("Validate the dropdown option selection by it's value", () => {
cy.visit("https://www.bstackdemo.com/")
cy.get("select")
  .select("lowestprice")
  .invoke("val")
  .should("eq", "lowestprice")
})

In the above code example, passing the select dropdown option’s value to Cypress’s select() function. Note that the select command accepts index, value, and text.

Cypress test for selecting Dropdown option by its text

Similar to the above example, here passing the select dropdown option’s text to Cypress’s select() function.

it.only("Validate the dropdown option selection by it's text", () => {
cy.visit("https://www.bstackdemo.com/")
cy.get("select")
  .select("Highest to lowest")
  .invoke("val")
  .should("eq", "highestprice")
})

Selection of multiple options in Dropdown by its text

There are dropdowns that support selecting multiple options; in that case, you can pass array to the select() command as seen below

cy.get("select").select(["option 1", "option 2"])

Asserting the selected Dropdown options by text is saved

There are use cases where you would need to validate if the drop down option selected is the right one and the option is retained in the select drop-down once it’s selected.

You can validate this by retrieving the selected value’s text like in the below example

it.only("Validate the dropdown option selection by it's text and assert the selection", () => {
cy.visit("https://www.bstackdemo.com/")
cy.get("select").select("Highest to lowest")
cy.get("select option:selected")
  .invoke("text")
  .should("eq", "Highest to lowest")
})

Conclusion

This article demonstrates how to select the dropdown options using Cypress. It also covers using the select() command to select the option by its value, index, and text. Additionally, you can also validate if the drop-down has selected the value which was intended by assertion using should().

Cypress is a reliable automation tool, but it is important to test the application on a real device cloud for more accurate test results. By testing under real user conditions you can identify the bottlenecks in the real user experience and rectify them in time before release. Cypress tests can take leverage of BrowserStack’s powerful cloud platform to run tests in a faster and more efficient way.

Run Cypress Tests on Real Devices