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

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

CodePudding user response：

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

CodePudding user response：

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.