CODEWITHSUNDEEP
javascriptcypress
Nidhi
Nidhi

Reputation: 11

Cypress verify options in a select box

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>

Upvotes: 0

Views: 2285

Answers (3)

Ed Hollinghurst
Ed Hollinghurst

Reputation: 346

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])
);

Upvotes: 0

Ashley Whitmore
Ashley Whitmore

Reputation: 71

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));

Upvotes: 2

voiys
voiys

Reputation: 299

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

Upvotes: 0

Related Questions