Cypress handles static dropdowns with the
help of select() command.
For a static dropdown, the tag name of the element should be <select> and
its child elements should have the tag name <option>.
Syntax
.select(value)
.select(values)
.select(value, options)
.select(values, options)Before
Before version 8.5.0,
the value argument could be the
value or the text content of the <option> to be selected
Consider the following snippet to understand the select command and its usage better.
<select>
<option value="js">Javascript</option>
<option value="ror">Ruby on rails</option>
<option value="nest">NestJS</option>
</select>Now to select a particular option,
we can either use its value or the text content
inside of <option> tag.
// Select the option with the text Ruby on Rails
cy.get('select').select('Ruby on rails').should('have.value', 'ror')
// yields <option value="ror">Ruby on rails</option>
//Select the option with the value "nest"
cy.get('select').select('nest').should('have.value', 'nest')
// yields <option value="nest">NestJS</option>After
With the updated Cypress 8.5.0, we can now select an option by index within the .select() command.
<select>
<option value="js">Javascript</option>
<option value="ror">Ruby on rails</option>
<option value="nest">NestJS</option>
</select>
// Select the option with index 0
cy.get('select').select(0).should('have.value', 'js')
// yields <option value="js">Javascript</option>If we try to give a negative index, a non-integer index, or an out-of-range index then Cypress will throw an error.
<select>
<option value="js">Javascript</option>
<option value="ror">Ruby on rails</option>
<option value="nest">NestJS</option>
</select>
cy.get('select').select(-1)
// cy.select()` was called with an invalid index: `-1`. Index must be a non-negative integer.
cy.get('select').select(2.5)
// cy.select()` was called with an invalid index: `1.5`. Index must be a non-negative integer.
cy.get('select').select(5)
// cy.select()` failed because it could not find a single `<option>` with value, index, or text matching: `5`To know more check out this PR.
