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 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!
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.envobject into the mainCypress.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!