Skip to content

Instantly share code, notes, and snippets.

@simenbrekken
Last active Dec 30, 2021
Embed
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 = window.top;

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

  app.document.head.appendChild(style);
}
@simenbrekken
Copy link
Author

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...
}

@asnaith
Copy link

asnaith commented Oct 15, 2021

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

@samselikoff
Copy link

samselikoff commented Oct 19, 2021

Thanks Simen!

@roneyuan
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!

@simenbrekken
Copy link
Author

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