I have the below two different HTML elements:
<h1 class="heading-1 page-header-heading">Collectie</h1>
<span class="results">4655</span>
I am able to get them using:
cy.get('.heading-1').should('have.class', 'heading-1 page-header-heading')
cy.get('.results').should('have.class', 'results')
But I need to extract the values in between, that is Collectie and 4655
I tried :
cy.get('.heading-1').should('have.value', 'Collectie')
cy.get('.results').should('have.value', '4655')
But getting the below errors:
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 ''
How should I get those 2 values in Cypress and validate?
You have to use have.text as you are asserting inner text.
cy.get('.heading-1').should('have.text', 'Collectie')
cy.get('.results').should('have.text', '4655')
For case 1, in case you want to use both the class names you can do this:
cy.get('.heading-1.page-header-heading').should('have.text', 'Collectie')
In case you want to check greater or less than, you can do like this:
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 to
Besides using have.text, other thing you can do is using text() method within a promise combined with expect assertions. This way allows you to go further in your validation. Check bellow.
cy.get('.heading-1').then(el => {
let text = el.text()
cy.log(`the expected text is: ${text}`)
expect(text).equal('Collectie')
})