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