Tengo los siguientes dos elementos HTML diferentes:
<h1 class="heading-1 page-header-heading">Collectie</h1> <span class="results">4655</span>Puedo obtenerlos usando:
cy.get('.heading-1').should('have.class', 'heading-1 page-header-heading') cy.get('.results').should('have.class', 'results') Pero necesito extraer los valores intermedios, es decir Collectie y 4655
I tried : cy.get('.heading-1').should('have.value', 'Collectie') cy.get('.results').should('have.value', '4655')Pero obteniendo los siguientes errores:
expected '<h1.heading-1.page-header-heading>' to have value 'Collectie', but the value was '' expected '<span.results>' to have value '4655', but the value was ''¿Cómo debo obtener esos 2 valores en Cypress y validarlos?
Tienes que usar have.text ya que estás afirmando el texto interno.
cy.get('.heading-1').should('have.text', 'Collectie') cy.get('.results').should('have.text', '4655')Para el caso 1, en caso de que quiera usar ambos nombres de clase, puede hacer esto:
cy.get('.heading-1.page-header-heading').should('have.text', 'Collectie')En caso de que desee verificar mayor o menor que, puede hacer lo siguiente:
cy.get('.results') .invoke('text') .then((text) => +text) .should('be.gt', 4000) // greater than cy.get('.results') .invoke('text') .then((text) => +text) .should('be.gte', 4000) // greater than equal to cy.get('.results') .invoke('text') .then((text) => +text) .should('be.lt', 9000) // less than cy.get('.results') .invoke('text') .then((text) => +text) .should('be.lte', 9000) // less than equal toAdemás de usar have.text, otra cosa que puede hacer es usar el método text() dentro de una promesa combinada con aserciones de expectativa. De esta manera le permite ir más allá en su validación. Verifique a continuación.
cy.get('.heading-1').then(el => { let text = el.text() cy.log(`the expected text is: ${text}`) expect(text).equal('Collectie') })