Node.js Puppeteer如何点击无name或id属性的li元素尺码选择器

Puppeteer完全支持点击这类尺码选择li元素，之前方法失效是定位逻辑、交互时机和站点DOM特性不匹配导致的，具体原因和解决方案如下：

问题原因 #

• 首次使用的XPath未限定元素范围，//*[contains(., 'xxx')]会匹配所有包含目标尺码文本的DOM节点，大概率拿到的不是尺码选择器对应的li元素，点击自然无效
• 基于data-original-title的CSS选择器失效，是因为该属性是悬浮提示的动态渲染属性，执行选择时可能还未挂载到li节点上，或属性值的空格、格式与传入参数不匹配
• 部分情况下元素未滚动到可视区域、或站点对模拟点击有拦截，也会导致点击不生效

可行解决方案 #

方案1：精准XPath定位+原生元素操作 #

const targetSize = data[ii][1].toString().trim();
// 限定只匹配尺码选择区域的li元素，消除冗余匹配
const [sizeBtn] = await page.$x(`//div[contains(@class, 'product-form__size-list')]//li[normalize-space(text()) = '${targetSize}']`);

if (sizeBtn) {
  // 先滚动到元素可见区域
  await sizeBtn.scrollIntoViewIfNeeded();
  // 等待元素处于可点击状态
  await sizeBtn.waitForElementState('enabled');
  await sizeBtn.click();
}

方案2：浏览器上下文执行点击（拦截场景兜底） #

如果方案1仍失效，直接在页面JS上下文执行查找和点击，绕过Puppeteer模拟点击的限制：

const targetSize = data[ii][1].toString().trim();
await page.evaluate((size) => {
  // 遍历所有尺码选项li找到目标节点
  const targetLi = Array.from(document.querySelectorAll('li.product-form__size-option')).find(li => li.textContent.trim() === size);
  if (targetLi) {
    // 先触发原生点击
    targetLi.click();
    // 兜底触发鼠标事件，适配站点绑定的交互逻辑
    targetLi.dispatchEvent(new MouseEvent('mousedown', { bubbles: true, cancelable: true }));
    targetLi.dispatchEvent(new MouseEvent('mouseup', { bubbles: true, cancelable: true }));
  }
}, targetSize);

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