如何用Puppeteer与Node.js抓取Nike订单追踪号按钮元素？

问题根源 #

你代码里用的sc-196beyx-0、u2kmlc-0这类CSS类名，是前端框架动态生成的随机类名，页面每次加载都会变化，导致选择器完全失效，定位不到目标按钮。

解决方案 #

放弃依赖动态类名，改用稳定的元素定位方式，优先选语义化属性或固定文本，具体实现如下：

1. 定位追踪按钮

优先用按钮的aria-label、data-testid这类专为测试/自动化预留的属性，或者直接匹配按钮文本：

// 方式一：通过aria-label定位（推荐，属性一般不会随意变更）
await page.waitForSelector('[aria-label="查看追踪信息"]', { timeout: 10000 }); // 设置10秒超时
await page.click('[aria-label="查看追踪信息"]', { delay: 1000 });

// 方式二：通过按钮文本定位（如果按钮文本固定）
await page.waitForXPath('//button[contains(text(), "查看追踪")]');
const [trackingBtn] = await page.$x('//button[contains(text(), "查看追踪")]');
await trackingBtn.click({ delay: 1000 });

2. 抓取追踪号

同样用稳定规则获取追踪号，比如找带测试属性的元素，或匹配文本特征：

const trackingInfo = await page.evaluate(() => {
  // 方式一：通过data-testid属性定位
  const trackingElements = document.querySelectorAll('[data-testid="tracking-number"]');
  // 方式二：通过文本特征筛选（比如元素包含"追踪号"字样）
  // const trackingElements = Array.from(document.querySelectorAll('div'))
  //   .filter(el => el.innerText.includes('追踪号:'))
  //   .map(el => el.innerText.replace('追踪号:', '').trim());
  
  return Array.from(trackingElements).map(el => el.innerText.trim());
});

console.log('已采集到追踪号:', trackingInfo);

3. 额外优化建议

• 加错误处理：用try-catch包裹操作，避免因元素找不到导致程序崩溃
• 确保页面加载完成：点击按钮前可加await page.waitForNavigation({ waitUntil: 'networkidle2' })，等待网络空闲
• 检查iframe：如果追踪按钮嵌套在iframe里，需要先切换到iframe再操作：

  const iframe = await page.waitForSelector('iframe[name="tracking-iframe"]');
  const frame = await iframe.contentFrame();
  // 后续用frame代替page执行点击、查询操作
  

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