coded-ui-tests - cypress.io : contains() not waiting for element

Question

我们正在使用 cypress 编写 UI 测试，这通常使用起来非常简单。但是我一次又一次地被一个乏味的等待问题绊倒。

场景非常简单。用户点击搜索按钮。然后他选择具有特定文本的元素之一。这是代码:

cy.get('#search-button').click();
cy.contains('Test item 1').click();
cy.get('#cheapest-offer-button').click();

第三次点击事件失败，因为已经 cy.contains('Test item 1')不等待页面和元素被呈现。从我在测试步骤中看到的情况来看，它只是在页面中间点击，这基本上没有任何作用。因此，所有后续步骤当然都失败了。

但是，如果我添加 wait()在这样的调用之间:

cy.get('#search-button').click();
cy.wait(2000);
cy.contains('Test item 1').click();
cy.get('#cheapest-offer-button').click();    

页面呈现正确， Test item 1出现，被点击，所有后续步骤都成功。

根据 best practices wait()调用不应该是必要的，因此应该避免。我在这里做错了什么？

Answer 1

tl;博士

为 contains 设置更大的超时时间:

cy.get('#search-button').click();
cy.contains('Test item 1', { timeout: 4000 }).click();
cy.get('#cheapest-offer-button').click();  

解释

与 Cypress 命令一样多， contains have a second argument它接受一个选项对象。您可以在 timeout 中传递命令应等待的毫秒数。关键是这样的:

.contains('Stuff', { timeout: 5000 }) // Timeout after 5 secs

这样命令的行为就像你添加了 wait在它之前，但如果命令成功，它不会像 wait 那样一直等待。做。

official Cypress docs on timeouts解释了这种技术:它是如何工作的，它应该如何完成以及它如何影响链式断言。

如果您无法点击该项目的原因是可见性，那么您可以尝试 .click({ force: true }) ，虽然这应该是最后的手段，因为它可能隐藏实际的错误。