入门指南 - VS Code
简介
Playwright Test 专门为满足端到端测试的需求而创建。Playwright 支持所有现代渲染引擎，包括 Chromium、WebKit 和 Firefox。在 Windows、Linux 和 macOS 上进行测试，本地或在 CI 上，无头或有头模式，原生模拟 Android 版 Google Chrome 和移动版 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 查看器运行测试
为了获得更好的开发者体验，您可以使用“显示 Trace 查看器”选项运行测试。
这将打开您测试的完整 Trace，您可以在其中逐步执行测试的每个操作，探索时间线、源代码等。
要了解有关 Trace 查看器的更多信息，请参阅我们的 Trace 查看器指南。
调试测试
使用 VS Code 扩展，您可以在 VS Code 中直接调试测试，查看错误消息，创建断点并实时调试测试。
错误消息
如果您的测试失败，VS Code 将在编辑器中直接显示错误消息，显示预期内容、接收内容以及完整的调用日志。
实时调试
您可以在 VS Code 中实时调试测试。在选中“显示浏览器”选项的情况下运行测试后，单击 VS Code 中的任何定位器，它将在浏览器窗口中突出显示。如果定位器存在，Playwright 将突出显示它，并告诉您是否有多个结果
您还可以在 VS Code 中编辑定位器，Playwright 将在浏览器窗口中实时显示更改。
在调试模式下运行
要设置断点，请单击您想要设置断点的行号旁边，直到出现红点。通过右键单击您要运行的测试旁边的行，在调试模式下运行测试。
浏览器窗口将打开，测试将运行并在设置断点的位置暂停。您可以单步执行测试、暂停测试并从 VS Code 的菜单中重新运行测试。
要了解有关调试的更多信息，请参阅 Visual Studio Code 中的调试。
使用 Trace 查看器调试
为了获得更好的开发者体验，您可以使用“显示 Trace 查看器”选项调试测试。
这将打开您测试的完整 Trace，您可以在其中逐步执行每个操作，并查看操作之前和之后发生的事情。您还可以检查 DOM 快照，查看控制台日志、网络请求、源代码等。
要了解有关 Trace 查看器的更多信息，请参阅我们的 Trace 查看器指南。
生成测试
当您在浏览器中执行操作时，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”项目。这将使您可以访问测试资源管理器中的设置测试。
当您运行依赖于设置测试的测试时，设置测试将首先运行。每次您运行测试时，设置测试都会再次运行。
仅运行一次设置测试
要仅运行一次设置测试，请从 Playwright 侧边栏的项目部分中取消选择它。设置测试现在已从测试资源管理器中删除。当您运行依赖于设置测试的测试时，它将不再运行设置测试，从而使其更快，并因此带来更好的开发者体验。
全局设置
全局设置在您执行第一个测试时运行。它仅运行一次，对于设置数据库或启动服务器非常有用。您可以通过单击 Playwright 侧边栏“设置”部分中的“运行全局设置”选项来手动运行全局设置。默认情况下，全局拆卸不会运行；您需要通过单击“运行全局拆卸”选项来手动启动它。
当您调试测试时，全局设置将重新运行，因为这确保了隔离的环境和测试的专用设置。
多个配置
如果您的项目包含多个 Playwright 配置文件，您可以通过首先单击 Playwright 侧边栏右上角的齿轮图标在它们之间切换。这将显示您项目中的所有配置文件。通过选中每个配置文件旁边的复选框并单击“确定”按钮，选择您要使用的配置文件。
您现在可以访问测试资源管理器中的所有测试。要运行测试，请单击文件或项目名称旁边的灰色三角形。
要从所有配置运行所有测试，请单击测试资源管理器顶部的灰色三角形。
要选择要使用的配置文件，只需通过单击 Playwright 侧边栏中的配置文件名称在它们之间切换。现在，当您使用工具（例如“录制测试”）时，它将为选定的配置文件录制测试。
您可以通过单击 Playwright 侧边栏中的配置文件名称轻松地在配置之间来回切换。