Puppeteer实战：如何检测元素display属性是否已变更？

我编写了一个基于Puppeteer的自动化脚本，用于批量参与线上活动，要求每个活动仅参与一次。页面中通过带有has-entered类的元素标记活动状态：未参与时该元素的style="display:none"，参与后该样式会被移除。

我原本通过page.$(selector)结合elementHandle.boundingBox()编写了isVisible函数来检测元素可见性，但该函数持续报错。相关代码及HTML示例如下：

HTML示例 #

<div class="st_style_page 123-entered already-entered-float" style="display:none;">
</div>

原isVisible函数 #

const isVisible = async (page, selector) => {
  const elementHandle = await page.$(selector);
  if (elementHandle) {
    const boundingBox = await elementHandle.boundingBox();
    return boundingBox !== null;
  } else {
    return false;  // 如果没有匹配元素，认为不可见
  }
};

简化脚本逻辑 #

const puppeteer = require('puppeteer-extra');

// 上述isVisible函数...

(async () => {
  const browser = await puppeteer.launch({ headless: false });  
  const page = await browser.newPage();

  try {
    await page.goto('https://website.com/page');  // 跳转活动列表页
    
    // 登录等前置逻辑（省略）...

    // 提取活动数据
    const eventElements = await page.$$('.event_class');
    const eventData = await Promise.all(eventElements.map(async (eventElement) => {
      const eventId = await eventElement.$eval('[onclick]', node => node.getAttribute('onclick').match(/\d+/)[0]);
      return { eventElement, eventId };
    }));

    console.log("筛选并参与未参与的活动");
    for (const { eventId } of eventData) {
      // 此处isVisible检测逻辑报错
      if (await isVisible(page, `#${eventId}-entered`)) {
        console.log("活动已参与: " + eventId);
        continue;
      }

      // 参与活动逻辑（省略）...
    }             

  } catch (error) {
    console.error("发生错误: ", error);
  } finally {
    console.log("关闭浏览器");
    await browser.close();
  }

})();

1. 直接通过page.evaluate检查计算样式（最可靠） #

直接在浏览器上下文里获取元素的计算样式，判断display是否为none，这种方式不受元素位置、父元素状态的影响，准确性最高：

// 替换原isVisible函数为专用的已参与检测函数
const isEventEntered = async (page, eventId) => {
  return page.evaluate((id) => {
    const element = document.getElementById(`${id}-entered`);
    if (!element) return false; // 元素不存在，视为未参与
    const computedStyle = window.getComputedStyle(element);
    // 检测display是否非none，即元素可见（已参与）
    return computedStyle.display !== 'none';
  }, eventId);
};

在循环中使用：

if (await isEventEntered(page, eventId)) {
  console.log(`活动 ${eventId} 已参与，跳过`);
  continue;
}

2. 使用Puppeteer内置的page.isVisible()（推荐，Puppeteer v10+） #

Puppeteer v10及以上版本提供了内置的可见性检测方法page.isVisible()，它会自动处理计算样式、元素尺寸、父元素可见性等多种情况，无需自己实现：

// 直接替换原isVisible调用
if (await page.isVisible(`#${eventId}-entered`)) {
  console.log(`活动 ${eventId} 已参与，跳过`);
  continue;
}

3. 修复原isVisible函数 #

原函数报错通常是因为boundingBox()在某些场景下会抛出异常（比如元素存在但属于不可见的DOM分支），添加try-catch捕获异常即可：

const isVisible = async (page, selector) => {
  try {
    const elementHandle = await page.$(selector);
    if (!elementHandle) return false;
    const boundingBox = await elementHandle.boundingBox();
    return boundingBox !== null;
  } catch (err) {
    return false; // 捕获异常，默认返回不可见
  }
};

原函数的问题在于boundingBox()并非总能安全返回值——当元素display:none时返回null，但如果元素存在但因父元素隐藏、DOM结构动态变化等原因无法获取边界框，会直接抛出异常，导致脚本中断。使用计算样式检测或内置方法能避免这类问题。

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