使用Puppeteer开发球鞋Bot时，Zalando尺码按钮点击失效如何解决？

核心问题分析 #

1. 动态class选择器不可靠：你代码里使用的长串class是Zalando动态生成的防爬虫标识，每次页面加载都会变化，导致选择器直接失效。
2. 冗余的点击回调：page.click()本身就会触发元素点击，不需要额外传递elem => elem.click()参数。
3. 未明确指定鞋码逻辑：现有代码只是盲目点击按钮，没有针对目标鞋码做定位匹配。

解决方案 #

改用稳定的元素定位方式，确保元素可交互，并明确指定目标鞋码：

• 优先使用data-testid、aria-label这类专为测试设计的属性，或通过文本内容定位元素
• 等待元素可见且可交互，必要时滚动到元素视图范围内
• 精准匹配目标鞋码的按钮

修改后的代码示例 #

const puppeteer = require('puppeteer');

const product_url = "https://www.zalando.se/jordan-air-1-mid-hoega-sneakers-armory-navywhiteblack-joc12n001-k12.html";
const targetSize = "EU 49"; // 替换成你需要的鞋码

async function givePage() {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.setViewport({ width: 1200, height: 800 }); // 设置窗口尺寸，确保元素正常加载
  return page;
}

async function addToCart(page) {
  // 等待网络空闲后再操作，确保页面完全加载
  await page.goto(product_url, { waitUntil: 'networkidle2' });

  // 处理Cookie弹窗（容错处理，避免弹窗未出现导致阻塞）
  try {
    await page.waitForSelector("button[class*='uc-btn-primary']", { visible: true, timeout: 5000 });
    await page.click("button[class*='uc-btn-primary']");
  } catch (err) {
    console.log("无Cookie弹窗或加载超时");
  }

  // 等待目标尺码按钮加载完成
  await page.waitForFunction(
    (size) => document.querySelector(`button[data-testid='size-article']:has-text("${size}")`),
    { timeout: 10000 },
    targetSize
  );

  // 定位目标尺码按钮并滚动到视图内
  const sizeButton = await page.$(`button[data-testid='size-article']:has-text("${targetSize}")`);
  await sizeButton.scrollIntoView();
  await page.waitForTimeout(500); // 等待滚动完成（可选，根据页面加载速度调整）

  // 点击选中鞋码
  await sizeButton.click();

  // 点击加入购物车（用aria-label定位，避免依赖动态class）
  await page.waitForSelector("button[aria-label='Lägg till i varukorgen']", { visible: true });
  await page.click("button[aria-label='Lägg till i varukorgen']");
}

async function checkout() {
  const page = await givePage();
  await addToCart(page);
}

checkout();

关键改进说明 #

• 用data-testid='size-article'结合文本匹配定位尺码按钮，比动态class稳定数倍
• 添加networkidle2等待策略，确保页面资源完全加载
• 对Cookie弹窗做容错处理，避免异常阻塞流程
• 滚动到目标尺码按钮，解决大尺码不在初始视图的问题
• 用aria-label定位加入购物车按钮，彻底摆脱动态class依赖

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