如何用Cypress测试视频播放/暂停按钮？解决点击报错问题

问题分析 #

点击操作报错的核心原因是目标按钮（或其父元素）设置了pointer-events: none样式，阻止了鼠标交互，导致Cypress的原生点击检查失败。

解决方案 #

• 强制点击（快速解决）
  绕过Cypress的交互状态校验，直接触发点击事件：

  // 点击播放按钮
  cy.get("button.vd-play-control.vd-play").click({ force: true });
  // 点击暂停按钮
  cy.get("button.vd-play-control.vd-pause").click({ force: true });
  

  这种方式适合确认按钮本身绑定了点击事件，只是样式限制了交互的场景。

• 临时修改CSS恢复交互
  先移除pointer-events: none限制，再执行正常点击，更贴近真实用户操作：

  // 处理播放按钮
  cy.get("button.vd-play-control.vd-play")
    .invoke('css', 'pointer-events', 'auto')
    .click();
  
  // 处理暂停按钮
  cy.get("button.vd-play-control.vd-pause")
    .invoke('css', 'pointer-events', 'auto')
    .click();
  

• 直接操作视频元素API
  如果按钮只是视频的控制层，可直接调用video元素的播放/暂停方法，避免控件样式干扰：

  // 触发视频播放
  cy.get("video").invoke('play');
  // 触发视频暂停
  cy.get("video").invoke('pause');
  

• 优化元素定位逻辑
  原定位使用完整class字符串，易因class顺序变更失效，改用多class组合定位更稳定：

  // 更可靠的播放按钮定位
  cy.get("button.vd-play-control.vd-play");
  // 更可靠的暂停按钮定位
  cy.get("button.vd-play-control.vd-pause");
  

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