跳到主要内容

测试生成器

简介

Playwright 提供了根据你在浏览器中的操作自动生成测试代码的能力,是快速入门测试的好方法。Playwright 会检查你的页面,找出最佳的定位器,优先使用 角色、文本和测试 id 定位器。如果生成器找到多个匹配定位器的元素,它会改进定位器以使其更具弹性,从而唯一标识目标元素。

在 VS Code 中生成测试

安装 VS Code 扩展,即可直接在 VS Code 中生成测试。此扩展可在 VS Code Marketplace 上获取。请查阅我们的 VS Code 入门指南

录制新测试

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

record new in vs code

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

generating user actions

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

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

generating assertions

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

code from a generated test

在光标处录制

要从测试中的特定位置开始录制,请将光标移到要录制更多操作的位置,然后点击测试侧边栏中的 在光标处录制 按钮。如果你的浏览器窗口尚未打开,请先运行测试并勾选“显示浏览器”,然后点击 在光标处录制 按钮。

record at cursor in vs code

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

add feed the dog to todo app

在 VS Code 中的测试文件中,你将看到新生成的动作已添加到光标位置的测试代码中。

code from a generated test

生成定位器

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

  • 点击测试侧边栏中的 拾取定位器 按钮,然后将鼠标悬停在浏览器窗口中的元素上,即可看到每个元素下方高亮显示的定位器
  • 点击你需要的元素,它将出现在 VS Code 中的 拾取定位器 框中。
  • 按下键盘上的 Enter 键将定位器复制到剪贴板,然后粘贴到代码中的任何位置。或者按下 'escape' 键取消。
Pick locators in VS code

使用 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'(断言元素具有特定值)

Recording a test

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

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

生成定位器

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

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

picking a locator

模拟

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

模拟视口大小

Playwright 打开一个浏览器窗口,其视口设置为特定的宽度和高度,并且不是响应式的,因为测试需要在相同的条件下运行。使用 --viewport 选项可以生成不同视口大小的测试。

npx playwright codegen --viewport-size="800,600" playwright.dev
Codegen generating code for tests for playwright.dev website with a specific viewport js

模拟设备

使用 --device 选项录制脚本和测试,同时模拟移动设备,该选项会设置视口大小和用户代理等。

npx playwright codegen --device="iPhone 13" playwright.dev
Codegen generating code for tests for playwright.dev website emulated for iPhone 13 js

模拟颜色方案

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

npx playwright codegen --color-scheme=dark playwright.dev
Codegen generating code for tests for playwright.dev website in dark mode 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 generating code for tests for bing maps showing timezone, geolocation as Rome, Italy and in Italian language

保留认证状态

运行带 --save-storage 选项的 codegen 命令,以在会话结束时保存 cookieslocalStorageIndexedDB 数据。这对于单独录制认证步骤,并在之后录制更多测试时重用认证状态非常有用。

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 保存的存储状态。这样,所有的 cookieslocalStorageIndexedDB 数据都会恢复,使大多数 Web 应用无需再次登录即可进入认证状态。这意味着你可以从登录状态继续生成测试。

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

使用自定义 setup 录制

如果你想在一些非标准 setup 中使用 codegen(例如,使用 browserContext.route()),可以调用 page.pause(),这将打开一个带有 codegen 控制项的独立窗口。

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