How can we select all options from a normal drop-down list box and verify them using Cypress?

<select id="cars_list">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

//The below test can check only for one option, how can we verify the rest? 

describe("Select all values from drop down list", function() {
  it("Cypress test and verify all options", function() {
  cy.visit("Https://sometestingsite")  
  cy.get('#cars_list').then(function($select){
   $select.val('volvo')
   })
   cy.get('select').should('have.value', 'volvo')
   });
});

How can we select all options from a normal drop-down list box and verify them using Cypress?

<select id="cars_list">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

//The below test can check only for one option, how can we verify the rest? 

describe("Select all values from drop down list", function() {
  it("Cypress test and verify all options", function() {
  cy.visit("Https://sometestingsite.com")  
  cy.get('#cars_list').then(function($select){
   $select.val('volvo')
   })
   cy.get('select').should('have.value', 'volvo')
   });
});

• javascript
• cypress

• 1 Have you considered some kind of a loop? But is it really valuable to test that if you select a value that value is selected? – jonrsharpe Commented Dec 3, 2018 at 21:08
• Perhaps the bad code obscures the question - I think the test is to confirm the option list has expected values - can you confirm @soccerway? – user9161752 Commented Dec 3, 2018 at 21:39
• Yes I would like to confirm the option list has expected values. Some one down voted though, don't know why ? – soccerway Commented Dec 3, 2018 at 21:41
• Sorry for harsh comment about your code. Could you please show the DOM on the select element? I think you might use something like cy.get('#cars_list').its('options').then(options => ...). – user9161752 Commented Dec 3, 2018 at 21:45
• Ok, DOM is exactly as you already show. Maybe cy.get('#cars_list option').then(options => ...) suits? – user9161752 Commented Dec 3, 2018 at 21:50

1 Answer 1

I would suggest the test might look like this

cy.get('#cars_list option').then(options => {
  const actual = [...options].map(o => o.value)
  expect(actual).to.deep.eq(['volvo', 'saab', 'mercedes', 'audi'])
})

OR

cy.get('#cars_list').children('option').then(options => {
  const actual = [...options].map(o => o.value)
  expect(actual).to.deep.eq(['volvo', 'saab', 'mercedes', 'audi'])
})

OR

cy.get('#cars_list').find('option').then(options => {
  const actual = [...options].map(o => o.value)
  expect(actual).to.deep.eq(['volvo', 'saab', 'mercedes', 'audi'])
})

Selecting multiple child elements with cy.get(), then unwrapping them with [...options], mapping to their value with .map(o => o.value) and using a deep equal to compare arrays.

I have not tested this, so the code may need some tweaking.