Cypress自动化调用摄像头时无法触发权限弹窗的问题求助

核心原因 #

Cypress默认的Chrome启动参数除了你已经移除的--use-fake-device-for-media-stream和--use-fake-ui-for-media-stream外，还可能因无头模式、额外的权限阻止参数，或系统级权限设置导致弹窗无法显示。

对应Chrome参数说明 #

不存在专门“启用权限弹窗”的参数，关键是确保没有阻止弹窗的参数，并配置正确的运行模式：

• 移除所有阻止权限请求的参数：除了你已经过滤的两个，还要确保没有--deny-permission-prompts、--headless（无头模式下Chrome默认隐藏权限弹窗）这类参数。
• 若使用新无头模式（Chrome 96+），需要添加--headless=new --enable-features=PermissionsPolicy来允许权限请求，但新无头模式仍无法显示可视化弹窗，建议优先使用有头模式。

具体解决步骤 #

1. 切换到Chrome有头模式运行
   Cypress 10+默认使用无头模式启动Chrome，无头模式下不会显示权限弹窗。修改Cypress配置（cypress.config.js/cypress.config.ts），确保启动有头浏览器：

   export default defineConfig({
     e2e: {
       setupNodeEvents(on, config) {
         on('before:browser:launch', (browser = {}, launchOptions) => {
           // 移除fake设备和UI参数
           launchOptions.args = launchOptions.args.filter(arg => 
             arg !== '--use-fake-device-for-media-stream' && 
             arg !== '--use-fake-ui-for-media-stream'
           );
           // 移除无头模式参数（如果存在）
           launchOptions.args = launchOptions.args.filter(arg => arg !== '--headless');
           return launchOptions;
         });
       },
     },
     // 指定使用有头Chrome
     browser: 'chrome',
   });
   

   运行测试时不要加--headless参数。

2. 检查Mac系统隐私权限
   打开「系统偏好设置」→「安全性与隐私」→「摄像头」，确保Chrome被允许访问摄像头。若未开启，即使浏览器弹窗，系统也会阻止请求。

3. 排查cypress-browser-permissions库冲突
   该库的作用是自动授予权限，而非触发弹窗。如果你需要手动操作权限弹窗，建议卸载该库，避免其修改浏览器权限配置导致弹窗被抑制。

4. 验证浏览器参数是否生效
   在测试中添加代码打印浏览器启动参数，确认所有阻止弹窗的参数已被移除：

   on('before:browser:launch', (browser = {}, launchOptions) => {
     console.log('Chrome launch args:', launchOptions.args);
     // 过滤参数逻辑...
     return launchOptions;
   });
   

额外提示 #

WebDriver能正常显示弹窗，是因为它默认以有头模式启动Chrome，且未添加Cypress的那些fake设备参数。Cypress的核心差异在于默认的无头模式和预配置的媒体流模拟参数，只要调整这两点，就能让权限弹窗正常显示。

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