时间戳

首页 > 解决方案 > Puppeteer 问题：如何循环遍历元素句柄？

javascript - Puppeteer 问题：如何循环遍历元素句柄？

问题描述

我有一个从 CSS 或 XPath 选择器中提取 textContent 的函数。

有人可以帮助我实现这一目标吗？我很困惑

const nodes = await page.$$('css selector here');
for (const node of nodes) {
    const stuff = await extractText(page, node, 'css selector to extract text') || null;
}

所以它只会在节点具有指定的选择器时提取文本，否则输出为空。

标签： javascriptnode.jspuppeteer

解决方案

如果我理解正确，你可以尝试这样的事情：

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch();

const html = `
  <!doctype html>
  <html>
    <head><meta charset='UTF-8'><title>Test</title></head>
    <body>
      <p>Text 1.</p>
      <p>Text <span>2</span>.</p>
    </body>
  </html>`;

try {
  const [page] = await browser.pages();

  await page.goto(`data:text/html,${encodeURIComponent(html)}`);

  const nodes = await page.$$('p');
  for (const node of nodes) {
    const stuff = await extractText(page, node, 'span') || null;
    console.log(stuff);
  }
} catch (err) { console.error(err); } finally { await browser.close(); }

function extractText(page, node, selector) {
  return page.evaluate(
    (node, selector) => node.querySelector(selector)?.innerText ?? null,
    node,
    selector,
  );
}

推荐阅读