Cypress测试：如何给视频观看者显示消息及优化日志展示？

一、向测试视频展示消息的方法 #

• 利用cy.log()原生日志：直接调用cy.log("要展示的消息")，Cypress录制视频时会同步捕获命令日志区域的内容，只要视频包含命令面板，观看者就能看到这条消息。想让消息更醒目，可在文本里加特殊符号，比如cy.log("⚠️ 重要提示：测试进入支付流程")。
• 页面添加无干扰提示文本：如果希望消息直接显示在应用页面，可创建固定定位的DOM元素，避免抢占焦点。示例代码：

  cy.get('body').then($body => {
    const messageEl = $('<div style="position:fixed; top:10px; right:10px; background:#ffeb3b; padding:8px; z-index:99999; pointer-events:none;"></div>')
      .text('测试正在执行表单校验步骤');
    $body.append(messageEl);
    // 合适时机移除元素
    cy.wrap(messageEl).delay(3000).remove();
  });
  

  其中pointer-events:none确保元素不会干扰测试的焦点和交互。

二、日志高亮与非日志命令隐藏方案 #

1. 高亮日志的实用方法 #

• 自定义带样式的日志命令：在cypress/support/commands.js中注册自定义命令，通过Cypress.log()设置样式：

  Cypress.Commands.add('highlightLog', (message) => {
    Cypress.log({
      displayName: '⚠️ 重要日志',
      message: message,
      consoleProps: () => ({
        '提示内容': message
      }),
      $el: $('<span style="color:#d32f2f; font-weight:bold;"></span>').text(message)
    });
  });
  

  调用时用cy.highlightLog("支付接口调用失败，需重试")，日志会以红色粗体显示。
• 全局修改日志样式：在cypress/support/index.js中注入CSS，给特定日志添加样式：

  const style = document.createElement('style');
  style.innerHTML = `
    .command-name-log:has(.command-message:contains("⚠️")) {
      background-color: #fff3e0;
      border-left: 4px solid #ff9800;
    }
  `;
  document.head.appendChild(style);
  

  所有包含⚠️的cy.log()都会被高亮标记。

2. 隐藏左侧面板的非日志命令 #

通过自定义CSS隐藏指定类型的命令，在cypress/support/index.js中添加以下代码：

const hideCommandsStyle = document.createElement('style');
hideCommandsStyle.innerHTML = `
  // 隐藏visit、get、click这些非log命令
  .command-name-visit, .command-name-get, .command-name-click {
    display: none !important;
  }
`;
document.head.appendChild(hideCommandsStyle);

可根据需求调整要隐藏的命令类名（类名格式为.command-name-命令名，比如command-name-type对应cy.type()）。

配图参考：

内容的提问来源于stack exchange，提问作者Ced