Puppeteer 中的选择器语法

Posted 2023-03-08

【中文标题】Puppeteer 中的选择器语法

【英文标题】：Selector Syntax in Puppeteer

【发布时间】：2020-10-29 09:30:24

【问题描述】：

我正在尝试创建一个脚本，该脚本的部分功能是使用 Puppeteer 在网页上按下按钮。在尝试执行如下所示的行后，我不断收到“不是有效的选择器”错误或未定义的变量。

var termselector = await page.$$( ":button" );
//yields "not a valid selector"

或

var termselector = await page.$$( "#zci-images > div.detail.detail--slider.detail--images.detail--xd > div > div.detail__panes.js-detail-panes > div:nth-child(1) > div > div.detail__body.detail__body--images > div > div > a" );
//yields "termselector undefined"

也许我只是从根本上误解了选择器的工作原理，但我查看了一些 JQuery 文档，但我似乎仍然无法正确格式化我的选择器。我在哪里可以找到用于 puppeteer 的正确选择器语法的规则？请原谅我的无知

【参考方案1】：

随行：

await page.$$( );

你必须使用css 选择器：https://www.w3schools.com/cs-s-ref/css_selectors.asp

或者你也可以使用xpath查询：https://www.w3schools.com/xml/xpath_syntax.asp

await page.$x( );

如果你熟悉JQuery，不妨试试cheerio：

https://tshaped.io/javascript-scraping-for-marketers-cheerio-and-puppeteer/https://github.com/cheeriojs/cheerio

---

your provided link 上第一张图片的 CSS 选择器示例：

$$('#zero_click_wrapper img[src^="//external-content"]')[0]

意思是：

开始匹配 html 节点 ID：zero_click_wrapper ...后跟图像img，src 标记以//external-content 开头

【讨论】：

请允许我说得更具体一些。如果您访问此链接（我在脚本中使用的链接）：duckduckgo.com/?q=bruh&t=hk&iax=images&ia=images，您可以查看选择器："#zci-images > div.detail.detail--slider.detail--images.detail--xd > div > div.detail__panes.js-detail-panes > div:nth-child(1) > div > div.detail__body.detail__body--images > div > div > a"，如果您右键单击该元素并复制其路径，您将获得该选择器。如何将其格式化为可用的选择器？

这是不匹配的。 $$("#zci-images > div.detail.detail--slider.detail--images.detail--xd > div > div.detail__panes.js-detail-panes > div:nth-child(1) > div > div.detail__body.detail__body--images > div > div > a")[0]

你想检索什么？图片？

在我的帖子中添加了示例

是的，或者任何类型的文件。我真的只是想了解这种语言的正确选择器语法。在我对 CSS 选择器的理解中，我似乎遗漏了一些东西。谢谢你的例子。我在哪里可以找到有关您专门使用的格式的文档？另外：var termselector = await page.$$('#zero_click_wrapper img[src^="//external-content"]')[0]; 产生了“未定义术语选择器”