Playwright Codegen Test Generator

This chapter introduces Playwright's command-line test generator Codegen, which automatically generates test code through browser operations.

---

What is Codegen

Codegen (Code Generator) is Playwright's built-in interactive test generation tool.

You operate the browser like a regular user, and Codegen automatically converts your operations into Playwright test code.

---

Starting Codegen

# 基本用法：打开一个 URL 并开始录制
npx playwright codegen https://www.example.com/

# 指定代码生成的语言（默认 TypeScript）
npx playwright codegen --target=javascript https://www.example.com/
npx playwright codegen --target=python https://www.example.com/

After starting, two windows will open:

• Browser window: You interact with the page in this window
• Playwright Inspector window: Displays the generated code in real time

---

Recording Operations

When you perform any operation in the browser window, Codegen automatically generates the corresponding Playwright code:

Navigation

Entering a new URL in the address bar and pressing Enter generatespage.goto()statement.

Click

Clicking any element (button, link, menu) generatespage.getByRole(...).click()or similar locate-and-click code.

Input

Typing text in an input box generatespage.getByLabel(...).fill(...)orpage.getByPlaceholder(...).fill(...)。

Select

Selecting an option from a dropdown menu generatespage.getByLabel(...).selectOption(...)。

Checkbox

Checking or unchecking a checkbox generatespage.getByLabel(...).check()or.uncheck()。

---

Automatically Selecting the Best Locator

Codegen analyzes the attributes of page elements and generates a Locator according to the following priority:

1. getByRole()— Element has an explicit ARIA role
2. getByText()— Element has clear text content
3. getByLabel()— Form element has an associated label
4. getByPlaceholder()— Input box has a placeholder
5. getByAltText()— Image has an alt attribute
6. getByTestId()— Element has data-testid
7. getByTitle()— Element has a title attribute
8. locator()— CSS selector (last resort)

If Codegen finds multiple matching elements, it automatically optimizes the Locator until the target element can be uniquely identified.

---

Generating Assertions

In the Inspector window's toolbar, you can click the assertion button to generate assertion code:

• Assert Visibility— Select an element after clicking, generatesawait expect(locator).toBeVisible()
• Assert Text— Generatesawait expect(locator).toHaveText(...)
• Assert Value— Generatesawait expect(locator).toHaveValue(...)
• Assert Snapshot— Generatesawait expect(locator).toHaveScreenshot()

---

Common Codegen Options

Option	Description
--target=javascript	Generate JavaScript code (TypeScript by default)
--target=python	Generate Python code
--target=java	Generate Java code
--target=csharp	Generate C# code
--save-storage=auth.json	Save authentication state after recording
--load-storage=auth.json	Load existing authentication state before recording
-o tests/test.spec.ts	Specify output file (defaults to terminal output)
--viewport-size=375,812	Custom viewport size (simulate mobile devices)
--device="iPhone 15"	Use device presets
--color-scheme=dark	Specify color scheme

---

Codegen vs VS Code Recording: How to Choose

Method	Applicable Scenario
VS Code Record New	Daily test development; code goes directly into the editor and can be modified immediately
Codegen command line	Quick prototyping, cross-language code generation, no IDE dependency

Other extensions