How to hide fetch and XHR logs in Cypress 12?

Question

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:

In Cypress 12 how can I hide XHR and fetch logs?

score 3 · Accepted Answer · answered Feb 16 '23 at 22:59

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

How to hide fetch and XHR logs in Cypress 12?

1 Answers1