Sélectionnez les éléments en HTML via cypress.get()

Question

J'utilise cypress pour écrire quelques tests sur un site html ..

qui suit me sélectionne correctement un tr éléments individuels d'une table sur mon site HTML. Le contenu du site ressemble à ceci:

<tr data-recordid="theId"> 
    <td...><div ..>Text 1</div></td> 
    <td...><div ..>Text 2</div></td> 
    <td...><div ..>Text 3</div></td> 
</tr> 

L'extrait de script de test suivant me sélectionne correctement la partie <tr..> unique.

cy.get('tr[data-recordid="theId"]').contains('Text') 

Maintenant, je veux sélectionner le texte dans le <div>..</div> tags..The première chose que j'ai essayé d'enchaîner un seul appel pour la première balise <div>..</div> comme ceci:

cy.get('tr[data-recordid="theId"]').get('div').contains('Text') 

qui ne fonctionne pas comme je l'attendais. Le get() appelle un appel jQuery chaîné (Basé sur les Docs de cypress). Il semble donc que je me méprends sur le fonctionnement de JQuery.

Ce que je me attends comment je peux vérifier tous les éléments div comme celui-ci (ne fonctionne pas):

cy.get('tr[data-recordid="theId"]')..SomeHowMagic 
    .get('td[alt="xyz"]".get('div').contains('Text 1') 
    .get('td...').get('div').contains('Text 2') 
    .get('td...').get('div').contains('Text 3') 

Toute idée comment faire un pas en avant? Manquer n'importe quelle information juste faire un commentaire.

Answer 1

Clarifions quelques petites choses:

1) Si vous êtes désireux d'affirmer que les années div contiennent le texte donné, alors c'est la meilleure façon possible et le plus précis pour ce faire:

cy.get('tr[data-recordid="theId"]').should(($tr) => { 
    const $divs = $tr.find('div') // find all the divs 

    expect($divs.eq(0)).to.contain('Text 1') 
    expect($divs.eq(1)).to.contain('Text 2') 
    expect($divs.eq(2)).to.contain('Text 2') 
}) 

Je ne peux pas dire si les choses doivent être aussi spécifiques. Si vous voulez seulement faire en sorte que le $tr contient du texte, vous pouvez simplifiez jusqu'à être:

cy.get('tr[data-recordid="theId"]').should(($tr) => { 
    expect($tr).to.contain('Text 1') 
    expect($tr).to.contain('Text 2') 
    expect($tr).to.contain('Text 2') 
}) 

Pourquoi cette façon?

• L'utilisation d'une fonction .should() ne changera pas le sujet. Votre $tr continuera à être le sujet à l'avenir.
• Cypress attendra jusqu'à ce que toutes les affirmations dans le rappel .should() passent, et réessayez continuellement jusqu'à ce qu'elles le fassent. Cela vous garantit l'état de plusieurs éléments avant de continuer.

2) Toutefois, si vous vous souciez juste que Cypress trouve le texte et ne vous dérange pas le sujet que vous pourriez être changé faire:

cy.get('tr[data-recordid="theId"]').within(() => { 
    cy.contains('Text 1') // changes the subject to the <div> 
    cy.contains('Text 2') // changes the subject to the <div> 
    cy.contains('Text 3') // changes the subject to the <div> 
}) 

Ceci est différent du premier exemple parce qu'au lieu de une affirmation explicite que vous changez simplement le sujet en quelque élément que ce soit.L'assertion par défaut de Cypress sur cy.contains() est de réessayer afin que finalement le comportement soit le même, sauf que vous changez également le sujet.

Si même cela vous pourriez aussi compliqué aussi faire ceci:

cy.get('tr[data-recordid="theId"] div').contains('Text 1') 
cy.get('tr[data-recordid="theId"] div').contains('Text 2') 
cy.get('tr[data-recordid="theId"] div').contains('Text 3') 

Votre question initiale a également été en utilisant enchaînée cy.get() qui ne perce pas en sujets. Pour cela utiliser .find()

cy.get('a').get('span') // each cy.get() queries from the root 
cy.get('a').find('span') // the .find() queries from the <a> 

Une dernière remarque: vous avez proposé la solution ne fonctionne pas. cy.get() n'accepte pas de fonction de rappel, et si vous regardez votre journal de commandes, vous ne verrez pas ces 3 cy.contains invoqués. En d'autres termes, ils ne fonctionnent pas. C'est pourquoi son passage.

Answer 2

Ainsi, après plus expérimentant j'ai trouvé une solution:

cy.get('tr[data-recordid="TheId"]>td> div', function() { 
    cy.contains('Text 1').end() 
    cy.contains('Text 2').end() 
    cy.contains('Text 3').end() 
}) 

Si quelqu'un d'autre a une meilleure solution s'il vous plaît poster ici.