开启Remote Debugging并连接devtoolsFrontendUrl后Selenium无法操作元素

启动Chrome并开启远程调试后，一旦通过devtoolsFrontendUrl连接到DevTools前端，就无法使用Selenium对页面元素进行交互操作，但不连接该URL时一切正常。换成Puppeteer也遇到同样问题。

我的Selenium脚本 #

const webdriver = require("selenium-webdriver");
const chrome = require("selenium-webdriver/chrome");
let opts = new chrome.Options();
opts.addArguments("remote-debugging-port=9222")
opts.addArguments("headless")
opts.addArguments("remote-debugging-address=0.0.0.0")
opts.addArguments("window-size=1920,1080")
const { Builder, Capabilities } = webdriver;
let capabilities = Capabilities.chrome();
driver = await new Builder()
  .usingServer("http://localhost:4444/wd/hub")
  .withCapabilities(capabilities)
  .setChromeOptions(opts)
  .build();
await driver.get("My URL")

远程调试接口返回结果 #

访问localhost:9222/json得到以下JSON内容：

[ {
   "description": "",
   "devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9222/devtools/page/5C9612F350A70AF13943240DE0B1EF05",
   "id": "5C9612F350A70AF13943240DE0B1EF05",
   "title": "title",
   "type": "page",
   "url": "myURL",
   "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/5C9612F350A70AF13943240DE0B1EF05"
}, {
   "description": "",
   "devtoolsFrontendUrl": "/devtools/inspector.html?ws=localhost:9222/devtools/page/FB791E87874704F96453713AB412C02C",
   "id": "FB791E87874704F96453713AB412C02C",
   "title": "about:blank",
   "type": "page",
   "url": "about:blank",
   "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/FB791E87874704F96453713AB412C02C"
} ]

问题复现 #

连接到以下DevTools前端URL后：
http://localhost:9222/devtools/inspector.html?ws=localhost:9222/devtools/page/5C9612F350A70AF13943240DE0B1EF05

可以正常看到Selenium打开的页面及DevTools，但执行以下点击元素的代码时无任何响应：

driver.findElement(webdriver.By.xpath(`//button[contains(text(),'Sign In')]`)).click();

未连接DevTools前端URL时，这段代码可以正常运行。换成Puppeteer操作同样出现该问题。

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