web-dev-qa-db-fra.com

Comment vérifiez-vous l'égalité du texte interne d'un élément à l'aide de cyprès?

J'ai un div qui a un autre div à l'intérieur et je veux vérifier l'égalité du texte intérieur du div. J'ai compris comment le faire en utilisant la fonction invoke ('text'), mais je me demande si c'est la meilleure façon. Ma question est donc la suivante: comment vérifier l'égalité du texte interne d'un élément à l'aide de cyprès?

it('the channel name should contain be Anakin Skywaler', () => {
    //This works but can we be more specific with our selector
    cy.get("[data-test-id='Skywalker,Anakin']").should('contain', 'Skywalker,Anakin');
})

it('the channel name should equal Skywalker,Anakin', () => {

    cy.get("[data-test-id='Skywalker,Anakin']").find('.channel-name').invoke('text').then((text) => {
        expect(text.trim()).equal('Skywalker,Anakin')
    });
});

Veuillez ignorer la référence Star War!

cypress
8
Maccurt

Je pense que vous pouvez simplifier cela.

En supposant que votre code HTML ressemble à ceci:

<div data-test-id="Skywalker,Anakin">
  <div class=".channel-name">Skywalker,Anakin</div>
</div>

Vous pouvez écrire votre assertion comme ceci:

cy.get('[data-test-id="Skywalker,Anakin"]')
      .should('have.text', 'Skywalker,Anakin');

Cela s'est passé pour moi et si j'ai modifié le code HTML en Skywalker, Anakin 1 cela a échoué comme vous vous en doutez. Cypress utilise le fichier have.text pour regarder ce qui est rendu afin de ne pas se soucier de tout balisage et juste voir quel est le résultat.

Cela n'a pas fonctionné pour le rognage. vous devez ajouter un rappel pour effectuer le découpage.

cy.get('[data-test-id="Skywalker,Anakin"]')
  .should(($div) => {
    expect($div.text().trim()).equal('Skywalker,Anakin');
  });
11
TDDdev

Vous pouvez vérifier si une chaîne est contenue quelque part à l'intérieur du div:

cy.get("[data-test-id='Skywalker,Anakin']").contains('Skywalker,Anakin');

Ou, si vous devez vous assurer que le div contient niquement le texte spécifié et rien d'autre, vous pouvez ajouter cette assertion supplémentaire:

cy.get("[data-test-id='Skywalker,Anakin']").contains('Skywalker,Anakin').should((elem) => {
    expect(elem.text()).to.equal('Skywalker,Anakin');
});

Explication:

// Get the data
cy.get("[data-test-id='Skywalker,Anakin']")

        // Get the child or children of the previous command that
        // contain the text - this command fails if no child
        // element is found containing the given text
        .contains('Skywalker,Anakin');

// These two lines are explained above
cy.get("[data-test-id='Skywalker,Anakin']")
        .contains('Skywalker,Anakin')

        // Like a .then(), except the contents are retried until
        // all contained assertions are successful or until the
        // command times out
        .should((elem) => {

            // Expect the element's text to exactly equal the
            // string, not just contain it
            expect(elem.text()).to.equal('Skywalker,Anakin');
        });
3
Joshua Wade

Je pense que c'est actuellement la meilleure option, car il ne vérifie pas la présence de contenu. J'espérais un morceau de code plus court pour ce faire.

it('the channel name should equal Skywalker,Anakin', () => {

    cy.get("[data-test-id='Skywalker,Anakin']").find('.channel-name').invoke('text').then((text) => {
        expect(text.trim()).equal('Skywalker,Anakin')
    });
});
0
Maccurt

Voici comment vérifier la correspondance exacte ou partielle d'une chaîne dans un élément:

//matches exact text of result string
cy.get("[data-test-id='Skywalker,Anakin']").should('have.text', 'Skywalker,Anakin');

//matches partial text of result string
cy.get("[data-test-id='Skywalker,Anakin']")
.text()
.then(value => {
        cy.log("Text value is :", value);
        expect(value).to.include('Anakin');
});

où text() est défini dans le fichier command.js comme suit:

Cypress.Commands.add("text", { prevSubject: true }, (subject, options) => {
  return subject.text();
});
0
kushal.8