JavaScript Puppeteer：如何检测网页中元素是否存在

以下是几种可靠的方式，帮你判断按钮元素是否存在（或可见），避免点击时报错：

1. 直接查询元素Handle #

使用page.$()方法，它会返回匹配选择器的第一个元素的ElementHandle，如果找不到元素则返回null，直接通过条件判断即可：

const button = await page.$('button.submit-btn'); // 替换成你的按钮选择器
if (button) {
  await button.click();
} else {
  console.log("按钮不存在，跳过点击");
}

2. 等待元素（带超时容错） #

如果按钮是动态加载的，可使用page.waitForSelector()并设置超时时间，超时后不会抛出错误，而是返回null：

try {
  const button = await page.waitForSelector('button.submit-btn', { timeout: 3000 }); // 3秒超时
  if (button) {
    await button.click();
  }
} catch (err) {
  console.log("超时未找到按钮");
}

注：如果不设置timeout，默认超时时间是30秒，超时会直接抛出错误，所以建议按需设置短超时配合判断。

3. 检测元素是否可见（而非仅存在于DOM） #

有时候元素存在于DOM中，但被隐藏（比如display: none或visibility: hidden），此时点击也无效，可以通过页面上下文判断可见性：

const isButtonVisible = await page.evaluate(() => {
  const btn = document.querySelector('button.submit-btn');
  if (!btn) return false;
  // 检查元素是否可见
  const rect = btn.getBoundingClientRect();
  return rect.width > 0 && rect.height > 0 && btn.offsetParent !== null;
});

if (isButtonVisible) {
  await page.click('button.submit-btn');
} else {
  console.log("按钮不可见或不存在");
}

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