等待元素没有类 - 然后其他元素在 Cypress 中消失

Question

我有一个流程，我将一些东西放入网上商店的购物车中，然后发生这种情况：

1. 我选择选项并单击“添加到购物车”。
2. 小延迟（如200ms）
3. 出现一个覆盖层，带有加载指示器（大约 1000 毫秒）
4. 覆盖层消失。
5. 小延迟（如200ms）
6. “添加到购物车”按钮达到加载状态（带有旋转器）
7. 加载状态（旋转器）消失
8. 产品被添加到购物车。
9. 转到购物车（确认产品已添加）。

我如何在 Cypress 中将其链接在一起？

尝试1

小小的延迟和事情的顺序把事情弄乱了。

cy.get('.add_to_cart_button').click(); // Step 1
cy.get('.overlay').should( 'not.be.visible' ); // Step 4
cy.get('.add_to_cart_button').should( 'not.have.class', 'loading' ); // Step 7
cy.visit( Cypress.env( 'baseUrl' ) + '/cart' ); // Step 9

但片状是不真实的！

有时它会进入购物车，显示一个空购物车（如果它检查覆盖层并且按钮的加载状态在小延迟内达到）。

尝试2

我什至尝试添加一些快速修复，添加cy.wait(3000)几个地方。但即便如此，它还是给了我这个错误：

wait 3000

!! TypeError
The following error originated from your application code, not from Cypress.

  > Cannot read property 'indexOf' of undefined

When Cypress detects uncaught errors originating from your application it will automatically fail the current test.

This behavior is configurable, and you can choose to turn this off by listening to the uncaught:exception event.Learn more

---

理想情况下，我应该检查覆盖层是否显示然后隐藏，以确保事物的顺序按照上述顺序发生。我只是担心它的显示时间如此之短，赛普拉斯会错过它的存在，从而导致更多的不稳定。

Answer 1

我认为您错过了一些步骤，因为就像在此网络研讨会中一样，cypress 可以看到在实现步骤 1 并且加载尚未开始时页面中缺少该元素，因此它给出了误报断言。我对这种情况的解决方案是向测试添加更多步骤，而不是使用固定cy.wait()- 我的步骤如下：

cy.get('.add_to_cart_button').click(); // Step 1
cy.get('.overlay').should( 'be.visible' ); // Needed to see that the process is starting
cy.get('.overlay').should( 'not.be.visible' ); // Needed to see that the process has ended
cy.get('.add_to_cart_button').should( 'have.class', 'loading' ); // Needed to see that the process is starting
cy.get('.add_to_cart_button').should( 'not.have.class', 'loading' ); // Needed to see that the process has ended
cy.visit( Cypress.env( 'baseUrl' ) + '/cart' ); // Step 9

我还建议在 cypress.json 文件中使用以下行：

"defaultCommandTimeout": 60000,
"requestTimeout": 60000,
"responseTimeout": 60000,