如何使用Cypress操作HTML5视频的播放/暂停、静音、全屏等控制按钮

方案1：调用HTML5 Video原生API（最稳定，无需定位控制元素） #

HTML5视频元素自带原生JS操作接口，无需点击页面上的控制按钮，直接调用对应方法/修改属性即可实现所有控制操作，Cypress可以直接通过invoke访问这些原生能力：

• 播放视频：

cy.get('video').invoke('play')

• 暂停视频：

cy.get('video').invoke('pause')

• 开启静音：

cy.get('video').invoke('prop', 'muted', true)

• 关闭静音：

cy.get('video').invoke('prop', 'muted', false)

• 进入全屏：

cy.get('video').then($video => {
  $video[0].requestFullscreen()
})

• 退出全屏：

cy.window().then(win => {
  win.document.exitFullscreen()
})

你可以直接获取视频元素的属性验证操作是否生效，比如：

• 验证视频正在播放：cy.get('video').its('0.paused').should('eq', false)
• 验证视频已开启静音：cy.get('video').its('0.muted').should('eq', true)

方案2：定位原生控制条元素点击 #

如果你确实需要模拟用户点击控制条的操作，你需要知道浏览器自带的视频控制条属于影子DOM（Shadow DOM），默认Cypress不会查询影子DOM内部的元素，你可以开启配置后定位：

1. 先在Cypress配置文件cypress.config.js中开启全局影子DOM支持：

module.exports = defineConfig({
  e2e: {
    includeShadowDom: true
  }
})

2. 之后就可以直接查找控制条内的元素，不同浏览器的控制元素选择器略有差异，以Chrome为例：

• 点击播放/暂停按钮：cy.get('video').find('::-webkit-media-controls-play-button').click()
• 点击静音按钮：cy.get('video').find('::-webkit-media-controls-mute-button').click()
• 点击全屏按钮：cy.get('video').find('::-webkit-media-controls-fullscreen-button').click()

补充说明 #

你提到的Cypress不支持键盘操作是旧版本的限制，当前所有稳定版Cypress都支持键盘操作，你可以直接给视频元素聚焦后触发按键：

// 按空格切换播放/暂停
cy.get('video').focus().type(' ')
// 按f切换全屏（大部分浏览器原生控制条支持该快捷键）
cy.get('video').focus().type('f')

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