Selecting from Dropdowns with Cypress

Learn how to select from dropdowns with Cypress

The HTML “select” element allows visitors to a website to select one or multiple values from a list of potential options. 

If we’re testing that a form is working correctly, we want to make sure that we’re properly testing our select fields. 

Inside of our Cypress test file, we already have a describe block set up where beforeEach test, we’re going to first visit this select page. Then we’re going to also create an it statement where we’re going to say it “should select an option from the select dropdown”. 

How to Use the Select Command in Cypress

In order for us to select the select dropdown, we need a selector that we can use to target that select. 

In this instance, we can use the ID, where if we look at this particular element, we can see that it is “spices-select-single”. Back inside of our test file, we want to first select that “select” element. We’re going to use the cy.get command where we’re going to pass in that ID as our selector (“#spices-select-single”) so that we can get that “select”. 

Next, to actually select a value from our dropdown, we’re going to use the select command. Inside of that, we’re going to pass a value of the option we want to select.

If we look back at our select list, we can see that we have a few options where we want to find the value. We can select either chili powder, garlic, ginger, or paprika. Inside of my select, I’m going to tell it to select “ginger”. We can check if that’s actually working by running should(‘have.value’, ‘ginger’).

Now when I select my Cypress test, we can see that it opens up Chrome. After it runs, we can see that it gets our “select”, it selects “ginger”, and it asserts it to be true. 

How To Test Multi Select Options with Cypress

If we wanted to test the same thing with a multi select, we would start off by finding the ID, just like the single select. We would also write a similar get statement using Cypress. 

When using the select command, we want to actually pass in an array this time where we can still pass in “ginger”. But we want to also pass in a second value, such as “paprika”.

This time though, we can’t directly invoke should because Cypress won’t actually understand the value to look like this array. 

So, first we’re going to run the invoke command where we’re going to say we want the val, or value of that “select” element. And then we’re going to use our should command, or we’re going to say this time that we want it to deep.equal the same array value that we’re using to select those items.

Now just like before, we can run our test. We can see Chrome load and we could see that it goes through, and it selects both items inside of our multi select and it asserts it to be true. 

Summing It Up – Working with Dropdowns in Cypress

To review, once we were on our select page, we were able to first get our “select” elements by using the cy.get command. Once we had that “select” element, we were able to use the select command when it was a single “select” item. 

We were also able to assert that that was true by using should(‘have.value’, ‘value’) and then our value.

But when dealing with a multi select, we first needed to use the select command where we passed in array of the items that we wanted to select. We then used the invoke command to grab the value of that “select” element, and then used should(‘deep.equal’, [‘value’, ‘value’]) for that array of values.

Resources

• Git Repo – select.spec.js
• Applitools Kitchen – Dropdown Select Testing