Puppeteer 数据抓取中定位嵌套元素的 CSS 选择器正确写法

✅ 正确做法：以 button 为作用域根，全局相对查询

以下代码修正了原始逻辑中的关键错误——不再将 item 绑定到 .css-1tkalz1，而是直接遍历所有 .css-4od5c4 按钮，并在其上下文中分别定位三类字段：

const storesData = await page.$$eval('.css-4od5c4', buttons => 
  buttons.map(button => {
    const getText = selector => {
      const el = button.querySelector(selector);
      return el ? el.textContent.trim() : 'no value';
    };

    return {
      address: getText('.css-iqfm9l:nth-of-type(1)'), // 第一个 .css-iqfm9l（地址）
      city: getText('.css-1cwtvfm'),                   // 唯一的 .css-1cwtvfm（城市）
      amount: getText('.css-177ui4i .css-iqfm9l')     // .css-177ui4i 下的 .css-iqfm9l（数量）
    };
  })
);

console.log(storesData);
// 输出示例：
// [
//   { address: 'Sisjön', city: 'Askim', amount: '3 st' },
//   { address: 'random address...', city: 'some city...', amount: '3 st' }
// ]

? 关键点解析：

• page.$$eval(selector, fn) 是更简洁、更安全的写法，它自动将匹配的 DOM 元素数组传入浏览器上下文，避免手动 Array.from(document.querySelectorAll(...)) 和额外 waitForSelector 的冗余；
• button.querySelector('.css-177ui4i .css-iqfm9l') 能成功命中目标，是因为它从按钮出发，跨越兄弟结构，精准进入右侧
  再找其内部的

  ；

• 使用空值合并操作符 ?? 或条件判断（如示例中的 getText() 封装）可防止 textContent 报错，提升健壮性。

⚠️ 注意事项与进阶建议

• 避免过度依赖动态类名：你观察到的 css-* 类名极可能是 CSS-in-JS（如 Emotion）生成的哈希类，在页面更新后易失效。若站点结构稳定但类名多变，推荐改用语义化定位方式，例如：

  立即学习“前端免费学习笔记（深入）”；

  • 利用文本内容锚定：button:has(p:text-is("Välj butik"))
  • 或结合层级位置（需 Puppeteer v22+ 支持 :has()）：

    amount: getText(':scope > div:nth-child(2) p')

• 备选方案：按

  序号提取（适用于结构绝对固定）

  

  Colossyan

  AI虚拟人出镜视频生成

  下载
  
  若各字段在按钮内

  标签中的顺序恒定（如始终为第1、第2、第4个

  ），可用以下无类名依赖方式：

  const paragraphs = [...button.querySelectorAll('p')].map(p => p.textContent.trim());
  return {
    address: paragraphs[0] || 'no value',
    city: paragraphs[1] || 'no value',
    amount: paragraphs[3] || 'no value' // 注意：跳过中间的 "Välj butik" <p>
  };

  此法牺牲部分可读性，但大幅增强抗样式变更能力。

• 调试技巧：在 page.evaluate 中临时插入 console.log(button.outerHTML) 或使用 Chrome DevTools 的 Elements → Right-click → Copy → Copy selector 验证真实路径，切勿直接复制开发者工具高亮显示的“完整路径”（常含 :nth-child() 等不可靠索引）。

总之，成功的 Puppeteer 抓取始于对 HTML 语义结构的准确理解——找到真正的数据容器（container），再在其范围内做最小必要选择（scoped query），远胜于盲目堆砌复杂选择器或依赖延迟等待。