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

Question

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

在使用 cy.request 命令的经典 api 调用中，我可以轻松处理响应主体，但是当 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"))
  })
})

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

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, ...
    });
});

有用的阅读：

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

With Cypress, how to get the response body of an api call triggered by a non-request event

cypress