# 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')

# 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')