CODEWITHSUNDEEP
integration-testingcypress
st88
st88

Reputation: 179

Cypress: How to access the body of a POST-request?

Is there a way in Cypress to check the body of a POST-request?

E.g.: I have entered some data in a form, then pressed "Submit". The form-data is send via POST-request, separated by a blank line from the header-data.

I would like to check the form-data. If all data, which I have entered, are included and if they are correct.

Is that possible with Cypress?

cy.get('@login').then(function (xhr) {
    const body = xhr.requestBody;
    console.log(xhr);
    expect(xhr.method).to.eq('POST');
});

The xhr-object doesn't have the transferred data included.

Upvotes: 5

Views: 22544

Answers (3)

Vlad R
Vlad R

Reputation: 2624

It's better to use cy.intercept() in order to spy, stub and assert network requests and responses.

// assert that a request to this route
// was made with a body that included 'user'
cy.wait('@someRoute').its('request.body').should('include', 'user')

// assert that a request to this route
// received a response with HTTP status 500
cy.wait('@someRoute').its('response.statusCode').should('eq', 500)

// assert that a request to this route
// received a response body that includes 'id'
cy.wait('@someRoute').its('response.body').should('include', 'id')

Link to the docs

Upvotes: 3

ldiary
ldiary

Reputation: 494

It should be possible.

describe('Capturing data sent by the form via POST method', () => {
  before(() => {
    Cypress.config('baseUrl', 'https://www.reddit.com');
    cy.server();
    cy.route({
      method: 'POST',
      url: '/login'
    }).as('redditLogin');
  });
  it('should capture the login and password', () => {
    cy.visit('/login');
    cy.get('#loginUsername').type('username');
    cy.get('#loginPassword').type('password');
    cy.get('button[type="submit"]').click();

    cy.wait('@redditLogin').then(xhr => {
      cy.log(xhr.responseBody);
      cy.log(xhr.requestBody);
      expect(xhr.method).to.eq('POST');
    })
  });
});

This is how you can inspect your data in Chrome Developer Tool.

This is how you can inspect your data in Chrome Developer Tool

You should see the same thing you've seen from Chrome Developer Tool when you run your test in Cypress.

You should see the same thing you've seen from Chrome Developer Tool when you run your test in Cypress

Upvotes: 11

Diogo
Diogo

Reputation: 1029

I was Googling the same problem and somehow landed here before reaching the documentation.

Anyway, have you tried something like:

cy.wait('@login').should((xhr) => {
  const body = xhr.request.body

  expect(body).to.match(/email/)
})

I haven't tested it out with a multipart/form-data encoded request, but I suspect that you'll also find the request body that way.

Good luck!

Upvotes: 3

Related Questions