跳到主要内容

测试生成器

简介​

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

在 VS Code 中生成测试​

安装 VS Code 扩展后，可以直接从 VS Code 生成测试。该扩展可在 VS Code 应用商店 获取。查看我们的 VS Code 入门指南。

录制新测试​

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

record new in vs code

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

生成用户操作

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

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

生成断言

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

生成的测试代码

从光标处录制​

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

record at cursor in vs code

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

在待办应用中添加'喂狗'任务

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

生成的测试代码

生成定位器​

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

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

使用 Playwright Inspector 生成测试​

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

运行代码生成器​

使用 codegen 命令来运行测试生成器，后面可以跟上你想要为其生成测试的网站 URL。URL 是可选的，你也可以直接运行命令而不带 URL，稍后在浏览器窗口中手动输入 URL。

npx playwright codegen demo.playwright.dev/todomvc

录制测试​

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

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

  • 点击或填写等操作 - 只需与页面交互即可
  • 断言 - 点击工具栏中的某个图标，然后点击页面上的元素进行断言。你可以选择：
    • 'assert visibility' 断言元素可见
    • 'assert text' 断言元素包含特定文本
    • 'assert value' 断言元素具有特定值

录制测试

​

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

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

生成定位器​

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

  • 点击'录制'按钮停止录制，此时会出现'选择定位器'按钮。
  • 点击'选择定位器'按钮，然后将鼠标悬停在浏览器窗口中的元素上，可以看到每个元素下方高亮显示的定位器。
  • 要选择定位器，只需点击您想要定位的元素，该定位器的代码就会出现在"选择定位器"按钮旁边的输入框中。
  • 您可以在此输入框中编辑定位器进行微调，或者使用复制按钮将其复制并粘贴到您的代码中。
​

选择定位器

模拟功能​

您可以使用测试生成器来生成带有模拟功能的测试，例如针对特定视口、设备、配色方案生成测试，还可以模拟地理位置、语言或时区。测试生成器还可以在保持认证状态的情况下生成测试。

模拟视口尺寸​

Playwright会打开一个设置了特定宽度和高度的浏览器窗口，且不会响应式变化，因为测试需要在相同条件下运行。使用--viewport选项可以生成不同视口尺寸的测试。

npx playwright codegen --viewport-size="800,600" playwright.dev
​
代码生成器为playwright.dev网站生成特定视口的测试代码 js

模拟设备​

使用--device选项可以在模拟移动设备的情况下录制脚本和测试，该选项会设置视口尺寸、用户代理等参数。

npx playwright codegen --device="iPhone 13" playwright.dev
​
Codegen 为模拟 iPhone 13 的 playwright.dev 网站生成测试代码 js

模拟配色方案​

使用 --color-scheme 选项在录制脚本和测试时模拟配色方案。

npx playwright codegen --color-scheme=dark playwright.dev
​
Codegen 为暗黑模式下的 playwright.dev 网站生成测试代码 js

模拟地理位置、语言和时区​

使用 --timezone、--geolocation 和 --lang 选项在录制脚本和测试时模拟时区、语言和位置。页面打开后：

  1. 接受 cookies
  2. 在右上角点击定位按钮查看地理位置模拟效果
npx playwright codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" bing.com/maps
​
Codegen 为必应地图生成测试代码，显示时区为罗马、地理位置为意大利罗马且使用意大利语

保持认证状态​

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

npx playwright codegen github.com/microsoft/playwright --save-storage=auth.json
​
github page before logging in js

登录​

完成身份验证并关闭浏览器后，auth.json 文件将包含存储状态，你可以在测试中重复使用这些状态。

login to GitHub screen

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

加载认证状态​

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

npx playwright codegen --load-storage=auth.json github.com/microsoft/playwright
​
github signed in showing use of load storage js

使用自定义设置录制​

如果您希望在非标准设置中使用代码生成功能（例如使用 browserContext.route()），可以调用 page.pause() 方法，该方法会打开一个带有代码生成控制界面的独立窗口。

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

(async () => {
  // 确保以有头模式运行
  const browser = await chromium.launch({ headless: false });

  // 按需设置上下文
  const context = await browser.newContext({ /* 可传入任意选项 */ });
  await context.route('**/*', route => route.continue());

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