8

重要信息

这里最初的问题并不是直接关于 Cypress 中缺乏对fetch api的支持,但这就是我最初在此处发布的问题的原因。我已经编辑了问题的标题并在此处添加了此序言。本段下方是问题的原始内容:

原始问题

Cypress 文档中充满了示例,您可以在其中为特定 Web 请求设置别名,然后您可以指示 cypress 等待它。例如,这个

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 的浏览器的左侧边栏中检查测试脚本时,路由具有我设置的显式主机,不仅是路径,而且测试仍然在等待这个请求发生,它说永远不会发生。当我检查浏览器开发工具的网络选项卡时,我可以看到请求发生了。而且我可以在我的后端应用程序运行的终端中看到,它确实被登录请求击中。此外,我可以在赛普拉斯浏览器会话中运行的前端应用程序中看到,用户成功登录,并且应用程序在请求后被重定向到预期页面。

问题是:我可以让赛普拉斯知道跨域请求,以便它可以等待它们吗?如果是这样,怎么做?

更新:

赛普拉斯也没有捕获存根路由,我不能等待它们,也不能阻止它们发生,因为它是存根请求所期望的。

4

1 回答 1

13

事实证明这与跨源请求有关。我开始通过应用程序假设后端位于同一域中来实现这一点,并在不指定模拟路由中的主机的情况下编写测试。我有同样的行为。然后我意识到赛普拉斯应该在浏览器左侧边栏的运行测试脚本中显示任何 XHR 请求。即使请求正在发生,它也没有将此请求显示为“XHR”或“XHR STUB”。所以我意识到我不是在使用浏览器的 XHR 接口来发出 ajax 请求,而是取而代之。经过一番搜索,我发现这是赛普拉斯的一个问题,假设所有 ajax 请求都是通过 XHR 完成的。我在 Cypress 的 github repo 中发现了一个关于这个的问题,

这是上面提到的问题的评论,我暂时使用了解决方法:

// Add this to cypress/support/commands.js
Cypress.on("window:before:load", win => {
  win.fetch = null;
});
于 2017-11-28T17:40:26.653 回答