web-dev-qa-db-fra.com

Comment utiliser les valeurs du DOM dans le test de cyprès?

si j'ai une page contenant:

  <span data-testid="credit-balance">
    10
  </span>

Dans Cypress, comment extraire la valeur d'une variable à utiliser dans les tests?

Quelque chose dans le sens de:

const creditBalance = cy.get('[data-testid="credit-balance"]').value();
cypress
4
JD.

L'affectation de valeurs de retour avec const, var et let est considérée comme un modèle anti lors de l'utilisation de Cypress. Cependant, lorsque vous vous trouvez à vouloir le faire, la meilleure pratique consiste à accomplir cela avec des fermetures.

it("uses closures to reference dom element", () => {

   cy.get("[data-testid=credit-balance]").then(($span) => {

   // $span is the object that the previous command yielded

   const creditBalance = $span.text();

   cy.log(creditBalance);

  })

});

Une autre façon de procéder serait d'utiliser des alias si vous souhaitez stocker et comparer des valeurs ou partager des valeurs entre des tests à l'aide de crochets.

it("aliasing the value from dom element", () => {

  cy.get("[data-testid=credit-balance]").as("creditBalance")

  cy.get("@creditBalance").should("contain", 10)

});

La façon dont vous abordez cela dépend vraiment de l'objectif de votre test. Je recommande de consulter d'autres exemples de la documentation: essayez Variables et alias , Meilleures pratiques , et FAQ =

9
Valerie Thoma

Si vous souhaitez récupérer la valeur et effectuer des assertions avec elle, une méthode rapide et efficace consisterait également à utiliser .invoke

it('Getting the value and performing an assertion', () =>{
   cy.get('selector').invoke('val').should('eq',10) 
})

Doc

2
Schan9