How to create a custom select command to select by option value in cypress

Question

For the following html,

             <select class="cell dropdown" data-test="Visibility-warn">
                <option value="">Select...</option>
                <!---->
                <option value="0"><!---->Good<!----></option>
                <!---->
                <option value="1"><!---->Moderate/Good<!----></option>
                <!---->
                <option value="2"><!---->Moderate<!----></option>
                <!---->
                <option value="3" selected=""><!---->Moderate/Poor<!----></option>
                <!---->
                <option value="4"><!---->Poor<!----></option>
                <!---->
            </select>

I have written the cypress code to select by value and not by text. As per docs, both select by text and select by value can be done in the same way.

        cy.get('[data-test="Visibility-warn"]')
                .should('be.enabled')
                .select('3')

which works fine.

But on the other hand, I am trying to create a custom command that does not work.

 cy.selectAndVerify('[data-test="Visibility-warn"]', weatherLimits.Visibility.warn, 'Moderate/Poor');
 //weatherLimits.Visibility.warn = gives the value 3

And in Commands:

Cypress.Commands.add('selectAndVerify', (selector, textToSelect, valueToVerify) => {
  cy.log(textToSelect)
  cy.get(selector)
    .should('be.enabled')
    .select(textToSelect)
  //.should('have.text', valueToVerify);
})

How can I possibly make the custom command work?

At which line of code that test is failing ? Is it this .select(textToSelect) ? — Alapan Das
– Alapan Das, Commented Sep 15, 2021 at 10:33

Alapan Das · Accepted Answer · 2021-09-15 13:06:45Z

1

What I think is happening is weatherLimits.Visibility.warn is passing a number that is 3 but cypress is expecting an string. so it should be .select(textToSelect + "")

Cypress.Commands.add(
  "selectAndVerify",
  (selector, textToSelect, valueToVerify) => {
    cy.log(textToSelect)
    cy.get(selector)
      .should("be.enabled")
      .select(textToSelect + "")
      .should("have.text", valueToVerify)
  }
)

edited Sep 15, 2021 at 13:06

answered Sep 15, 2021 at 10:37

Alapan Das

18.3k5 gold badges38 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dhamo Over a year ago

Ahh, I got it. But it works with .select(textToSelect+"") and not with .select("textToSelect") as this one will not convert to text from number but considers textToSelect as a value itself.

Alapan Das Over a year ago

Yes true. The idea is to change the number to string. I will update my answer.

Dhamo · Accepted Answer · 2021-09-15 11:19:19Z

0

Though @Alapan Das answer is already accepted, adding an answer that rightly does the "verify" part.

Cypress.Commands.add('selectAndVerify', (selector, textToSelect, valueToVerify) => {
  cy.get(selector)
    .should('be.enabled')
    .select(textToSelect + "")
  cy.get(selector).find('option:selected').should('have.text', valueToVerify)
})

and in test

cy.selectAndVerify('[data-test="Visibility-warn"]', weatherLimits.Visibility.warn, 'Moderate/Poor');

answered Sep 15, 2021 at 11:19

Dhamo

1,2223 gold badges22 silver badges50 bronze badges

Collectives™ on Stack Overflow

How to create a custom select command to select by option value in cypress

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related