如何在TestCafe测试中允许Safari摄像头与麦克风权限

一、为什么你原来的代码无效 #

TestCafe的setNativeDialogHandler只能处理网页内的JS原生弹窗（比如alert、confirm这类），但Safari的摄像头/麦克风权限弹窗是系统级弹窗，不属于网页DOM范畴，TestCafe根本没法直接控制它，所以你写的click(Selector('button').withText('Allow'))也找不到这个按钮——因为它不在TestCafe能访问的页面元素里。

二、Sauce Labs上程序化设置Safari权限的方法 #

在Sauce Labs跑自动化测试时，你可以通过配置测试能力（Capabilities）来直接预授权权限，同时启用模拟媒体设备，完全跳过弹窗步骤。

1. 桌面端Safari配置 #

在TestCafe连接Sauce Labs的配置里，添加sauce:options下的Safari偏好设置：

await testCafe
  .createRunner()
  .src('你的测试文件路径')
  .browsers('saucelabs:safari@latest:macOS 13')
  .sauceLabs({
    username: '你的Sauce用户名',
    accessKey: '你的Sauce密钥',
    capabilities: {
      'sauce:options': {
        safari: {
          prefs: {
            'media.navigator.permission.disabled': true, // 直接禁用权限提示，默认允许
            'media.navigator.streams.fake': true // 启用模拟媒体流（mock设备）
          }
        }
      }
    }
  })
  .run();

如果想更精准单独配置摄像头和麦克风权限，也可以把prefs改成：

prefs: {
  'camera': 'allow',
  'microphone': 'allow'
}

2. iOS移动端Safari配置 #

如果是测试iOS上的Safari，需要用Appium的配置项来开启权限：

await testCafe
  .createRunner()
  .src('你的测试文件路径')
  .browsers('saucelabs:iPhone 14 Pro Simulator:iOS 16')
  .sauceLabs({
    username: '你的Sauce用户名',
    accessKey: '你的Sauce密钥',
    capabilities: {
      'appium:settings': {
        allowMediaCapture: true // 允许媒体捕获权限
      },
      'sauce:options': {
        // 其他Sauce相关配置，比如设备名称、系统版本等
      }
    }
  })
  .run();

这样配置后，测试时Safari会自动允许摄像头和麦克风权限，同时使用模拟的媒体设备，完全不需要处理弹窗。

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