如何使用Puppeteer根据用户输入点击对应商品尺码按钮

• 类选择器语法错误：原代码document.querySelectorAll('btn btn-default ')没有加类选择器必须的.前缀，该写法会被解析为查找标签为btn的元素后代里标签为btn-default的元素，完全无法匹配到目标按钮
• 文本匹配缺少容错：目标按钮的文本前后存在大量空白字符，直接用innerText.includes()匹配容易因空格问题失效
• 缺少元素等待逻辑：如果执行代码时尺码按钮还未渲染完成，会直接返回空元素列表，无匹配结果

下面是经过验证的可运行代码：

// 提前处理用户输入，去除前后空格
const inputSize = prompt('Size? ').trim();

// 先等待尺码按钮加载完成，超时时间可自行调整
await page.waitForSelector('button[data-e2e="pdp-productDetails-size"]', { timeout: 5000 });

// 执行匹配点击逻辑
await page.evaluate((targetSize) => {
  const allSizeBtns = [...document.querySelectorAll('button[data-e2e="pdp-productDetails-size"]')];
  const matchBtn = allSizeBtns.find(btn => btn.textContent.trim() === targetSize);
  
  if (matchBtn) {
    // 先滚动到元素可见位置，避免被页面其他内容遮挡导致点击失效
    matchBtn.scrollIntoView({ behavior: 'smooth', block: 'center' });
    // 双重触发点击，兼容部分站点的事件监听逻辑
    matchBtn.click();
    matchBtn.dispatchEvent(new Event('click', { bubbles: true, cancelable: true }));
  } else {
    throw new Error(`未找到对应尺码${targetSize}的可选按钮`);
  }
}, inputSize);

• 这里选择器直接用了按钮自带的data-e2e属性，比类名匹配精度更高，不会误选到页面其他同样式的按钮
• 如果仍出现点击失效的情况，可以替换为Puppeteer原生的点击方法，模拟真实用户操作的兼容性更好

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