如何正确使用 Puppeteer 提取网页中多个元素的文本内容-js教程-PHP中文网

如何正确使用 Puppeteer 提取网页中多个元素的文本内容

本文详解 Puppeteer 中 page.$$() 与 page.evaluate() 的协同用法，解决因选择器不精准或执行逻辑不当导致“只提取首个元素”的常见问题，并提供性能优化方案（如资源拦截、批量 DOM 处理）。

本文详解 puppeteer 中 `page.$$()` 与 `page.evaluate()` 的协同用法，解决因选择器不精准或执行逻辑不当导致“只提取首个元素”的常见问题，并提供性能优化方案（如资源拦截、批量 dom 处理）。

在使用 Puppeteer 进行网页数据抓取时，一个高频痛点是：明明写了循环遍历多个元素，却只输出第一个结果——这通常并非代码语法错误，而是由选择器匹配失效、DOM 可见性未等待或evaluate 执行时机不当所致。以目标站点 https://www.superanimes.biz/lista-de-animes 为例，原始代码中：

const productsHandles = await page.$$("#containerVideos > section > section > div.post_cat.notranslate");

该选择器虽能定位到父容器，但后续 el.querySelector('div.title_cat > span') 在部分节点中可能返回 null（例如某些 .post_cat.notranslate 内部并无 .title_cat 结构），而 catch 块为空导致错误静默，最终仅成功打印首个有效项。

✅ 正确做法分三步：

精炼并验证选择器层级：聚焦真正承载目标内容的最小可复用单元。观察页面结构可知，每个动画条目实际包裹在 <div class="video_poster"> 内，且标题位于 <code>a > div.title_cat > span。因此应将主选择器改为：
```
const selector = '#containerVideos > section > section > .post_cat.notranslate > .video_poster';
```
显式等待元素可见：避免因异步渲染未完成导致 $$ 返回空数组或不完整集合：
```
await page.waitForSelector(selector, { visible: true });
```
优先使用单次 page.evaluate() 批量提取（推荐）：相比在循环中反复调用 page.evaluate()（每次触发 JS 上下文切换，性能开销大），更高效的方式是在浏览器端一次性遍历所有匹配节点并结构化返回：

const products = await page.evaluate((sel) => {
  return Array.from(document.querySelectorAll(sel)).map(el => ({
    title: el.querySelector('a > div.title_cat > span')?.textContent?.trim() || '',
    link: el.querySelector('a')?.href || ''
  }));
}, selector);

products.forEach(p => console.log(p.title));

⚠️ 注意事项：

使用可选链操作符 ?. 和空值合并 || '' 防止因个别节点结构异常导致整个 evaluate 报错中断；

若需提升加载速度，可拦截非必要资源（如图片、字体、媒体）：

await page.setRequestInterception(true);
page.on('request', req => 
  ['image', 'font', 'media'].includes(req.resourceType()) 
    ? req.abort() 
    : req.continue()
);