puppeteer 中的页面选择器奇怪行为答案

【问题标题】：Page selector odd behaviors in puppeteerpuppeteer 中的页面选择器奇怪行为
【发布时间】：2019-03-15 22:33:03
【问题描述】：

我正在尝试从我在 puppeteer 中抓取的页面的 DOM 中获取一个元素。

页面加载完成后，我调用page.$('.class-name')。它返回一些{ ClickTale: {} } 形式的奇怪对象。

当我从 chrome 控制台调用 document.querySelector('.class-name') 时，我得到一个完全不同的对象，该对象对应于我正在寻找的元素。

我的目标是访问 puppeteer 中所述元素的 href 属性。谢谢

【问题讨论】：

您能否提供页面 URL 和重现问题的最小脚本？

标签： javascript puppeteer

【解决方案1】：

page.$(selector) 不同于 document.querySelector，

您在浏览器中运行querySelector，但在nodeJS 上运行page.$。
page.$ 根据结果返回 ElementHandle 或 null。 querySelector 返回一个 Dom 元素。

您可以使用$eval 获取所述元素的href。这将执行一个 querySelector 并对结果进行评估。

page.$eval('.class-name', elem => elem.href)

【讨论】：

【解决方案2】：

我也是 puppeteer 的新手，Jak 也经历过。我会在回复中收到ElementHandle JSHandle。我设法使用getProperty 提取链接，但我可能做错了。对此的更好解释是here

let te_responce = await page[0].$$('div[class="supergrid-bucket"] > a')
  console.log(`Number of entries ${te_responce.length}`)

for (let i = 0; i < te_responce.length; i++) {
  console.log(`link ${await(await te_responce[i].getProperty('href')).jsonValue()}`)
}

【讨论】：