VS Code 入门指南
简介
Playwright Test 是专为满足端到端测试需求而设计的。它支持所有现代渲染引擎，包括 Chromium、WebKit 和 Firefox。可在 Windows、Linux 和 macOS 上本地或 CI 环境中进行测试，支持无头模式或有头模式，并提供 Google Chrome for Android 和 Mobile Safari 的原生移动设备模拟功能。
通过安装 Playwright 并生成测试用例来开始使用。您也可以选择通过 CLI 来运行测试。
安装
Playwright 提供了适用于 Node.js 测试的 VS Code 扩展。您可以从 VS Code 应用市场 安装，或直接在 VS Code 的扩展标签页中搜索安装。
安装完成后，打开命令面板并输入：
Install Playwright
选择 Test: Install Playwright 并选择您希望运行测试的浏览器。这些配置后续可以在 playwright.config 文件中修改。您还可以选择是否要设置 GitHub Actions 来 在 CI 上运行测试。
打开测试侧边栏
点击活动栏中的测试图标即可打开测试侧边栏。通过测试侧边栏，您可以访问测试资源管理器（显示项目中的所有测试）以及 Playwright 侧边栏（包含项目、设置、工具和配置项）。
运行测试
点击测试代码块旁边的绿色三角形即可运行单个测试。Playwright 会逐行执行测试，完成后您将在测试代码块旁看到绿色勾选标记以及测试运行耗时。
运行测试并显示浏览器
您还可以在测试侧边栏中选择 Show Browsers 选项来运行测试并显示浏览器窗口。这样当您点击绿色三角形运行测试时，浏览器将会打开，您可以直观地看到测试执行过程。如果希望所有测试都在浏览器中运行，请保持该选项选中；如果偏好无头模式（不显示浏览器），请取消选中。
使用 Close all browsers 按钮可以关闭所有浏览器窗口。
查看并运行所有测试
在测试侧边栏中查看所有测试，并通过点击每个测试来展开详情。未运行的测试旁边不会有绿色勾选标记。将鼠标悬停在测试侧边栏中的测试上时，点击白色三角形即可运行所有测试。
在多个浏览器上运行测试
Playwright 侧边栏的第一个部分是项目(projects)部分。在这里你可以看到在 Playwright 配置文件中定义的所有项目。安装 Playwright 时的默认配置会提供 3 个项目：Chromium、Firefox 和 WebKit。默认会选中第一个项目。
要在多个项目上运行测试，可以通过勾选项目名称旁边的复选框来选择每个项目。然后当你从侧边栏运行测试或点击测试名称旁边的播放按钮时，测试将在所有选中的项目上运行。
你也可以通过点击测试项目名称旁边的灰色播放按钮，在特定项目上单独运行测试。
使用 Trace Viewer 运行测试
为了获得更好的开发体验，你可以使用 显示 Trace Viewer 选项来运行测试。
这将打开测试的完整追踪记录，你可以逐步查看测试的每个操作，探索时间线、源代码等更多信息。
要了解更多关于 Trace Viewer 的信息，请参阅我们的 Trace Viewer 指南。
调试测试
通过 VS Code 扩展，你可以直接在 VS Code 中调试测试，查看错误信息，创建断点并实时调试测试。
错误信息
当测试失败时，VS Code 会在编辑器中直接显示错误信息，包括预期结果、实际结果以及完整的调用日志。
实时调试
你可以在 VS Code 中实时调试测试。勾选 Show Browser 选项运行测试后，点击 VS Code 中的任何定位器，它会在浏览器窗口中被高亮显示。如果元素存在，Playwright 会高亮显示它；如果存在多个匹配结果，也会显示出来。
你还可以在 VS Code 中编辑定位器，Playwright 会在浏览器窗口中实时显示变化。
调试模式运行
要设置断点，只需在想要中断的行号旁边点击，直到出现红色圆点。右键点击测试代码旁边的行，选择在调试模式下运行测试。
浏览器窗口将打开，测试会在设置的断点处暂停。你可以单步执行测试、暂停测试，或通过 VS Code 的菜单重新运行测试。
要了解更多关于调试的信息，请参阅 Visual Studio Code 中的调试。
使用 Trace Viewer 调试
为了获得更好的开发体验，您可以使用 显示 Trace Viewer 选项来调试测试。
这将打开完整的测试轨迹，您可以逐步查看每个操作前后的情况。您还可以检查 DOM 快照、查看控制台日志、网络请求、源代码等更多信息。
要了解更多关于 Trace Viewer 的信息，请参阅我们的 Trace Viewer 指南。
生成测试
CodeGen 会在您在浏览器中执行操作时自动生成测试代码，这是快速入门的绝佳方式。浏览器窗口的视口被设置为特定的宽度和高度。如需更改视口或模拟不同环境，请参阅 配置指南。
录制新测试
要录制测试，请点击测试侧边栏中的 Record new 按钮。这将创建一个 test-1.spec.ts 文件并打开浏览器窗口。在浏览器中访问您想要测试的 URL 并开始点击操作。Playwright 会记录您的操作并直接在 VS Code 中生成测试代码。您还可以通过选择工具栏中的图标，然后点击页面上的元素来生成断言。可以生成以下断言：
'assert visibility'- 断言元素可见'assert text'- 断言元素包含特定文本'assert value'- 断言元素具有特定值
完成录制后，点击 cancel 按钮或关闭浏览器窗口。然后您可以检查 test-1.spec.ts 文件查看生成的测试。
从光标处录制
要从测试文件中的特定位置开始录制，请点击测试侧边栏中的 Record at cursor 按钮。这会在当前光标位置向现有测试中生成操作。您可以运行测试，将光标定位在测试末尾，然后继续生成测试。
选择定位器
通过点击测试侧边栏中的 Pick locator 按钮，选择一个定位器并复制到您的测试文件中。然后在浏览器中点击您需要的元素，它就会显示在 VS Code 的 Pick locator 框中。按键盘上的 'enter' 键将定位器复制到剪贴板，然后粘贴到代码中的任意位置。或者按 'escape' 键取消操作。
Playwright 会分析您的页面并找出最佳定位器，优先使用角色、文本和测试 ID 定位器。如果生成器找到多个匹配定位器的元素，它会优化定位器以确保其唯一标识目标元素，因此您不必担心因定位器问题导致测试失败。
项目依赖
您可以使用项目依赖来运行依赖于其他测试的测试。这对于设置测试（例如登录网站）非常有用。
运行设置测试
要运行您的设置测试，请从 Playwright 侧边栏的项目部分选择配置文件中定义的 setup 项目。这将使您能够在测试资源管理器中访问 setup 测试。
当您运行依赖于 setup 测试的测试时，setup 测试会首先运行。每次运行测试时，setup 测试都会再次执行。
仅运行一次设置测试
要仅运行一次设置测试，请在 Playwright 侧边栏的项目部分取消勾选该测试。此时设置测试将从测试资源管理器中移除。当您运行依赖该设置测试的测试时，将不再执行设置测试，从而显著提升速度，带来更好的开发体验。
全局设置
全局设置会在执行第一个测试时运行。它仅运行一次，适用于数据库初始化或服务器启动等场景。您可以通过 Playwright 侧边栏设置部分的运行全局设置选项手动触发。全局拆卸默认不会执行，需要通过点击运行全局拆卸选项手动触发。
调试测试时会重新运行全局设置，这能确保为测试提供隔离环境和专用设置。
多配置文件管理
如果您的项目包含多个 Playwright 配置文件，可以通过以下方式切换配置：首先点击 Playwright 侧边栏右上角的齿轮图标，这将显示项目中所有的配置文件。通过勾选每个文件旁边的复选框并点击"确定"按钮，选择您想要使用的配置文件。
现在您可以在测试资源管理器中访问所有测试。要运行测试，请点击文件名或项目名称旁边的灰色三角形图标。
要运行所有配置中的所有测试，请点击测试资源管理器顶部的灰色三角形图标。
要选择工作配置文件，只需在 Playwright 侧边栏中点击配置文件名称进行切换。当您使用工具（如录制测试）时，它将为选定的配置文件录制测试。
您可以通过点击 Playwright 侧边栏中的配置文件名称，轻松地在不同配置之间来回切换。