使用Cypress，如何获取非请求事件触发的api调用的响应体

Question

我正在使用 cypress 测试我的登录页面。/api/auth/login当密码输入字段达到4个字符时，自动触发对我的api的调用。因此，在我的 cypress 规范文件中，该命令cy.get("password-input").type("1234")足以触发 api 调用。如何获取该 api 调用的响应正文？我想获取我的 api 发回的令牌。

在使用命令的经典 api 调用中，cy.request我可以轻松处理响应正文，但当 api 请求被另一个事件（如此处的事件）触发时，我找不到如何访问响应正文type。

目前，我有一个解决方法，因为我的网站将 response.body.token 存储在 localStorage 中，因此我使用window以下命令访问令牌wait：

it("should get token", () => {
  cy.visit("/login")
  cy.get("[data-cy="login-input"]).type("myLogin")
  cy.get("[data-cy="password-input"]).type("0001")
  cy.wait(5000)
  cy.window().then(window => {
    cy.log(window.localStorage.getItem("myToken"))
  })
})

但这感觉很恶心...你能给我正确的方法来访问事件触发的 api 调用的响应正文吗type？

Answer 1

您可以使用cy.intercept()、别名和cy.wait()：

it("should get token", () => {
  cy
    .intercept('/api/auth/login')
    .as('token');
  cy
    .visit("/login");
  cy
    .get('[data-cy="login-input"]')
    .type("myLogin");
  cy
    .get('[data-cy="password-input"]')
    .type("0001");
  cy
    .wait('@token')
    .then(intercept => {
      // you can now access the request body, response body, status, ...
    });
});

有用的阅读：

• https://docs.cypress.io/api/commands/intercept
• https://docs.cypress.io/api/commands/intercept#Aliasing-individual-requests
• https://docs.cypress.io/api/commands/wait
• https://docs.cypress.io/api/commands/wait#Alias