在Puppeteer循环中新建标签页触发导航超时问题及优化咨询

看起来你在Puppeteer爬取数据时踩了几个常见的坑，我帮你逐一拆解问题并给出修正方案：

第一种方法：新建标签页循环爬取的问题 #

你的代码里有几个明确的错误，直接导致了超时和标签页异常：

1. 错误的waitForNavigation调用时机
   你在newTab.goto(URLS[i])之前调用了await newTab.waitForNavigation()，这会让Puppeteer等待一个从未触发的导航操作，直接触发30秒超时。实际上goto方法本身就会等待页面导航完成（默认等待load事件），完全不需要提前调用waitForNavigation。

2. 混乱的标签页关闭逻辑
   你在循环里调用await collectNamePage.close()，但collectNamePage这个变量根本没定义（应该是newTab）；而且如果每次循环都关闭标签页，下一次循环再用newTab就会操作一个已经销毁的页面，直接报错。正确的做法是要么每次循环新建一个标签页，要么复用同一个标签页，循环结束后再关闭。

3. 缺失的数据采集逻辑
   collected_data没有实际的取值代码，需要补充从目标页面提取数据的逻辑。

修正后的第一种方法代码（每次新建标签页）： #

(async () => { 
  const browser = await puppeteer.launch({ headless: true }); 
  const mainpage = await browser.newPage(); 
  console.log('goto main page'.green); 
  await mainpage.goto(mainURL); 
  console.log('collecting some url'.green); 
  const URLS = await mainpage.evaluate(() => Array.from( 
    document.querySelectorAll('.result-actions a'), 
    (element) => element.href 
  )); 
  if (typeof URLS[0] === 'string') console.log('OK'.green); 
  console.log('collecting finished'.green); 

  const data = []; 
  for (let i = 0, n = URLS.length; i < n; i++) { 
    const newTab = await browser.newPage(); // 每次循环新建标签页
    console.log('create new tab'.green); 
    // 可选：用domcontentloaded加快加载速度，减少超时概率
    await newTab.goto(URLS[i], { waitUntil: 'domcontentloaded' }); 
    await newTab.waitForSelector('.profile-phone-column span a'); 
    console.log(`Go to ${URLS[i]} using new tab`.green); 
    // 实际采集目标数据
    const collected_data = await newTab.$eval('.profile-phone-column span a', el => el.textContent.trim());
    data.push(collected_data); 
    // 关闭当前标签页
    await newTab.close(); 
    console.log(data); 
  } 

  await mainpage.close(); 
  await browser.close(); 
  console.log('closing browser'.green); 
})();

如果想减少资源消耗，也可以复用单个标签页：

// 复用标签页版本
const newTab = await browser.newPage(); 
for (let i = 0, n = URLS.length; i < n; i++) { 
  await newTab.goto(URLS[i], { waitUntil: 'domcontentloaded' }); 
  await newTab.waitForSelector('.profile-phone-column span a'); 
  const collected_data = await newTab.$eval('.profile-phone-column span a', el => el.textContent.trim());
  data.push(collected_data); 
} 
await newTab.close(); // 循环结束后统一关闭

第二种方法：使用page.$$()的核心误区 #

你提到用page.$$()收集URL后通过elementHandle.$()采集数据失败，这里的关键误解是：page.$$()获取的是当前页面（主页）的元素句柄，这些句柄只绑定在主页的DOM上下文里，完全无法用来访问其他URL页面的内容。

简单来说，你收集的URL指向的是外部页面，但主页的元素句柄在页面导航到新URL后就完全失效了——原来的DOM已经被销毁，句柄自然无法再操作新页面的元素。

如果想不用新建标签页，正确的思路是：在主页收集URL后，复用同一个页面依次导航到每个目标URL，再采集数据（和上面的复用标签页方案逻辑一致），而不是试图用主页的元素句柄跨页面操作。

修正后的第二种思路代码： #

(async () => { 
  const browser = await puppeteer.launch({ headless: true }); 
  const page = await browser.newPage(); 
  await page.goto(mainURL); 

  const URLS = await page.evaluate(() => Array.from( 
    document.querySelectorAll('.result-actions a'), 
    el => el.href 
  )); 

  const data = []; 
  for (const url of URLS) { 
    await page.goto(url, { waitUntil: 'domcontentloaded' }); 
    await page.waitForSelector('.profile-phone-column span a'); 
    const collected_data = await page.$eval('.profile-phone-column span a', el => el.textContent.trim());
    data.push(collected_data); 
  } 

  await page.close(); 
  await browser.close(); 
})();

额外小建议 #

• 遇到超时问题时，可以尝试调整goto的timeout参数（比如{ timeout: 60000 }），或者用domcontentloaded代替默认的load事件，减少不必要的等待。
• 可以给循环加上try/catch逻辑，避免单个URL爬取失败导致整个脚本崩溃。

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