Selected value

Option's value

<select>
  <option value="456">apples</option>
  <option value="457">oranges</option>
  <option value="458">bananas</option>
</select>

Let's select the option "oranges" and see what value it has. We can use cy.select It yields the jQuery for the original <select> element.

cy.get('select')
  .select('oranges')
  .should(($el) => {
    expect(Cypress.dom.isElement($el), 'yields DOM element').to
      .be.true
    expect(Cypress.dom.isJquery($el), 'wrapped in jQuery').to.be
      .true
    // note: the yielded element is the <select>
    expect($el.prop('nodeName'), 'element type').to.equal(
      'SELECT',
    )
    expect($el.val(), 'option value').to.equal('457')
  })
// shorter assertion using chaining
cy.get('select')
  .select('oranges')
  .invoke('val')
  .should('equal', '457')
// you can yield the value without retrying
cy.get('select')
  .select('oranges')
  .invoke('val')
  .then((value) => {
    expect(value).to.equal('457')
  })

You can select multiple options, yielding list of elements

<select multiple>
  <option value="456">apples</option>
  <option value="457">oranges</option>
  <option value="458">bananas</option>
</select>

cy.get('select')
  .select(['apples', 'bananas']) // yields <select> element
  .invoke('val') // calls $(<select>).val() which returns list of selected values
  .should('deep.equal', ['456', '458'])

Selecting option by index

Imagine we have a <select> element and want to select an option by index. Let's say we want to select the option at index 1 and confirm it has text "oranges" and value "457".

<select>
  <option value="456">apples</option>
  <option value="457">oranges</option>
  <option value="458">bananas</option>
</select>

// every child of <select> is an <option> element
cy.get('select')
  .children()
  .eq(1)
  .then(($option) => {
    expect(
      $option.prop('label'),
      'cannot compare 🍎 to 🍊',
    ).to.equal('oranges')

    const value = $option.attr('value')
    expect(value).to.equal('457')
    // if we want to select the oranges,
    // let's use the value we got
    cy.get('select').select(value)
  })
// let's confirm the selected option
cy.get('select').invoke('val').should('equal', '457')

Selecting the random option

Imagine we have a <select> element and want to select one of its options randomly.

<select>
  <option value="456">apples</option>
  <option value="457">oranges</option>
  <option value="458">bananas</option>
</select>

// get the number of options available
cy.get('select option')
  .its('length')
  // pick a random number between 0 and n-1
  // using the Lodash _.random function
  .then((n) => Cypress._.random(0, n - 1))
  // print the picked random number
  .should('be.a', 'number')
  // and then use the cy.select command
  // to select it from the element
  .then((index) => {
    cy.get('select').select(index)
  })
// confirm the selected value
cy.get('select')
  .invoke('val')
  .should('be.oneOf', ['456', '457', '458'])

Select the last option

Similarly, we can select the last option in two steps: first, find the value of the last <option> element, then select it in the <select> element.

<select>
  <option value="apl">apples</option>
  <option value="ora">oranges</option>
  <option value="ban">bananas</option>
</select>

cy.get('select option')
  .last()
  .invoke('val')
  .then((value) => {
    cy.get('select').select(value)
  })
// verify the last option was selected
cy.get('select').should('have.value', 'ban')

Verify options text

Let's say we want to verify all available options and confirm their text. The options below should include only "BMW", "Mercedes", and "Audi".

<select id="cars_list">
  <option value="-1">--Select Car--</option>
  <option value="B">BMW</option>
  <option value="M">Mercedes</option>
  <option value="A">Audi</option>
</select>

The test is verbose on purpose, converting and confirming everything step by step.

cy.get('#cars_list option')
  .then(($options) => {
    // get the text of each option
    return Cypress._.map(
      $options,
      ($option) => $option.innerText,
    )
  })
  .should('deep.equal', [
    '--Select Car--',
    'BMW',
    'Mercedes',
    'Audi',
  ])
  // let's skip the "--Select Car--" default option
  .then((list) =>
    Cypress._.filter(list, (s) => s !== '--Select Car--'),
  )
  // and check now
  .should('deep.equal', ['BMW', 'Mercedes', 'Audi'])
  // TIP: sort the array for consistency
  .invoke('sort')
  .should('deep.equal', ['Audi', 'BMW', 'Mercedes'])

Get selected option

You can get the currently selected option using the jQuery's :selected selector.

<select id="name">
  <option>Joe</option>
  <option>Mary</option>
  <option selected="selected">Peter</option>
</select>

cy.get('select#name option:selected').should(
  'have.text',
  'Peter',
)