Puppeteer无法提取<div>下所有<p>元素内容的问题求助

问题分析 #

你的代码存在几个关键问题导致控制台无输出：

1. 页面跳转未等待加载完成：登录后直接调用page.goto，但目标页面可能还没渲染完成，此时获取元素会得到空数组。
2. 登录逻辑的URL判断不准确：page.goto是异步操作，直接判断page.url()可能拿到的是跳转前的地址，无法正确触发登录流程。
3. 未等待目标元素加载：没有确保#consoleDiv下的<p>元素已经渲染完成就尝试获取，导致元素句柄为空。
4. 选择器冗余易出错：原选择器#consoleDiv > div > p:nth-child(n)可以简化为更精准的#consoleDiv .lines p，避免层级匹配错误。

修复后的代码 #

const puppeteer = require('puppeteer');

async function scrapeLog() {
  const browser = await puppeteer.launch({
    headless: true, 
    defaultViewport: false,
    userDataDir: "./tmp"
  });
  const page = await browser.newPage();
  
  // 跳转目标页面，等待网络稳定后再执行后续操作
  await page.goto('https://example.com/console', { waitUntil: 'networkidle2' });

  // 检查是否需要登录，确保页面稳定后判断URL
  if (page.url() === 'https://example.com/login') {
    await page.type('#input-email', 'example@gmail.com');
    await page.type('#input-password', 'example123');
    // 点击登录后同步等待页面跳转完成
    await Promise.all([
      page.click('.button-primary'),
      page.waitForNavigation({ waitUntil: 'networkidle2' })
    ]);
    // 再次跳转目标页面并等待加载完成
    await page.goto('https://example.com/console', { waitUntil: 'networkidle2' });
  }

  // 等待目标p元素加载完成，超时时间10秒
  await page.waitForSelector('#consoleDiv .lines p', { timeout: 10000 });

  // 一次性批量获取所有p元素的文本内容，去除多余空格换行
  const logs = await page.evaluate(() => {
    return Array.from(document.querySelectorAll('#consoleDiv .lines p')).map(el => el.textContent.trim());
  });

  // 输出所有抓取到的日志内容
  logs.forEach(log => console.log(log));

  // 关闭浏览器释放资源
  await browser.close();
}

scrapeLog();

关键修改说明 #

• 页面加载等待：page.goto添加{ waitUntil: 'networkidle2' }，确保页面资源加载完成后再执行后续逻辑。
• 登录跳转同步：用Promise.all同时等待登录点击和页面导航完成，避免提前执行后续代码导致元素未加载。
• 元素加载校验：通过page.waitForSelector确保目标<p>元素已渲染，防止因元素未出现导致的空数组。
• 批量文本获取：在页面上下文内一次性处理所有元素，减少跨上下文调用的开销，同时用trim()清理文本格式。
• 资源释放：添加browser.close()避免运行后残留浏览器进程。

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