Writing Intercept middleware to capture and record all requests.

[zacharybussey]

I'm writing a VCR style record/playback system for the API calls that an application makes. We've already gotten this working with cy.route some time ago, but would like to upgrade and simplify it with cy.intercept. I've got this close to working but have hit a few snags with the intercept execution order.

I have the following in a support folder plugin.

cy.intercept(
    {
      url: `${baseUrl}/**/*`,
      middleware: true,
    },
    (req) => {
      req.on('after:response', (res) => {
         // res.body is what the server sent.
      });
    }
  );

Sometimes in our tests, its helpful to intercept a request and modify the response. I can do that easily in the test file.

cy.intercept('GET', '/account/profile', (req) => {
      req.continue((res) => {
        const body = { ...res.body };
        body.modified = true;
        res.send({ body });
      });
    });

But, given this example, the "after:response" handler never gets a body.modified = true value. This is specified in the docs.

For each after:response listener (if any), call it with the res object (minus res.send)

It seems like a somewhat odd choice to leave the modifications out. If I try to subscribe to the response event instead, it never executes because the intercept was finished by the test file calling res.send.

Is there any way to see the responses as the browser actually receives them when setting up a middleware intercept similar to this?

[zacharybussey]

Digging around in the source, I found this:
https://github.com/cypress-io/cypress/blob/develop/packages/net-stubbing/lib/server/driver-events.ts#L71

So, if I change my test code to do the following, I will get the supplied fixture file contents in the after:response event:

cy.intercept('GET', '/account/profile', (req) => {
      req.continue((res) => {
        const body = { ...res.body };
        body.modified = true;
        // res.send({ body });
        res.send({ fixture: 'someFile.json' });
      });
    });

I think this behavior is somewhat inconsistent. I can see that you would want to populate the response in the after event with the fixture contents rather than just a file name. But, I'm not sure why this behavior is only limited to fixture files. I would expect anything to come through res.send to end up in the response sent to the event handlers.