javascript - Selenium WebDriver — 启动 Chrome，并在控制台面板中打开 DevTools

Question

我知道如何在打开 DevTools 的情况下启动 Chrome，所以请不要告诉我它与 How to open Chrome Developer console in Selenium WebDriver using JAVA 重复。

---

我正在尝试将 DevTools 打开到特定面板。默认情况下，它在 Elements 面板上打开，但我希望它在 Console 面板上打开:

我见过这个命令行开关--devtools-flags，但我还没有找到它的任何示例用法。本质上我想要实现的目标与此类似。显然这不起作用，但你明白了要点:

const { Options } = require('selenium-webdriver/chrome');
// …
const options = new Options().addArguments([
  'auto-open-devtools-for-tabs',
  'devtools-flags="panel=console"' /* <- That doesn't work. What else would?  */
]);
// …

Answer 1

我想出了如何为使用 RSpec 和 Capybara 的 Ruby on Rails 应用程序执行此操作。下面是我用来配置 Capybara 驱动程序以选择“控制台”选项卡并将开发工具停靠在底部的代码:

options = Selenium::WebDriver::Chrome::Options.new
options.add_preference(
  'devtools',
  'preferences' => {
    'currentDockState' => '"bottom"', # Or '"undocked"', '"right"', etc.
    'panel-selectedTab' => '"console"',
  }
)

...

Capybara::Selenium::Driver.new(
  app,
  browser: :chrome,
  options: options,
  desired_capabilities: capabilities,

您应该能够调用setUserPreferences函数来设置用户首选项:https://www.selenium.dev/selenium/docs/api/javascript/module/selenium-webdriver/chrome_exports_Options.html#setUserPreferences

const { Options } = require('selenium-webdriver/chrome');
// …
const options = new Options().addArguments([
  "auto-open-devtools-for-tabs"
]).setUserPreferences({
  "devtools": {
    "preferences": {
      "panel-selectedTab": "\"console\""
      // "currentDockState": "\"bottom\"" // Or "\"undocked\"", "\"right\"", etc.
    }
  }
});

(我还没有针对 JS 进行过测试，所以请尝试一下并告诉我是否有效。)

我通过查看~/Library/Application Support/Google/Chrome/Default/Preferences了解了如何设置这些首选项。这是我的主要 Google Chrome 安装存储我的用户首选项的位置，它是 JSON 数据。

您可以在 devtools => preferences 下查看所有可能的设置。请注意，所有值都是解析为 JSON 的字符串，因此您需要“双重包装”代码中的任何字符串，例如“\”控制台\“”。

您可以打开主 Google Chrome 浏览器并更改 UI 中的设置，然后重新打开您的首选项文件以查看需要设置的 JSON。