入门指南 - VS Code
简介
Playwright Test是专为满足端到端测试需求而创建的。Playwright支持所有现代渲染引擎，包括Chromium、WebKit和Firefox。可在Windows、Linux和macOS上进行测试，无论是在本地还是CI环境，无头模式或有头模式，并支持Android版Google Chrome和Mobile 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指南。
调试测试
通过VS Code扩展，您可以直接在VS Code中调试测试，查看错误信息，设置断点并实时调试测试。
错误信息
如果您的测试失败，VS Code 将在编辑器中直接显示错误消息，展示预期结果、实际接收结果以及完整的调用日志。
实时调试
您可以在VS Code中实时调试测试。勾选Show Browser选项运行测试后，点击VS Code中的任何定位器，它将在浏览器窗口中被高亮显示。如果存在该元素，Playwright会将其高亮显示，并显示是否存在多个匹配结果
您还可以在VS Code中编辑定位器，Playwright会在浏览器窗口中实时显示您的更改。
在调试模式下运行
要设置断点，请在您希望断点出现的行号旁边点击，直到出现红点。通过右键点击您想要运行的测试旁边的行，以调试模式运行测试。
浏览器窗口将打开，测试将在设置的断点处运行并暂停。您可以通过VS Code菜单逐步执行测试、暂停测试以及重新运行测试。
要了解更多关于调试的信息，请参阅Debugging in Visual Studio Code。
使用trace viewer进行调试
为了获得更好的开发者体验，您可以使用显示追踪查看器选项来调试测试。
这将打开您测试的完整追踪记录，您可以逐步查看每个操作，并了解该操作前后发生了什么。您还可以检查DOM快照、查看控制台日志、网络请求、源代码等更多内容。
要了解更多关于trace viewer的信息，请参阅我们的Trace Viewer指南。
生成测试
CodeGen会在您在浏览器中执行操作时自动为您生成测试代码，这是快速入门的绝佳方式。浏览器窗口的视口被设置为特定的宽度和高度。如需更改视口或模拟不同环境，请参阅配置指南。
录制新测试
要录制测试，请点击测试侧边栏中的录制新测试按钮。这将创建一个test-1.spec.ts文件并打开浏览器窗口。在浏览器中访问您想要测试的URL并开始点击操作。Playwright会记录您的操作并在VS Code中直接生成测试代码。您还可以通过选择工具栏中的某个图标，然后点击页面上的元素来生成断言。可以生成以下断言：
'assert visibility'用于断言元素是否可见'assert text'用于断言元素包含特定文本'assert value'用于断言元素具有特定值
录制完成后，点击cancel按钮或关闭浏览器窗口。然后您可以检查您的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侧边栏右上角的齿轮图标来在它们之间切换。这将显示您项目中的所有配置文件。通过勾选每个文件旁边的复选框并点击"ok"按钮来选择您想要使用的配置文件。
现在您可以在测试资源管理器中访问所有测试。要运行测试，请点击文件或项目名称旁边的灰色三角形。
要运行所有配置中的所有测试，请点击测试资源管理器顶部的灰色三角形。
要选择使用的配置文件，只需在Playwright侧边栏中点击配置文件名称进行切换。现在当您使用工具（例如录制测试）时，它将为选定的配置文件录制测试。
您可以通过点击Playwright侧边栏中的配置文件名称，轻松在不同配置之间切换。