我有一个流程，我把东西放在网上商店的购物车里，然后发生了这种情况:
- 我选择选项并点击“添加到购物车”。
- 小延迟(如 200 毫秒)
- 出现一个带有加载指示器的叠加层(持续约 1000 毫秒)
- 叠加层消失。
- 小延迟(如 200 毫秒)
- “添加到购物车”按钮进入加载状态(带有微调器)
- 加载状态(旋转器)消失
- 产品被添加到购物车。
- 转到购物车(确认产品已添加)。
我如何在 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
理想情况下，我应该检查叠加层是否显示和隐藏，以确保事物的顺序按照上述顺序发生。我只是担心它只显示了这么短的时间， Cypress 会错过它的存在，从而导致更加不稳定。
最佳答案
我认为您错过了一些步骤，因为 like in this webinar , 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,
关于javascript - 等待元素没有类 - 然后其他元素在 Cypress 中消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64878499/