CODEWITHSUNDEEP
cypress
Maccurt
Maccurt

Reputation: 13817

Cypress: How do I get the text of the selected option in a select drop-down list?

I want to be able to get the text of the selected option and not the value. I would use the value but Angular is changing it and putting the value in a ng-reflect-ng-value attribute.

<option _ngcontent-c1="" value="5: 1" ng-reflect-ng-value="1">Miscellaenous</option>

This will work, but I want to check that it equals "Miscellaenous"

cy.get('#id-9999').find('.categoryList').should('have.value','Miscellaenous');

Upvotes: 29

Views: 34114

Answers (5)

Rob Baartwijk
Rob Baartwijk

Reputation: 41

I solved it this way. This will get the values and select the correct dropdown option including the rel value.

// select and test dropdown
      cy.get('#filterActiviteit').find('option').contains(defaultActivityDescription).then((response) => {

        cy.get('#filterActiviteit').select(response.text());
        cy.get('#filterActiviteit').invoke('attr', 'rel', defaultActivity).should('have.attr', 'rel', defaultActivity)
     cy.get('#filterVerslaglegging').select(filterVerslaglegging).invoke('val').should('eq', filterVerslaglegging)
      });

Upvotes: 0

cham
cham

Reputation: 10772

When using Cypress I found that :selected did not work, however :checked did work. So to modify one of the other answers here, this works (at least for me):

cy.get("#my-select-element option:checked")
   .should("have.value", 3);

Upvotes: 0

Mike C
Mike C

Reputation: 413

We've found that chaining find() off get() sometimes breaks our tests, so we use this other way:

cy.get("#my-select-element option:selected")
   .should("have.value", 3);

as opposed to:

cy.get("#my-select-element")
   .find("selected")
   .should("have.value", 3);

Upvotes: 5

Maccurt
Maccurt

Reputation: 13817

This worked for me:

cy.get('#id-9999').find('.categoryList').find(':selected').contains('Miscellaenous')

Upvotes: 30

yktoo
yktoo

Reputation: 2986

This is how it should be done:

cy.get('#id-9999').find('option:selected').should('have.text', 'Miscellaenous');

Among other things, it checks for the exact match and not for a substring (like in your solution).

Upvotes: 28

Related Questions