如何基于DOM元素可见性编写Puppeteer的if/else逻辑？

你的问题核心是原代码中page.waitForSelector({visible: true})会在弹窗未出现时超时报错，导致脚本中断。以下两种方案可以实现“弹窗可见则点击，不可见则跳过”的逻辑：

方案一：主动检查元素存在性与可见性 #

通过page.$()获取元素句柄，判断是否存在后再检查可见性，避免阻塞脚本：

const acceptCookiesSelector = `button[class="ncss-btn-primary-dark pt3-sm pb3-sm pt2-lg pb2-lg ta-sm-c u-full-width"]`;

// 获取Cookie按钮元素句柄，不存在则返回null
const cookieButton = await page.$(acceptCookiesSelector);

if (cookieButton) {
  // 验证元素是否可见
  const isVisible = await cookieButton.isVisible();
  if (isVisible) {
    // 点击按钮并等待导航（如果点击后页面会跳转）
    await Promise.all([
      page.click(acceptCookiesSelector),
      page.waitForNavigation({ waitUntil: 'networkidle2' }) // 可根据实际页面调整等待策略
    ]);
  }
}

// 后续业务逻辑
await page.waitForTimeout(2500);

方案二：用try-catch捕获超时错误 #

给waitForSelector设置短超时，弹窗未出现时捕获错误并继续执行：

const acceptCookiesSelector = `button[class="ncss-btn-primary-dark pt3-sm pb3-sm pt2-lg pb2-lg ta-sm-c u-full-width"]`;

try {
  // 设置3秒超时，等待弹窗可见
  await page.waitForSelector(acceptCookiesSelector, { visible: true, timeout: 3000 });
  // 点击按钮并处理导航
  await Promise.all([
    page.click(acceptCookiesSelector),
    page.waitForNavigation()
  ]);
} catch (err) {
  // 超时即视为弹窗未出现，忽略错误继续
  console.log("Cookie弹窗未加载，跳过确认操作");
}

await page.waitForTimeout(2500);

两种方案都能解决你的问题，方案一更主动，方案二更简洁，可根据你的脚本场景选择。

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