如何在Cypress测试录制视频中显示鼠标点击等操作的视觉效果？

以下是三类可落地的实现方案，按适配度从高到低排序：

1. 测试代码注入实现（优先推荐，无外部依赖） #

这个方案不需要额外安装工具或插件，直接通过Cypress的全局配置注入点击高亮逻辑，录制效果和测试流程完全同步，不会引入额外干扰内容。
你可以在Cypress项目的cypress/support/e2e.js（E2E测试场景）或者cypress/support/component.js（组件测试场景）中添加以下代码：

// 注入点击高亮样式与事件监听
const addClickVisualEffect = () => {
  // 注入高亮样式
  const style = document.createElement('style')
  style.textContent = `
    .click-effect-dot {
      position: fixed;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgba(255, 0, 0, 0.7);
      pointer-events: none;
      z-index: 999999;
      animation: click-fade-out 0.6s ease-out forwards;
    }
    @keyframes click-fade-out {
      0% { transform: scale(1); opacity: 1; }
      100% { transform: scale(3); opacity: 0; }
    }
  `
  document.head.appendChild(style)

  // 监听鼠标按下事件生成高亮圆点
  document.addEventListener('mousedown', (e) => {
    const dot = document.createElement('div')
    dot.classList.add('click-effect-dot')
    dot.style.left = `${e.clientX - 10}px`
    dot.style.top = `${e.clientY - 10}px`
    document.body.appendChild(dot)
    // 动画结束后自动清理元素
    setTimeout(() => dot.remove(), 600)
  })
}

// 每个测试页面加载完成后自动注入效果逻辑
beforeEach(() => {
  cy.window().then(win => {
    if (!win.hasClickEffectInjected) {
      win.hasClickEffectInjected = true
      addClickVisualEffect.call(win.document)
    }
  })
})

添加完成后，后续运行测试生成的视频里，所有鼠标点击位置都会显示红色扩散的高亮效果，辨识度很高。

2. 浏览器层面实现 #

如果不希望修改测试代码，可以通过浏览器用户脚本管理器注入上述逻辑，也可以开启部分浏览器自带的点击反馈功能，或者安装对应浏览器的鼠标点击可视化插件，所有在浏览器内发生的点击都会显示效果，录制时会同步录入视频。

3. 系统独立工具实现 #

你提到的KmCaster这类工具属于这种方案，不同系统都有对应可选工具：Windows平台可选KmCaster、ClickShow，macOS平台可选Mouseposé，Linux平台可选xclickdot。这类工具全局生效，不需要修改任何测试或浏览器配置，所有系统层面的鼠标点击都会显示视觉效果，录制视频时会同步被录入，适合不想调整现有测试流程的场景使用。

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