Ability to select by index within `.select()` command

[dhoko]

#4239

• Operating System: GNU/Linux Ubuntu 17.04
• Cypress Version: "_from": "cypress@^1.0.1", "_id": "cypress@1.0.2",
• Browser Version: Google Chrome Version 61.0.3163.100 (Official Build) (64-bit)

Current behavior:

Desired behavior:

I can select this option, via an index inside the argument option.

How to reproduce:

<select id="country">
   <option label="United States" value="object:44" selected="selected">United States</option>
   <option label="United Kingdom" value="object:45">United Kingdom</option>
   <option label="Switzerland" value="object:46">Switzerland</option>
   <option label="France" value="object:47">France</option>
   <option label="Germany" value="object:48">Germany</option>
   <option label="Canada" value="object:49">Canada</option>
   <option disabled="" label="------------------" value="object:50">------------------</option>
   <option label="Estonia" value="object:117">Estonia</option>
   <option label="Ethiopia" value="object:118">Ethiopia</option>
   <option label="Falkland Islands (Malvinas)" value="object:119">Falkland Islands (Malvinas)</option>
   <option label="Faroe Islands" value="object:120">Faroe Islands</option>
   <option label="Fiji" value="object:121">Fiji</option>
   <option label="Finland" value="object:122">Finland</option>
   <option label="France" value="object:123">France</option>
   <option label="French Guiana" value="object:124">French Guiana</option>
   <option label="French Polynesia" value="object:125">French Polynesia</option>
   <option label="French Southern Territories" value="object:126">French Southern Territories</option>
</select>

Test code:

cy.get('#country').select('France');

Additional Info (images, stack traces, etc)

I tried to create the patch myself (it seems the error is here ->

cypress/packages/driver/src/cy/commands/actions/select.coffee

Line 50 in 0e0f75c

if (num = options.$el.length) and num > 1

) but I cannot find the file inside node_modules :/

PS: Cypress is awesome ❤️

[avanslaars]

Your options may have duplicate labels, but they have different values so you can use the value, rather than the label text in select() and you should get your expected option.

You could select the first instance of "France" with cy.get('#country').select('object:47') or the second with cy.get('#country').select('object:123').

Using the value here to be more specific about which match you want makes your test deterministic.

Hope this helps!

[dhoko]

Of course but the list is generated via Angular. The value might change.

[avanslaars]

That does present a bit of a problem. Here is a workaround you can use for now:

cy.get('#country')
    .find('option[label="France"]') // this will return both elements
    .then($els => $els.get(1).setAttribute('selected', "selected")) // set the selected attribute on the desired option
    .parent() // change the subject back to the select
    .trigger('change') // trigger change event so event handlers will pick it up

I did a quick test where the drop down selection lead to another UI change with a handler for the select's change event and this did the trick. You may also wish to remove the selected attribute beforehand just so your DOM represents a more realistic scenario before the change even it triggered (though it made no difference in my sample code).

I did that with:

cy.get('#country')
    .find('option[selected="selected"]')
    .then($el => $el.get(0).removeAttribute('selected'))

So everything together looks like:

// remove current selection
cy.get('#country')
    .find('option[selected="selected"]')
    .then($el => $el.get(0).removeAttribute('selected'))

// Manually set desired selection
cy.get('#country')
    .find('option[label="France"]')
    .then($els => $els.get(1).setAttribute('selected', "selected"))
    .parent()
    .trigger('change')

[brian-mann]

Haven't tried this but you could probably clean this up by doing...

// Manually set desired selection
cy.get('#country').then(($select) => {
  const opt = $select.find('option[label="France"]')
  $select.val(opt.attr('value'))
  return $select
}).trigger('change')

[jennifer-shehane]

Hey @dhoko, did the suggestions above solve your issue?

[dhoko]

I didn't debug my tests yet, I will try monday. I think it should solve it yes. I can create a custom command from the snippet.

[dhoko]

I tried this one -> #757 (comment) it worked. Thx.

[benvds]

Even though this isssue is closed. I still think a select by index is required. Double list entries (both in value as label) is quite common as for long lists people tend to add the most used options as preferred option on top as well (same as in the example).

[johndatserakis]

@brian-mann your answer is an absolute lifesaver. I'm using Vue with Cypress and it's been nearly impossible to figure out how to use my selects - it's due to my selects having objects as their values in the code. Works great for everything but testing - until your answer.

Sorta wish Cypress just let us tell it to act like a normal user and "click here" and then "click here". It doesn't let you do that on selects, and it makes things pretty tough.

Thanks for your answer.

[jennifer-shehane]

Will reopen as feature to add 'select by index' to .select() command.