CODEWITHSUNDEEP
cypress
mastercooler6
mastercooler6

Reputation: 467

How to check the text of the current state of a select component in Cypress?

I have a select box that originally has no value selected. The box shows as empty, and I would like a cypress test to check that there is no currently selected option, basically check that the select box displays no value.

How can I do that? I tried something like this:

cy.get('#filter-dropdown').should('have.text', '')

But this doesn't work because the text that it checks is a concatenation of all of the options together. Select Box is empty

This is the HTML:

<select data-v-1="" id="filter-dropdown" 
    <option data-v-11d8b3dc="" value="a23"> Add Test </option>
    <option data-v-11d8b3dc="" value="532"> Algo</option>
    <option data-v-11d8b3dc="" value="732"> Another</option>
</select>

Edit: this is the same question I have, but the answer does not resolve the issue, probably why the answer was not accepted... Stack Overflow

Upvotes: 0

Views: 481

Answers (1)

Alapan Das
Alapan Das

Reputation: 18626

You can apply an assertion like this:

cy.get('#filter-dropdown')
  .invoke('val')
  .then((val) => {
    expect(val).to.be.null
  })

Upvotes: 1

Related Questions