0
174
Viewshow to validate comment-size text from the text inserted in the comment box using Cypress
hi folks as I am new to this automation/cypress world i need your help to handle this problem statement
i have a comment box something similar to this i am able to put text inside this text with
cy.get('#comments').type('TEST')
but there is a element similar to this which shows character count as
*4/4000 Characters Used
instead of highlighted one
what i wanted ? i wanted to validate the text with the on run time
what i have done so far
i have created a custom command which return the text out of element by passing its locator
Cypress.Commands.add('getElementText', (locator) => {
cy.get(locator).invoke('text').then((text)=>{
return text.length
})
})
what i needed
cy.get('#commentSize').invoke('text').should('eq','*'+cy.getElementText('#comments').then((text)=>{return text})+'/4000 Characters Used')
so that the final validation should appear like this
cy.get('#commentSize').invoke('text').should('eq','*'+ '4' +'/4000 Characters Used')
but i am getting assert error expected 4 to equal * [object Object]NaN
2 answers
Answer question0
You have to wrap and then return your text like this:
Cypress.Commands.add('getElementText', (locator) => {
cy.get(locator)
.invoke('text')
.then((text) => {
return cy.wrap(text.length)
})
})
Then in your test you have to do this:
cy.getElementText('#comments').then((len) => {
cy.get('#commentSize')
.invoke('text')
.should('eq', '*' + len + '/4000 Characters Used')
})
You can also directly assert using the should('have.text')like this:
cy.getElementText('#comments').then((len) => {
cy.get('#commentSize').should(
'have.text',
'*' + len + '/4000 Characters Used'
)
})
0
Here's another variation of your test, using the element passed down after .type().
cy.get('#comments').type('TEST')
.then($comments => {
cy.get('#comments-size')
.should('have.text', `*${$comments.text().length}/4000 Characters Used`)
})
Since you are using .type() I am surprised to see .text() work.
Normally you use .type() on an <input> which requires .val() to fetch the typed-in text.