Cypress 不拦截 GraphQL API 调用

Question

我正在尝试拦截 graphql 突变以访问其响应。赛普拉斯没有注意到该请求并且cy.wait() 超时。

测试

describe('/profile', () => {
  beforeEach(() => {
    cy.server()
    cy.route({
      method: 'POST',
      url: Cypress.config().baseUrl + '/graphql',
    }).as('graphql')
    cy.fastLogin()
    cy.visit('/profile')
  })

  it('is possible to change password', () => {
    cy.get('[data-cy=change-password-btn]').click()

    cy.get('[name=oldPassword]').type(Cypress.config().password)
    cy.get('[name=newPassword]').type('password1')
    cy.get('[name=confirmNewPassword]').type('password1')
    cy.get('[data-cy=change-pw-form-btn]').click()

    cy.wait('@graphql').then(xhr => {
      cy.log(JSON.stringify(xhr.response.body))
    })

    cy.get('[data-cy=notification-container]').should(
      'contain',
      'Your password has been changed'
    )
  })

我发现许多人遇到的一个常见问题是他们在cy.visit() 之后调用cy.server() 或cy.route()。这不是我的情况，但 cy.wait() 仍然失败。

如果有什么不同的话，我有一个 NodeJS 后端和一个 ReactJS 前端。

有什么想法吗？

Answer 1

cypress 没有看到我的graphql 查询，因为它们都通过fetch。我用这个gist 将fetch 转换为xhr。现在我可以在cypress UI 中看到graphql POST 调用，但cy.wait() 仍然超时