如何使用 puppeteer 在 <div> 列表中进行抓取

Question

我正在寻找一种方法来使用 puppeteer 有效地抓取按以下方式格式化的信息。 假设我在网站上有一个这样划分的列表：

<div id="list">
  <div class="item" pos="0"> 
  <a href="www.somewebsite.com">
    <div class="nameToRetrieve"> Name 1 </div>
  </div>
  <div class="item" pos="1"> 
  <a href="www.somewebsite.com">
    <div class="nameToRetrieve"> Name 2 </div>
  </div>
  <div class="item" pos="2"> 
  <a href="www.somewebsite.com">
    <div class="nameToRetrieve"> Name 3 </div>
  </div>
</div>

如何获取姓名信息（姓名1、姓名2、姓名3？

我试过将它们放入一个对象中，然后放入一个数组中，但我仍然对如何处理它感到困惑。

const listOfStuff = document.getElementById('list').getElementsByClassName('itemResult')

Answer 1

我觉得跟puppeteerAPI关系不大。在现代浏览器 (ES6) 上，转换为数组很优雅，然后只需映射它。请注意，我假设 nameToRetrieve 仅出现在您要检索的内容中，因此无需获取 "list".

var names = Array.from(document.getElementsByClassName("nameToRetrieve")).map(x => x.innerHTML);
console.log(names)

<div id="list">
  <div class="item" pos="0"> 
  <a href="www.somewebsite.com">
    <div class="nameToRetrieve"> Name 1 </div>
  </div>
  <div class="item" pos="1"> 
  <a href="www.somewebsite.com">
    <div class="nameToRetrieve"> Name 2 </div>
  </div>
  <div class="item" pos="2"> 
  <a href="www.somewebsite.com">
    <div class="nameToRetrieve"> Name 3 </div>
  </div>
</div>

Answer 2

在 puppeteer 中有一个特殊的方便方法 page.$$eval 用于此任务：

let result = await page.$$eval('.nameToRetrieve', names => names.map(name => name.textContent));
console.log(result);

This method runs Array.from(document.querySelectorAll(selector)) within the page and passes it as the first argument to pageFunction.

结果将是：

[ ' Name 1 ', ' Name 2 ', ' Name 3 ' ]

如何使用 puppeteer 在 <div> 列表中进行抓取

How to scrape inside <div> list using puppeteer

html

javascript

web-scraping

puppeteer