使用Puppeteer上传大文件超时求助：等待方式失效该如何解决？

这问题我之前处理大文件上传时也碰到过，默认的等待方法确实不太适配这种超长耗时的操作，咱们一步步来捋清楚问题出在哪，以及更优雅的解决办法：

为什么你之前的方法会失败？ #

先拆解下你踩的坑：

• page.waitForSelector/page.waitForFunction：这两个方法的默认超时时间都是30秒，而你的上传要5-6分钟，远远超过了默认阈值，自然触发超时。直接改全局超时虽然能解决，但确实不够灵活，会影响其他操作的超时逻辑。
• page.waitForNavigation：这个方法是用来等待页面跳转的，而大文件上传基本都是单页应用内的异步操作，不会触发页面导航，所以这个方法从一开始就不适用，白白等超时。

更优雅的解决思路 #

1. 自定义轮询式等待（推荐） #

不用单次设置超长超时，而是循环尝试检查目标元素，每次检查用较短的超时，失败后间隔几秒再重试，直到元素出现或达到总时长上限。这种方式更灵活，也不会阻塞其他逻辑：

async function waitForElementWithRetry(page, selector, maxTotalSeconds) {
  const checkInterval = 5000; // 每5秒检查一次
  const maxAttempts = Math.floor(maxTotalSeconds * 1000 / checkInterval);
  let attempts = 0;

  while (attempts < maxAttempts) {
    try {
      // 每次检查只等10秒，避免无意义的长时间等待
      const element = await page.waitForSelector(selector, { timeout: 10000 });
      if (element) return element;
    } catch (err) {
      attempts++;
      await page.waitForTimeout(checkInterval);
    }
  }
  throw new Error(`等待元素 ${selector} 超时，总时长已达 ${maxTotalSeconds} 秒`);
}

// 使用示例：设置总等待时长为6分钟（360秒）
await waitForElementWithRetry(page, "#你的成功标签ID", 360);

2. 监听上传进度分步等待 #

如果页面有上传进度提示（比如进度条、百分比文本），可以先等待进度完成，再等待成功标签，这样能减少后续等待的超时时间：

// 先等待进度达到100%（假设进度条元素ID为upload-progress）
await page.waitForFunction(() => {
  const progressEl = document.querySelector("#upload-progress");
  return progressEl && progressEl.textContent.trim() === "100%";
}, { timeout: 360000 }); // 6分钟总超时覆盖上传全程

// 进度完成后，成功标签应该很快出现，这里设置10秒超时足够
await page.waitForSelector("#你的成功标签ID", { timeout: 10000 });

3. 监听上传请求的完成 #

如果上传是通过单个POST请求（或分块上传后的最终确认请求），可以直接监听请求完成事件，再等待成功标签：

// 先捕获上传请求（根据你的上传接口URL调整判断条件）
const uploadRequest = await page.waitForRequest(req => {
  return req.url().includes("/api/upload") && req.method() === "POST";
});

// 点击上传按钮
await page.click("#upload-button");

// 等待上传请求的响应返回
await uploadRequest.waitForResponse();

// 再等待成功标签出现
await page.waitForSelector("#你的成功标签ID", { timeout: 10000 });

如果是分块上传，需要调整逻辑，监听所有分块请求完成或最终的确认请求

4. 临时调整超时（折中方案） #

如果上面的方法都不适用，也可以临时修改页面的默认超时，用完后恢复，避免影响其他操作：

// 保存原超时设置
const originalTimeout = page.defaultTimeout();
// 设置6分钟超时（360000毫秒）
page.setDefaultTimeout(360000);

try {
  await page.click("#upload-button");
  await page.waitForSelector("#你的成功标签ID");
} finally {
  // 恢复原超时设置
  page.setDefaultTimeout(originalTimeout);
}

内容的提问来源于stack exchange，提问作者Shamees Ibn Yousaf