测试生成器

简介

Playwright 带有在你于浏览器中执行操作时为你生成测试的能力，这是快速开始测试的绝佳方式。Playwright 会查看你的页面并找出最佳定位器，优先使用 角色、文本和测试 ID 定位器。如果生成器发现有多个元素匹配该定位器，它会改进该定位器，使其更具弹性，并能够唯一标识目标元素。

在 VS Code 中生成测试

安装 VS Code 扩展，并直接从 VS Code 生成测试。该扩展可在 VS Code Marketplace 上获取。请查看我们的 VS Code 入门指南。

录制新测试

要录制测试，请从 Testing 侧边栏点击 Record new 按钮。这将创建一个 test-1.spec.ts 文件，并打开一个浏览器窗口。

在浏览器中前往你想要测试的 URL，然后开始点击页面来录制你的用户操作。

Playwright 会录制你的操作，并直接在 VS Code 中生成测试代码。你也可以通过选择工具栏中的某个图标，然后点击页面上的元素来生成断言。可以生成以下断言：

• 'assert visibility'：断言某个元素可见
• 'assert text'：断言某个元素包含特定文本
• 'assert value'：断言某个元素具有特定值

录制完成后，点击取消按钮或关闭浏览器窗口。然后你可以检查你的 test-1.spec.ts 文件，并在需要时手动改进它。

在光标处录制

要从测试中的特定位置开始录制，请将光标移动到你想要录制更多操作的位置，然后从 Testing 侧边栏点击 Record at cursor 按钮。如果你的浏览器窗口尚未打开，请先勾选 Show browser 运行测试，然后再点击 Record at cursor 按钮。

在浏览器窗口中开始执行你想要录制的操作。

在 VS Code 的测试文件中，你会看到新生成的操作已被添加到测试中的光标位置。

生成定位器

你可以使用测试生成器生成定位器。

• 从 Testing 侧边栏点击 Pick locator 按钮，然后将鼠标悬停在浏览器窗口中的元素上，即可看到每个元素下方高亮显示的 定位器。
• 点击你需要的元素，它现在会显示在 VS Code 的 Pick locator 框中。
• 按键盘上的 Enter 将定位器复制到剪贴板，然后粘贴到代码中的任意位置。或者如果想取消，请按 Escape。

使用 Playwright Inspector 生成测试

运行 codegen 命令时，将打开两个窗口：一个是浏览器窗口，你可以在其中与要测试的网站交互；另一个是 Playwright Inspector 窗口，你可以在其中录制测试，然后将它们复制到编辑器中。

运行 Codegen

使用 codegen 命令运行测试生成器，后面跟上你想要为其生成测试的网站 URL。URL 是可选的，你始终可以不带 URL 运行该命令，然后直接在浏览器窗口中添加 URL。

npx playwright codegen demo.playwright.dev/todomvc

录制测试

运行 codegen 命令，并在浏览器窗口中执行操作。Playwright 将为用户交互生成代码，你可以在 Playwright Inspector 窗口中看到这些代码。完成测试录制后，停止录制并按复制按钮，将生成的测试复制到编辑器中。

使用测试生成器，你可以录制：

• 通过简单地与页面交互来录制点击或填写等操作
• 通过点击工具栏中的某个图标，然后点击页面上的元素来生成断言。你可以选择：
  • 'assert visibility'：断言某个元素可见
  • 'assert text'：断言某个元素包含特定文本
  • 'assert value'：断言某个元素具有特定值

当你完成与页面的交互后，按录制按钮停止录制，并使用复制按钮将生成的代码复制到编辑器中。

使用清除按钮可以清除代码，以便重新开始录制。完成后，关闭 Playwright Inspector 窗口或停止终端命令。

生成定位器

你可以使用测试生成器生成 定位器。

• 按 'Record' 按钮停止录制，随后会出现 'Pick Locator' 按钮。
• 点击 'Pick Locator' 按钮，然后将鼠标悬停在浏览器窗口中的元素上，即可看到每个元素下方高亮显示的定位器。
• 要选择定位器，请点击你想要定位的元素，该定位器的代码将出现在 Pick Locator 按钮旁边的字段中。
• 然后你可以在该字段中编辑定位器以进行微调，或者使用复制按钮复制它并粘贴到你的代码中。

模拟

你可以使用测试生成器通过模拟来生成测试，从而为特定视口、设备、配色方案生成测试，也可以模拟地理位置、语言或时区。测试生成器还可以在保留已认证状态的同时生成测试。

模拟视口大小

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 选项，在模拟时区、语言和位置时录制脚本和测试。页面打开后：

1. 接受 cookies
2. 在右上角，点击 locate me 按钮查看地理位置效果。

npx playwright codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" bing.com/maps

保留已认证状态

使用 --save-storage 运行 codegen，以便在会话结束时保存 cookies、localStorage 和 IndexedDB 数据。这对于单独录制认证步骤并在稍后录制更多测试时复用它非常有用。

npx playwright codegen github.com/microsoft/playwright --save-storage=auth.json

登录

执行认证并关闭浏览器后，auth.json 将包含存储状态，随后你可以在测试中复用它。

请确保只在本地使用 auth.json，因为它包含敏感信息。将它添加到你的 .gitignore 中，或在完成测试生成后删除它。

加载已认证状态

使用 --load-storage 运行，以使用之前从 auth.json 加载的存储。这样，所有 cookies、localStorage 和 IndexedDB 数据都将被恢复，使大多数 Web 应用进入已认证状态，而无需再次登录。这意味着你可以从已登录状态继续生成测试。

npx playwright codegen --load-storage=auth.json github.com/microsoft/playwright

使用现有 userDataDir

使用 --user-data-dir 运行 codegen，为浏览器会话设置固定的 用户数据目录。如果你创建了自定义浏览器用户数据目录，codegen 将使用这个现有浏览器配置文件，并能够访问该配置文件中存在的任何认证状态。

Caution

截至 Chrome 136，默认用户数据目录无法通过自动化工具访问，例如 Playwright。你必须创建一个单独的用户数据目录用于测试。

npx playwright codegen --user-data-dir=/path/to/your/browser/data/ github.com/microsoft/playwright

使用自定义设置录制

如果你想在一些非标准设置中使用 codegen（例如，使用 browserContext.route()），可以调用 page.pause()，它会打开一个带有 codegen 控件的单独窗口。

const { chromium } = require('@playwright/test');

(async () => {
  // 确保以有头模式运行。
  const browser = await chromium.launch({ headless: false });
  // 按你喜欢的方式设置 context。
  const context = await browser.newContext({ /* pass any options */ });
  await context.route('**/*', route => route.continue());

  // 暂停页面，并手动开始录制。
  const page = await context.newPage();
  await page.pause();
})();