Hide fetch/XHR in Cypress command log

README.md

This novel workaround simply hides any command log entries that originate from fetch/XHR requests.

While I've updated this receipe for Cypress 10 and converted it to TypeScript you should be able to use it in a JavaScript project by ignoring the cypress.d.ts file and placing the snippet from e2e.ts in e2e.js instead.

cypress.d.ts

// Add the following to cypress/support/cypress.d.ts
declare namespace Cypress {
  interface ResolvedConfigOptions {
    hideXHRInCommandLog?: boolean;
  }
}

e2e.ts

// Add the following to cypress/support/e2e.ts or cypress/support/e2e.js

// 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);
  }
}

@justjoshn I just updated to 10.2.0 and @simenbrekken's snippet still works for me. If you used the Cypress.config('hideXHR') option there might be a problem with the placement of your hideXHR config value in the newly generated cypress.config.ts file.

Thanks again @simenbrekken for such a useful snippet!

I've now updated this for Cypress 10 with TypeScript: https://gist.github.com/simenbrekken-visma/e804c86fd6a23cc59b89913eabbf1d82

Thanks @simenbrekken, snippet works like a charm (currently in 11.2.0)

Very helpful thread.
I landed on:

/**
 * @see https://gist.github.com/simenbrekken/3d2248f9e50c1143bf9dbe02e67f5399
 */
export function silenceFetchLogs(silenceFetchPattern: RegExp | string): void {
  let loggedOnce: boolean = false;
  const originalCypressLog = Cypress.log
  Cypress.log = function (opts, ...other) {
    if (
      opts.displayName === "fetch"
      &&
      ((opts as any).url as string).match(silenceFetchPattern) != null
    ) {
      if (loggedOnce) {
        return
      } else {
        loggedOnce = true;
        opts.displayName = "noisy fetch - will be silenced";
        return originalCypressLog(opts, ...other)
      }
    }
    return originalCypressLog(opts, ...other)
  }
}

Perfect! Works like a charm.

Thank you!

thanks a lot

A slightly easier way of disabling, using cy.intercept():
in your './cypress/support/e2e' set:

before(function () {
    // disable Cypress's default behavior of logging all XMLHttpRequests and fetches to the Command Log
    cy.intercept({ resourceType: /xhr|fetch/ }, { log: false })
})

Based on this thread I created a cypress plugin to filter logs both with cypress open and cypress run based on log levels.

You can check it out here: https://www.npmjs.com/package/cypress-log-filter

Based on this thread I created a cypress plugin to filter logs both with cypress open and cypress run based on log levels.

You can check it out here: https://www.npmjs.com/package/cypress-log-filter

This library would've been great if didn't permit the log messages' markup to render at all (in my scenario I have many requests coming in, almost never ending, which causes the host OS to run out of memory (which just causes cypress to crash)).

Nevermind comment - Just realized your plugin is for filtering ('live') but not necessarily preventing the markup rendering.

Thanks for sharing!

Based on this thread I created a cypress plugin to filter logs both with cypress open and cypress run based on log levels.
You can check it out here: https://www.npmjs.com/package/cypress-log-filter

This library would've been great if didn't permit the log messages' markup to render at all (in my scenario I have many requests coming in, almost never ending, which causes the host OS to run out of memory (which just causes cypress to crash)).

Nevermind comment - Just realized your plugin is for filtering ('live') but not necessarily preventing the markup rendering.

Thanks for sharing!

Yeah, the thing is that I tried filtering them before they were added in the first place but the logs API doesn't allow you to do that :'(

That's as much as I was able to do

👍 , I hear you - In the end I went with the "shimming the Cypress.log method approach (mentioned by @cie), but more refined (used a regular expression, defined outside of custom method, and just ran a test on incoming log displayName types).