使用Puppeteer点击元素获取跳转URL遇超时问题求助

问题背景 #

使用Puppeteer爬取学校客户端渲染页面（目标URL：https://kau.ac.kr/web/pages/gc32172b.do）时，遇到以下问题：

• 手动在Chrome中点击带有.tit类的元素可正常触发页面跳转
• 代码中通过await Promise.all([page.waitForNavigation(), page.click(".tit")]);执行时，始终触发超时异常
• 尝试手动设置超时仍无法获取跳转后的新URL

疑问：page.click()是否会创建新页面并完成跳转？

问题代码 #

const puppeteer = require("puppeteer");

async function scrapeData(url) {
  console.log("Target URL: ", url);

  const browser = await puppeteer.launch({ headless: "new" });

  try {
    const page = await browser.newPage();

    await page.goto(url);

    // wait for client-side loading
    await page.waitForSelector(".tit");

    // get texts from html. ignore this code.
    const titles = await page.$$eval(".tit a", (elements) => {
      return elements.map((element) => element.textContent);
    });

    console.log("before click");

    // click element which has ".tit" class.
    // that element have onclick event-listener (checked with chrome manually)
    // however, this code throws timeout exception from `page.waitForNavigation()`
    await Promise.all([page.waitForNavigation(), page.click(".tit")]);

    console.log("navigation success.");

    const newUrl = page.url();

    const result = {
      titles,
      newUrl,
    };

    return result;
  } finally {
    await browser.close();
  }
}

const targetUrl = "https://kau.ac.kr/web/pages/gc32172b.do";
scrapeData(targetUrl)
  .then((result) => {
    console.log("Scraped Titles:", result.titles);
    console.log("New URL after click:", result.newUrl);
  })
  .catch((error) => console.error("Error during scraping:", error));

原因分析与解决方案 #

核心疑问解答 #

page.click()仅模拟用户点击元素的行为，是否触发页面跳转或新页面创建，完全由元素绑定的onclick事件逻辑决定：

• 如果事件是修改当前页面的location.href或使用history API，会触发当前页面的导航
• 如果事件是通过window.open()打开新标签页，不会触发当前页面的导航事件，这也是常见的超时原因

针对性解决方法 #

1. 处理新标签页跳转场景

如果点击后在新标签页打开链接，需要监听浏览器的新目标页面，而非当前页面的导航：

// 替换原有的Promise.all代码
const [newPage] = await Promise.all([
  // 等待新页面出现（URL与当前页面不同）
  browser.waitForTarget(target => target.url() !== page.url()),
  page.click(".tit")
]);
// 等待新页面加载完成
await newPage.waitForLoadState("networkidle2");
const newUrl = newPage.url();

2. 适配SPA路由跳转

如果页面是单页应用（SPA），跳转可能基于history.pushState或hash变化，需要调整waitForNavigation的参数：

// 调整waitUntil参数，适配SPA的加载状态
await Promise.all([
  page.waitForNavigation({ 
    waitUntil: "networkidle2", // 等待网络空闲
    timeout: 10000 // 延长超时时间
  }),
  page.click(".tit")
]);
// 或者直接监听hash变化（如果是hash路由）
await page.click(".tit");
await page.waitForFunction(() => window.location.hash !== "");
const newUrl = page.url();

3. 确保点击事件被正确触发

有时元素可能被遮挡或需要滚动到可见区域才能触发点击：

const titElement = await page.$(".tit");
// 滚动到元素可见
await titElement.scrollIntoView();
// 模拟真实点击
await titElement.click();

// 后续根据跳转类型等待导航或新页面

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