测试生成器
简介
Playwright 提供了在你执行浏览器操作时为你生成测试的能力，这是一种快速入门测试的绝佳方式。Playwright 会查看你的页面并找出最佳定位器，优先考虑 角色、文本和测试 ID 定位器。如果生成器找到多个匹配定位器的元素，它将改进定位器以使其具有弹性，从而唯一识别目标元素。
在 VS Code 中生成测试
安装 VS Code 扩展并直接从 VS Code 生成测试。该扩展可在 VS Code 市场 上获得。查看有关 VS Code 入门 的指南。
录制新测试
要录制测试，请点击测试侧边栏中的“录制新”按钮。这将创建一个 test-1.spec.ts 文件并打开一个浏览器窗口。
在浏览器中，转到要测试的 URL 并开始点击周围以录制你的用户操作。
Playwright 将录制你的操作并将测试代码直接生成到 VS Code 中。你还可以通过选择工具栏中的一个图标，然后点击页面上的一个元素来断言，来生成断言。可以生成以下断言
'assert visibility'用于断言元素可见'assert text'用于断言元素包含特定文本'assert value'用于断言元素具有特定值
完成后，点击“取消”按钮或关闭浏览器窗口。然后你可以检查你的 test-1.spec.ts 文件，并在需要时手动改进它。
在光标处录制
要在测试中的特定点进行录制，请将光标移到你想要录制更多操作的位置，然后点击测试侧边栏中的“在光标处录制”按钮。如果你的浏览器窗口尚未打开，请先运行测试，勾选“显示浏览器”，然后点击“在光标处录制”按钮。
在浏览器窗口中，开始执行要录制的操作。
在 VS Code 中的测试文件中，你将看到你的新生成的操作添加到测试中的光标位置。
生成定位器
你可以使用测试生成器生成定位器。
- 点击测试侧边栏中的“选择定位器”按钮，然后将鼠标悬停在浏览器窗口中的元素上，以查看 定位器 在每个元素下方突出显示。
- 点击所需的元素，它现在将在 VS Code 中的“选择定位器”框中显示出来。
- 按键盘上的 Enter 将定位器复制到剪贴板，然后粘贴到代码中的任何位置。或者，如果你要取消，请按“退出”。
使用 Playwright 检查器生成测试
运行 codegen 命令时，将打开两个窗口，一个浏览器窗口，你可以在其中与要测试的网站进行交互，另一个是 Playwright 检查器窗口，你可以在其中录制测试，然后将它们复制到你的编辑器中。
运行 Codegen
使用 codegen 命令运行测试生成器，后跟要为其生成测试的网站的 URL。URL 是可选的，你始终可以不带 URL 运行命令，然后直接将 URL 添加到浏览器窗口中。
npx playwright codegen demo.playwright.dev/todomvc
录制测试
运行 codegen 命令并在浏览器窗口中执行操作。Playwright 将生成用户交互的代码，你可以在 Playwright 检查器窗口中看到。完成录制测试后，停止录制并点击“复制”按钮将生成的测试复制到你的编辑器中。
使用测试生成器，你可以录制
- 通过简单地与页面进行交互来执行点击或填写等操作
- 通过点击工具栏中的一个图标，然后点击页面上的一个元素来断言，来执行断言。你可以选择
'assert visibility'用于断言元素可见'assert text'用于断言元素包含特定文本'assert value'用于断言元素具有特定值
与页面交互完成后，点击“录制”按钮停止录制，并使用“复制”按钮将生成的代码复制到你的编辑器中。
使用“清除”按钮清除代码以重新开始录制。完成后，关闭 Playwright 检查器窗口或停止终端命令。
生成定位器
你可以使用测试生成器生成 定位器。
- 点击“录制”按钮停止录制，将出现“选择定位器”按钮。
- 点击“选择定位器”按钮，然后将鼠标悬停在浏览器窗口中的元素上，以查看定位器在每个元素下方突出显示。
- 要选择定位器，请点击要定位的元素，该元素的代码将出现在“选择定位器”按钮旁边的字段中。
- 然后你可以在此字段中编辑定位器以微调它，或者使用复制按钮将其复制并粘贴到你的代码中。
仿真
你可以使用测试生成器生成使用仿真的测试，以便为特定视窗、设备、配色方案生成测试，以及模拟地理位置、语言或时区。测试生成器还可以生成在保留身份验证状态的同时进行的测试。
模拟视窗大小
Playwright 打开一个浏览器窗口，其视窗设置为特定宽度和高度，并且没有响应，因为测试需要在相同的条件下运行。使用 --viewport 选项生成具有不同视窗大小的测试。
npx playwright codegen --viewport-size=800,600 playwright.dev
模拟设备
使用 --device 选项录制脚本和测试，同时模拟移动设备，该选项设置视窗大小、用户代理等。
npx playwright codegen --device="iPhone 13" playwright.dev
模拟配色方案
使用 --color-scheme 选项录制脚本和测试，同时模拟配色方案。
npx playwright codegen --color-scheme=dark playwright.dev
模拟地理位置、语言和时区
使用 --timezone、--geolocation 和 --lang 选项录制脚本和测试，同时模拟时区、语言和位置。页面打开后
- 接受 Cookie
- 在右上角，点击定位我按钮以查看地理位置的实际效果。
npx playwright codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" bing.com/maps
保留身份验证状态
使用 --save-storage 运行 codegen，以便在会话结束时保存 Cookie 和 localStorage。这对于单独录制身份验证步骤并在以后录制更多测试时重用它非常有用。
npx playwright codegen github.com/microsoft/playwright --save-storage=auth.json
登录
执行身份验证并关闭浏览器后，auth.json 将包含存储状态，你可以随后在测试中重用它。
确保你只在本地使用 auth.json，因为它包含敏感信息。将其添加到 .gitignore 中，或者在你完成生成测试后将其删除。
加载身份验证状态
使用--load-storage运行以使用auth.json中先前加载的存储。这样，所有cookie和localStorage将被恢复，使大多数网络应用程序进入身份验证状态，无需再次登录。这意味着您可以从登录状态继续生成测试。
npx playwright codegen --load-storage=auth.json github.com/microsoft/playwright
使用自定义设置录制
如果您想在某些非标准设置中使用代码生成器（例如，使用browserContext.route()），则可以调用page.pause()，它将打开一个包含代码生成器控制的单独窗口。
const { chromium } = require('@playwright/test');
(async () => {
// Make sure to run headed.
const browser = await chromium.launch({ headless: false });
// Setup context however you like.
const context = await browser.newContext({ /* pass any options */ });
await context.route('**/*', route => route.continue());
// Pause the page, and start recording manually.
const page = await context.newPage();
await page.pause();
})();