生成测试
介绍
¥Introduction
Playwright 能够生成开箱即用的测试，是快速开始测试的好方法。它将打开两个窗口，一个是浏览器窗口，你可以在其中与要测试的网站进行交互，另一个是 Playwright 检查器窗口，你可以在其中记录测试、复制测试、清除测试以及更改测试的语言。
¥Playwright comes with the ability to generate tests out of the box and is a great way to quickly get started with testing. It will open two windows, a browser window where you interact with the website you wish to test and the Playwright Inspector window where you can record your tests, copy the tests, clear your tests as well as change the language of your tests.
你将学习
¥You will learn
运行代码生成器
¥Running Codegen
使用 codegen 命令运行测试生成器，后跟要为其生成测试的网站的 URL。URL 是可选的，你始终可以在没有它的情况下运行命令，然后将 URL 直接添加到浏览器窗口中。
¥Use the codegen command to run the test generator followed by the URL of the website you want to generate tests for. The URL is optional and you can always run the command without it and then add the URL directly into the browser window instead.
npx playwright codegen demo.playwright.dev/todomvc
记录测试
¥Recording a test
运行 codegen 并在浏览器中执行操作。Playwright 将为用户交互生成代码。Codegen 将查看渲染的页面并找出推荐的定位器、优先级角色、文本和测试 ID 定位器。如果生成器识别出与定位器匹配的多个元素，它将改进定位器，使其具有弹性并唯一地识别目标元素，从而消除和减少由于定位器而导致的测试失败和剥落。
¥Run codegen and perform actions in the browser. Playwright will generate the code for the user interactions. Codegen will look at the rendered page and figure out the recommended locator, prioritizing role, text and test id locators. If the generator identifies multiple elements matching the locator, it will improve the locator to make it resilient and uniquely identify the target element, therefore eliminating and reducing test(s) failing and flaking due to locators.
使用测试生成器，你可以记录：
¥With the test generator you can record:
-
只需与页面交互即可执行点击或填充等操作
¥Actions like click or fill by simply interacting with the page
-
通过单击工具栏中的图标之一，然后单击页面上要断言的元素来进行断言。你可以选择：
¥Assertions by clicking on one of the icons in the toolbar and then clicking on an element on the page to assert against. You can choose:
-
'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
-
完成与页面的交互后，按 'record' 按钮停止录制并使用 'copy' 按钮将生成的代码复制到编辑器。
¥When you have finished interacting with the page, press the 'record' button to stop the recording and use the 'copy' button to copy the generated code to your editor.
使用 'clear' 按钮清除代码以重新开始录制。完成后关闭 Playwright 检查器窗口或停止终端命令。
¥Use the 'clear' button to clear the code to start recording again. Once finished close the Playwright inspector window or stop the terminal command.
要了解有关生成测试的更多信息，请查看 代码生成器 上的详细指南。
¥To learn more about generating tests check out or detailed guide on Codegen.
生成定位器
¥Generating locators
你可以使用测试生成器生成 locators。
¥You can generate locators with the test generator.
-
按
'Record'按钮停止录音，然后会出现'Pick Locator'按钮。¥Press the
'Record'button to stop the recording and the'Pick Locator'button will appear. -
单击
'Pick Locator'按钮，然后将鼠标悬停在浏览器窗口中的元素上，即可查看每个元素下方高亮的定位器。¥Click on the
'Pick Locator'button and then hover over elements in the browser window to see the locator highlighted underneath each element. -
要选择定位器，请单击要定位的元素，该定位器的代码将显示在“选择定位器”按钮旁边的定位器在线运行中。
¥To choose a locator click on the element you would like to locate and the code for that locator will appear in the locator playground next to the Pick Locator button.
-
然后，你可以在定位器在线运行中编辑定位器以对其进行微调，并查看浏览器窗口中高亮的匹配元素。
¥You can then edit the locator in the locator playground to fine tune it and see the matching element highlighted in the browser window.
-
使用复制按钮复制定位器并将其粘贴到你的代码中。
¥Use the copy button to copy the locator and paste it into your code.
模拟
¥Emulation
你还可以使用模拟生成测试，以便为特定视口、设备、配色方案生成测试，以及模拟地理位置、语言或时区。测试生成器还可以生成测试，同时保留经过身份验证的状态。查看 测试生成器 指南以了解更多信息。
¥You can also generate tests using emulation so as to generate a test for a specific viewport, device, color scheme, as well as emulate the geolocation, language or timezone. The test generator can also generate a test while preserving authenticated state. Check out the Test Generator guide to learn more.
下一步是什么
¥What's Next