When cy.visit() fails, show the full request and response headers and body

What would you like?

Currently, Cypress shows only the response status code and the "Sorry, we could not load" message when a cy.visit() fails to load a page. It should also show the full response headers and body, and request headers and body.

Preferably also make the HTTP request visible in Chrome dev tools network tab, so that users can see the same information there (currently the request done by cy.visit() is not shown in the network tab).

Why is this needed?

We spent over three hours debugging why this one Cypress test would run fine against a local dev environment, but fail when running against our QA environment. The cy.visit() command would fail with error 401, even though the test user was already logged in:

cypress visit error

When running the tests with browser dev tools open, there was no error 401 in the browser's network logs, so it was extremely hard to find the reason for the failure. When visiting the same address manually in the same browser instance as Cypress, there were no errors.

If we would just have seen the response body and headers, it would have been immediately obvious why we were getting the error 401:

< HTTP/2 401 
< date: Fri, 17 Nov 2023 13:22:27 GMT
< content-type: text/html
< content-length: 172
< server: nginx
< www-authenticate: Basic realm="Secret"
< 
<html>
<head><title>401 Authorization Required</title></head>
<body>
<center><h1>401 Authorization Required</h1></center>
<hr><center>nginx</center>
</body>
</html>

☝️ The response body would have shown that this error came from the nginx reverse proxy, and never even reached our application. The www-authenticate response header would have shown that the request needed HTTP basic authentication (our QA environment has an extra basic auth barrier, in addition to being behing VPN). After seeing that, the fix was very easy (add the basic auth options to cy.visit()).

Other

No response

cypress-io / cypress