使用Cypress进行麦克风测试 模拟Google Speech功能的实现方案咨询

该需求完全具备可实现性，Cypress支持浏览器API劫持、媒体流注入、接口拦截等能力，可覆盖模拟Google Speech操作的全场景需求。

• 方案1：Mock Web Speech API（轻量场景首选）
  Google Speech的前端实现本质是调用浏览器SpeechRecognition（或webkit前缀的同名）接口，你可以直接在Cypress的页面加载钩子中Mock该API的返回，直接注入预设的语音识别结果，跳过真实录音环节。
  参考代码：

  cy.visit('/target-page', {
    onBeforeLoad(win) {
      // 覆盖浏览器原生语音识别构造函数
      win.SpeechRecognition = win.webkitSpeechRecognition = function() {
        this.start = cy.stub().callsFake(() => {
          // 触发识别成功回调，返回自定义语音内容
          this.onresult?.({
            results: [[{ transcript: '你需要模拟的语音发言文本' }]]
          })
        })
        this.stop = cy.stub()
      }
    }
  })
  // 后续正常点击页面语音输入按钮即可，会直接返回预设文本
  

• 方案2：注入预录音频流（需验证音频采集链路场景）
  如果你需要测试从音频采集到识别的完整链路，可以劫持浏览器getUserMedia接口，将提前准备好的测试音频文件作为麦克风输入流注入，模拟真实用户发言的效果。
  参考代码：

  cy.window().then(async (win) => {
    // 读取预存在fixtures目录的测试音频
    const audioBase64 = await cy.fixture('test-speech.wav', 'base64')
    const audioBuffer = await new win.AudioContext().decodeAudioData(
      Uint8Array.from(atob(audioBase64), c => c.charCodeAt(0))
    )
    // 转成可用的媒体流
    const source = new win.AudioContext().createBufferSource()
    const dest = new win.AudioContext().createMediaStreamDestination()
    source.buffer = audioBuffer
    source.connect(dest)
    source.start()
    // 劫持媒体设备接口返回自定义流
    cy.stub(win.navigator.mediaDevices, 'getUserMedia').resolves(dest.stream)
  })
  

• 方案3：拦截Google Speech接口请求（需验证服务交互场景）
  如果你要校验前端调用Google Speech服务的逻辑正确性，可以用cy.intercept拦截前端发往Google Speech的接口请求，直接返回预设的识别结果，无需真实调用语音识别服务，大幅提升测试效率。

• 所有Mock操作需要在页面相关API被调用前注入，否则会出现Mock不生效的问题
• 如果涉及跨域调用Google Speech的逻辑，需要在cypress.config.js中配置chromeWebSecurity: false
• 注入的测试音频的编码格式、采样率需要和业务实际要求的参数一致，避免出现无法识别的问题

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