这两种模式是什么？

1. 本质来源

浏览器内核自带运行模式：

• 有头模式：启动完整图形界面浏览器，渲染窗口、可视化页面
• 无头模式：关闭图形渲染界面，仅后台运行内核、解析DOM、执行JS、发起网络请求，不弹出窗口

最早由 Chrome 官方推出 --headless 启动参数，后来所有主流浏览器全部兼容。

2. Playwright 只是做了封装

Playwright 把浏览器启动参数简化成配置项：

// 无头（后台静默运行，默认）
chromium.launch({ headless: true })

// 有头（弹出浏览器窗口）
chromium.launch({ headless: false })

底层最终都会拼接浏览器启动参数：

• 无头：--headless=new
• 有头：不带无头参数，正常启浏览器

3. 其他框架同样在用

• Puppeteer：默认无头，headless: false 开界面
• Selenium：同样靠浏览器启动参数控制有无窗口
• 爬虫工具、接口自动化也大量使用无头模式

一、核心区别一句话总结

• 无头模式（headless）：不打开浏览器界面，后台默默运行，速度快、适合自动化。
• 有头模式（headed）：弹出真实浏览器窗口，你能看到鼠标点击、输入、页面跳转，适合调试。

二、详细对比表

三、什么时候用 无头模式？

1. E2E Agent 自动批量跑测试用例
2. 服务器 / Jenkins / GitActions 自动化运行
3. 不想看到一堆浏览器弹来弹去
4. 追求速度、无人值守

// Playwright 默认就是无头模式

四、什么时候用 有头模式？

1. 写测试用例时
2. 测试失败了，想看看到底发生了什么
3. 调试元素定位、点击、输入
4. 观察页面是否弹框、遮挡、加载异常

// 开启有头模式
await browser.launch({ headless: false });

// shturl.cc/QAhIx00FxA
import { defineConfig } from '@playwright/test';

export default defineConfig({
  use: {
    // 👉 默认无头模式（批量执行、速度快）
    headless: true,

    // 失败自动截图
    screenshot: 'only-on-failure',
    
    // 失败自动录屏
    video: 'retain-on-failure',

    // 失败自动追踪
    trace: 'retain-on-failure',
  },

  // 👉 专门给调试/失败重跑 用的项目（有头模式）
  projects: [
    {
      name: 'chromium',
      use: { 
        browserName: 'chromium',
        // 调试时把这里改成 headless: false 即可
        headless: true 
      },
    },
  ],
});

五、最关键的区别

1. 行为几乎完全一致

无头/有头 页面逻辑、DOM结构、接口请求、元素定位 完全一样 所以：

• 定位在有头能找到 → 无头也能找到
• 有头跑通 → 无头基本也能跑通

2. 唯一可能不同的地方

• 有头能看到弹窗遮挡、覆盖层、滚动位置等视觉问题
• 无头看不见，所以某些点击可能会出现“元素被遮挡”错误