Puppeteer脚本运行不稳定、下拉选择器失效、Chrome开发者工具文本变动咨询

核心问题原因 #

• 固定时延page.waitFor(100)可靠性极低：页面渲染速度受网络、设备性能、前端异步逻辑影响，固定等待时长无法适配所有场景，是执行结果随机的核心原因
• waitForSelector用法错误：该方法第二个参数为配置对象，直接传目标值'VA'会导致参数失效，选择器等待逻辑完全不符合预期
• DOM ID动态变化：你提到的开发者工具内容来回变动，大概率是表单元素的ID是前端动态生成的（比如ui_address_1270里的数字段随机变化），写死固定ID会随机出现元素找不到的问题
• 重复设置setDefaultNavigationTimeout属于冗余操作：该配置是全局导航超时规则，不需要每次操作前重复设置，且普通元素交互不受该配置控制

可行解决方案 #

你提到的循环逻辑可以解决该问题，具体落地逻辑和优化方案如下：

• 封装重试循环+超时兜底工具函数：针对元素不存在、操作失败的场景做自动重试，最多重试N次后再抛出错误，替代不可靠的固定等待
• 优化选择器写法：不要完全依赖动态ID，结合属性匹配、父级特征组合定位，避免动态ID变化导致选择器失效
• 下拉选择前先校验选项可用性：调用page.select前先等待目标option加载完成，避免下拉框数据未渲染导致选择失败
• 统一设置全局配置，移除冗余重复的超时设置

优化后代码示例 #

// 封装通用重试函数，最多重试retryCount次，每次间隔delay毫秒
async function retryOperation(operation, retryCount = 3, delay = 500) {
  for (let i = 0; i < retryCount; i++) {
    try {
      return await operation();
    } catch (error) {
      if (i === retryCount - 1) throw error;
      await page.waitForTimeout(delay);
    }
  }
}

async function fillBilling(page) {
  // 全局只需要设置一次导航超时即可
  page.setDefaultNavigationTimeout(5000);

  // 填充姓名，选择器用属性匹配兼容动态ID
  await retryOperation(async () => {
    await page.waitForSelector('[id$="firstName"]', { timeout: 2000 });
    await page.type('[id$="firstName"]', 'John');
  });

  await retryOperation(async () => {
    await page.waitForSelector('[id$="lastName"]', { timeout: 2000 });
    await page.type('[id$="lastName"]', 'Doe');
  });

  // 填充街道信息
  await retryOperation(async () => {
    // 如果street的ID前缀固定可以用^=匹配，按需调整选择器规则
    await page.waitForSelector('[id$=".street"]', { timeout: 2000 });
    const streetInputs = await page.$$('[id$=".street"]');
    await streetInputs[0].type('97 N Armistead St');
    await streetInputs[1].type('Alexandria');
  });

  // 选择州下拉框
  await retryOperation(async () => {
    await page.waitForSelector('[id$=".state"]', { timeout: 2000 });
    // 先等待VA选项加载完成再选择
    await page.waitForSelector('[id$=".state"] option[value="VA"]', { timeout: 2000 });
    await page.select('[id$=".state"]', 'VA');
  });
}

补充说明 #

如果页面的动态ID规则和示例不同，可以根据实际DOM结构调整选择器的匹配规则，比如用class、name属性、父元素嵌套关系定位，稳定性会远高于写死完整ID。

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