开始使用 - 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
选择 测试：安装 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 中实时调试测试。在使用 显示浏览器 选项运行测试后，单击 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 侧边栏 设置 部分中的 运行全局设置 选项来手动运行 全局设置。全局清理 默认情况下不运行；您需要通过单击 运行全局清理 选项手动启动它。
当您调试测试时，全局设置将重新运行，因为这确保了隔离的环境和测试的专用设置。
多个配置
如果您的项目包含多个 Playwright 配置文件，您可以先单击 Playwright 侧边栏右上角的齿轮图标来在它们之间切换。这将向您显示项目中的所有配置文件。通过选中每个配置文件旁边的复选框并单击“确定”按钮，选择要使用的配置文件。
现在，您将可以访问测试资源管理器中的所有测试。要运行测试，请单击文件或项目名称旁边的灰色三角形。
要运行所有配置中的所有测试，请单击测试资源管理器顶部的灰色三角形。
要选择要使用的配置文件，只需单击 Playwright 侧边栏中的配置文件名称即可在它们之间切换。现在，当您使用工具（例如录制测试）时，它将为所选配置文件录制测试。
您可以通过单击 Playwright 侧边栏中的配置文件名称轻松地在配置之间来回切换。