Electron环境下Playwright测试：启动DevTools默认打开Console标签

我正在为Electron应用编写E2E测试，使用Playwright Electron实验模块。目前通过以下代码打开DevTools：

const page = await app.firstWindow();
const browserWindow = await app.browserWindow(page);
await browserWindow.evaluate(async (app: BrowserWindow) => {
  app.webContents.openDevTools({ mode: 'detach' });
});

该代码可正常录制UI和DevTools的独立视频，但DevTools默认打开Elements标签，我需要查看Console标签的日志。请问能否在测试启动时切换到Console标签？

可以通过操作DevTools自身的WebContents实现切换到Console标签，具体实现如下：

1. 打开DevTools后，等待其加载完成并获取对应的devToolsWebContents
2. 通过执行JavaScript脚本，要么点击Console标签的DOM元素，要么调用DevTools内部API切换面板

修改后的代码示例：

const page = await app.firstWindow();
const browserWindow = await app.browserWindow(page);
await browserWindow.evaluate(async (win: BrowserWindow) => {
  // 打开分离模式的DevTools
  win.webContents.openDevTools({ mode: 'detach' });

  // 等待DevTools加载完成，确保能获取到它的WebContents
  await new Promise(resolve => {
    const checkLoaded = () => {
      if (win.webContents.devToolsWebContents) {
        resolve(true);
      } else {
        setTimeout(checkLoaded, 100);
      }
    };
    checkLoaded();
  });

  const devToolsContents = win.webContents.devToolsWebContents!;
  
  // 方法1：通过DOM选择器点击Console标签（兼容性可能随DevTools版本变化）
  await devToolsContents.executeJavaScript(`
    const consoleTab = document.querySelector('[aria-label="Console"]');
    if (consoleTab) consoleTab.click();
  `);

  // 方法2：调用DevTools内部API（更可靠，但属于内部接口，需注意版本兼容）
  // await devToolsContents.executeJavaScript(`UI.panels.console.show();`);
});

说明 #

• 必须等待DevTools加载完成后再操作，否则devToolsWebContents会为null
• 方法1依赖DevTools的DOM结构，不同Electron版本可能需要调整选择器（比如可尝试[title="Console"]等备选选择器）
• 方法2使用DevTools的内部UI API，切换更稳定，但该接口不属于公开API，未来可能有变动

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