puppeteer querySelector 不是有效的选择器答案

【问题标题】：puppeteer querySelector is not a valid selectorpuppeteer querySelector 不是有效的选择器
【发布时间】：2019-06-23 13:02:29
【问题描述】：

我有如下代码：

page.click('div.button-table div:contains(Who) div.square-button:nth-child(1)')

puppeteer 运行这段代码时会报错：

简要

Failed to execute 'querySelector' on 'Document': 'div.button-table div:contains(Who) div.square-button:nth-child(1)' is not a valid selector.

完整

 Error: Evaluation failed: DOMException: Failed to execute 'querySelector' on 'Document': 'div.button-table div:contains(Who) div.square-button:nth-child(1)' is not a valid selector.
at __puppeteer_evaluation_script__:1:33
  at ExecutionContext.evaluateHandle (node_modules/puppeteer/lib/ExecutionContext.js:124:13)
  at <anonymous>
-- ASYNC --
  at ExecutionContext.<anonymous> (node_modules/puppeteer/lib/helper.js:144:27)
  at ElementHandle.$ (node_modules/puppeteer/lib/ExecutionContext.js:529:50)
  at ElementHandle.<anonymous> (node_modules/puppeteer/lib/helper.js:145:23)
  at Frame.$ (node_modules/puppeteer/lib/FrameManager.js:456:34)
  at <anonymous>
-- ASYNC --
  at Frame.<anonymous> (node_modules/puppeteer/lib/helper.js:144:27)
  at Frame.click (node_modules/puppeteer/lib/FrameManager.js:735:31)
  at Frame.<anonymous> (node_modules/puppeteer/lib/helper.js:145:23)
  at Page.click (node_modules/puppeteer/lib/Page.js:973:29)
  at Proxy.fillInAudience (libs/page/brand_create_quote_page.js:67:21)
  at Proxy.<anonymous> (libs/logger.js:38:27)
  at Context.it (ui/brand/create_quote_spec.js:53:16)
  at <anonymous>

但是这个选择器可以在 Devtools 中成功运行 - $('div.button-table div:contains(Who) div.square-button:nth-child(1)').text()

我还想知道如果我删除div:contains(Who)，puppeteer 可以运行它而不会惊慌。

有什么想法吗？

谢谢！

【问题讨论】：

可能是因为你使用了 jQuery 选择器 :contains api.jquery.com/contains-selector 并且 puppeteer 中没有 jQuery。所以它不是原生 DOM 选择器，这就是 puppeteer 崩溃的原因
@Grynets 感谢您的提醒。我想这就是原因！

标签： javascript node.js puppeteer webautomation

【解决方案1】：

Puppeteer 在内部使用document.querySelector。所以你可以使用任何CSS Selector。这里的问题是contains 不是 CSS 选择器，而是 JQuery 功能。

好消息是您可以使用 Chrome 开发者工具测试您的选择器并使用document.querySelector 测试它们。

【讨论】：