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); | |
| } | |
| } |
👍 , I hear you - In the end I went with the "shimming the
Cypress.logmethod approach (mentioned by @cie), but more refined (used a regular expression, defined outside of custom method, and just ran ateston incoming logdisplayNametypes).