如何获得 Cypress.io 测试以等待 div 的呈现值

Question

我创建了一个简单的边际税计算器，并尝试使用 Cypress 测试其功能。计算器的最终结果是它在 div 中向用户显示结果金额，其中 class 为“结果”。

完整的计算器可以在这里查看：https://codepen.io/ldanneman/pen/wvdZpyV

我的 Cypress 测试 returns 断言错误：“4000 毫秒后重试超时：预期 '' 的值为 '18020.86'，但值为 ''”。

Cypress 似乎在将计算值插入 div 之前抓住了 div。渲染后如何测试新值？

HTML

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

从 JavaScript

插入到 DOM 的值

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

赛普拉斯测试

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

Answer 1

如果要断言内部文本，则必须使用 have.text 而不是 have.value。

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

此外，如果您想提供一些额外的超时，您可以添加 {timeout: 6000}。

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

如何获得 Cypress.io 测试以等待 div 的呈现值

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

javascript

testing

mocha.js

cypress

chai