Muting Noisy XHR Logs in Cypress
#testing#javascript#cypress#testdev
Sam E. Lawrence

Sam E. Lawrence @samelawrence

About: Hi, I'm Sam and I'm an advocate for quality software. I'm a Cypress Ambassador and I work as the QA Lead at Pointivo where we're digitizing real-world infrastructure for analysis and maintenance.

Location:
ATL
Joined:
Jan 22, 2019

Muting Noisy XHR Logs in Cypress

Publish Date: Oct 18 '21
13 5

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

Comments 5 total

  • Juan Pablo
    Juan PabloDec 9, 2021

    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!

    • Sam E. Lawrence
      Sam E. LawrenceDec 9, 2022

      If you're placing the config inside your env object, then yes that's necessary. I keep my config flag outside of the env object, in the main e2e config object. I believe it's optional where you keep it, as long as both pieces of code match.

  • Jonathan Thomas
    Jonathan ThomasJun 7, 2023

    Really cool wait to handle this. What about seeing intercepts?

    • Stu
      StuMay 22, 2024

      This is how I handle different types. Choose between show only types or hide only types. This does mean you need to dig in and look at the commmand-name-X class name. Just list the X name in the environment variable (space seperated) and it'll show only those types, or hide only those types.

      // Show or hide command log types via environment variables
if (Cypress.env('showCommandLogType')) {
    const app = window.top

    if (app && !app.document.head.querySelector('[data-hide-command-log-request]')) {
        const style = app.document.createElement('style')

        style.innerHTML = `.command${Cypress.env('showCommandLogType')
            .split(' ')
            .map(type => `:not(.command-name-${type})`)
            .join('')} { display: none }`
        style.setAttribute('data-hide-command-log-request', '')

        app.document.head.appendChild(style)
    }
} else if (Cypress.env('hideCommandLogType')) {
    const app = window.top

    if (app && !app.document.head.querySelector('[data-hide-command-log-request]')) {
        const style = app.document.createElement('style')

        style.innerHTML = `${Cypress.env('hideCommandLogType')
            .split(' ')
            .map(type => `.command-name-${type},`)
            .join('')
            .slice(0, -1)} { display: none }`
        style.setAttribute('data-hide-command-log-request', '')

        app.document.head.appendChild(style)
    }
}
      Enter fullscreen mode Exit fullscreen mode
  • Anton de la Fuente
    Anton de la FuenteApr 16, 2024

    Thank you! I used this verbatim at my job and it worked.

Add comment