Workflow:Microsoft Playwright Codegen test recording
| Knowledge Sources | |
|---|---|
| Domains | Code_Generation, Test_Automation, Recording |
| Last Updated | 2026-02-11 22:00 GMT |
Overview
End-to-end process for recording user interactions in a browser and generating executable test scripts in multiple programming languages using Playwright's codegen tool.
Description
This workflow covers the use of Playwright's code generation (codegen) feature to record browser interactions and automatically generate test scripts. The codegen tool opens a browser with a recording overlay (the Playwright Inspector), captures user clicks, fills, navigations, and other actions, and translates them into test code in JavaScript, TypeScript, Python, C#, or Java. The generated code uses robust locator strategies and can be saved directly to files.
Usage
Execute this workflow when you want to quickly scaffold test scripts by interacting with a web application visually rather than writing code manually. This is particularly useful for initial test creation, onboarding team members who are not familiar with Playwright's API, or rapidly prototyping test scenarios for complex UI flows.
Execution Steps
Step 1: Launch codegen
Start the code generation tool using the CLI command npx playwright codegen with an optional target URL. This opens a browser window for interaction and the Playwright Inspector window showing the generated code in real time. Specify the target programming language and framework using the --target flag.
Key considerations:
- Use --target=playwright-test for JavaScript/TypeScript Playwright Test format
- Available targets include python-pytest, csharp-mstest, java-junit
- Use --output flag to save generated code directly to a file
- Add --browser=firefox or --browser=webkit to record in a specific browser
Step 2: Configure recording context
Optionally configure the browser context for recording, including device emulation, viewport size, geolocation, color scheme, locale, and timezone. These settings are reflected in the generated code's test configuration.
Key considerations:
- Use --device="iPhone 13" to emulate a mobile device
- Use --color-scheme=dark for dark mode testing
- Use --geolocation with --lang for locale-specific testing
- Storage state can be loaded via --load-storage to start with authenticated sessions
Step 3: Record interactions
Interact with the web application in the recording browser window. Every click, text input, navigation, and keyboard action is captured and translated into code in the Inspector panel. The recorder generates appropriate locator strategies (role-based, text-based, test-ID) for each element.
Key considerations:
- The recorder selects the most resilient locator strategy automatically
- Hover over elements to see which locator the recorder would generate
- Use the "Record" button in the Inspector to pause/resume recording
- The recorder detects navigation, popup, download, and dialog signals
Step 4: Add assertions
Switch to assertion mode in the Playwright Inspector to record verification steps. Click on elements to generate expect assertions for visibility, text content, input values, or other element states. These assertions are appended to the generated test code.
Key considerations:
- Toggle between recording modes: asserting text, asserting visibility, asserting value
- Assertions use the same auto-retrying web-first assertion API
- Each assertion is added as an expect() statement in the generated code
Step 5: Export and refine
Copy the generated code from the Inspector or save it to a file using the --output flag. Refine the generated code by organizing tests into describe blocks, parameterizing data, adding custom fixtures, and removing redundant steps. The generated code serves as a starting point for a production-quality test suite.
Key considerations:
- Generated code may contain redundant navigation steps that can be consolidated
- Add test.describe() blocks for logical grouping
- Replace hardcoded test data with parameterized values
- Add custom fixtures for shared setup logic