puppeteer - page.$$ 和 ElementHandle 遍历

Question

在阅读了文档和示例后，我仍然无法理解如何ElementHandle通过page.$$.

大多数想要使用page.$$和隐式使用的用例document.querySelectorAll()是获取数组或 NodeList，然后在此基础上工作。

假设我们有一个包含 5 个链接的页面，我想a在我的脚本中打印第二个的 href。这是我尝试过的，但它不起作用。

const linksArray = await page.$$('a');
const the2ndHref = await page.evaluate(linkList => linkList[1].href, linksArray);
console.log('the2ndHref', the2ndHref);
await linksArray.dispose();

你能帮忙吗？

Answer 1

我的猜测是您实际上并不想要 an，ElementHandle因为 anElementHandle代表一个 DOM 元素，您可以在其中使用诸如, ,之类的属性来驱动。clickfocushover

如果要获取链接的 href，可以执行以下操作：

await page.goto('https://www.google.com/search?q=puppeteer')

const LINKS_SELECTOR = 'a'
const the2ndHref = await page.evaluate(selector => {
  const allLinks = document.querySelectorAll(selector)
  return allLinks[1].href
}, LINKS_SELECTOR)

console.log('the2ndHref', the2ndHref)