使用Puppeteer爬取帖子列表后，如何抓取详情页的昵称、评论等内容？

要抓取每个帖子详情页的昵称、评论等信息，你可以在获取列表页数据后，遍历每个帖子链接，逐一访问并提取详情内容。以下是修改后的代码示例：

await page.waitForTimeout(5000); // 注意参数为数字，无需加引号
console.log('crawlling start');

// 1. 抓取列表页基础数据
const cafecrawlling = await page.evaluate(() => {
  const iframeDoc = document.querySelector('#iframe').contentDocument;
  const posts = Array.from(iframeDoc.querySelectorAll('tr > td:first-of-type .board-list .inner_list .article'));
  const Post_name = posts.map(v => v.textContent.replace(/\s+/g, ''));
  const Post_link = posts.map(v => v.href);
  const Post_nickname = Array.from(iframeDoc.querySelectorAll('tr > td:nth-of-type(2) .p-nick .m-tcol-c')).map(v => v.textContent);
  const Post_date = Array.from(iframeDoc.querySelectorAll('tr > td:nth-of-type(3)')).map(v => v.textContent);

  return Post_name.map((v, i) => ({
    postname: v,
    postlink: Post_link[i],
    nickname: Post_nickname[i],
    postdate: Post_date[i],
  }));
});

// 2. 遍历帖子，抓取详情页内容
const postsWithDetails = await Promise.all(cafecrawlling.map(async (post) => {
  // 打开新页面访问详情链接
  const detailPage = await browser.newPage();
  await detailPage.goto(post.postlink, { waitUntil: 'networkidle2' });

  // 等待详情页iframe加载完成
  await detailPage.waitForSelector('#iframe');
  const detailData = await detailPage.evaluate(() => {
    const iframeDoc = document.querySelector('#iframe').contentDocument;
    
    // 抓取详情页发布者昵称（可根据实际DOM调整选择器）
    const detailNickname = iframeDoc.querySelector('.nick_area .nickname')?.textContent || '';
    
    // 抓取评论列表，需根据页面实际结构修改选择器
    const comments = Array.from(iframeDoc.querySelectorAll('.comment_list .comment_wrap')).map(comment => ({
      commenterNickname: comment.querySelector('.comment_nick')?.textContent || '',
      commentContent: comment.querySelector('.comment_content')?.textContent.replace(/\s+/g, '') || '',
      commentTime: comment.querySelector('.comment_time')?.textContent || ''
    }));

    return {
      detailNickname,
      comments
    };
  });

  await detailPage.close(); // 关闭详情页释放资源

  // 合并列表数据与详情数据
  return {
    ...post,
    ...detailData
  };
}));

console.log(postsWithDetails);
console.log('crawlling end');

核心注意事项： #

• 元素等待：使用waitForSelector确保iframe和目标元素完全渲染，避免DOM未加载导致的抓取失败
• 页面管理：通过browser.newPage()创建新页面访问详情，避免干扰原列表页状态，抓取完成后及时关闭页面
• 选择器适配：详情页DOM结构与列表页不同，需根据目标网站实际的HTML结构调整选择器（比如评论区域的选择器）
• 异步优化：用Promise.all并行处理多个详情页抓取，提升整体爬取效率

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