Skip to main content

代码生成与高亮

🌐 Codegen & Highlighting

每个 playwright-cli 操作都会打印刚运行的 Playwright 代码。生成的代码是测试的原始材料——本页涵盖了这些内容，以及支持编写的命令：记录用户手动执行的操作流程，将引用转换为定位器，以及高亮页面上的元素。

🌐 Every playwright-cli action prints the Playwright code it just ran. That generated code is the raw material for tests — this page covers it, plus the commands that support authoring: recording a flow the user performs by hand, turning a ref into a locator, and highlighting elements on the page.

生成的代码​

🌐 Generated code

$ playwright-cli fill e1 "user@example.com"

### Ran Playwright code

await page.getByRole('textbox', { name: 'Email' }).fill('user@example.com');

### Page

- Page URL: https://example.com/login
...

$ playwright-cli click e3

### Ran Playwright code

await page.getByRole('button', { name: 'Sign In' }).click();

把那些代码行收集到一个测试中，并添加断言：

🌐 Collect those lines into a test and add the assertions:

import { test, expect } from '@playwright/test';

test('login flow', async ({ page }) => {
  await page.goto('https://example.com/login');
  await page.getByRole('textbox', { name: 'Email' }).fill('user@example.com');
  await page.getByRole('textbox', { name: 'Password' }).fill('password123');
  await page.getByRole('button', { name: 'Sign In' }).click();

  await expect(page).toHaveURL(/.*dashboard/);
});

生成的代码更倾向于基于角色的定位器，这比 CSS 选择器在标记更改时更稳定。在配置文件中设置 codegen 来生成 python、java 或 csharp 而不是 TypeScript，或者设置 none 来完全屏蔽该代码部分。

🌐 The generated code prefers role-based locators, which survive markup changes far better than CSS selectors. Set codegen in the config file to emit python, java or csharp instead of TypeScript, or none to suppress the code section entirely.

记录用户操作​

🌐 Recording user actions

当某些操作比描述更容易展示时——比如拖拽操作、画布手势、使用硬件密钥登录——把浏览器交给用户，记录他们的操作。

🌐 When the flow is easier to demonstrate than to describe — a drag interaction, a canvas gesture, a login with a hardware key — hand the browser to the user and record what they do.

playwright-cli open https://example.com --headed
playwright-cli recording-start
# the user performs the flow in the browser window
playwright-cli recording-stop

recording-stop 会把用户做的所有操作打印成 Playwright 代码：

Recording stopped. Recorded actions:

await page.getByRole('link', { name: 'Products' }).click();
await page.getByRole('textbox', { name: 'Search' }).fill('laptop');
await page.getByRole('textbox', { name: 'Search' }).press('Enter');

recording-start 会把浏览器窗口放到前面，所以请在有界面会话中运行它。

正在生成定位器​

🌐 Generating a locator

generate-locator 会把一个 ref 或选择器变成你在测试中会用到的定位器：

$ playwright-cli generate-locator e5
# getByRole('button', { name: 'Add to cart' })

$ playwright-cli --raw generate-locator "#checkout button.primary"
# getByRole('button', { name: 'Checkout' })

当你需要快照未显示的底层属性时——比如一个 id、一个 data-testid、一个类——就把它和 eval 配合使用：

🌐 Pair it with eval when you need the underlying attributes — an id, a data-testid, a class — that the snapshot does not show:

playwright-cli eval "el => el.getAttribute('data-testid')" e5

突出元素​

🌐 Highlighting elements

highlight 会在一个元素周围绘制一个持久的覆盖层。它对于向用户显示你指的是哪个元素，以及在截图或录制的视频中突出目标非常有用。

playwright-cli highlight e5
playwright-cli highlight e5 --style="outline: 3px dashed red"

playwright-cli highlight e5 --hide     # hide one element's highlight
playwright-cli highlight --hide        # hide every highlight on the page

高亮是覆盖层，不会改变页面：它们不会拦截点击，因此你可以在与页面交互时保持它们显示。

🌐 Highlights are overlays, not page changes: they do not intercept clicks, so you can leave them up while interacting with the page.

测试生成工作流程​

🌐 Test generation workflow

已安装的技能记录了一个更完整的计划 → 生成 → 治疗循环，它基于相同的机制：

🌐 The installed skill documents a fuller plan → generate → heal loop, which builds on the same mechanic:

  1. 计划 — 用命令行探索应用，并写一个说明文件来描述要测试的内容。
  2. 生成 — 逐步回放规范，将生成的代码收集到测试文件中。
  3. 修复 — 使用 --debug=cli 运行失败的测试，附加 到暂停的页面，然后使用新生成的代码修复过时的定位器或预期。