AWS CloudWatch Synthetics Canary无法完整加载页面问题排查

1. 美亚的机器人检测触发 #

美亚对自动化工具的检测远严于加亚，CloudWatch Synthetics用的无头Puppeteer浏览器很容易被识别为机器人。此时美亚会返回简化版页面或阻止部分动态资源加载——虽然HTTP状态码是200（所以Canary显示执行成功），但页面内容已经和正常浏览器显示的不一致。

解决办法：

• 模拟真实浏览器的User-Agent：在获取page后添加以下代码：

  await page.setUserAgent('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.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
  await page.waitForTimeout(3000); // 等待滚动后内容加载
  

2. 页面等待逻辑不匹配美亚的动态加载特性 #

美亚商品页有大量动态渲染、延迟加载的内容，默认脚本的networkidle0等待条件（半秒内无网络请求）可能过早判定页面加载完成，后续仍有资源在加载；固定15秒的等待也可能没覆盖所有内容的渲染时间。

解决办法：

• 将networkidle0改为networkidle2（半秒内最多2个网络请求），更适配动态内容多的页面：

  const response = await page.goto(url, { waitUntil: ['networkidle2'], timeout: 30000});
  

• 替换固定等待为等待关键元素加载完成，比如等待美亚商品列表容器出现：

  // 替换原有的await page.waitFor(15000);
  await page.waitForSelector('.s-main-slot', { timeout: 20000 });
  

3. 无头浏览器默认视口尺寸过小 #

CloudWatch Synthetics的无头浏览器默认视口可能是移动端尺寸，美亚在小视口下会折叠布局，导致截图显示不完整；而加亚的布局在默认视口下刚好能完整展示。

解决办法：

• 获取page后设置桌面端视口：

  await page.setViewport({ width: 1920, height: 1080 });
  

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