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

I'm not familiar with Cypress.env and my preferred variable is now hideXHRInCommandLog so that might be what's causing problems. But as long as it works!

Ah, I see what I was doing wrong. You're right, I hadn't noticed that you changed the variable name. I also moved the setting out of my Cypress.env object into the main Cypress.config. It's working for me now.

I also updated my blog post that links to this Gist. Thanks for your work on this issue, Simen!

I tried this on a JavaScript project (following Sam's blog post) and it worked perfectly. Thank you both for your work on this issue.

I tried this on a JavaScript project (following Sam's blog post) and it worked perfectly. Thank you both for your work on this issue.

It would be nice if you could post a gist on JS. It could help a lot of people :D

Found the blog which subsequently lead me here. Thank you both, the solution works perfectly!