Skip to main content

入门 - VS Code

Playwright Test 是专门为满足端到端测试的需求而创建的。Playwright 支持所有现代渲染引擎，包括 Chromium、WebKit 和 Firefox。在 Windows、Linux 和 macOS 上进行测试，在本地或 CI 上，无头或有头模式，以及 Google Chrome for Android 和 Mobile Safari 的原生移动模拟。

通过安装 Playwright 并生成测试来开始使用，看看它的实际效果。或者，您也可以使用 CLI 开始并运行您的测试。

安装​

从 市场 或 VS Code 的扩展选项卡安装 VS Code 扩展。

VS Code extension for Playwright

安装后，打开命令面板并输入：

Install Playwright
Install Playwright

选择 Test: Install Playwright 并选择您希望运行测试的浏览器。这些稍后可以在 playwright.config 文件中配置。您还可以选择是否希望设置 GitHub Actions 以 在 CI 上运行您的测试。

Choose Browsers

运行测试​

您可以通过点击测试块旁边的绿色三角形来运行单个测试。Playwright 将运行测试的每一行，当它完成时，您将在测试块旁边看到一个绿色勾号以及运行测试所需的时间。

Run a single test

运行测试并显示浏览器​

您还可以通过在测试侧边栏中选择 Show Browsers 选项来运行测试并显示浏览器。然后，当您点击绿色三角形运行测试时，浏览器将打开，您将直观地看到它运行您的测试。如果您希望所有测试都打开浏览器，请保持选中此选项；如果您希望测试在没有打开浏览器的无头模式下运行，请取消选中它。

Show browsers while running tests

使用 Close all browsers 按钮关闭所有浏览器。

查看并运行所有测试​

在测试侧边栏中查看所有测试，并通过点击每个测试来展开测试。未运行的测试旁边不会有绿色勾号。通过在测试侧边栏中将鼠标悬停在测试上并点击白色三角形来运行所有测试。

Run all tests in file

在特定浏览器上运行测试​

VS Code 测试运行器在默认的 Chrome 浏览器上运行您的测试。要在其他/多个浏览器上运行，请点击播放按钮的下拉菜单并选择另一个配置文件，或者通过点击 Select Default Profile 修改默认配置文件，并选择您希望运行测试的浏览器。

selecting browsers

选择各种或所有配置文件以在多个配置文件上运行测试。这些配置文件是从 playwright.config 文件中读取的。要添加更多配置文件（例如移动配置文件），请首先将其添加到您的配置文件中，然后它将在此处可用。

choosing default profiles

调试测试​

使用 VS Code 扩展，您可以直接在 VS Code 中调试测试，查看错误消息，创建断点并实时调试您的测试。

错误消息​

如果您的测试失败，VS Code 将直接在编辑器中向您显示错误消息，显示预期结果、实际结果以及完整的调用日志。

error messaging in vs code

在调试模式下运行​

要设置断点，请在您希望断点所在的行号旁边点击，直到出现一个红点。通过右键点击您要运行的测试旁边的行，在调试模式下运行测试。浏览器窗口将打开，测试将运行并在设置断点的地方暂停。

setting debug test mode

实时调试​

您可以在调试时直接在 VS Code 中修改您的测试，Playwright 将在浏览器中高亮显示选择器。这是查看选择器是否存在或是否有多个结果的好方法。您可以单步执行测试，暂停测试，并从 VS Code 的菜单中重新运行测试。

Live Debugging in VS Code

在不同浏览器中调试​

通过从下拉菜单中选择配置文件，在特定浏览器上调试您的测试。设置默认配置文件或选择多个配置文件以调试各种配置文件。Playwright 将启动第一个配置文件，调试完成后，它将启动下一个配置文件。

debugging on specific profile

要了解更多关于调试的信息，请参阅 在 Visual Studio Code 中调试。

生成测试​

CodeGen 将在您在浏览器中执行操作时自动为您生成测试，这是快速开始的好方法。浏览器窗口的视口设置为特定的宽度和高度。请参阅 配置指南 以更改视口或模拟不同的环境。

录制新测试​

要录制测试，请点击测试侧边栏中的 Record new 按钮。这将创建一个 test-1.spec.ts 文件并打开一个浏览器窗口。在浏览器中转到您要测试的 URL 并开始点击。Playwright 将记录您的操作并为您生成测试。完成录制后，点击 cancel 按钮或关闭浏览器窗口。然后您可以检查您的 test-1.spec.ts 文件并查看生成的测试。

从此处录制​

录制新的测试片段。这将创建一个新的空测试文件，但录制从上一个测试的当前浏览器状态开始，而不是启动新的浏览器。然后可以将此片段粘贴到以前的测试文件中，以便它可以正确运行。请注意，在下面的示例中，测试从上一个测试的最后状态开始，因此没有 page.goto() 操作。

record a test from a specific browser state

选取选择器​

通过点击测试侧边栏中的 Pick selector 按钮，选取一个选择器并将其复制到您的测试文件中。然后在浏览器中点击您需要的选择器，它现在将显示在 VS Code 的 Pick selector 框中。按键盘上的 'enter' 将选择器复制到剪贴板，然后粘贴到代码中的任何位置。或者按 'escape' 取消。

Pick selectors

接下来​