Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

cy.route xhr.request.body is empty when using FormData #5287

Closed
mroeling opened this issue Oct 4, 2019 · 2 comments

Comments

@mroeling
Copy link

commented Oct 4, 2019

Current behavior:

When using a stubbed POST route, within the onRequest (...xhr) the xhr.request.body is always empty, although the network tab in chrome does show proper form data, only an empty FormData object.

Desired behavior:

the form data should be visible in the xhr.request.body as well

Steps to reproduce: (app code and test code)

NOTE! The problem only arises when the data is sent as FormData.

code

var xhr = new XMLHttpRequest();
var formData = new FormData();
xhr.open("POST", "/testurl", true);

formData.append('_', JSON.stringify({
  name: "John",
  email: "john@example.com"
}));

xhr.send(formData);

spec

cy.route({
  method: "POST",
  url: `http://localhost:3000/testurl`,
  response: "return response to stub server",
  onRequest(...xhr): void {
    console.log(xhr);
    debugger;
  }
}).as("entityPersist");

The application code is Aurelia, though the testcase is created without Aurelia.
Test branch: https://github.com/mroeling/cypress-test-tiny/pull/new/form-data-test-branch

Run server with node src/app.js.

Versions

3.4.1, Ubuntu 18.04, Google Chrome Versie 77.0.3865.75

Screenshot

empty request body

image

@mroeling mroeling changed the title cy.route xhr.request.body is emtpy when using FormData cy.route xhr.request.body is empty when using FormData Oct 4, 2019
@jennifer-shehane

This comment has been minimized.

Copy link
Member

commented Oct 7, 2019

I'm not sure why it prints this FormData object to the console in this manner, but this matches the exact behavior of console.logging the FormData before it is sent through the XHR.

index.html

<!doctype html>
<html>
<body>
<button id="submit" onclick="return submit()">click</button>

<script>
    function submit() {
        var formData = new FormData();

        formData.append("username", "Groucho");

        var xhr = new XMLHttpRequest();
        xhr.open("POST", "/testurl", true);
        console.log('XHR FormData', formData)
        xhr.send(formData);
    }
</script>
</body>
</html>
it('works', () => {
  cy.server();
  cy.route({
    method: "POST",
    url: `http://localhost:3000/testurl`,
    response: "response",
    onRequest(args) {
      console.log('Cypress FormData', args.request.body);
    }
  })

  cy.visit('http://localhost:3000/');
  cy.get('#submit').click();
})

You can see the console.log in the HTML logs the exact same object as what is logged in our onRequest in the cy.route() - can you functionally demonstrate that the xhr.request.body is completely empty and the behavior changes through Cypress?

Screen Shot 2019-10-07 at 5 46 12 PM

@mroeling

This comment has been minimized.

Copy link
Author

commented Oct 8, 2019

Thank you Jennifer. Indeed, it is represented the same way...
So my next try was to see if the object itself is actually empty. And it turns out it is not. in your example, when you replace the console log by console.log(args.request.body.get('username')); the invisible data becomes visible again.

So luckily indeed no Cypress issue, but a display problem in Chrome.

@mroeling mroeling closed this Oct 8, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
2 participants
You can’t perform that action at this time.