入门 - VS Code
介绍
¥Introduction
Playwright Test 是专门为了满足端到端测试的需求而创建的。Playwright 支持所有现代渲染引擎，包括 Chromium、WebKit 和 Firefox。在 Windows、Linux 和 macOS 上进行本地或 CI 测试，无头测试或使用适用于 Android 和 Mobile Safari 的 Google Chrome 的原生移动模拟进行测试。
¥Playwright Test was created specifically to accommodate the needs of end-to-end testing. Playwright supports all modern rendering engines including Chromium, WebKit, and Firefox. Test on Windows, Linux, and macOS, locally or on CI, headless or headed with native mobile emulation of Google Chrome for Android and Mobile Safari.
首先安装 Playwright 并生成测试以查看其实际情况。或者，你也可以使用 CLI 开始并运行测试。
¥Get started by installing Playwright and generating a test to see it in action. Alternatively you can also get started and run your tests using the CLI.
安装
¥Installation
Playwright 有一个 VS Code 扩展，在使用 Node.js 进行测试时可用。安装 来自 VS Code 市场 或从 VS Code 中的扩展选项卡安装。
¥Playwright has a VS Code extension which is available when testing with Node.js. Install it from the VS Code marketplace or from the extensions tab in VS Code.
安装后，打开命令面板并输入：
¥Once installed, open the command panel and type:
Install Playwright
选择测试：安装 Playwright 并选择你想要运行测试的浏览器。这些可以稍后在 playwright.config 文件中配置。你还可以选择是否要将 GitHub Actions 设置为 在 CI 上运行测试。
¥Select Test: Install Playwright and Choose the browsers you would like to run your tests on. These can be later configured in the playwright.config file. You can also choose if you would like to have a GitHub Actions setup to run your tests on CI.
打开测试侧边栏
¥Opening the testing sidebar
可以通过单击活动栏中的测试图标来打开测试侧边栏。这将使你能够访问测试资源管理器，它将向你显示项目中的所有测试以及包含项目、设置、工具和设置的 Playwright 侧边栏。
¥The testing sidebar can be opened by clicking on the testing icon in the activity bar. This will give you access to the test explorer, which will show you all the tests in your project as well as the Playwright sidebar which includes projects, settings, tools and setup.
运行测试
¥Running tests
你可以通过单击测试块旁边的绿色三角形来运行单个测试。Playwright 将运行测试的每一行，完成后你将在测试块旁边看到一个绿色勾号以及运行测试所需的时间。
¥You can run a single test by clicking the green triangle next to your test block to run your test. Playwright will run through each line of the test and when it finishes you will see a green tick next to your test block as well as the time it took to run the test.
运行测试并显示浏览器
¥Run tests and show browsers
你还可以运行测试并通过选择测试侧栏中的“显示浏览器”选项来显示浏览器。然后，当你单击绿色三角形来运行测试时，浏览器将打开，你将直观地看到它在测试中运行。如果你希望打开浏览器进行所有测试，请保留此选项；如果你希望测试在不打开浏览器的情况下以无头模式运行，请取消选中此选项。
¥You can also run your tests and show the browsers by selecting the option Show Browsers in the testing sidebar. Then when you click the green triangle to run your test the browser will open and you will visually see it run through your test. Leave this selected if you want browsers open for all your tests or uncheck it if you prefer your tests to run in headless mode with no browser open.
使用关闭所有浏览器按钮关闭所有浏览器。
¥Use the Close all browsers button to close all browsers.
查看并运行所有测试
¥View and run all tests
查看测试侧栏中的所有测试，并通过单击每个测试来扩展测试。尚未运行的测试旁边不会有绿色勾号。将鼠标悬停在测试侧栏中的测试上时，单击白色三角形来运行所有测试。
¥View all tests in the testing sidebar and extend the tests by clicking on each test. Tests that have not been run will not have the green check next to them. Run all tests by clicking on the white triangle as you hover over the tests in the testing sidebar.
在多个浏览器上运行测试
¥Running tests on multiple browsers
Playwright 侧边栏中的第一个部分是项目部分。在这里，你可以看到 Playwright 配置文件中定义的所有项目。安装 Playwright 时的默认配置为你提供 3 个项目，Chromium、Firefox 和 WebKit。默认情况下选择第一个项目。
¥The first section in the Playwright sidebar is the projects section. Here you can see all your projects as defined in your Playwright config file. The default config when installing Playwright gives you 3 projects, Chromium, Firefox and WebKit. The first project is selected by default.
要在多个项目上运行测试，请通过选中项目名称旁边的复选框来选择每个项目。然后，当你从侧边栏运行测试或按下测试名称旁边的播放按钮时，测试将在所有选定的项目上运行。
¥To run tests on multiple projects, select each project by checking the checkboxes next to the project name. Then when you run your tests from the sidebar or by pressing the play button next to the test name, the tests will run on all the selected projects.
你还可以通过单击测试项目名称旁边的灰色播放按钮，单独对特定项目运行测试。
¥You can also individually run a test on a specific project by clicking the grey play button next to the project name of the test.
使用跟踪查看器运行测试
¥Run tests with trace viewer
为了获得更好的开发者体验，你可以使用“显示跟踪查看器”选项运行测试。
¥For a better developer experience you can run your tests with the Show Trace Viewer option.
这将打开测试的完整跟踪，你可以在其中逐步执行测试的每个操作、探索时间线、源代码等。
¥This will open up a full trace of your test where you can step through each action of your tests, explore the timeline, source code and more.
要了解有关跟踪查看器的更多信息，请参阅我们的 跟踪查看器指南。
¥To learn more about the trace viewer see our Trace Viewer guide.
调试测试
¥Debugging tests
使用 VS Code 扩展，你可以直接在 VS Code 中调试测试、查看错误消息、创建断点并实时调试测试。
¥With the VS Code extension you can debug your tests right in VS Code see error messages, create breakpoints and live debug your tests.
错误消息
¥Error messages
如果你的测试失败，VS Code 将在编辑器中直接向你显示错误消息，显示预期的内容、收到的内容以及完整的调用日志。
¥If your test fails VS Code will show you error messages right in the editor showing what was expected, what was received as well as a complete call log.
实时调试
¥Live debugging
你可以在 VS Code 中实时调试测试。在选中 Show Browser 选项的情况下运行测试后，单击 VS Code 中的任何定位器，它将在浏览器窗口中高亮。如果存在，Playwright 会高亮它，并显示是否有多个结果
¥You can debug your test live in VS Code. After running a test with the Show Browser option checked, click on any of the locators in VS Code and it will be highlighted in the Browser window. Playwright will highlight it if it exists and show you if there is more than one result
你还可以在 VS Code 中编辑定位器，Playwright 将在浏览器窗口中实时显示更改。
¥You can also edit the locators in VS Code and Playwright will show you the changes live in the browser window.
在调试模式下运行
¥Run in debug mode
要设置断点，请单击要设置断点的行号旁边，直到出现红点。右键单击要运行的测试旁边的行，以调试模式运行测试。
¥To set a breakpoint click next to the line number where you want the breakpoint to be until a red dot appears. Run the tests in debug mode by right clicking on the line next to the test you want to run.
将打开一个浏览器窗口，测试将运行并在设置断点的位置暂停。你可以从 VS Code 中的菜单单步执行测试、暂停测试并重新运行测试。
¥A browser window will open and the test will run and pause at where the breakpoint is set. You can step through the tests, pause the test and rerun the tests from the menu in VS Code.
要了解有关调试的更多信息，请参阅 在 Visual Studio Code 中调试。
¥To learn more about debugging, see Debugging in Visual Studio Code.
使用跟踪查看器进行调试
¥Debug with trace viewer
为了获得更好的开发者体验，你可以使用“显示跟踪查看器”选项来调试测试。
¥For a better developer experience you can debug your tests with the Show Trace Viewer option.
这将打开测试的完整跟踪，你可以在其中逐步执行每个操作并查看操作之前和之后发生的情况。你还可以检查 DOM 快照、查看控制台日志、网络请求、源代码等。
¥This will open up a full trace of your test where you can step through each action and see what happened before and after the action. You can also inspect the DOM snapshot, see console logs, network requests, the source code and more.
要了解有关跟踪查看器的更多信息，请参阅我们的 跟踪查看器指南。
¥To learn more about the trace viewer see our Trace Viewer guide.
生成测试
¥Generating tests
当你在浏览器中执行操作时，CodeGen 将自动为你生成测试，这是快速入门的好方法。浏览器窗口的视口设置为特定的宽度和高度。请参阅 配置指南 来更改视口或模拟不同的环境。
¥CodeGen will auto generate your tests for you as you perform actions in the browser and is a great way to quickly get started. The viewport for the browser window is set to a specific width and height. See the configuration guide to change the viewport or emulate different environments.
记录新测试
¥Record a new test
要录制测试，请单击测试侧栏中的录制新按钮。这将创建一个 test-1.spec.ts 文件并打开一个浏览器窗口。在浏览器中转到你想要测试的 URL，然后开始单击。Playwright 将记录你的操作并直接在 VS Code 中生成测试代码。你还可以通过选择工具栏中的图标之一，然后单击页面上要断言的元素来生成断言。可以生成以下断言：
¥To record a test click on the Record new button from the Testing sidebar. This will create a test-1.spec.ts file as well as open up a browser window. In the browser go to the URL you wish to test and start clicking around. Playwright will record your actions and generate the test code directly in VS Code. You can also generate assertions by choosing one of the icons in the toolbar and then clicking on an element on the page to assert against. The following assertions can be generated:
-
'assert visibility'断言元素可见¥
'assert visibility'to assert that an element is visible -
'assert text'断言元素包含特定文本¥
'assert text'to assert that an element contains specific text -
'assert value'断言某个元素具有特定值¥
'assert value'to assert that an element has a specific value
完成录制后，单击取消按钮或关闭浏览器窗口。然后你可以检查 test-1.spec.ts 文件并查看生成的测试。
¥Once you are done recording click the cancel button or close the browser window. You can then inspect your test-1.spec.ts file and see your generated test.
在光标处记录
¥Record at cursor
要从测试文件中的特定点进行录制，请单击“测试”侧栏中的“在光标处录制”按钮。这会在当前光标位置处的现有测试中生成操作。你可以运行测试，将光标定位在测试末尾并继续生成测试。
¥To record from a specific point in your test file click the Record at cursor button from the Testing sidebar. This generates actions into the existing test at the current cursor position. You can run the test, position the cursor at the end of the test and continue generating the test.
选择定位器
¥Picking a locator
选择 locator 并通过单击测试侧栏中的“选择定位器”按钮将其复制到测试文件中。然后在浏览器中单击你需要的元素，它现在将显示在 VS Code 的“选择定位器”框中。按键盘上的 'enter' 将定位器复制到剪贴板中，然后粘贴到代码中的任意位置。或者如果你想取消，请按 'escape'。
¥Pick a locator and copy it into your test file by clicking the Pick locator button form the testing sidebar. Then in the browser click the element you require and it will now show up in the Pick locator box in VS Code. Press 'enter' on your keyboard to copy the locator into the clipboard and then paste anywhere in your code. Or press 'escape' if you want to cancel.
Playwright 将查看你的页面并找出最佳定位器，优先考虑 角色、文本和测试 ID 定位器。如果生成器找到多个与定位器匹配的元素，它将改进定位器，使其具有弹性并唯一标识目标元素，因此你不必担心由于定位器而导致测试失败。
¥Playwright will look at your page and figure out the best locator, prioritizing role, text and test id locators. If the generator finds multiple elements matching the locator, it will improve the locator to make it resilient and uniquely identify the target element, so you don't have to worry about failing tests due to locators.
项目依赖
¥Project Dependencies
你可以使用 项目依赖 运行依赖于其他测试的测试。这对于设置测试（例如登录网站）很有用。
¥You can use project dependencies to run tests that depend on other tests. This is useful for setup tests such as logging in to a website.
运行设置测试
¥Running setup tests
要运行安装测试，请从 Playwright 侧边栏的项目部分中选择配置文件中定义的安装项目。这将使你能够访问测试资源管理器中的设置测试。
¥To run your setup tests select the setup project, as defined in your configuration file, from the project section in the Playwright sidebar. This will give you access to the setup tests in the test explorer.
当你运行依赖于设置测试的测试时，设置测试将首先运行。每次运行测试时，设置测试都会再次运行。
¥When you run a test that depends on the setup tests, the setup test will run first. Each time you run the test, the setup test will run again.
仅运行一次设置测试
¥Running setup tests only once
要仅运行一次安装测试，请从 Playwright 侧边栏的项目部分取消选择它。设置测试现在已从测试资源管理器中删除。当你运行依赖于设置测试的测试时，它将不再运行设置测试，从而使其速度更快，从而为开发者带来更好的体验。
¥To run the setup test only once, deselect it from the projects section in the Playwright sidebar. The setup test is now removed from the test explorer. When you run a test that depends on the setup test, it will no longer run the setup test, making it much faster and therefore a much better developer experience.
全局设置
¥Global Setup
执行第一个测试时，全局设置将运行。它只运行一次，对于设置数据库或启动服务器很有用。你可以通过单击 Playwright 侧边栏中“设置”部分的 Run global setup 选项来手动运行全局设置。默认情况下，全局拆卸不运行；你需要通过单击 Run global teardown 选项手动启动它。
¥Global setup runs when you execute your first test. It runs only once and is useful for setting up a database or starting a server. You can manually run global setup by clicking the Run global setup option from the Setup section in the Playwright sidebar. Global teardown does not run by default; you need to manually initiate it by clicking the Run global teardown option.
当你调试测试时，全局设置将重新运行，因为这可确保测试具有隔离的环境和专用设置。
¥Global setup will re-run when you debug tests as this ensures an isolated environment and dedicated setup for the test.
多种配置
¥Multiple configurations
如果你的项目包含多个 playwright 配置文件，你可以通过首先单击 Playwright 侧边栏右上角的齿轮图标在它们之间切换。这将向你显示项目中的所有配置文件。通过选中每个配置文件旁边的复选框并单击 'ok' 按钮来选择要使用的配置文件。
¥If your project contains more than one playwright configuration file, you can switch between them by first clicking on the gear icon in the top right corner of the Playwright sidebar. This will show you all the configuration files in your project. Select the configuration files you want to use by checking the checkbox next to each one and clicking on the 'ok' button.
你现在可以访问测试资源管理器中的所有测试。要运行测试，请单击文件或项目名称旁边的灰色三角形。
¥You will now have access to all your tests in the test explorer. To run a test click on the grey triangle next to the file or project name.
要从所有配置运行所有测试，请单击测试资源管理器顶部的灰色三角形。
¥To run all tests from all configurations click on the grey triangle at the top of the test explorer.
要选择要使用的配置文件，只需单击 Playwright 侧边栏中的配置文件名即可在它们之间切换。现在，当你使用工具（例如记录测试）时，它将为所选配置文件记录测试。
¥To choose a configuration file to work with simply toggle between them by clicking on the configuration file name in the Playwright sidebar. Now when you use the tools, such as Record a test, it will record a test for the selected configuration file.
你可以通过单击 Playwright 侧边栏中的配置文件名轻松地在配置之间来回切换。
¥You can easily toggle back and forth between configurations by clicking on the configuration file name in the Playwright sidebar.
下一步是什么
¥What's next