Cypress does not intercept GraphQL API calls

Question

I am trying to intercept a graphql mutation to access its response. Cypress doesn't notice the request and cy.wait() times out.

test

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'
    )
  })

I found a common problem that many people were having was that they called cy.server() or cy.route() after cy.visit(). That's is not my case, but still the cy.wait() fails.

I have a NodeJS backend and ReactJS frontend if that makes any difference.

Any ideas?

Does that login request go via fetch, maybe? See github.com/cypress-io/cypress/issues/95 — jonrsharpe
Yes, actually every graphql call goes via fetch. So that is why cypress didn't see them. I used this gist: gist.github.com/yagudaev/2ad1ef4a21a2d1cfe0e7d96afc7170bc to tranform fetch to xhr in my tests. Now I can see the queries in cypress, but the cy.wait() call still times out. — slinden

slinden slinden · Accepted Answer · 2020-03-24T12:31:59

cypress wasn't seeing my graphql queries, because all of them went via fetch. I used this [gist][1] to tranform fetch to xhr. Now I can see the graphql POST calls in cypress UI, but the cy.wait() still times out

[1]: https://gist.github.com/yagudaev/2ad1ef4a21a2d1cfe0e7d96afc7170bc

Cypress does not intercept GraphQL API calls

1 Answers