调试Playwright测试时如何更改VS Code默认启动的浏览器

DevOps 小满

2026-8-26

VS Code中修改Playwright调试默认浏览器为WebKit的操作方法

共有3种常用配置路径，按操作便捷度排序：

方法1：通过Playwright扩展面板快速切换
安装官方Playwright扩展后，VS Code左侧活动栏会显示Playwright专属测试面板入口，点击进入后，面板顶部有浏览器选择下拉控件，当前默认选中Chrome时，直接点开下拉列表选择WebKit即可，该选择会自动保存为当前工作区的默认配置，后续直接点击运行/调试测试都会默认启动WebKit。
方法2：通过VS Code工作区设置修改
1. 按下快捷键Ctrl+,（Windows/Linux）或Cmd+,（Mac）打开设置面板
2. 面板顶部切换到「工作区」标签（避免修改全局用户配置影响其他项目），在搜索框输入Playwright: Default Browser
3. 找到对应配置项后，下拉选择webkit，配置即时生效，无需重启VS Code

方法3：修改项目级Playwright配置（对所有项目协作者生效）
如果需要让项目内所有人运行测试时默认使用WebKit，直接修改根目录下的playwright.config.js/playwright.config.ts文件，找到projects配置块，将webkit对应的配置项移到数组第一位，也可以按需注释掉不需要默认启动的其他浏览器配置，示例：

const { defineConfig, devices } = require('@playwright/test');

module.exports = defineConfig({
  projects: [
    // 放在数组第一位的即为默认运行/调试的浏览器
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
    // 不需要默认启动的浏览器可注释或后置
    // {
    //   name: 'chromium',
    //   use: { ...devices['Desktop Chrome'] },
    // },
  ]
});

特殊情况：手动配置了launch.json调试项的场景
如果你是通过.vscode/launch.json自定义的调试配置，找到对应Playwright调试条目，在args参数中指定运行webkit项目即可，示例：
```
{
  "name": "调试Playwright用例",
  "type": "node",
  "request": "launch",
  "program": "${workspaceFolder}/node_modules/@playwright/test/cli.js",
  "args": ["test", "${file}", "--project=webkit"]
}
```