How to select nth item inside select element in cypress

Question

say I have the HTML:

<select name="subject" data-testid="contact-us-subject-field">
  <option value="What is this regarding?">What is this regarding?</option>
  <option value="Partnerships">Partnerships</option>
  <option value="Careers">Careers</option>
  <option value="Press">Press</option>
  <option value="Other">Other</option>
</select>

Selecting an option with a known value, such as 'Careers' is as easy as:

cy.get('[data-testid="contact-us-subject-field"]').select('Careers');

How do I select the nth option in this field, regardless of its value?

Arnaud P · Accepted Answer · 2020-08-27 08:15:33Z

147

Update

As pointed out by @dpstree in the comments, this doesn't answer the original question. Please see more recent answers for a complete solution.

Original

By using eq

cy.get('tbody>tr').eq(0)    // Yield first 'tr' in 'tbody'
cy.get('ul>li').eq(4)       // Yield fifth 'li' in 'ul'

edited Aug 27, 2020 at 8:15

answered Jun 8, 2018 at 14:25

Arnaud P

12.7k8 gold badges59 silver badges71 bronze badges

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

7 Comments

nitzel Over a year ago

Is eq an abbreviation? What does it mean?

Arnaud P Over a year ago

As mentioned by the documentation page I linked, the term comes from jQuery. So you may be interested in this post

dpsthree Over a year ago

This doesn't select anything. It does demonstrate the .eq() syntax that is needed as part of the solution, but misses the important context of needing to manipulate the select. See Robert or Miguel's solution below.

Arnaud P Over a year ago

My word, you're right, I must have read the question too quickly. Will edit to point this out.

Rantiev Over a year ago

Just remember that if you save this selection to a variable, it won't work. const mySelection = cy.get('tbody>tr') ; mySelection.eq(0); mySelection.eq(1) --> the will be no second element. You need to call a selection function again

|

steinybot · Accepted Answer · 2024-04-16 22:19:33Z

57

In the particular context of selecting the nth option, this may be appropriate:

cy.get('select[name=subject] > option')
  .eq(3)
  .then(element => cy.get('select[name=subject]').select(element.val()))

edited Apr 16, 2024 at 22:19

steinybot

6,2437 gold badges44 silver badges60 bronze badges

answered Aug 7, 2018 at 4:26

Robert K. Bell

10.5k2 gold badges40 silver badges52 bronze badges

1 Comment

TimNode Over a year ago

Exactly what I was looking for, please note that soon there might be an easier solution github.com/cypress-io/cypress/issues/757. Small suggestion for @Robert to use cy.wrap() + parents() to not duplicate the selector: .eq(2).then(($el) => cy.wrap($el).parent('select').select($el.val())).

Tom Ehrlich · Accepted Answer · 2019-04-08 15:39:36Z

28

Based on solution from Miguel Rueda, but using prevSubject option:

Cypress.Commands.add(
  'selectNth',
  { prevSubject: 'element' },
  (subject, pos) => {
    cy.wrap(subject)
      .children('option')
      .eq(pos)
      .then(e => {
        cy.wrap(subject).select(e.val())
      })
  }
)

Usage:

cy.get('[name=assignedTo]').selectNth(2)

Explanation:

Using children('option') and .eq(pos) traverse children of select to specific element.
Call select method with value of selected element.

answered Apr 8, 2019 at 15:39

Tom Ehrlich

6,6513 gold badges27 silver badges31 bronze badges

Comments

t_dom93 · Accepted Answer · 2023-02-20 13:32:58Z

24

You can now select an option by index within the .select(index) command:

cy.get('select').select(0)        // selects by index (yields first option) ie "What is this regarding?"
cy.get('select').select([0, 1])   // select an array of indexes

This should be easy now with the release of cypress v8.5.0. See documentation for more.

edited Feb 20, 2023 at 13:32

answered Sep 28, 2021 at 12:03

t_dom93

11.6k3 gold badges56 silver badges40 bronze badges

1 Comment

Darksymphony Over a year ago

And what if I have a dynamic selectbox and want to select last option and don't know its name or value?

Miguel Rueda · Accepted Answer · 2018-10-03 13:48:35Z

11

I had the same problem and solved it by creating a custom cypress command. No as pretty as I would like, but it did the job.

Cypress.Commands.add("selectNth", (select, pos) => {
  cy.get(`${select} option +option`)
    .eq(pos)
    .then( e => {
       cy.get(select)
         .select(e.val())
    })
})

then I used in the test as such

    cy.viewport(375, 667)
      .selectNth("customSelector", 3)

The option +option part was the only way I could find to get the full list of options inside a select and it's currently the bit of code i'm trying to work arround although it works fine.

answered Oct 3, 2018 at 13:48

Miguel Rueda

1191 silver badge2 bronze badges

Comments

Joelle Boulet · Accepted Answer · 2020-11-03 20:05:28Z

8

since the working answers are using then anyways, eq or something fancier is redundant with array indexing...

// to click on the 1st button
cy.get('button').then($elements => {cy.wrap($elements[0]).click();});
// to click on the 4th tr
cy.get('tr').then($elements => {cy.wrap($elements[3]).click();}); 
// to click on the last div:
cy.get('div').then($elements => {cy.wrap($elements[$elements.length - 1]).click();});

answered Nov 3, 2020 at 20:05

Joelle Boulet

3904 silver badges12 bronze badges

1 Comment

Jason G Over a year ago

finally, one that works. in my case: cy.wrap($recordings[0]).findByRole('button', { name: 'Remove' }).click({ force: true })

Ajay Rawat · Accepted Answer · 2020-07-09 07:57:31Z

3

Let's assume you wanna select 2nd option, you can do that simply by this

cy.get("select option").eq(2)

just keep in mind that cy.get() works like jquery's $().

answered Jul 9, 2020 at 7:57

Ajay Rawat

3073 silver badges11 bronze badges

1 Comment

Kyon Perez Over a year ago

Index number starts on 0. If you want the 2nd element, then you do this: cy.get("select option").eq(1)

Jeroen · Accepted Answer · 2023-01-18 22:19:42Z

3

Find dropdown using ID or Class -

cy.get('#ID').contains("dowpdown placeholder or name").click();

After Click dropdown result dropdown element will popup, find that result ID or Class using inspect element, Then -

cy.get('#result-ID').children().first().click();

This will click on the first element of the dropdown.

edited Jan 18, 2023 at 22:19

Jeroen

7562 gold badges7 silver badges21 bronze badges

answered Apr 19, 2021 at 9:12

Pradnyesh patil

3313 silver badges3 bronze badges

1 Comment

misolo Over a year ago

How can I get the second instead of .first()? Thanks!

Tim Van Laer · Accepted Answer · 2022-11-18 13:30:22Z

1

You can also rely on the :nth-child css pseudo-class:

cy.get("[data-testid="contact-us-subject-field"] option:nth-child(2)").click();

It's probably less flexible than using the cypress constructs but it is nice and clean. (And doesn't make me crawl through the cypress docs)

answered Nov 18, 2022 at 13:30

Tim Van Laer

2,57427 silver badges32 bronze badges

Comments

iknow · Accepted Answer · 2020-08-20 14:35:13Z

0

Capture all the elements in the drop-down using a selector. Get the length. Use math.random() to randomly get a number. Select the option at the index.

cy.get("ul > li").as("options")
cy
.get("@options")
.its('length')
.then(len => Math.floor(Math.random() * Math.floor(len)))
.then((index) => {
cy.get("@options").eq(index).click()
})

edited Aug 20, 2020 at 14:35

iknow

10.3k15 gold badges47 silver badges81 bronze badges

answered Aug 20, 2020 at 12:26

GHULAM NABI

4615 silver badges16 bronze badges

Comments

Eggcellentos · Accepted Answer · 2023-01-19 18:27:57Z

0

if you are looking a value to select then you cannot use .eq(), you need to use .contains() .eq() is only for numbers(indexes)

Example: cy.get(dropdownOptions).contains(some_value).click()

edited Jan 19, 2023 at 18:27

Eggcellentos

1,7961 gold badge23 silver badges29 bronze badges

answered Jan 18, 2023 at 13:51

Milan Maksimovic

11 bronze badge

Comments

ismail ouzzine · Accepted Answer · 2023-05-26 16:23:49Z

0

If you look for the nth option in the select dropdown, for example, in case the data is dynamically changed and you want to select the nth one, whatever the content may be, you can use this syntax:

App

<select name="mySelect">
  <option value="option_1">option 1</option>
  <option value="option_2">option 2</option>
  ...
  <option value="option_n">option n</option>
  ...
</select>

Spec

cy.get("[name='mySelect'] option:nth-of-type(n)")
.invoke("text")
.then((text) => {
  cy.get("[name='mySelect']").select(text);
});

And note that n is the order of the option that you want to select. The count start from 1.

answered May 26, 2023 at 16:23

ismail ouzzine

331 silver badge7 bronze badges

Collectives™ on Stack Overflow

How to select nth item inside select element in cypress

12 Answers 12

Update

Original

7 Comments

1 Comment

Usage:

Explanation:

Comments

1 Comment

Comments

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

12 Answers 12

Update

Original

7 Comments

1 Comment

Usage:

Explanation:

Comments

1 Comment

Comments

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related