DEV Community

Cover image for Muting Noisy XHR Logs in Cypress
Sam E. Lawrence
Sam E. Lawrence

Posted on • Updated on

Muting Noisy XHR Logs in Cypress

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 to the Cypress Github here and I felt like I'd share it with the Dev audience in case it was helpful to someone else. His code is posted at this gist.

For the fix, I added a flag to our cypress.json to allow us to enable or disable rich logging as needed.

"hideXHR": true
Enter fullscreen mode Exit fullscreen mode

This flag will be set to true by default in all our packages, and then in our /cypress/support/index.js file, we have the following:

// Hide all fetch/XHR requests in Cy console, toggle via cypress.json
if (Cypress.config('hideXHR')) {
  const app = window.top;

  if (!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

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!

Discussion (0)