Puppeteer如何正确使用waitForSelector？循环检测aria-invalid输出异常排查

核心问题点 #

• waitForSelector 未添加 await 关键字
  你调用 page.waitForSelector('[aria-invalid="false"]') 时没有等待Promise执行完成，代码不会阻塞等待选择器匹配结果，无论属性是否符合要求都会直接执行后续逻辑，导致所有字符组合都会被打印。
• page.type 方法参数语法错误
  page.type 的合法参数仅为：目标选择器、输入文本、可选配置项。你将后续的点击、等待等异步操作全部作为参数传给了page.type，整个异步执行顺序完全不符合预期。
• 缺少匹配失败的异常处理
  waitForSelector 默认找不到匹配元素时会抛出超时错误，你没有做异常捕获逻辑，匹配失败的场景也不会中断当前分支的执行。

修复后的参考代码 #

const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
const Name = "Name";
// 可根据实际页面响应调整超时时间，单位ms
const WAIT_TIMEOUT = 1500;

for (let i = 35; i >= 0; i--) {         
  for (let j = 35; j >= 0; j--) { 
    // 输入用户名
    await page.type('input[name="Username"]', Name + letters[i] + letters[j]);
    await page.waitForTimeout(50);
    // 切换焦点触发校验
    await page.click('[name="firstName"]');
    await page.waitForTimeout(500);
    
    try {
      // 等待属性匹配，超时则代表不符合条件
      await page.waitForSelector('[aria-invalid="false"]', { timeout: WAIT_TIMEOUT });
      console.log(letters[i] + letters[j]);
    } catch (e) {
      // 超时说明属性为true，跳过打印
    }
    
    // 清空输入框准备下一次循环
    await page.click('[name="Username"]');
    await page.waitForTimeout(500);
    // 更高效的清空方式，不需要多次按回退
    await page.evaluate(() => {
      document.querySelector('input[name="Username"]').value = '';
    });
    await page.waitForTimeout(100);
  }
}

额外优化建议 #

• 用page.evaluate直接清空输入框，替代多次按回退键的操作，稳定性更高
• 用let声明循环变量i和j，避免var的变量提升问题
• 给waitForSelector设置合理的超时时间，适配页面的校验响应速度

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