sagen, ich habe das 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>

Die Auswahl einer Option mit einem bekannten Wert wie „Karriere“ ist so einfach wie:

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

Wie wähle ich die n-te Option in diesem Feld aus, trotzdem von seinem Wert?

Aktualisieren

Wie von @dpstree in den Kommentaren darauf hingewiesen, beantwortet dies nicht die ursprüngliche Frage. Bitte sehen Sie sich neuere Antworten für eine vollständige Lösung an.

Original

Durch die Nutzung Gl

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

Im besonderen Kontext von auswählen der n optiondas könnte passen:

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

Basierend auf der Lösung von Miguel Rueda, aber unter Verwendung prevSubject Möglichkeit:

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

Verwendung:

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

Erläuterung:

• Verwenden children('option') Und .eq(pos) untergeordnete Elemente von select zu einem bestimmten Element durchlaufen.
• Forderung select Methode mit dem Wert des ausgewählten Elements.

Aktualisierung 2021

Sie können nun eine Option per auswählen index innerhalb der .select(index) Befehl:

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

Dies sollte jetzt mit der Veröffentlichung von Cypress einfach sein v8.5.0. Sehen Dokumentation für mehr.

Ich hatte das gleiche Problem und löste es, indem ich einen benutzerdefinierten Cypress-Befehl erstellte. Nein, so hübsch, wie ich es gerne hätte, aber es hat seinen Zweck erfüllt.

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

dann habe ich im Test als solches verwendet

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

Der option +option part war die einzige Möglichkeit, die ich finden konnte, um die vollständige Liste der Optionen in einer Auswahl zu erhalten, und es ist derzeit das Stück Code, das ich zu umgehen versuche, obwohl es gut funktioniert.

Da die Arbeitsantworten dann sowieso verwendet werden, ist eq oder etwas schickeres mit der Array-Indizierung überflüssig …

// 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();});

Nehmen wir an, Sie möchten die 2. Option auswählen, das können Sie einfach so tun

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

behalte das einfach im Hinterkopf cy.get() funktioniert wie bei jquery $().