测试生成器

简介​

Playwright 具备在您操作浏览器时自动生成测试的能力，这是快速开始测试的绝佳方式。Playwright 会分析您的页面并确定最佳定位器，优先采用角色、文本和测试ID定位器。如果生成器发现多个元素匹配定位器，它将优化定位器以确保其能唯一识别目标元素。

在VS Code中生成测试​

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

录制新测试​

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

在浏览器中访问您想要测试的URL，然后开始点击以记录您的用户操作。

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

• 'assert visibility' 用于断言元素是否可见
• 'assert text' 用于断言元素包含特定文本
• 'assert value' 用于断言元素具有特定值

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

在光标处录制​

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

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

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

生成定位器​

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

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

使用Playwright Inspector生成测试​

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

运行代码生成器​

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

npx playwright codegen demo.playwright.dev/todomvc

录制测试​

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

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

• 通过简单地与页面交互来执行点击或填充等操作
• 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 text' 用于断言元素包含特定文本
  • 'assert value' 用于断言元素具有特定值

​

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

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

生成定位器​

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

• 按下'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. 接受Cookie
2. 在右上角，点击"定位我"按钮查看地理位置功能。

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

​

保留认证状态​

运行 codegen 时使用 --save-storage 参数可以在会话结束时保存 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数据都会被恢复，使大多数网页应用直接进入已认证状态而无需再次登录。这意味着您可以从已登录状态继续生成测试用例。

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();
})();