Playwright 页面数据提取器

为什么需要它

现代前端应用普遍采用 React、Vue、Angular 这类 SPA 框架，数据不再直接写在 HTML 里，而是通过 XHR / fetch 请求在客户端异步加载后再渲染。你用 curl 或简单 HTTP 客户端拿到的往往只是一个空壳 <div id="app">，真正的数据藏在后续的接口响应里。

这带来两个问题：一是抓取时机不确定——数据什么时候到齐、由哪个接口返回，需要人工分析；二是页面依赖浏览器环境——没有 JS 执行、没有网络拦截能力，结构化数据就无从谈起。

它如何工作

这个技能基于 Microsoft Playwright 的 Node.js API，把上述问题拆成可执行的步骤：

• 真实浏览器导航：用 Chromium / Firefox / WebKit 内核打开动态页面，执行完整的客户端脚本，React/Vue/Angular 应用能正常渲染。
• 自动等待策略：不需要手写固定 sleep，Playwright 会根据 DOM 状态和网络活动等待页面就绪，减少抓空或竞态。
• 网络请求拦截：通过监听请求与响应，捕获页面加载过程中调用的接口，直接从 XHR/fetch 响应里提取结构化数据，绕开解析渲染后 DOM 的麻烦。
• SPA 适配：针对单页应用的客户端路由与异步数据流设计，适合在 SPA 环境下稳定提取 JSON 类数据。

适用边界与注意点

• Playwright 同时支持 Python、.NET 和 Java，但本技能的用法围绕 Node.js API 展开，其他语言环境需要自行适配调用方式。
• 拦截网络请求时要注意目标站点的接口结构，不同应用的数据格式差异较大，提取逻辑通常需要针对具体页面调整。
• 自动等待不是万能的：遇到极端异步场景或强依赖用户交互才能触发的请求，仍可能需要额外处理。
• 使用前请确认目标站点的访问条款与合规要求。