How to get Cypress.io test to wait for rendered value of div-CodePudding

I have created a simple marginal tax calculator and am trying to test its functionality with Cypress. The end result of the calculator is that it displays the result amount in a div with the class of "result" to the user.

the full calculator can be viewed here: https://codepen.io/ldanneman/pen/wvdZpyV

My Cypress test returns an assertion error: "Timed out retrying after 4000ms: expected '<div.result>' to have value '18020.86', but the value was '' ".

Cypress seems to be grabbing the div before the calculated value is inserted into the div. How can i test the new value after it is rendered?

HTML

<div class="body">
  <div class="calculator">
  <div>
    <input class="input"/>
    <button class="submit">Calculate</button>
  </div>
  <div class="result"></div>
  </div>
</div>

Value inserted to DOM from JavaScript

 document.querySelector(".result").innerText = taxes

Cypress Test

describe('Marginal Calculator', () => {
    it('User Calculates Taxes', () => {
      cy.visit('http://127.0.0.1:5500/index.html')
      cy.get('.input').type(100000)
      cy.get('.submit').click()
      cy.get('.result').should('have.value', 18020.86)
    })
  })

CodePudding user response：

Instead of have.value you have to use have.text if you are asserting inner text.

cy.get('.result').should('have.text', '18020.86')

Also if you want to give some additional timeouts, you can add {timeout: 6000}.

cy.get('.result', { timeout: 6000 }).should('have.text', '18020.86')