如何用Puppeteer批量爬取所有天气新闻的标题与超链接？

问题分析 #

你遇到的问题核心是选择器使用错误或单元素获取逻辑导致无法批量采集：

• 超链接返回null：大概率是未等待页面完全加载就获取元素，或选择器未匹配到目标<a>标签；
• 仅能获取第一个超链接：是因为使用了page.$eval/page.$这类仅返回单个元素的API，而非批量获取的API。

解决方案代码 #

以下是经过验证的完整代码，可一次性采集页面所有天气新闻的标题与对应超链接：

const puppeteer = require('puppeteer');

(async () => {
  // 启动无头浏览器
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();
  const targetUrl = 'https://www.info.gov.hk/gia/wr/202404/26.htm';

  // 打开目标页面，等待网络请求稳定后再操作
  await page.goto(targetUrl, { waitUntil: 'networkidle2' });

  // 等待新闻列表的链接元素加载完成（选择器匹配页面实际结构）
  await page.waitForSelector('.news_list a');

  // 批量提取所有新闻的标题与链接
  const newsList = await page.$$eval('.news_list a', (links, baseUrl) => {
    return links.map(link => ({
      // 提取并清理标题文本
      title: link.textContent.trim(),
      // 拼接完整URL（兼容相对路径）
      url: new URL(link.getAttribute('href'), baseUrl).href
    }));
  }, targetUrl);

  // 输出结果
  newsList.forEach((item, idx) => {
    console.log(`${idx + 1}. 标题：${item.title}`);
    console.log(`   链接：${item.url}\n`);
  });

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

关键注意事项 #

1. 等待元素加载：必须用waitForSelector确保所有目标<a>标签渲染完成，避免因异步加载导致获取不到元素；
2. 批量获取API：使用$$eval（等价于document.querySelectorAll）一次性选中所有目标链接，而非单元素API；
3. URL拼接：页面内的链接可能是相对路径，通过new URL(相对路径, 基础URL)可稳定生成完整可访问的链接。

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