Headless浏览器自动化测试核心在于稳定性、可调试性及符合真实用户行为，推荐Puppeteer和Playwright而非Selenium；前者通过CDP精准控制加载时机、字体就绪、多浏览器兼容等，后者统一API覆盖Chromium/WebKit/Firefox并支持真实Safari预览版。
Headless 浏览器做 HTML 自动化测试，核心不是“能不能跑”，而是“能不能稳定、可调试、符合真实用户行为”。Chrome DevTools Protocol（CDP）驱动的 puppeteer 和 playwright 是当前最可靠的选择，selenium 在 headless Chrome/Firefox 上已不推荐作为首选——它抽象层太厚，错误堆栈模糊，超时逻辑难调。
为什么 puppeteer 比 selenium 更适合 HTML 渲染验证
当你需要检查 meta 标签、viewport 设置、script 加载顺序、或 CSP header 是否生效时，selenium 的 DOM 等待机制常误判“页面就绪”：它只等 document.readyState === 'complete'，但此时资源可能未解析完毕，document.head 里的动态插入内容还没执行。而 puppeteer 可直接监听 CDP 事件：Page.lifecycleEvent 中的 networkIdle 或显式等待 document.fonts.ready，更贴近真实加载链路。
-
puppeteer启动时默认启用--disable-features=IsolateOrigins,site-per-process，避免跨域 iframe 渲染异常；selenium需手动加参数，且不同 Chrome 版本参数名还可能变 - 获取原始 HTML（含服务端注入的 meta）用
page.content()；想看 JS 执行后最终 DOM，用page.evaluate(() => document.documentElement.outerHTML)——二者不能混用 - 截图时若发现字体缺失或 layout 偏移，大概率是没等 WebFont 加载完，加
await page.waitForFunction(() => document.fonts.check('12px "Inter"'))
playwright 多浏览器一致性怎么保障
如果你的 HTML 要兼容 Safari（尤其 iOS WebKit 的 viewport 行为）、Firefox 的 CSP 解析差异，playwright 是唯一能用同一套 API 覆盖三端的方案。但它默认的 webkit 实现并非真 Safari，而是 JSC + WebKit 渲染后端，不支持 localStorage 持久化或某些 CSS @supports 检测——必须用 playwright install webkit 下载官方 Safari 技术预览版二进制，并启动时指定 channel: 'webkit-technology-preview'。
- Firefox headless 对
document.write()支持更严格，遇到就报NS_ERROR_NOT_AVAILABLE；playwright可捕获该错误并跳过对应 script 块，puppeteer会直接崩溃 - 检测是否启用
prefers-reduced-motion时，playwright允许在 launch 时传args: ['--force-prefers-reduced-motion']，puppeteer需 patchEmulation.setEmulatedMediaCDP 方法 - 所有浏览器下都用
page.goto(url, { waitUntil: 'networkidle' })，但实际含义不同：Chromium 等待 500ms 无网络请求，WebKit 等待 2 秒，Firefox 等待 1 秒 —— 不要硬编码超时值
如何验证 HTML head 中动态生成的内容
很多 SPA 或 SSR 框架（如 Next.js、Nuxt）会在客户端 JS 中重写 <title>、<meta name="description">，甚至注入 <link rel="canonical">。单纯抓取初始 HTML 会漏掉这些，必须等 JS 执行完毕再提取。
立即学习“前端免费学习笔记（深入）”；
- 先禁用 JS 运行验证基础结构：
page.emulateMedia({ media: 'screen', reducedMotion: 'reduce' }); await page.setJavaScriptEnabled(false); await page.goto(url); const nojsHTML = await page.content(); - 再启用 JS 并等待关键节点出现：
await page.setJavaScriptEnabled(true); await page.waitForSelector('meta[name="description"]', { timeout: 3000 }); const jsHTML = await page.evaluate(() => ({ title: document.title, description: document.querySelector('meta[name="description"]')?.getAttribute('content') })); - 注意：若页面用
document.title = ...修改标题，page.title()返回的是修改后的值；但若用document.querySelector('title').textContent = ...，则需用evaluate读取，否则拿不到
真正麻烦的不是启动浏览器，而是判断“此刻 DOM 是否已达到你关心的状态”。head 里的内容往往依赖异步数据、第三方脚本、甚至 service worker 缓存策略——别迷信 networkidle，对关键 meta 标签，显式 waitForSelector 或 waitForFunction 才可靠。
