入门 - 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
安装 来自市场的 VS Code 扩展 或从 VS Code 中的扩展选项卡安装。
¥Install the VS Code extension from the 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.
运行测试
¥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.
在特定浏览器上运行测试
¥Run Tests on Specific Browsers
VS Code 测试运行程序在 Chrome 的默认浏览器上运行你的测试。要在其他/多个浏览器上运行，请单击播放按钮的下拉列表并选择另一个配置文件，或通过单击“选择默认配置文件”并选择你希望运行测试的浏览器来修改默认配置文件。
¥The VS Code test runner runs your tests on the default browser of Chrome. To run on other/multiple browsers click the play button's dropdown and choose another profile or modify the default profile by clicking Select Default Profile and select the browsers you wish to run your tests on.
选择各种或所有配置文件以在多个配置文件上运行测试。这些配置文件是从 playwright.config 文件中读取的。要添加更多配置文件（例如移动配置文件），请首先将其添加到你的配置文件中，然后即可在此处使用。
¥Choose various or all profiles to run tests on multiple profiles. These profiles are read from the playwright.config file. To add more profiles such as a mobile profile, first add it to your config file and it will then be available here.
使用跟踪查看器运行测试
¥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.
在不同浏览器中调试
¥Debug in different Browsers
默认情况下，调试是使用 Chromium 配置文件完成的。你可以通过右键单击测试侧栏中的调试图标并单击下拉列表中的 '选择默认配置文件' 选项，在不同的浏览器上调试测试。
¥By default debugging is done using the Chromium profile. You can debug your tests on different browsers by right clicking on the debug icon in the testing sidebar and clicking on the 'Select Default Profile' option from the dropdown.
然后选择你想要用于调试测试的测试配置文件。每次在调试模式下运行测试时，它将使用你选择的配置文件。你可以通过右键单击测试所在的行号并从菜单中选择 '调试测试' 在调试模式下运行测试。
¥Then choose the test profile you would like to use for debugging your tests. Each time you run your test in debug mode it will use the profile you selected. You can run tests in debug mode by right clicking the line number where your test is and selecting 'Debug Test' from the menu.
要了解有关调试的更多信息，请参阅 在 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.
下一步是什么
¥What's next