7. 测试生成器 codegen 与 Test Generator

什么是测试生成器

新手最大的疑问往往是：Locator（定位器，用来在页面上找元素的表达式）到底该怎么写？

Playwright 自带一个测试生成器（Test Generator），能边看你在浏览器里点，边生成代码。你不用先背语法，先录一段再说。

它有两个入口：命令行里的 codegen，和 VS Code 插件里的录制按钮。生成的代码会优先用 role、text、test id 这类稳的定位器，这点很关键。

命令行：codegen

最基础的用法，直接跟一个网址：

npx playwright codegen demo.playwright.dev/todomvc

执行后会开两个窗口。一个是浏览器，你在里面正常操作；另一个是 Playwright Inspector（检查器，一个录制的控制面板），实时显示生成的代码。

录完点 Stop，再点 Copy，把代码粘进编辑器即可。

录制时你能做的，不只是点击和填表：

• assert visibility：断言某个元素可见
• assert text：断言某元素含指定文字
• assert value：断言某输入框有指定值

点工具栏上对应图标，再点页面元素，就能生成一条断言。

VS Code 里录制

装了 Playwright 官方 VS Code 插件后，侧边栏有个 Testing 面板。

• 点 Record new：新建 test-1.spec.ts 并开始录制。
• 点 Record at cursor：把新操作插到光标所在位置。

录出来的代码直接落在文件里，你可以随时手动改。

生成器挑的定位器为什么稳

这是重点。生成器不是无脑记坐标，它会「看」页面，挑最稳的定位方式：

1. 优先 role（按钮、标题、链接等语义角色）。
2. 其次 text（页面上的文字）。
3. 再次 test id（测试专用标记）。

如果找到多个匹配，它还会自动加条件，让定位器唯一指向目标元素。所以生成的代码天然比一长串 CSS 路径耐改。

模拟设备与视口

生成器还能顺手带上环境模拟，省得你手写配置。

# 指定视口大小
npx playwright codegen --viewport-size="800,600" playwright.dev

# 模拟手机设备
npx playwright codegen --device="iPhone 13" playwright.dev

# 模拟深色模式
npx playwright codegen --color-scheme=dark playwright.dev

# 模拟时区、经纬度、语言
npx playwright codegen --timezone="Europe/Rome" --geolocation="41.89,12.49" --lang="it-IT" bing.com/maps

生成什么语言：—target

默认生成的是 Playwright Test 的 TypeScript 代码。想换成别的形态，用 --target：

# 生成 JavaScript（不带测试运行器骨架）
npx playwright codegen --target=javascript playwright.dev

# 顺手把结果写进文件，而不是只显示在检查器里
npx playwright codegen --target=javascript -o tests/gen.spec.js playwright.dev

--target 也支持 Playwright 的其他语言绑定，取值可以用 npx playwright codegen --help 查。本教程主线只用 TypeScript/JavaScript，其他语言留到最后几章单独讲。

登录态复用

录需要登录的页面很麻烦，每次都要先登。生成器支持把登录态存下来复用。

# 录完把 cookie、localStorage 等存进 auth.json
npx playwright codegen github.com/microsoft/playwright --save-storage=auth.json

# 下次直接带着登录态录
npx playwright codegen --load-storage=auth.json github.com/microsoft/playwright

也支持 --user-data-dir 指向固定的浏览器用户目录，复用已有登录态。注意 Chrome 136 起默认用户目录无法被自动化工具访问，必须新建一个专用目录。

自定义场景里录制

有时你要边拦截网络边录。可以在代码里加 page.pause()，它会弹出一个带录制控件的窗口：

import { chromium } from 'playwright';

(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(); // 在这里手动开始录制
})();

生成器不是终点

录出来的代码是「草稿」，不是「成品」。

它帮你快速起步、找对定位器。但真正的可维护用例，还得你手动整理：拆函数、加参数、补边界断言。把生成器当助手，别当主力。

小结

codegen 能把手动操作录成测试代码，挑的定位器稳健可靠。命令行和 VS Code 都能用，支持模拟设备、复用登录态。它适合起步和找定位器，最终用例仍要手写打磨。

下一章，我们看调试利器：UI Mode 和 Trace Viewer。