Puppeteer使用nth-child选择器报错：索引匹配仍找不到元素

核心问题：选择器逻辑错误 #

你遇到的问题根源在于**nth-child选择器的使用逻辑和你获取元素的方式不匹配**：

• 用page.$$(".swatch.selectors > div > input")获取的是所有<div>下的<input>元素集合（比如6个），每个<input>在各自的父<div>里都是第1个子元素。
• 但循环中你用.swatch.selectors > div > input:nth-child(${i+1})，试图找每个<div>下的第i+1个<input>——而实际上每个<div>里只有1个<input>，当i>=1时，这个选择器根本不存在，自然会报错。

修复方案：直接操作元素Handle #

不要只获取元素数量，而是直接保存所有<input>的元素Handle，循环点击每个Handle即可：

const getVariantUrls = async (url) => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto(url, { waitUntil: 'networkidle2' }); // 确保页面加载完成

  const variantUrls = [];
  // 获取所有变体input的元素Handle数组
  const variantInputs = await page.$$(".swatch.selectors > div > input");

  for (const input of variantInputs) {
    // 点击当前input元素（直接用Handle，无需重新选择）
    await input.click();
    
    // 替换sleep，等待URL变化更可靠
    await page.waitForFunction(
      (prevUrl) => window.location.href !== prevUrl,
      {},
      await page.url()
    );
    
    const currentUrl = await page.url();
    variantUrls.push(currentUrl);
  }

  await browser.close();
  return variantUrls;
};

额外优化建议 #

1. 替换sleep为可靠等待：sleep(0.5)依赖固定时间，容易因为页面加载慢导致获取旧URL，用waitForFunction等待URL变化更稳定。
2. 确保元素可交互：如果点击失败，可尝试在页面上下文触发点击：

   await page.evaluate(el => el.click(), input);
   

3. 检查实际触发元素：部分网站会隐藏radio按钮，用视觉元素（比如外层div）触发变体切换，此时需要调整选择器，点击对应的视觉触发元素而非input本身。

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