Playwright VS Code 扩展将 Playwright Test 的强大能力直接带入你的编辑器，让你能够通过无缝的 UI 驱动体验来运行、调试和生成测试。本指南将带你完成扩展的安装与设置，并介绍其核心功能，帮助你大幅提升端到端测试工作流的效率。
在开始之前，请确保你已经安装以下软件：
- Node.js（推荐使用 LTS 版本）
- Visual Studio Code
- 安装扩展： 在 VS Code 中打开扩展视图（
Ctrl+Shift+X或Cmd+Shift+X），搜索 “Playwright”，然后安装 Microsoft 官方扩展。
(图略)
- 安装 Playwright： 扩展安装完成后，打开命令面板（
Ctrl+Shift+P或Cmd+Shift+P），运行Test: Install Playwright命令。
(图略)
- 选择浏览器： 选择你希望用于测试的浏览器（例如 Chromium、Firefox、WebKit）。你也可以添加一个 GitHub Actions 工作流，以便在 CI 中运行测试。这些设置之后都可以在
playwright.config.ts文件中进行修改。
(图略)
打开测试侧边栏
Section titled “打开测试侧边栏”点击 VS Code 活动栏中的 Testing 图标以打开 Test Explorer。在这里，你可以看到测试列表，以及用于管理项目、工具和设置的 Playwright 侧边栏。 citeturn463566view0
(图略)
- 运行单个测试： 点击任意测试旁边绿色的“播放”图标即可运行该测试。如果测试通过，播放按钮会变成绿色对勾；如果失败，则会显示红色 X。你还能在测试名称旁看到执行耗时。此外，VS Code 底部会自动打开 Test Results 面板，展示测试执行摘要，包括运行了多少测试、通过多少、失败多少、跳过多少，以及总执行时间。
(图略)
- 运行所有测试： 你可以在不同层级运行所有测试。点击某个测试文件旁边的播放图标，可以运行该文件中的所有测试；点击 Test Explorer 顶部的播放图标，则可以运行整个项目中的所有测试。
(图略)
- 在多个浏览器上运行： 在 Playwright 侧边栏中，勾选你想用于测试的项目（浏览器）。在 Playwright 中，项目代表不同的浏览器配置——每个项目通常对应一个特定浏览器（如 Chromium、Firefox 或 WebKit），并带有自己的设置，例如视口大小、设备模拟或其他浏览器特定选项。当你运行测试时，它会在所有已选择的项目上执行，以便验证你的应用在不同浏览器和配置下都能正常工作。
(图略)
- 显示浏览器： 如果你想在实时浏览器窗口中观察测试执行过程，请在侧边栏中启用 Show Browser 选项。关闭它则会以无头模式运行（测试会在后台执行，不会打开可见的浏览器窗口）。
(图略)
VS Code 扩展提供了强大的调试工具，帮助你识别并修复测试中的问题。你可以设置断点、检查变量、查看详细错误消息、获得 AI 驱动的修复建议，并使用全面的 Trace Viewer 逐步分析测试执行过程。
- 使用断点： 通过点击行号旁边的边栏来设置断点。右键点击测试并选择 Debug Test。测试会在断点处暂停，以便你检查变量并逐步执行代码。
(图略)
- 实时调试： 启用 Show Browsers 后，点击代码中的某个定位器。Playwright 会在浏览器中高亮对应的元素，方便你验证定位器是否正确。
(图略)
- 查看错误信息： 如果测试失败，扩展会直接在编辑器中显示详细的错误信息，包括期望值与实际值，以及完整的调用日志。
(图略)
- 使用 AI 修复： 当测试失败时，点击错误旁边的闪光图标，即可从 Copilot 获取 AI 驱动的修复建议。Copilot 会分析错误并建议相应的代码修改。
(图略)
- 结合 Trace Viewer 调试： 若要进行全面调试，请在 Playwright 侧边栏中启用 Show Trace Viewer 选项。当测试结束后，会自动打开详细的跟踪信息，为你提供测试执行的完整时间线。Trace Viewer 特别适用于：
- 逐步分析： 通过精确时间戳浏览测试执行的每一个操作
- DOM 检查： 查看测试执行任意时刻的 DOM 快照，以了解当时页面的真实状态
- 网络监控： 检查测试期间发生的所有网络请求与响应
- 控制台日志： 访问浏览器中的所有控制台消息和错误
- 源码映射： 直接跳转到执行每个操作的源码位置
- 可视化调试： 查看截图，了解用户在每一步中会看到什么
当你在调试不稳定测试或理解复杂的用户交互时，Trace Viewer 特别有价值。要了解更多内容，请参阅 Trace Viewer 指南。
(图略)
使用 CodeGen 生成测试
Section titled “使用 CodeGen 生成测试”CodeGen 是 Playwright 强大的测试生成工具，它会通过录制你与网页的交互来自动创建测试代码。你不必从零开始编写测试，只需在应用中进行导航，CodeGen 就会捕获你的操作，并将它们转换成带有合适定位器和断言的可靠测试代码。
- 录制一个新测试： 点击侧边栏中的 Record new。这会打开一个浏览器窗口。当你与页面交互时，Playwright 会自动生成测试代码。你也可以使用录制工具栏生成断言。
(图略)
- 在光标处录制： 将光标放在现有测试中的某个位置，然后点击 Record at cursor，即可在该特定位置添加新的操作。
(图略)
- 选择定位器： 使用 Pick locator 工具，在打开的浏览器中点击任意元素。Playwright 会自动为该元素确定最佳定位器，并将其复制到剪贴板，供你粘贴到代码中。
(图略)
要了解更多内容，请参阅 CodeGen 指南。
使用项目依赖来定义那些需要在其他测试之前运行的设置测试。例如，你可以创建一个先执行的登录测试，然后在多个测试之间复用该认证状态，而不必为每个测试重复登录。在 VS Code 中，你可以在 Test Explorer 中看到这些设置测试，并在需要时单独运行它们。
(图略)
对于那些只需在所有测试开始之前运行一次的任务（例如初始化数据库），请使用 Global Setup。你可以从 Playwright 侧边栏中手动触发全局设置和清理。
(图略)
如果你有多个 playwright.config.ts 文件，可以通过 Playwright 侧边栏中的齿轮图标在它们之间切换。这使你能够轻松处理不同的测试套件或环境。
(图略)
| 操作 | 在 VS Code 中的做法 |
|---|---|
| 安装 Playwright | 命令面板 → Test: Install Playwright |
| 运行测试 | 点击测试旁边的“播放”图标 |
| 调试测试 | 设置断点，右键测试 → Debug Test |
| 显示实时浏览器 | 在 Playwright 侧边栏中启用 Show Browsers |
| 录制新测试 | 在 Playwright 侧边栏中点击 Record new |
| 选择定位器 | 在 Playwright 侧边栏中点击 Pick locator |
| 查看测试跟踪 | 在 Playwright 侧边栏中启用 Show Trace Viewer |
接下来做什么
Section titled “接下来做什么”- 使用 Web-first assertions、page fixtures 和 locators 编写测试
- 在 CI 上运行测试
- 进一步了解 Trace Viewer citeturn463566view0