Issue
I'm learning Cypress 12 and wanted to disable fetch and XHR from logging. In my research, I found "Hide XHR calls on Cypress test runner" which points to this gist but for some reason, it's not working.
My following steps:
root level tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"lib": ["es5", "dom"],
"types": [
"cypress",
"node",
"cypress-real-events",
"cypress-file-upload",
"cy-verify-downloads"
],
"baseUrl": "./"
},
"include": ["**/*.ts", "./cypress/support/cypress.d.ts"]
}
directory tree of:
/
tsconfig.json
package.json
yarn.lock
cypress.config.ts
/ cypress
/ support
/ cypress.d.ts
/ e2e.ts
contents of cypress.d.ts:
declare namespace Cypress {
interface ResolvedConfigOptions {
hideXHRInCommandLog?: boolean;
}
}
contents of e2e.ts:
// 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);
}
}
still renders the XHR:
this appears to be a known issue from further research:
- How to stop (xhr) processes in cypress?
- Cypress XHR stubbing ignores ajax requests performed with fetch
- Hide XHR requests from the command log
- Cypress don't see requests in Command Log
In Cypress 12 how can I hide XHR and fetch logs?
Solution
There is this answer Hide URL in Cypress Info Panel
I tried it out, this is the variation that works on a simple 1-fetch test.
Comment out the Cypress.on("log:changed")
to see it fail.
Cypress.on("log:changed", (log, interactive) => {
if (log.displayName !== "fetch") return;
const logs = window.top.document.querySelectorAll("li.command-name-request");
if (logs.length) {
const last = [...logs][logs.length - 1];
last.remove();
}
});
it("tests that fetch logs are removed from Cypress UI", () => {
cy.intercept("https://jsonplaceholder.typicode.com/todos/1").as("fetch");
cy.visit("/");
cy.wait("@fetch").then(() => {
cy.wrap(window.top.document)
.its("body")
.find('[data-cy="reporter-panel"]')
.find("li.command-name-request")
.should("not.exist");
});
});
You'll have to patch in the XHR types as well, I didn't test that far. Should be something like
if (log.displayName !== "fetch" && log.displayName !== "xhr") return
Answered By - Fody
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.