how to validate comment-size text from the text inserted in the comment box using Cypress

Question

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

Alapan Das · Answer 1 · 2022-07-12T07:49:29.817

1

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'
  )
})

edited Jul 12 '22 at 07:49

answered Jul 12 '22 at 07:28

Alapan Das

17,144
3
29
52

thanks @Alapan Das this solution works but is their any better way of performing this validation – Anil Tiwari Jul 12 '22 at 07:40
I think this is a good way. I would suggest changing the name from `getElementText ` to `getElementTextLength`. Also if you are extracting and using the length just once, don't use cypress command. Rest all looks good. – Alapan Das Jul 12 '22 at 07:42
I missed one thing instead of `invoke('text')`, you can directly use the `should('have.text')` assertion as well. – Alapan Das Jul 12 '22 at 07:50

score 0 · Answer 2 · answered Jul 12 '22 at 08:26

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.

how to validate comment-size text from the text inserted in the comment box using Cypress

2 Answers2