如何使用Puppeteer操作屏幕共享时弹出的系统选择弹窗？

你找不到这个弹窗的元素是因为它属于浏览器原生的系统级弹窗，不是网页DOM的一部分，所以Chrome DevTools无法识别，也不能用普通的DOM选择方法操作，直接通过浏览器启动配置或CDP协议就可以绕开弹窗完成操作

方案1：启动时配置参数自动跳过弹窗（最常用） #

直接在Puppeteer启动时添加指定参数，点击共享按钮后浏览器会自动选择你预设的共享源，不会弹出选择窗口，示例配置如下：

const browser = await puppeteer.launch({
  // 屏幕共享不支持旧版无头模式，必须用有界面模式或者新版无头模式
  headless: false,
  args: [
    // 自动选择整个屏幕作为共享源，要共享特定窗口就替换参数值为对应窗口的精确标题
    '--auto-select-desktop-capture-source=Entire screen',
    // 开启屏幕捕获权限
    '--enable-usermedia-screen-capturing',
    // 自动跳过所有媒体流权限请求弹窗
    '--use-fake-ui-for-media-stream',
    // 非HTTPS环境下也允许屏幕捕获（测试本地环境时用）
    '--allow-http-screen-capture',
  ]
});

方案2：通过CDP协议动态选择共享源 #

如果需要运行时动态切换不同的共享源，不想写死启动参数，可以调用Chrome DevTools协议的相关接口直接完成选择，无需触发原生弹窗：

// 创建CDP会话
const client = await page.target().createCDPSession();
// 给Discord域名授予媒体权限
await client.send('Browser.grantPermissions', {
  permissions: ['videoCapture', 'audioCapture'],
  origin: 'https://discord.com'
});
// 指定共享源，screen:0:0对应第一个屏幕，也可替换为窗口、标签页对应的ID
await client.send('MediaDevices.setCaptureDeviceId', {
  deviceId: 'screen:0:0'
});

注意事项 #

• 旧版Puppeteer的无头模式（headless: true）不支持屏幕共享功能，测试优先用headless: false有界面模式，新版无头模式headless: 'new'仅v19+版本支持该功能
• 共享特定窗口时，--auto-select-desktop-capture-source的参数值必须和窗口标题完全匹配，否则会触发弹窗
• Discord有内置反爬机制，频繁自动化操作可能触发账号风控，建议测试使用小号，操作之间添加合理延迟

内容的提问来源于stack exchange，提问作者João Vitor