如何用Puppeteer page.$$eval实现双层嵌套循环爬取试题答案数据

核心逻辑 #

page.$$eval的回调函数运行在浏览器上下文，你可以直接在回调内对每个外层试题元素调用原生DOM查询方法遍历内层答案，不需要嵌套调用Puppeteer的$$eval接口，性能和兼容性更好。

示例参考 #

示例HTML结构 #

<!-- 可替换为你实际的页面结构 -->
<div class="question-item">
  <p class="question-content">1+1等于多少？</p>
  <ul class="answer-list">
    <li class="answer-item">1</li>
    <li class="answer-item">2</li>
    <li class="answer-item">3</li>
  </ul>
</div>
<div class="question-item">
  <p class="question-content">以下哪个是前端框架？</p>
  <ul class="answer-list">
    <li class="answer-item">Spring</li>
    <li class="answer-item">Vue</li>
  </ul>
</div>

目标输出格式 #

[
  {
    "question": "1+1等于多少？",
    "answers": ["1", "2", "3"]
  },
  {
    "question": "以下哪个是前端框架？",
    "answers": ["Spring", "Vue"]
  }
]

实现代码 #

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();
  await page.goto('你的目标页面URL');
  // 等待外层试题元素加载完成，动态页面必加
  await page.waitForSelector('.question-item');

  // 核心采集逻辑
  const examData = await page.$$eval('.question-item', (questionNodes) => {
    // 遍历所有外层试题
    return questionNodes.map(node => {
      // 采集试题内容
      const question = node.querySelector('.question-content').textContent.trim();
      // 采集当前试题下的所有答案
      const answers = Array.from(node.querySelectorAll('.answer-item'))
        .map(answerNode => answerNode.textContent.trim());
      return { question, answers };
    });
  });

  console.log(JSON.stringify(examData, null, 2));
  await browser.close();
})();

注意事项 #

• 代码中的所有选择器需要替换为你实际页面对应的元素选择器
• $$eval回调内只能使用浏览器原生API，不能调用Node.js环境的Puppeteer相关方法
• 如果需要采集元素属性值，替换textContent为对应属性获取方法即可，比如getAttribute('value')

内容的提问来源于stack exchange，提问作者user3285469