如何在Cypress 12中隐藏fetch与XHR日志？

你之前的方案失效，核心原因是Cypress 12对命令日志的DOM类名做了变更，旧选择器不再匹配，同时可能缺少关键的配置项开启逻辑。以下是两种适配Cypress 12的有效方案：

方案一：更新CSS选择器（快速适配） #

步骤1：开启配置开关 #

首先在cypress.config.ts中添加控制项：

// cypress.config.ts
import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    // 保留原有配置
    hideXHRInCommandLog: true,
  },
});

步骤2：替换适配Cypress 12的CSS选择器 #

更新cypress/support/e2e.ts中的样式代码：

if (Cypress.config('hideXHRInCommandLog')) {
  const app = window.top;
  if (app && !app.document.head.querySelector('[data-hide-request-logs]')) {
    const style = app.document.createElement('style');
    style.innerHTML = `
      /* 隐藏XHR和Fetch的命令日志标识 */
      .command-name-xhr,
      .command-name-fetch {
        display: none !important;
      }
      /* 若需隐藏整个请求条目，改用以下选择器 */
      /* .command:has(.command-name-xhr), .command:has(.command-name-fetch) { display: none !important; } */
    `;
    style.setAttribute('data-hide-request-logs', '');
    app.document.head.appendChild(style);
  }
}

方案二：拦截命令日志事件（更彻底） #

如果CSS隐藏仍有遗漏，可直接通过Cypress事件钩子阻止请求日志生成，这种方法更可靠：

// cypress/support/e2e.ts
// 拦截待加入日志的命令，直接取消XHR和Fetch的日志展示
Cypress.on('command:enqueued', (command) => {
  if (command.name === 'xhr' || command.name === 'fetch') {
    command.cancel();
  }
});

// 或者对已添加的日志进行清空处理
Cypress.on('log:added', (log) => {
  if (['xhr', 'fetch'].includes(log.name)) {
    log.set('displayName', '');
    log.set('message', '');
    log.consoleProps = () => ({});
  }
});

旧方案失效原因说明 #

你之前使用的.command-name-request类名在Cypress 12中已被废弃：

• XHR请求对应的命令日志类名变为.command-name-xhr
• Fetch请求新增了独立的.command-name-fetch类名
  同时如果未在cypress.config.ts中开启hideXHRInCommandLog: true，代码中的判断条件不会触发，样式也无法注入。

内容的提问来源于stack exchange，提问作者GʀᴜᴍᴘʏCᴀᴛ