赛普拉斯异步问题答案

【问题标题】：Cypress async issue赛普拉斯异步问题
【发布时间】：2019-10-25 21:36:26
【问题描述】：

我在测试中遇到一种情况，我单击一个按钮，它在我的 reactJS 端进行了 apollo graphQL 调用。

          createProductCategory({
            variables: {
              restaurantID: props.restaurant.id,
              name: name
            }
          });

这就是它在 ReactJS 端的样子。这个 createProductCategory 方法返回一个 promise 我们等待并继续执行其余代码。

当我手动单击按钮时，这非常有效。我可以看到在网络选项卡中进行了 graphQL 调用，它工作得非常好。但是，如果我尝试让 cypress 点击按钮，我可以看到按钮被点击，但 graphQL 调用永远不会被调用。我只是不明白为什么它不起作用以及我做错了什么。

有人可以帮我解决这个问题吗？我尝试在任何地方放置等待语句，但它只是不“等待”reactJS 端的承诺得到解决。

      cy.contains("Save")
        .click()
        .then(() => {
          cy.wait(2000)
        });

     cy.wait(2000)

提前感谢您的帮助。

【问题讨论】：

你能比较一下手动和cypress在chrome开发者工具中点击按钮的xhr请求吗？从您的陈述来看，当您使用 cypress 时似乎没有 xhr 请求？
问题是cypress点击时没有发出XHR请求
您使用的是哪个 cypress 版本？如果不是 3.5.0，并且按钮监听 pointerdown 或类似的事件，那么它不会被 cy.click 触发。
您可以有一个处理 onClick 的包装器 ()，而您的按钮根本不执行任何操作。退后一步，确保执行 graphQL 调用的 onClick 处理程序是否被触发。为此，只需将 console.log 放在 graphQL 行之前。
等待并不重要，因为之后您不会测试任何东西。您需要确保您的 contains() 正在检索正确的按钮，然后确保侦听器侦听单击（没有 HammerJS 或其他有趣的事件）

标签： reactjs cypress

【解决方案1】：

根据您的描述，您应该有围绕按钮单击并等待 graphql 调用完成的代码

cy.server()
cy.route('/graphql').as('graphql')
cy.get('buton').contains('abc').click()
cy.wait('@graphql')

更多信息：alias waits

【讨论】：