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 describeblock set up where beforeEach test, we’re going to first visitthis select page. Then we’re going to also create an itstatement 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 selectthat “select” element. We’re going to use the cy.getcommand 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 selectcommand. 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 getstatement using Cypress.
When using the selectcommand, 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 invokecommand where we’re going to say we want the val,or value of that “select” element. And then we’re going to use our shouldcommand, or we’re going to say this time that we want it to deep.equalthe 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.getcommand. Once we had that “select” element, we were able to use the selectcommand 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 selectcommand where we passed in array of the items that we wanted to select. We then used the invokecommand to grab the value of that “select” element, and then used should(‘deep.equal’, [‘value’, ‘value’])for that array of values.