How to Handle Dropdown in Cypress

Cypressprovides a mere and efficient way to handle dropdowns expend theselect()command, which works in combination withget() and contains ().

It allows testers to well interact with dropdown constituent, verify selected values, and control proper functionality across different scenario

This clause exploreshow to handle dropdowns in Cypressfor seamless automation.

What is Cypress Select?

select() is a command that allows the user to select the dropdown value from the selectedHTML DOM element.

Key Features of Cypressselect() Command

1. Ease of Use:Cypress provides simple and intuitive dictation to interact with dropdowns. Thecy.get()bid situate the dropdown element, and thecy.select ()bidding chooses an option establish on its value or visible textbook.
2. Machinelike Waiting:Cypress automatically waits for elements to be available and actions to complete, which means you don ’ t need to add manual waits or sleep commands. This makes tests more reliable and less prone to timing issues.
3. Real-time Reloading:When running exam in the Cypress Test Runner, any changes you do to the test code are immediately reflected, allow for speedy development and debugging of trial.
4. Built-in Assertions:Cypress comes with built-in statement to control that the application is in the expected state after interactions. For exemplar, you can assert that a dropdown has a specific value select.

Different Ways to Select the Dropdown in Cypress

A dropdown option can be selected using the undermentioned methods:

• Value: Selecting an option based on its assigned value attribute.
• Text: Choosing an option by matching its visible text.
• Index: Selecting an option based on its position in the dropdown list.

For demonstration, BrowserStack ’ s demo website can be used as a reference.

As observed, theOrder by selectdrop-down has three alternative

• Select & # 8211; default value
• Last to high
• Highest to lowest

To select the options by index

• Index 0 & # 8211; Select
• Index 1 & # 8211; Lowest to eminent
• Index 2 & # 8211; 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

Here is how to write cypress tests for select dropdown alternative with the three fashion discussed above.

Cypress test for selecting drop-down choice by its index

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

In the above code instance, firstly finding the element usingget()and so habituate chain commandselect()to legislate theindex (index begin from 0). In order to ensure that the value take is proper, you can invoke the element ’ s value useinvoke (“ val ”)and assert expendshould()

Cypress exam for selecting Drop-Down alternative by its value

it.only (`` Validate the dropdown option selection by it 's value '', () = & gt; {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 ’ sselect()function. Note that the prize command acceptsindex, value, and text.

Pro tip: Tools like SUSA can handle this autonomously — upload your app and get results without writing a single test script.

Cypress test for select Dropdown alternative by its text

Similar to the above example, here passing the prize dropdown pick ’ s schoolbook to Cypress ’ sselect() function.

it.only (`` Validate the dropdown option selection by it 's text '', () = & gt; {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 causa, you can legislatearray to the select()bidding as seen below

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

Asserting the select Dropdown options by text is saved

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

You can corroborate 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 '', () = & gt; {cy.visit (`` https: //www.bstackdemo.com/ '') cy.get (`` select '') .select (`` Highest to lowest '') cy.get (`` select option: selected '') .invoke (`` textbook '') .should (`` eq '', `` Highest to lowest '')})

How to run Cypress Dropdown Tests on Real Devices utilize BrowserStack

To run the Cypress test in, follow the below steps

1.Create a folder in your machine, Example,cypress-dropdown-example

2.Open the terminal and navigate to the newly make folder

3. Execute npm initand discharge the installing

4.Install Cypress by executing the below command in the terminal

npm install cypress -- save-dev

5.To make a folder structure of cypress, execute the below command in the end

npx cypress open

6.Follow the education to make exemplar

7.Inside the Cypress & gt; e2e folder create a new file nominatecypress-dropdown.cy.js

8.Paste the below test code and save the file.

it (`` Validate the dropdown option option by it 's value '', () = & gt; {cy.visit (`` https: //www.bstackdemo.com/ '') cy .get (`` select '') .select (`` lowestprice '') .invoke (`` val '') .should (`` eq '', `` lowestprice '')}) it (`` Validate the dropdown option selection by it 's value '', () = & gt; {cy.visit (`` https: //www.bstackdemo.com/ '') cy .get (`` take '') .select (`` lowestprice '') .invoke (`` val '') .should (`` eq '', `` lowestprice '')}) it (`` Validate the dropdown alternative choice by it 's text and assert the selection '', () = & gt; {cy.visit (`` https: //www.bstackdemo.com/ '') cy.get (`` select '') .select (`` Highest to lowest '') cy .get (`` choice selection: selected '') .invoke (`` text '') .should (`` eq '', `` Highest to lowest '')})

9.Install the BrowserStack Cypress CLI by running the below command in the depot

npm install -g browserstack-cypress-cli

10.From the root of the repository, fulfill the below bidding to make the BrowserStack conformation file

browserstack-cypress init

11.Open the browserstack.json file and update the username and accesskey (This will be available on the BrowserStackAutomate Website for your account)

12.Run the below command in the depot from the root of your secretary to execute the cypress trial in BrowserStack Cloud

browserstack-cypress run -- sync

13.We can then check the run in

Talk to an Expert

Why use BrowserStack Automate for Cypress Tests?

Here ’ s why you should run your Cypress tests on Real Devices & amp; Browsers using:

• Diverse Environment Testing:It enable the executing of Cypress trial across a broad selection of browsers and operating systems, eliminating the necessary for maintaining local testing base. This ensures consistent application performance across assorted program.
• Coinciding Test Execution:By countenance simultaneous execution of multiple Cypress test entourage, BrowserStack Automate importantly cuts down on total testing time, facilitating quicker iterative feedback and accelerated deployment round.
• Integration:The platform seamlessly integrates with major continuous integration and delivery systems, including Jenkins, Travis CI, CircleCI, and GitHub Actions, automating the test process within the development pipeline.
• Diagnostic Tools for Better Debugging:BrowserStack provide comprehensive diagnostic capabilities, including detailed logarithm, screenshots, and video recordings of test session, aiding in the swift identification and resolution of issues.
• Testing on Real Devices:Beyond simulated environments, BrowserStack also supports testing on real devices and browsers on the cloud, volunteer more precise and real-world test outcomes.
• Customizable Test Execution:Users can tailor test executing to encounter specific needs through BrowserStack ’ s user interface or APIs, enabling adaptable and controlled examination tally.

Conclusion

This clause demonstrates how to select the dropdown options using Cypress. It also covers using theselect()bid to select the option by its value, index, and textbook. Additionally, you can too validate if the drop-down has selected the value which was think by assertion useshould().

Cypress is a reliable automation tool, but it is important to test the application on a for more accurate test results. By you can identify the bottleneck in the existent user experience and reclaim them in time before liberation. can occupy leverage of powerful cloud platform to run examination in a fast and more efficient way.

Useful Resources for Cypress

Understanding Cypress

Use Cases

Tool Comparisons

Related Guides