How to Record a Test in Playwright (Step-by-Step Guide)

Playwright makes it easy to record tests automatically by generating code based on real user interactions. This is incredibly useful for fast test creation, debugging, and onboarding new QA engineers.

In this guide, you’ll learn how to:

Record tests using the built-in codegen tool
Save and replay recorded tests
Customize output language and browsers
Compare different recording options

✅ Quick Answer: Run Codegen to Record a Test

npx playwright codegen https://example.com

This opens a browser and starts recording actions. As you click and type, Playwright generates code in real-time.

🎥 How Playwright Codegen Works

Playwright’s codegen tool:

Launches a browser
Tracks user actions (clicks, typing, navigation)
Generates test code (in JavaScript, TypeScript, Python, etc.)
Outputs code to the terminal or a file

🧪 Step-by-Step: Record Your First Test

1. Launch Recorder

npx playwright codegen https://your-app-url.com

✨ This opens an interactive browser + side panel showing the generated code.

2. Interact with Your App

Click buttons
Fill out forms
Navigate pages

3. Copy or Save the Code

You can:

Copy code from the side panel
Or export to a file:

npx playwright codegen --output=mytest.spec.ts https://your-app-url.com

🌐 Record for Different Languages

Language	Command Example
JavaScript	`npx playwright codegen --target=javascript`
TypeScript	`npx playwright codegen --target=typescript`
Python	`npx playwright codegen --target=python`
Java	`npx playwright codegen --target=java`
C#	`npx playwright codegen --target=csharp`

🧰 Other Useful Codegen Options

Option	Description	Example Usage
`--output=filename`	Save code to a file	`--output=login.spec.ts`
`--target=language`	Choose code language	`--target=python`
`--device=DeviceName`	Simulate mobile/tablet environment	`--device="iPhone 13"`
`--color-scheme=dark`	Record in dark/light mode	`--color-scheme=dark`

📽️ Record with Context: Authentication, Viewport, etc.

Playwright will generate test context too:

const context = await browser.newContext({
  viewport: { width: 1280, height: 720 },
  colorScheme: 'dark',
});

Simulate different screen sizes
Emulate devices or themes
Capture login sessions

🧪 Example Generated Test (TypeScript)

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

test('basic test', async ({ page }) => {
  await page.goto('https://example.com');
  await page.click('text=Login');
  await page.fill('#username', 'admin');
  await page.fill('#password', '123456');
  await page.click('button[type="submit"]');
  await expect(page).toHaveURL(/dashboard/);
});

🧰 Comparison Table: Record Methods

Method	Best For	Customizable	Requires Code Knowledge	Notes
`npx playwright codegen`	Fast test prototyping	✅ Yes	❌ No	Live browser + real-time code view
Manually write test	Full control	✅ High	✅ Yes	Best for CI and long-term maintenance
Use Playwright Inspector	Debug/test improvements	⚠️ Limited	✅ Yes	Use with `PWDEBUG=1`

🧠 Pro Tips

Use --device for mobile test generation
Add --output=login.spec.ts to save your recording
Generated code is just a starting point – refine as needed
Integrate into test runner: playwright/test or Jest, Mocha

❌ Common Mistakes

Mistake	Fix
Recording with wrong URL	Use the full URL: `https://your-app.com/login`
Forgetting to save the test	Use `--output=filename` or copy from the panel
Over-relying on generated code	Refactor for reusability and robustness

🏁 Conclusion

Playwright's codegen tool lets you record browser tests instantly, making it easy to generate test code from real user interactions. Whether you're prototyping or bootstrapping an end-to-end test suite, it's an essential part of the Playwright toolkit.