Puppeteer部署AWS服务器用代理时无法找到选择器的问题

排查方向与解决方案 #

1. 确认页面实际渲染状态 #

本地和AWS代理环境的页面可能存在差异，先通过截图或打印HTML确认目标元素是否存在：

// 点击按钮后截图，查看实际页面
await page.click('.upay-manager-card-add');
await page.screenshot({ path: 'aws_page.png', fullPage: true });

// 打印页面HTML，检查目标选择器是否存在
const pageHtml = await page.content();
console.log(pageHtml);

2. 替换固定等待为动态等待 #

固定的waitForTimeout(2000)在服务器环境可能不足以加载元素，换成等待元素可见或相关容器加载：

await page.waitForSelector('.upay-manager-card-add', { visible: true });
await page.click('.upay-manager-card-add');

// 等待目标元素所在的容器加载（比如弹窗）
await page.waitForSelector('.arco-modal-container', { visible: true });
// 再等待目标选择器可见
try {
  await page.waitForSelector('.arco-radio-mask', { visible: true, timeout: 30000 });
  await page.click('.arco-radio-mask');
} catch (e) {
  console.log('ERROR Selector - ', e);
}

3. 检查代理IP的影响 #

部分网站会根据IP地区展示不同内容，代理IP的地区可能和本地不一致，导致元素结构变化：

• 确认代理IP的归属地区，是否和本地访问的地区一致
• 尝试更换其他地区的代理IP测试

4. 模拟真实浏览器环境 #

AWS无头浏览器容易被网站识别为爬虫，添加真实浏览器参数规避检测：

const browser = await puppeteer.launch({
  headless: 'new',
  args: [
    '--no-sandbox',
    '--disable-setuid-sandbox',
    '--disable-blink-features=AutomationControlled',
    '--user-agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36"'
  ]
});

// 关闭自动化检测标识
await page.evaluateOnNewDocument(() => {
  delete window.navigator.__proto__.webdriver;
  window.navigator.chrome = { runtime: {} };
});

5. 确保点击操作有效 #

无头环境下元素可能不在视图内或未完全可点击，优化点击逻辑：

// 等待元素可点击再执行点击，添加模拟延迟
await page.waitForSelector('.upay-manager-card-add', { visible: true, timeout: 30000 });
await page.click('.upay-manager-card-add', { delay: 150 }); // 模拟人类点击延迟

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