javascript - 带有 cy.request 的 Cypress 登录命令导致后续 cy.visit 失败

Question

我正在尝试在每次测试之前使用 Cypress 进行编程登录。我的 token 保存在 localStorage 中。如果我同步更改它，即简单地做 localStorage.setItem不涉及cy.request它工作正常。但是，我想使用我的身份验证服务器(下面的 http://localhost:3004/login)来生成 token 。

token 是从服务器正确获取的，但只要我使用下面的命令和 cy.visit('/')我收到“无法访问 localhost:8080 - 我们试图向此 URL 发出 http 请求，但请求失败且没有响应”(请参阅​​下面的完整日志)。

据我所知，这是使用身份验证服务器进行 headless 身份验证时的正确方法。我错过了什么？

命令.js

Cypress.Commands.add('login', () => {
  cy.request({
    method: 'POST',
    url: `http://localhost:3004/login`,
    body: {
      username: 'foo@bar.com',
      password: '123'
    }
  }).its('body').then((body) => {
    const vuexData = { user: { authenticationData: { token: body.token } } }
    window.localStorage.setItem('vuex', JSON.stringify(vuexData))
  })
})

test.js

describe('A test', () => {
  beforeEach(() => {
    cy.login()
  })

  it('works', () => {
    cy.visit('/')
    cy.get('h1').contains('All Books')
  })
})

CypressError: cy.visit() failed trying to load:

http://localhost:8080/

We attempted to make an http request to this URL but the request failed without a response.

We received this error at the network level:

Error: connect ECONNREFUSED ::1:8080

失败的常见情况:
- 你没有互联网访问权限
- 你忘了运行/启动你的网络服务器
- 无法访问您的网络服务器
- 您的计算机上有奇怪的网络配置设置

此错误的堆栈跟踪是:

错误:连接 ECONNREFUSED::1:8080
在 TCPConnectWrap.afterConnect [as oncomplete] (net.js:1056:14)

Answer 1

好的，这里有几个错误。

替换 cy.route()由 cy.intercept() ，因为较早的版本最近已被弃用并被较晚的版本替换。

检查使用 cy.intercept() 的正确语法因为它与 cy.route() 有点不同

我假设您正在尝试绕过某种身份验证。如果您的应用程序需要考虑用户“已通过身份验证”是在本地存储上拥有这些信息，那么您甚至不需要执行 POST 请求，但是，如果您这样做，那么:

查看 cy.intercept() 的使用情况用于处理(和 stub )与您的 XHR 请求相关的请求和响应对象。

要在 Cypress 窗口上设置本地存储，您需要使用 cy.window() 命令。