DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Muting Noisy XHR Logs in Cypress
Sam Lawrence
Sam Lawrence

Posted on • Updated on

Muting Noisy XHR Logs in Cypress

(This guide has been updated multiple times, especially since the release of Cypress 10)

For a while now, our Cypress runner has been quite noisy, generating lots of XHR requests in the log as our tests run. A bug was introduced into Cypress in the last few versions that has made it quite difficult to mute these. Fortunately, I found a solution that Simen Brekken helpfully posted here and I felt like I'd share it with the Dev audience in case it was helpful to someone else.

For the fix, we add a flag to our cypress.config.ts to allow us to enable or disable rich logging as needed.

e2e: {
  hideXHRInCommandLog: true
}
Enter fullscreen mode Exit fullscreen mode

In our /cypress/support/e2e.ts file, we have:

// Hide fetch/XHR requests from command log
if (Cypress.config("hideXHRInCommandLog")) {
  const app = window.top;

  if (
    app &&
    !app.document.head.querySelector("[data-hide-command-log-request]")
  ) {
    const style = app.document.createElement("style");
    style.innerHTML =
      ".command-name-request, .command-name-xhr { display: none }";
    style.setAttribute("data-hide-command-log-request", "");

    app.document.head.appendChild(style);
  }
}
Enter fullscreen mode Exit fullscreen mode

And then lastly, in /support/cypress.d.ts, we add:

declare namespace Cypress {
  interface ResolvedConfigOptions {
    hideXHRInCommandLog?: boolean;
  }
}
Enter fullscreen mode Exit fullscreen mode

This solution uses CSS to prevent the XHR requests from being picked up in the DOM and thereby reported to the Cypress runner. It's not the most elegant solution, but it'll work for now until we get a better fix from Cypress. Thanks, Simen!

Top comments (1)

Collapse
 
jprealini profile image
Juan Pablo

Hi! I found this article very helpful, but for some reason I faced an issue when adding the code to the support/index.js file... Cypress was telling me that there was no override for that option... I figured that probably I needed to change something in the Cypress core code to allow it to identify the custom key in the cypress.json file. So what I did was adding the hideXHR key to my "env": { } section, and then in the code instead of

if (Cypress.config('hideXHR'))
Enter fullscreen mode Exit fullscreen mode

I put

if (Cypress.env('hideXHR'))
Enter fullscreen mode Exit fullscreen mode

And it worked as expected

Thanks!

Classic DEV Post:

caching

Web Caching Explained by Buying Milk at the Supermarket