WaitForSelector超时但元素已显示，无法点击拒填手机号弹窗按钮

核心问题分析 #

你的代码存在几个明确错误，导致无法正常点击目标按钮：

• 选择器格式错误：page.waitForSelector里的button[class= css-10e85z4 errp0sa0写法有问题，class属性值开头多了空格，且多类名的属性选择器需要用引号包裹；更推荐用类选择器组合button.css-10e85z4.errp0sa0，简洁且不易出错。
• getElementsByClassName参数错误：这个方法只接收类名，不需要带标签名，你传入的'button css-10e85z4 errp0sa0'是无效的，正确参数应为'css-10e85z4 errp0sa0'。
• 冗余操作：Puppeteer自带page.click()方法，无需手动通过document API查找元素再点击，直接用选择器调用该方法更可靠。

修复后的代码 #

async function regectingnumber(page) {
    try {
        console.log("Rejecting number");
        console.log("waiting...");
        // 用类选择器组合等待元素，稳定性更高
        await page.waitForSelector('button.css-10e85z4.errp0sa0', { timeout: 60000 });
        console.log("元素已找到，准备点击");
        // 直接调用page.click完成点击操作
        await page.click('button.css-10e85z4.errp0sa0');
        console.log("Number entered!");
    } catch (err) {
        console.error(err);
    }
}

额外排查建议 #

• 若仍无法点击，检查目标按钮是否在iframe内：如果弹窗是iframe嵌入的，需先通过page.frames()找到对应iframe，切换后再操作元素。
• 检查元素是否有动态类名：部分网站会用随机类名，此时可改用更稳定的选择器，比如按钮文本（需启用Puppeteer选择器扩展，写法为button:contains("你的按钮文本")）或data-*属性。
• 尝试等待元素可交互：如果元素已显示但不可点击，可通过page.waitForFunction等待元素状态：

  await page.waitForFunction(() => {
    const btn = document.querySelector('button.css-10e85z4.errp0sa0');
    return btn && !btn.disabled;
  }, { timeout: 60000 });
  

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