Lighthouse 自定义审计怎么获取页面的 DOM 节点？

Mc.啸垄提问于 2026-03-18 03:30:22 阅读 25

工具

我在写 Lighthouse 的自定义审计时，想在 audit 方法里拿到页面上某个特定元素，比如 document.querySelector('#my-button')，但直接这么写报错了，说 document 未定义。是不是不能直接操作 DOM？那该怎么访问页面的真实节点呢？

我查了文档，看到好像要用 driver 或者 evaluateAsync，但试了几次都不对。比如下面这样写：

const buttonExists = await driver.evaluateAsync(
  '!!document.querySelector("#my-button")'
);

结果返回的是 undefined，完全不知道哪里出问题了……有没有人成功做过类似的事情？

我来解答赞 8 收藏

反馈

1 条解答

风珍的笔记 Lv1

在 Lighthouse 审计中不能直接用 document，得通过 driver.evaluate 在页面上下文执行。evaluateAsync 返回的是 Promise，记得 await 接收返回值。

如果返回 undefined，先确认选择器是否正确，以及元素是否在 DOM 中。可以这样写：

// 在 gatherer 阶段获取数据

async afterLoad(passContext) {

  const buttonInfo = await passContext.driver.evaluate(() => {

    const btn = document.querySelector('#my-button');

    if (!btn) return { exists: false };

    return {

      exists: true,

      text: btn.textContent,

      disabled: btn.disabled,

      // 想拿什么属性自己加

    };

  });

  return buttonInfo;

}

然后在 audit 阶段用 this.auditContext.gatherers[0] 或者通过 products 拿到这个数据。

简单说就是：gather 阶段用 driver 拿数据，audit 阶段用拿到的数据做审计，别在 audit 里直接查 DOM。

2026-03-18 11:34