Playwright 开发环境配置

Playwright 开发推荐用 VS Code，因为它对 JavaScript/TypeScript、调试器、扩展支持都很强大。

1. 安装 VS Code

  • 前往 VS Code 官网 下载并安装。
  • 安装完成后，建议同时装上 中文语言包（扩展市场搜索 Chinese (Simplified)）。

VS Code 相关内容参考：https://www.runoob.com/vscode/vscode-tutorial.html

2. 必备扩展插件

在 VS Code 的扩展（Extensions）面板里，搜索并安装以下插件：

  1. Playwright Test for VSCode

    • 官方出品的 Playwright 插件
    • 功能：运行/调试用例、查看测试报告、录制脚本、生成 trace
    • 扩展 ID：ms-playwright.playwright

  2. JavaScript / TypeScript 支持（VS Code 自带，通常不用额外装）

  3. 推荐（可选）：

    • ESLint（保证代码风格一致）
    • Prettier - Code formatter（一键格式化代码）

3. 初始化 Playwright 项目

如果还没初始化过项目，先执行：

npm init playwright@lates

VS Code 插件会自动识别项目里的 playwright.config.ts/js，并启用测试视图。

4. VS Code 设置

打开 VS Code 设置（快捷键 Ctrl+, 或 Cmd+,），确认以下配置：

  • 保存时自动格式化
    搜索 format on save → 勾选 Editor: Format On Save

  • 终端默认 shell（根据自己系统选择）
    Windows 推荐 PowerShell 或 Git Bash
    macOS/Linux 默认即可

5. 调试配置（launch.json）

在 VS Code 左侧点击 运行与调试 → 创建配置，选择 Node.js，生成 .vscode/launch.json，添加 Playwright 调试配置，例如：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Playwright Test",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/.bin/playwright",
      "args": ["test", "--project=chromium", "--headed"],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    }
  ]
}

这样就可以在 VS Code 里按 F5 启动调试，Playwright 会跑在有界面模式，方便观察。

6. 使用 Playwright 插件面板

安装好 Playwright Test for VSCode 插件后，左侧会出现一个"Playwright"图标：

  • 可以直接看到项目里的测试文件和用例列表
  • 点击某个用例右侧的 ▶ 按钮就能运行
  • 右键选择 Debug Test 可以单步调试
  • 运行失败的测试可以直接查看 trace 文件

7. 常用命令

在 VS Code 的终端运行：

npx playwright test           # 运行全部测试
npx playwright test login.spec.js # 运行指定文件
npx playwright codegen        # 启动录制工具（自动生成脚本）
npx playwright show-report    # 打开测试报告