Using Cypress select() When Select Contains Duplicate Values

Question

I need to select a value in a select. The select is a list of countries, displaying their names, with a two-letter country code as the value for each option. We surface the most selected countries to the top, while also leaving them in their alphabetical position. This means the items surfaced to the top are repeated twice.

<select>
  <option value="gb">UK</option>
  <option value="us">USA</option>
  <option value="af">Afganistan</option>
  <option value="ai">Aland Islands</option>
  ...
  <option value="us">USA</option>
  <option value="gb">UK</option>
  ...
</select>

I'm selecting a value like this:

cy.getSelect().select('gb')

However, this raises an error:

CypressError: Timed out retrying: cy.select() matched more than one option by value or text: gb

This makes sense as the value for 'UK' is gb and it appears at the top of the list and within the list in its alphabetical position.

How can I tell Cypress to ignore the duplicate value and select the first match?

Note that I cannot guarantee the index of any country and that I have lots of other tests that select different countries. I need a way to tell Cypress to select the first match.

jpvantuyl · Accepted Answer · 2019-07-25 17:22:09Z

9

You can try dropping down to jQuery/JavaScript to manually set the field:

cy.get('select').then($country => {$country.val("gb")})

The $country above should be a jQuery object wrapping the html that you selected.

See: https://docs.cypress.io/api/commands/then.html#Syntax

answered Jul 25, 2019 at 17:22

jpvantuyl

60411 silver badges22 bronze badges

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

1 Comment

cjbt Over a year ago

If you want to trigger the select, then you can go further with this: cy.get('select').then($country => {$country.val("gb")}) .parent() .trigger('change')

Porter Lyman · Accepted Answer · 2019-06-19 16:04:04Z

1

Here are a couple sources to look through: https://docs.cypress.io/api/commands/select.html#Text-Content & https://docs.cypress.io/api/commands/eq.html#Syntax

What I would recommend trying would be along the lines of this: cy.get('select').select('gb').eq(0) or cy.get('select').select('gb').first()

Either of these options will grab the first item if duplicates are found. Other things you can do with eq() are eq(-1) for the last item, or eq(2) for the third item (base zero) and so on.

Edit: use cy.get('select') instead of cy.getSelect();

edited Jun 19, 2019 at 16:04

answered Jun 18, 2019 at 22:08

Porter Lyman

3652 silver badges11 bronze badges

4 Comments

Porter Lyman Over a year ago

I'm unsure how this got downvoted. I tested it with a native select/option element and it worked how it should. Please be helpful. If the answer is incorrect, let me know and why and we'll sort it out. Thanks!

jpvantuyl Over a year ago

This does not work in cypress 3.4.0. I tried both .first() and .eq(1). Both get the error: cy.select() matched more than one option by value or text

Porter Lyman Over a year ago

That's unexpected. .first() and eq(0) can only return one element. How specific is your selector?

jpvantuyl Over a year ago

My cy.select() was working against a <select> with two <option> tags that had the same content and value. Our goal was to have a country in there twice. Once at the top because it's chosen most frequently and once sorted alphabetically. The code blows up before .first().

score 1 · Accepted Answer · 2022-12-01 22:11:36Z

1

Cypress has added some functionality to cy.select(), you can select by position now.

Using us value to test, since gb is the default selected value (it's at the top of the list)

cy.get('select')
  .find('[value="us"]')
  .eq(1)                                               // to pick the 2nd occurrence 
  .then($option => {
    const $select = $option.prevObject.prevObject      // back to <select>
    cy.wrap($select).select($option.index())           // select this option
  })

cy.get('select').should('have.value', 'us')            // confirm

edited Dec 1, 2022 at 22:11

answered Dec 1, 2022 at 22:00

user16791505

Collectives™ on Stack Overflow

Using Cypress select() When Select Contains Duplicate Values

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related