Large XHR response objects can exceed the maximum header size.

[zachgibb]

If I respond to route with a very large object, tests waiting for that response will fail with ERR_EMPTY_RESPONSE

cy
  .server()
  .route("POST", /route/, reallyLargeObject).as("willFail")
  .get(".submit").click()
  .wait("@willFail")

[brian-mann]

Okay this is not a quick or easy fix.

Node sets a constant maximum total header size at 80kb for all headers. There is no way to get around this. We can't toss the data in the request body either, since that would be altering the entire request.

Probably the only way to do this is transfer the data over websockets while the server begins handling the request.

That means managing all kinds of state, but this would work. There are some other features of the XHR refactor that would also introduce websockets, so I'll hold off on implementing this until it can go in with some new architecture.

In the mean time you'll have to reduce the response sizes to less than 80kb, or just use a fixture and not an alias.

So just move reallyLargeObject to a fixture and update your route

cy.route("POST", /route/, "fixture:reallyLargeObject")

[acthp]

Trying to find a workaround for this, e.g. manipulating the request, or the response, or the server object. The available hooks fire after the request is sent, and after the response is delivered to the app, so there's no opportunity to influence it. Also haven't found any way to access the server object, e.g. to override a method. Any suggestions? Using a fixture doesn't help, because it's fixed. ;)

[brian-mann]

If your fixture exceeds the maximum headers you'll need to modify your app code, such as using a conditional if window.Cypress exists, and if so, to use a property on that (on the XHR response callback)

Then ahead of time in your test code, you can use a fixture and set that property on the Cypress object so your app code can pick it up.

[brian-mann]

The key takeaway here is that Cypress is just javascript and it has native access to everything. You can share properties and data. You can collaborate between Cypress and your application code.

If your application code is "hardwired" to take a specific path, you can just modify it to open a seam to which you can use Cypress to modify that behavior.

[acthp]

Just realized I could wrap onreadstatechange during onRequest, to flow the data into the app.

cy.route({
	url: '/api/bookmarks/bookmark*',
	method: 'GET',
	onRequest: xhr => {
		var orsc = xhr.xhr.onreadystatechange;
		xhr.xhr.onreadystatechange = function() {
			if (this.readyState === 4) {
				Object.defineProperty(this, 'response', {
					writable: true
				});
				this.response = content;
			}
			orsc.apply(this, arguments);
		};
	},
	response: 'placeholder',
});

The Cypress console shows response 'placeholder', but otherwise this functions as a workaround.

[brian-mann]

Yup that would work.

You could also bind to onload instead of onreadystatechange. Would avoid the readyState conditional

[ankri]

Thank you for your suggestions.

For guys coming from google. Here is our workaround:

put this in e.g. integration/utils/loadLargeFixture.js

export default function loadLargeFixture(url, response, method = 'GET') {
  return cy.route({
    url,
    method,
    onRequest: xhr => {
      const originalOnLoad = xhr.xhr.onload;
      xhr.xhr.onload = function() {
        Object.defineProperty(this, 'response', {
          writable: true
        });
        this.response = response;
        originalOnLoad.apply(this, xhr);
      };
    }
  });
}

Import the json and the loadLargeFixture function in your test:

import largeFixture from '../fixtures/veryLargeJson.json';
import loadLargeFixture from '../utils/loadLargeFixture';

describe('demo', () => {
  it('should work with large fixture', () => {
    cy.server();
    loadLargeFixture('/api/large', largeFixture).as('data');
    // do stuff
    cy.wait('@data')
    // do stuff
  });
});

[jennifer-shehane]

I spent some time stuck on this today. 😢 It wasn't very obvious because I made a change to my fixtures that must have JUST put it over size limit for responses. So working yesterday -> not working today.

The ERR_EMPTY_RESPONSE would not display on each failure either, instead if would just say:

CypressError: The network request for this XHR could not be made. Check your console for the reason.

I was able to inspect the network panel and see that the response had a size of 0 bytes, which clued me in on it being this issue.

This only breaks when I generate a bunch of data for an array response (like to check pagination), so would be nice to have fixed.

[tolicodes]

hah just found a super simple solution:
before I had

cy.fixture(`${endpoint}.json`).as(`fixture${endpoint}`);
cy.route(path, `@fixture${endpoint}.json`)
    .as(endpoint);

now:

cy.route(path, `fixture:${endpoint}.json`)
    .as(endpoint);

Cleaner and it works :)