Introduction
Learning how to record test steps using Playwright Codegen is one of the fastest ways to start browser automation with Playwright. Whether you’re a QA Automation Engineer, SDET, Selenium engineer transitioning to Playwright, software testing student, or developer, Codegen helps you generate automation scripts by simply interacting with a web application.
Instead of writing every locator and action manually, Playwright Codegen records your clicks, typing, navigation, and assertions, then generates clean Playwright code in real time. This significantly speeds up test development and is especially useful for beginners learning Playwright or experienced engineers creating test prototypes.
In this how to record test steps using Playwright Codegen tutorial, you’ll learn:
- What Playwright Codegen is
- How to install Playwright
- How to launch Codegen
- How to record browser actions
- How to generate TypeScript tests
- How to save and execute generated tests
- Best practices for converting recorded scripts into maintainable automation frameworks
- Real-world automation examples
- CI/CD considerations
- Interview questions
What Is Playwright Codegen?
Playwright Codegen is a built-in Playwright tool that records browser interactions and automatically generates automation code in multiple programming languages, including TypeScript.
Instead of manually writing automation scripts, you perform actions in a browser, and Codegen creates the corresponding Playwright commands.
Typical workflow:
User Actions
│
▼
Playwright Codegen
│
▼
Generated TypeScript Code
│
▼
Save Test
│
▼
Execute Test
Supported languages include:
- TypeScript
- JavaScript
- Python
- Java
- C#
Benefits of Using Playwright Codegen
Understanding how to record test steps using Playwright Codegen provides several advantages:
- Quickly generate automation scripts
- Learn Playwright syntax by example
- Produce reliable locators automatically
- Reduce manual coding effort
- Speed up test prototyping
- Excellent learning tool for beginners
- Useful for exploratory testing
- Supports multiple programming languages
Step-by-Step Tutorial: How to Record Test Steps Using Playwright Codegen
Step 1: Install Playwright
Create a new Playwright project.
npm init playwright@latest
Install browsers.
npx playwright install
Verify the installation.
npx playwright –version
Step 2: Launch Playwright Codegen
Run the following command.
npx playwright codegen https://example.com
This opens:
- Browser window
- Code generation window
Every interaction is immediately translated into Playwright TypeScript code.
Step 3: Record User Actions
Perform actions such as:
- Click buttons
- Fill forms
- Select dropdown values
- Navigate pages
- Check checkboxes
- Upload files
As you interact with the application, Codegen continuously updates the generated code.
Step 4: Generated TypeScript Example
Suppose you log in to an application.
Playwright Codegen may generate:
import { test, expect } from ‘@playwright/test’;
test(‘Login Test’, async ({ page }) => {
await page.goto(‘https://example.com’);
await page.getByLabel(‘Username’).fill(‘admin’);
await page.getByLabel(‘Password’).fill(‘admin123’);
await page.getByRole(‘button’, {
name: ‘Login’
}).click();
await expect(page).toHaveURL(/dashboard/);
});
Explanation
This generated script:
- Opens the website
- Enters username
- Enters password
- Clicks the Login button
- Verifies successful navigation to the dashboard
Codegen uses modern locator strategies such as:
- getByRole()
- getByLabel()
- getByText()
- getByPlaceholder()
These locators are generally more reliable than brittle XPath expressions.
Step 5: Save the Generated Test
Create a test file.
tests/login.spec.ts
Paste the generated code into the file.
Example project structure:
playwright-project/
├── tests/
│ └── login.spec.ts
│
├── playwright.config.ts
│
├── package.json
│
└── node_modules/
Step 6: Execute the Test
Run all tests.
npx playwright test
Run only one test.
npx playwright test tests/login.spec.ts
Run in headed mode.
npx playwright test –headed
Generate an HTML report.
npx playwright show-report
Real-World Automation Examples
1. Login Automation
Record:
- Open login page
- Enter credentials
- Click Login
- Verify dashboard
Use case: Authentication testing.
2. Form Submission
Generated code:
await page.getByLabel(‘First Name’).fill(‘John’);
await page.getByLabel(‘Email’)
.fill(‘john@test.com’);
await page.getByRole(‘button’, {
name:’Submit’
}).click();
Use case: Registration forms.
3. Search Functionality
await page.getByPlaceholder(‘Search’)
.fill(‘Laptop’);
await page.keyboard.press(‘Enter’);
Use case: E-commerce product search.
4. Checkout Flow
Record actions such as:
- Add product
- View cart
- Enter shipping address
- Complete payment
Use case: Online shopping applications.
5. Navigation Testing
await page.getByRole(‘link’, {
name:’Products’
}).click();
await expect(page).toHaveURL(/products/);
Use case: Website menu validation.
Converting Codegen Scripts into a Page Object Model
While Codegen is excellent for generating initial scripts, production frameworks should organize interactions using the Page Object Model (POM).
Example:
import { Page } from ‘@playwright/test’;
export class LoginPage {
constructor(private page: Page) {}
async login(username: string, password: string) {
await this.page.goto(‘https://example.com’);
await this.page.getByLabel(‘Username’).fill(username);
await this.page.getByLabel(‘Password’).fill(password);
await this.page.getByRole(‘button’, {
name: ‘Login’
}).click();
}
}
Benefits
- Reusable methods
- Easier maintenance
- Cleaner test scripts
- Better scalability for enterprise projects
Playwright Codegen vs Selenium IDE
| Feature | Playwright Codegen | Selenium IDE |
| Generates source code | ✅ Yes | Limited |
| Modern locator strategy | ✅ Yes | Basic |
| Auto-waiting | ✅ Built-in | Limited |
| Multiple languages | ✅ Yes | Limited |
| Cross-browser support | Excellent | Good |
| Framework integration | Easy | Moderate |
Which Is Better?
Playwright Codegen is better suited for modern automation frameworks because it generates maintainable source code that integrates easily with Playwright Test and the Page Object Model.
CI/CD Considerations
Codegen is primarily a development tool, but the generated scripts can be integrated into CI/CD pipelines.
Typical workflow:
Developer Records Test
│
▼
Refactor into POM
│
▼
Commit to Git
│
▼
GitHub Actions / Jenkins / Azure DevOps
│
▼
Run Playwright Tests
│
▼
Generate HTML Reports
For enterprise projects:
- Review generated locators before committing.
- Replace duplicated code with reusable methods.
- Enable screenshots and trace files on failures.
- Run tests across Chromium, Firefox, and WebKit.
Best Practices for Using Codegen Effectively
Follow these recommendations:
- Use Codegen for initial script creation only.
- Replace generated duplicated code with reusable methods.
- Convert recorded scripts into the Page Object Model.
- Prefer accessibility-based locators (getByRole(), getByLabel()).
- Remove unnecessary waits and redundant actions.
- Add assertions after important business steps.
- Keep test data outside the test scripts.
- Review generated code before using it in production.
Common Issues & Troubleshooting Tips
| Problem | Solution |
| Codegen does not start | Verify Playwright is installed correctly using npx playwright install. |
| Incorrect locators | Replace unstable locators with accessibility-based locators. |
| Generated script is too long | Refactor common actions into reusable page objects. |
| Test fails after recording | Add meaningful assertions and verify application timing. |
| Dynamic elements | Use stable locators and Playwright’s built-in auto-waiting. |
Playwright Codegen Interview Questions with Answers
1. What is Playwright Codegen?
Playwright Codegen is a built-in tool that records browser interactions and generates Playwright automation code automatically.
2. Which command launches Codegen?
npx playwright codegen
3. Can Codegen generate TypeScript code?
Yes. It supports TypeScript, JavaScript, Python, Java, and C#.
4. Is Codegen suitable for enterprise automation?
Yes, but the generated scripts should be reviewed, refactored, and organized using the Page Object Model before being added to production automation frameworks.
5. Why is Codegen useful for beginners?
It helps beginners understand Playwright syntax, locator strategies, and browser automation without writing every command manually.
FAQs
What is how to record test steps using Playwright Codegen?
It is the process of using Playwright’s built-in Codegen tool to record browser interactions and automatically generate automation scripts in TypeScript or other supported languages.
How do I get started with how to record test steps using Playwright Codegen?
Install Playwright, launch Codegen using npx playwright codegen, interact with your application, save the generated TypeScript code, and execute it using the Playwright Test Runner.
Is how to record test steps using Playwright Codegen suitable for beginners?
Yes. Codegen is designed for beginners and experienced automation engineers alike. It simplifies script creation while helping users learn Playwright syntax and best practices.