Docker中Cypress启动Chrome如何设置DevTools默认打开Console标签页

实现步骤 #

• 编辑Cypress插件配置文件cypress/plugins/index.js，通过before:browser:launch钩子注入浏览器偏好配置，该方案完全兼容cypress@6.8.0版本及cypress/browsers镜像环境：

module.exports = (on, config) => {
  on('before:browser:launch', (browser, launchOptions) => {
    // 仅适配Chromium内核浏览器
    if (browser.family === 'chromium' && browser.name !== 'electron') {
      // 自动打开DevTools配置
      launchOptions.args.push('--auto-open-devtools-for-tabs')
      // 配置DevTools默认打开Console标签
      launchOptions.preferences.devtools = {
        preferences: {
          // 指定默认激活面板为控制台
          'panelSelected': 'console',
          // 如需隐藏其他标签，可取消注释下方配置，按需增减要隐藏的面板ID
          // 'hiddenPanels': 'elements,network,sources,performance,application,security'
        }
      }
      return launchOptions
    }
  })
}

• Docker环境运行注意事项
  运行测试时需使用headed模式，配合xvfb实现界面渲染，参考启动命令：
  xvfb-run cypress run --headed --browser chrome
  该配置无需修改容器内Chrome的系统级配置，所有参数均由Cypress在启动浏览器时动态注入，不会影响镜像原有环境。

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