如何实现循环点击按钮至禁用？解决按钮禁用检测返回null问题

• 你的代码存在几个关键问题：
  • 错误使用了page.evalAPI，Puppeteer中没有这个方法，应该用page.$eval或page.evaluate来获取元素状态
  • 选择器逻辑可能有误：如果button-disabled是按钮自身的类，选择器不应加空格（空格代表后代元素），正确写法应为.view-component [aria-label="Next Move"].button-disabled
  • nextBtn未提前获取就调用click，可能导致点击无效
  • 固定的setTimeout可靠性差，应优先使用Puppeteer的等待API来监听按钮状态变化

修正后的代码示例 #

// 循环点击按钮直到其禁用
while (true) {
    // 重新获取按钮元素，避免DOM更新后引用失效
    const nextBtn = await page.$('.view-component [aria-label="Next Move"]');
    if (!nextBtn) break;

    // 检查按钮是否已禁用（二选一即可）
    // 方式1：检查按钮是否拥有button-disabled类
    const isDisabled = await page.$eval(
        '.view-component [aria-label="Next Move"]',
        el => el.classList.contains('button-disabled')
    );
    // 方式2：检查按钮的原生disabled属性（如果页面用这个属性控制禁用）
    // const isDisabled = await page.$eval(
    //     '.view-component [aria-label="Next Move"]',
    //     el => el.disabled
    // );

    if (isDisabled) break;

    // 执行点击操作
    await nextBtn.click();

    // 等待页面状态更新，替代固定延迟（可根据实际情况调整超时时间）
    await page.waitForTimeout(1000);
    // 更可靠的方式：等待按钮变为禁用状态，超时则继续循环
    // await page.waitForSelector('.view-component [aria-label="Next Move"].button-disabled', { timeout: 3000 }).catch(() => {});
}

核心优化点 #

• 每次循环重新获取按钮元素，避免DOM更新后旧元素引用失效
• 直接在浏览器上下文内检查元素状态（类或disabled属性），比判断元素是否存在更准确
• 用waitForTimeout或waitForSelector替代固定延迟，适配不同页面的加载速度

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