Puppeteer中表单单次点击提交失败，如何实现自动重新点击？

这种偶发的表单提交失败确实挺闹心的，我之前做自动化脚本时也碰到过类似情况。核心思路就是找到提交成功后的明确信号，如果这个信号在指定时间内没出现，就自动重试点击。给你几个实用的实现方向：

1. 等待页面导航完成（最通用的场景） #

大部分表单提交后会跳转到新页面，这时候可以直接等待URL变化或导航完成。如果超时没完成，就判定提交失败并重试：

async function submitWithRetry(page, maxRetries = 3) {
  let retries = 0;
  while (retries < maxRetries) {
    try {
      // 先确保按钮可见可点击，避免点击无效
      await page.waitForSelector('#submit-button', { visible: true, timeout: 5000 });
      await page.click('#submit-button');
      
      // 等待页面导航完成，networkidle2表示网络请求基本稳定
      await page.waitForNavigation({ waitUntil: 'networkidle2', timeout: 10000 });
      console.log('表单提交成功！');
      break;
    } catch (error) {
      retries++;
      console.log(`提交失败，正在重试第${retries}次...`);
      // 重试前短暂等待，避免频繁触发反爬
      await page.waitForTimeout(1000);
    }
  }
  if (retries === maxRetries) {
    throw new Error('超过最大重试次数，表单提交失败');
  }
}

2. 等待成功提示元素出现（单页应用场景） #

如果提交后不跳转页面，而是在当前页显示成功提示（比如弹窗、文案），就等待这个标志性元素出现：

async function submitWithRetry(page, maxRetries = 3) {
  let retries = 0;
  while (retries < maxRetries) {
    try {
      await page.waitForSelector('#submit-button', { visible: true });
      await page.click('#submit-button');
      
      // 等待成功提示元素加载完成
      await page.waitForSelector('.success-alert', { visible: true, timeout: 10000 });
      console.log('提交成功！');
      break;
    } catch (error) {
      retries++;
      console.log(`重试第${retries}次...`);
      await page.waitForTimeout(1000);
    }
  }
}

注意：一定要用唯一的、不会在其他场景出现的元素选择器，避免误判。

3. 监听提交请求的响应状态（精准判断） #

如果表单是通过AJAX/fetch提交的，可以直接监听对应的接口请求，判断响应是否成功：

async function submitWithRetry(page, maxRetries = 3) {
  let retries = 0;
  while (retries < maxRetries) {
    try {
      // 提前监听提交接口的请求
      const submitRequest = page.waitForRequest(request => 
        request.url().includes('/api/submit-form') && request.method() === 'POST'
      );
      
      await page.click('#submit-button');
      const request = await submitRequest;
      const response = await request.response();
      
      // 检查响应状态是否为成功（200-299区间）
      if (response.ok()) {
        console.log('提交请求成功！');
        break;
      } else {
        throw new Error(`接口响应失败，状态码：${response.status()}`);
      }
    } catch (error) {
      retries++;
      console.log(`提交失败，重试第${retries}次：${error.message}`);
      await page.waitForTimeout(1500);
    }
  }
}

额外注意事项 #

• 不要设置无限重试，一定要加最大重试次数，防止进入死循环
• 重试前的等待时间可以根据网站情况调整，避免频繁操作触发反爬机制
• 如果是按钮点击没触发，检查下是否有元素遮挡、按钮是否处于disabled状态，可以在点击前加上await page.waitForFunction('document.querySelector("#submit-button").disabled === false')

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