如何让 Cypress.io 测试等待 div 的渲染值答案

【问题标题】：How to get Cypress.io test to wait for rendered value of div如何让 Cypress.io 测试等待 div 的渲染值
【发布时间】：2021-09-09 08:47:14
【问题描述】：

我创建了一个简单的边际税计算器，并尝试使用赛普拉斯测试其功能。计算器的最终结果是它以“结果”类的 div 向用户显示结果数量。

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

我的赛普拉斯测试返回一个断言错误：“4000 毫秒后重试超时：预期 '

' 的值为 '18020.86'，但值为 ''”。

赛普拉斯似乎在将计算值插入 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)
    })
  })

【问题讨论】：

标签： javascript testing mocha.js cypress chai

【解决方案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')

【讨论】：