练习：在 Visual Studio Code 中使用 Playwright
在上一部分中，我们讲解了与 Playwright Test Configuration 和 Playwright Test Specification 相关的核心概念，但我们使用了 Playwright CLI 来执行测试和查看报告。
如果我们可以在 Visual Studio Code 环境中 完成这些操作，并为编写、运行和调试测试提供一个更具视觉效果的交互过程，会怎样呢？
借助 适用于 Visual Studio Code 扩展的 Playwright 测试，可以获得卓越的开发人员体验 和一些独特的工具功能 ，使它成为与 Playwright 测试运行程序交互的首选方法。 让我们来了解下其中的内容。
入门指南
Playwright 文档提供了一个全面的教程，其中包含视频演练，我们建议你在自己的时间观看。 在本课中，我们将尝试演练这些练习的子集，以便你熟悉用法。
]
安装 Playwright 扩展
从 Visual Studio Code Marketplace 安装扩展。 安装后，你应该会在 Visual Studio Code 窗口左侧发现一个烧杯图标，如屏幕截图所示。 请注意扩展如何自动检测和收集项目中的测试规范。
运行测试（无外设）
若要以无外设方式运行测试（无浏览器窗口），请确保未选中 “显示浏览器 ”和 “显示跟踪查看器 ”选项。 选择example.spec.ts文件第 3 行上的绿色播放按钮以运行第一个测试。 还可以在测试资源管理器边栏中选择灰色 播放 按钮，以运行文件中的所有测试或运行特定测试。
运行测试后，“ 测试结果 ”选项卡将打开一个窗口，可在其中查看测试执行的整个历史记录。 您还可以深入查看测试并选择运行测试以重新运行该特定测试。
显示浏览器（外设）
如果要在 头部 模式下运行，这意味着在打开浏览器窗口的情况下运行测试，可以在运行测试之前选中 “显示浏览器 ”框。
Playwright 是一个非常快速的用户，使用 Show 浏览器时，很难跟踪测试中发生的情况。 对于调试，我们建议使用 “显示跟踪查看器 ”选项。
显示跟踪查看器（外设）
选中“ 显示跟踪查看器 ”框，然后选择第二次测试的绿色 播放 按钮。 这会启动跟踪查看器窗口，其中显示了测试执行的可视表示形式。
在顶部，你将看到测试时间线，可以将鼠标悬停在上方以查看浏览器状态。 若要选择要关注的特定时间范围，请选择并拖动时间线。
在左侧边栏中，可以看到在测试执行期间执行的操作。 如果选择 locator.click 作，则会在 DOM 快照的 “入门 ”按钮上看到一个红点。
接下来，选择 expect.toBeVisible 断言，你将看到 DOM 快照已更改，以显示“安装”页，其中突出显示了我们断言的标题。 在 DOM 快照上方，可以选择 “前 ”和“ 后 ”按钮以查看执行作前后 DOM 的状态。
可以通过选择右上角的 弹出 图标，将 DOM 快照弹出到单独的窗口。 如果要在调试测试期间检查 DOM，此做法会非常有用。
在谈到调试时，还可以通过选择底部面板中的 “选取定位符 ”按钮从 DOM 快照中选择定位符。 然后，将鼠标悬停在 DOM 快照上的元素上以查看该元素的定位符。 选择一个元素后，它会被添加到跟踪查看器底部的 定位符 框中，您可以在复制到剪贴板之前编辑它。
随意浏览跟踪查看器的其余功能，例如 “呼叫”、“ 控制台”、“ 网络”和“ 源 ”选项卡。
调试测试
为了进行调试，我们建议使用 “显示跟踪查看器 ”选项运行测试，并使用测试的跟踪更好地了解所发生的情况。
但是，借助 Visual Studio Code 扩展，还可以直接在 Visual Studio Code 中调试测试，查看错误消息、创建断点和实时调试测试。 从文档了解详细信息 ，或观看以下视频，了解调试支持。
生成测试
CodeGen 在你在浏览器中执行操作时为你生成测试，使其成为为复杂工作流编写测试的最简单方法。
若要生成测试，请在 Visual Studio Code 的测试边栏中选择 “记录新 ”按钮。 这会打开一个浏览器窗口，你可以在其中执行将被记录并转换为测试的操作。 你还会注意到， tests 文件夹中的新文件是使用生成的测试创建的。
在浏览器窗口中键入 URL，然后像用户那样开始操作。 你将在 VS Code 的测试文件中看到正在记录的操作。
让我们重新创建之前运行的简单测试，方法是转到 Playwright 网站并选择 “入门 ”按钮。 然后，我们可以从 Codegen 工具栏中选择 “断言可见性 ”图标，然后选择 “安装 ”标题来断言它可见。
在以下视频中详细了解如何生成测试。
后续步骤
在本部分中，你学习了如何使用 Visual Studio Code 扩展查找和运行测试，以及如何使用跟踪查看器来获取更多调试测试的视觉体验。
你还了解了 Visual Studio Code 如何通过“记录新测试”、“选取定位符”和“光标处记录”等功能提供更丰富的工具来生成测试。 现在，是时候在引导项目中 应用 Playwright Fundamentals 学习，为示例应用构建端到端测试规范了。