Puppeteer点击无id元素父节点实现Footshop鞋码选择问题问询

问题根因 #

1. CSS选择器本身不支持[text="xxx"]语法，用该写法无法匹配到对应元素，是触发parentElement为null报错的核心原因
2. 注释掉的XPath写法使用全等匹配文本，未考虑元素文本前后可能存在的换行、空格等空白字符，导致匹配失败
3. 原有page.goto写法存在语法错误，配置对象与URL之间多写了逗号，导致waitUntil、timeout配置完全未生效，页面加载状态不稳定也会提升后续元素匹配失败的概率
4. 网站类名后缀为前端构建生成的随机串（如default-text__21bVM中的21bVM），写死完整类名的写法一旦网站发版更新就会失效

修复后可用方案 #

// 修正goto语法错误，使用networkidle2等待网络空闲，加载状态更稳定
await page.goto(data[ii][0], { 
    waitUntil: 'networkidle2',
    timeout: 0 
});

// 打开尺码选择菜单，使用类名前缀包含匹配，避免随机后缀影响
await page.click('span[class*="default-text__"]');

// 等待尺码列表渲染完成，替换固定delay，适配不同网络环境
await page.waitForSelector('div[class*="size-item"]', { timeout: 5000 });

const targetSize = String(data[ii][1]);
// 推荐方案：修正XPath，使用normalize-space清除文本前后空白后匹配
const sizeXpath = `//div[contains(@class, "col-3") and normalize-space(text())="${targetSize}"]`;
await page.waitForXPath(sizeXpath, { timeout: 3000 });
const [sizeBtn] = await page.$x(sizeXpath);
await sizeBtn.click();

// 备用方案：如果XPath匹配仍有问题，使用evaluate遍历元素匹配文本，兼容性更高
/*
await page.evaluate((size) => {
  const allSizeEls = document.querySelectorAll('div[class*="col-3"]');
  for (let el of allSizeEls) {
    if (el.textContent.trim() === size) {
      el.parentElement.click();
      break;
    }
  }
}, targetSize);
*/

// 点击提交按钮
await page.click('span[class*="text__"]');

注意事项 #

• 所有类名匹配都使用[class*="前缀"]的包含匹配写法，不需要写死随机后缀，适配网站迭代更新
• 所有等待逻辑都用内置的waitFor系列API，不要用固定delay，避免网络波动导致元素还未渲染就执行后续操作
• 如果出现部分尺码不可点击的情况，可在点击前增加判断逻辑，过滤掉售罄禁用的尺码项

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