如何获取Chrome Devtools中的无障碍数据

有时我们需要基于无障碍的信息分析网页所有的 HTMLElement。

无障碍和语义化 HTML、WAI-ARIA 有关，包含的内容还是比较多的，自己解析困难较大。Chrome Devtools 的 Accessibility 面板其实可以看到解析过后的信息。

和默认 Element 树的节点一一对应，哪些节点被忽略、哪些节点是按钮一目了然。

问题来了，该如何获取这里的数据呢？

Chrome Devtools 的实现原理大致概括是：前端 UI 根据协议规则向服务端请求所需数据，通信基于 WebSocket。

重点是协议，Chrome 的调试协议叫 Chrome DevTools Protocol，简称 CDP。

在 CDP 文档里可以看到 Accessibility 相关内容

所以 Devtools 就是调用这些方法，再把数据展示出来，可以在 Protocol monitor 面板里看到通信的记录。

如果没有这个面板，需要在 Devtools 设置里开启

纯前端环境是无法调用这些调试 API 的，可以借助 playwright 或 puppeteer 在 node 环境来做。

这里以 playwright 为例：

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://playwright.dev/');

  // 等待页面加载完成的方式：至少 500ms 内没有网络连接
  await page.waitForLoadState('networkidle');

  // 创建 CDP 会话
  const session = await context.newCDPSession(page);
  const axTree = await session.send('Accessibility.getFullAXTree');

  console.log(axTree);

  await context.close();
  await browser.close();
})();

代码量不大，可以参考 CDPSession 和 CDP 文档来调用需要的 API。