Skip to content

Instantly share code, notes, and snippets.

Last active Dec 30, 2021
What would you like to do?
Hide fetch/XHR in Cypress command log

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

Add the following to cypress/support/index.js:

// Hide fetch/XHR requests
const app =;

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', '');

Copy link

simenbrekken commented Oct 15, 2021

If you'd like to make this configurable, just add a new option to cypress.json named hideXHR or something, and verify it is true before running the above snippet:

if (Cypress.config('hideXHR')) {
  // Add the above snippet here...

Copy link

asnaith commented Oct 15, 2021

@simenbrekken Thanks for sharing, this is definitely an interesting interim solution until there's official support.

Copy link

samselikoff commented Oct 19, 2021

Thanks Simen!

Copy link

roneyuan commented Dec 28, 2021

Thanks for sharing this! Curious about why do we need if (!app.document.head.querySelector('[data-hide-command-log-request]')) and style.setAttribute('data-hide-command-log-request', '');? Thanks!

Copy link

simenbrekken commented Dec 30, 2021

@roneyuan Otherwise the snippet would be injected for every test

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