web-dev-qa-db-fra.com

Comment sélectionner le nième élément dans l'élément select de cyprès

disons que j'ai le 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>

Sélectionner une option avec une valeur connue, telle que "Carrières" est aussi simple que:

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

Comment sélectionner la nième option dans ce champ, indépendamment de de sa valeur?

cypress
20
JD.

En utilisant eq

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

Dans le contexte particulier de sélection le nième option, cela peut être approprié:

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

Basé sur la solution de Miguel Rueda , mais en utilisant l'option prevSubject:

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)

Explication:

  • Utiliser children('option') et .eq(pos) permettent aux enfants de sélectionner un élément spécifique.
  • Appelez la méthode select avec la valeur de l'élément sélectionné.
4
Tomáš Ehrlich

J'ai eu le même problème et l'ai résolu en créant une commande personnalisée de cyprès. Pas aussi jolie que je voudrais, mais ça a fait le boulot.

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

alors j'ai utilisé dans le test en tant que tel

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

Le option +option _ une partie était le seul moyen que je pouvais trouver pour obtenir la liste complète des options dans une sélection et c'est actuellement le peu de code que j'essaye de travailler bien que cela fonctionne bien.

0
Miguel Rueda