赛普拉斯 - 等到元素更改状态答案

【问题标题】：Cypress- Wait till element changes status赛普拉斯 - 等到元素更改状态
【发布时间】：2021-07-19 17:06:23
【问题描述】：

我使用 Cypress 进行了一些 UI 测试，其中有一个 span 元素 (#done-status)，最初的值为 ''，然后是“In Progress”，然后是“Complete”。在它更改为“完成”后，我想将另一个元素 (#failures) 的值断言为 0。状态从空字符串更改为进行中和完成需要一些时间，具体取决于某些执行。我怎么能等到它改变它的状态。我尝试了随机等待，但由于元素已经在 DOM 上，它不会等待超时并且失败。像这样的：

it('should verify if the tests passed', () => {

        cy.get('#done-status')
            .should('have.value', '');

        cy.get('#done-status', { timeout: 10000 })
            .should('have.value', 'In Progress')

        cy.get('#done-status', { timeout: 300000 })
            .should('have.value', 'Complete');

        cy.get('.failures')
            .should('have.value', 0);
 });

有没有办法让它等到状态改变，最后验证失败的次数。

谢谢

【问题讨论】：

也许尝试等待（）？ .但这可能会使测试变得不稳定
我认为.should('have.text', ...) 可能会让你更幸运。你有一个很好的命令序列，所以不需要额外的库。
你所拥有的应该可以工作，当然假设你真的在寻找value=blahblah 而不是文本。如果您正在查找文本，请按照史蒂夫的建议使用 have.text。

标签： user-interface dom cypress

【解决方案1】：

您可以为此使用cypress-wait-until 插件。

1.安装：

npm i -D cypress-wait-until

2.安装好后，去cypress/support/commands.js写：

import 'cypress-wait-until';

3.在你的测试中写：

cy.waitUntil(() =>
  cy.get('#done-status').then($ele =>
    $ele[0].value == 'Complete',

    //timeouts
    {
      timeout: 20000, // waits up to 2000 ms
      interval: 500 // performs the check every 500 ms
    }
  )
)
cy.get('.failures').should('have.value', 0);

【讨论】：