Cypress verify options in a select box

Question

I have a select tag with no value attribute but only text. How can I validate the option list shown in the select box (text in this case).

<select id="market-select" onchange="updatePageDataForMarket()">
  <option>Dallas-Fort Worth</option>
  <option>El Paso</option>
  <option>San Antonio</option>
</select>

Answer 1

You can try to manually trigger the input event/change event since those are the only ones it supports

Answer 2

I am assuming you mean to validate each of the option text in the select. If so, you could do this:

const selectListOptions = ['Dallas-Fort Worth', 'El Paso', 'San Antonio'];
selectListOptions.forEach(item => cy.contains('#market-select', item));

Answer 3

If you want to ensure the items are in the correct order and have an exact match on the text string you could do:

const selectListOptions = ['Dallas-Fort Worth', 'El Paso', 'San Antonio'];
cy.get('#market-select option').each(($el, index) =>
  cy.wrap($el).should('have.text', selectListOptions[index])
);