如何让Cypress执行测试时自动打开Chrome DevTools并聚焦控制台标签

目前Cypress官方没有提供直接的配置参数来指定DevTools默认选中控制台标签，--auto-open-devtools-for-tabs 仅能实现自动打开DevTools，但默认聚焦Elements标签。不过可以借助Chrome调试协议（CDP）配合自定义命令实现需求，步骤如下：

• 在Cypress的support/e2e.js（旧版本为support/index.js）中添加自定义命令：

  Cypress.Commands.add('focusDevToolsConsole', () => {
    cy.wrap(null).then(() => {
      // 先启用Runtime协议，确保控制台面板可被切换
      return Cypress.automation('remote:debugger:protocol', {
        command: 'Runtime.enable'
      }).then(() => {
        // 切换到控制台面板
        return Cypress.automation('remote:debugger:protocol', {
          command: 'DevToolsPanel.setPanel',
          params: { panelName: 'console' }
        })
      })
    })
  })
  

• 在测试套件的前置钩子中调用该命令，确保每次测试启动时都切换到控制台：

  beforeEach(() => {
    cy.focusDevToolsConsole()
  })
  

• 重要提醒：

  • 此方法仅适用于Chrome浏览器，依赖Chrome调试协议。
  • 需确保Cypress版本在6.0及以上，该版本开始支持remote:debugger:protocol自动化命令。
  • 执行测试时仍需保留--auto-open-devtools-for-tabs参数，保证DevTools自动打开。

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