2
votes

Comment cibler une entrée imbriquée qui n'a pas d'attribut id à l'aide de Cypress?

J'écris un test Cypress pour un projet React. Je dois pouvoir cibler un imbriqué dans un afin de pouvoir taper dans ce champ de saisie. Les n'ont aucun identifiant de classe.

Voici mon HTML.

  cy.contains('LABEL TEXT')
      .click()
      .type('test')

J'ai de nombreuses entrées sous la même forme avec le HTML exact indiqué ci-dessus. Ils ne diffèrent que par le texte dans le

  (c'est-à-dire LABEL TEXT).   La raison pour laquelle j'entoure le   dans une balise d'étiquette est que je veux que l'utilisateur puisse cibler l'entrée en cliquant n'importe où autour du texte de l'étiquette OU le contribution. L'ajout d'une classe aux entrées n'a pas de sens pour notre base de code juste pour le plaisir des tests Cypress. Je ne peux pas utiliser de pseudo sélecteurs tels que: first  cy.get ('input [type = "text"]: first')  car je ne veux pas que mes tests s'interrompent si j'ajoute des entrées supplémentaires au form. 
  J'ai essayé ce qui suit, mais il essaie de taper dans l'étiquette au lieu de l'entrée. 
     <label class="Input">
        <div class="label">LABEL TEXT</div>
        <input type="text">
    </label>
  Même si cela met l'accent sur le dans le lanceur de test Cypress, il essaie toujours de taper dans le 
  au lieu de l'entrée focalisée.   Comme je suis très nouveau dans Cypress et les assertions, je me laisse gratter ma tête. Je suis intéressé par une solution (si possible) qui n'implique pas l'ajout de classes à mes entrées juste pour le plaisir des tests Cypress. J'espère que ce n'est qu'une lacune dans mes connaissances en CSS, Cypress ou assertion. 
  Merci

reactjs html css cypress end-to-end

0 commentaires

3 Réponses :

1
votes

Oui, vous pouvez utiliser les sélecteurs CSS pour obtenir plus de précision!

Essayez:

cy.get('.Input:nth-child(2) > input') // selects all <input> tags that
                                      // are direct children of the
                                      // second "Input"-class element
                                      // in any containing element
.click()
.type('test')

Vous pouvez également utiliser des sélecteurs CSS pour sélectionner le n ème élément du DOM qui correspond à un sélecteur: p>

cy.get('.Input > input') // selects an <input> tag that is a direct
                         // descendant of a "Input" class
.click()
.type('test')

2 commentaires

Malheureusement, j'ai de nombreuses entrées sous la forme ALL avec la même structure HTML que celle illustrée dans mon exemple. Ils ne diffèrent que par le contenu de la

; le texte "TEXTE D'ÉTIQUETTE". Par conséquent, Cypress avec renvoie une erreur car il ne résultera pas en un seul élément ciblé dans le DOM. Je vais clarifier cela dans ma question. Merci.

Vous pouvez utiliser des sélecteurs CSS pour sélectionner le nième élément dans le DOM. :) Je l'ajouterai à ma réponse.

2
votes

Je pense que quelque chose comme

cy.getByText("label text").parent().within(() => {

   cy.get('input') // this yields the input
})

fonctionnera.

Je vous recommande de consulter https://github.com/testing-library/cypress-testing-library pour quelques sélecteurs soignés

0 commentaires

2
votes

Je viens de reproduire exactement le même scénario d'avoir plusieurs étiquettes identiques avec juste les textes de la div interne étant différents. La réponse de Miguel Carvajal était proche mais nécessitait quelques ajustements. Le code suivant a fonctionné correctement:

<label class="Input">
  <div class="label">LABEL TEXT1</div>
  <input type="text">
</label>
<label class="Input">
  <div class="label">LABEL TEXT2</div>
  <input type="text">
</label>

Testé sur le code HTML suivant:

cy.get("div[class='label']").contains("LABEL TEXT2").parent().within(() => {
   cy.get("input[type='text']").type("StackOverflowHelp")
})

0 commentaires