Skip to content

Instantly share code, notes, and snippets.

@simenbrekken-visma
Forked from simenbrekken/README.md
Created September 24, 2022 06:08
Show Gist options
  • Save simenbrekken-visma/e804c86fd6a23cc59b89913eabbf1d82 to your computer and use it in GitHub Desktop.
Save simenbrekken-visma/e804c86fd6a23cc59b89913eabbf1d82 to your computer and use it in GitHub Desktop.
Hide fetch/XHR in Cypress command log

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.

// Add the following to cypress/support/cypress.d.ts
declare namespace Cypress {
interface ResolvedConfigOptions {
hideXHRInCommandLog?: boolean;
}
}
// 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);
}
}
@diogormendes
Copy link

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

@Fashish
Copy link

Fashish commented Dec 13, 2022

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment