入门 - VS Code
简介
Playwright Test 专为满足端到端测试需求而创建。Playwright 支持所有现代渲染引擎，包括 Chromium、WebKit 和 Firefox。可以在 Windows、Linux 和 macOS 上进行测试，无论是本地还是在 CI 上，无论是无头模式还是有头模式，并提供 Google Chrome for Android 和 Mobile Safari 的原生移动设备模拟。
通过安装 Playwright 并生成一个测试来开始，亲眼看看它的效果。另外，你也可以使用 CLI 来开始并运行你的测试。
安装
Playwright 提供了一个 VS Code 扩展，在使用 Node.js 进行测试时可用。可以从 VS Code 市场或 VS Code 的扩展选项卡中安装它。
安装完成后，打开命令面板并输入
Install Playwright
选择 Test: Install Playwright 并选择你想要运行测试的浏览器。这些可以在 playwright.config 文件中稍后配置。你还可以选择是否要设置 GitHub Actions 来在 CI 上运行你的测试。
打开测试侧边栏
可以通过点击活动栏中的测试图标来打开测试侧边栏。这将使你能够访问测试浏览器，测试浏览器会显示项目中的所有测试，以及包含项目、设置、工具和安装的 Playwright 侧边栏。
运行测试
你可以通过点击测试块旁边的绿色三角形来运行单个测试。Playwright 将逐行运行测试，完成后你将在测试块旁边看到一个绿色对勾，以及运行测试所需的时间。
运行测试并显示浏览器
你还可以在测试侧边栏中选择显示浏览器选项来运行测试并显示浏览器。然后，当你点击绿色三角形运行测试时，浏览器将打开，你将直观地看到它运行测试。如果你希望所有测试都打开浏览器，请保持选中此选项；如果你希望测试在无头模式下运行而不打开浏览器，请取消选中它。
使用关闭所有浏览器按钮来关闭所有浏览器。
查看和运行所有测试
在测试侧边栏中查看所有测试，并通过点击每个测试来展开。未运行的测试旁边不会有绿色对勾。将鼠标悬停在测试侧边栏中的测试上时，点击白色三角形即可运行所有测试。
在多个浏览器上运行测试
Playwright 侧边栏的第一个部分是项目部分。在这里，你可以看到 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 将在你执行浏览器操作时为你自动生成测试，这是快速入门的好方法。浏览器窗口的视口被设置为特定的宽度和高度。请参阅配置指南以更改视口或模拟不同的环境。
录制新测试
要录制测试，请点击测试侧边栏中的录制新测试按钮。这将创建一个 test-1.spec.ts 文件并打开一个浏览器窗口。在浏览器中访问你想要测试的 URL 并开始点击。Playwright 将记录你的操作并在 VS Code 中直接生成测试代码。你还可以通过选择工具栏中的一个图标，然后点击页面上的元素来生成断言。可以生成以下断言：
'assert visibility'用于断言元素可见'assert text'用于断言元素包含特定文本'assert value'用于断言元素具有特定值
完成录制后，点击取消按钮或关闭浏览器窗口。然后，你可以检查你的 test-1.spec.ts 文件并查看生成的测试。
在光标处录制
要从测试文件中的特定位置开始录制，请点击测试侧边栏中的在光标处录制按钮。这将在当前光标位置将操作生成到现有测试中。你可以运行测试，将光标定位在测试末尾，然后继续生成测试。
拾取定位器
点击测试侧边栏中的拾取定位器按钮，拾取一个定位器并将其复制到你的测试文件中。然后在浏览器中点击你需要的元素，它将显示在 VS Code 的拾取定位器框中。按键盘上的 'enter' 键将定位器复制到剪贴板，然后粘贴到代码中的任意位置。或者按 'escape' 键取消。
Playwright 将查看你的页面并找出最佳定位器，优先考虑角色、文本和测试 ID 定位器。如果生成器找到多个匹配定位器的元素，它将改进定位器，使其具有弹性并唯一识别目标元素，因此你不必担心因定位器问题而导致测试失败。
项目依赖
你可以使用项目依赖来运行依赖于其他测试的测试。这对于设置测试（例如登录网站）非常有用。
运行设置测试
要运行你的设置测试，请从 Playwright 侧边栏的项目部分选择你的配置文件中定义的 setup 项目。这将使你能够访问测试浏览器中的 setup 测试。
当你运行依赖于 setup 测试的测试时，setup 测试将首先运行。每次运行测试时，setup 测试都会再次运行。
仅运行设置测试一次
要仅运行 setup 测试一次，请在 Playwright 侧边栏的项目部分取消选择它。此时，setup 测试将从测试浏览器中移除。当你运行依赖于 setup 测试的测试时，它将不再运行 setup 测试，这使得测试速度更快，从而提供了更好的开发体验。
全局设置
当你执行第一个测试时，全局设置会运行。它只运行一次，对于设置数据库或启动服务器很有用。你可以通过点击 Playwright 侧边栏中设置部分的 Run global setup 选项来手动运行全局设置。全局拆卸默认不运行；你需要通过点击 Run global teardown 选项手动启动它。
当你调试测试时，全局设置将重新运行，这确保了测试的隔离环境和专用设置。
多个配置
如果你的项目包含多个 Playwright 配置文件，你可以通过先点击 Playwright 侧边栏右上角的齿轮图标来切换它们。这将显示项目中的所有配置文件。通过勾选每个文件旁边的复选框并点击“确定”按钮来选择你想要使用的配置文件。
现在你可以在测试浏览器中访问所有测试。要运行单个测试，请点击文件或项目名称旁边的灰色三角形。
要运行所有配置中的所有测试，请点击测试浏览器顶部的灰色三角形。
要选择要使用的配置文件，只需点击 Playwright 侧边栏中的配置文件名称即可在它们之间切换。现在，当你使用工具（例如录制测试）时，它将为选定的配置文件录制测试。
你可以通过点击 Playwright 侧边栏中的配置文件名称，轻松地在不同配置之间来回切换。