赛普拉斯XHR存根忽略了使用fetch

时间:2017-11-28 15:11:53

标签: testing integration-testing end-to-end cypress

重要信息

这里最初的问题不是直接关于赛普拉斯缺乏对the fetch api的支持,但这是我最初在此发布的问题的原因。我编辑了问题的标题,并在此处添加了这个序言。本段下面是问题的原始内容:

原始问题

赛普拉斯的文档中充满了一些示例,您可以在其中设置特定Web请求的别名,然后您可以指示cypress等待它。例如,this one

cy.route('POST', '/login').as('postLogin')

cy.get('input[name=username]').type('jane.lae')
cy.get('input[name=password]').type('password123{enter}')

// we should always explicitly wait for
// the response for this POST to come back
// so our tests are not potentially flaky or brittle
cy.wait('@postLogin')

问题是我正在尝试在我的应用程序的测试中使用这种确切的技术,但我需要等待一个请求不是针对托管应用程序的同一服务器。因此,我假设我可以输入后端端点的完整URL,因此cy.route不会添加baseUrl,这是托管前端应用程序的主机。

// The following URL points to a backend rails app
// The frontend app I'm testing with cypress is at http://localhost:8080
cy.route('POST', 'http:/localhost:3000/session').as('postLogin')
// ... fill login form
cy.wait('@postLogin')
// The test never reaches this point

然而,当我运行我的测试时,我得到一个超时,因为cypress从未意识到执行了请求,它继续等待它直到它超时。当我在运行cypress的浏览器中检查左侧边栏上的测试脚本时,结果显示路由具有我设置的显式主机,不仅是路径,而且测试仍然等待此请求发生,并且它说它永远不会发生当我检查浏览器开发工具的网络选项卡时,我可以看到发生了请求。我可以在我的后端应用程序运行的终端中看到它确实被登录请求命中。此外,我可以在我的前端应用程序中看到,在cypress的浏览器会话中运行,用户已成功登录,并且应用程序在请求后被重定向到目标页面。

问题是:我可以让柏树知道跨源请求,以便它可以等待它们吗?如果是这样,怎么样?

更新

cubress也没有抓住存根的路由,我不能等待它们,或者阻止它们发生,因为对于存根请求它是预期的。

1 个答案:

答案 0 :(得分:4)

原来这与跨源请求有关。我开始意识到这一点,通过应用程序假设后端在同一个域中,并编写测试而不指定模拟路径中的主机。我有同样的行为。然后我意识到赛普拉斯应该在浏览器左侧边栏的运行测试脚本中显示任何XHR请求。它没有将此请求显示为“XHR”或“XHR STUB”,即使请求正在发生。所以我意识到我没有使用浏览器的XHR接口来发出ajax请求,而是fetch。经过一番搜索后,我发现这是赛普拉斯的一个问题,它假设所有的ajax请求都是通过XHR完成的。我在赛普拉斯的github回购中找到了an issue关于此问题,至今仍未解决:(

这是a comment in the issue mentioned above,其中包含我最终使用的解决方法:

// Add this to cypress/support/commands.js
Cypress.on("window:before:load", win => {
  win.fetch = null;
});