Run npx playwright codegen to open a browser and Playwright Inspector, interact with the page, then copy the generated test code into your project. You can provide a starting URL on the command line or navigate to it in the browser. Codegen is a useful first draft: review its locators and add assertions that prove the behavior you care about.
Record a browser flow with Playwright Codegen
-
From your project directory, start Codegen with a page URL:
npx playwright codegen https://demo.playwright.dev/todomvcThe URL is optional. Run
npx playwright codegenby itself and navigate in the opened browser instead. The command-line form is documented in the Playwright CLI reference. -
In the opened browser, perform the actions you want your test to reproduce: click controls, fill fields, and navigate as a real user would. Playwright Inspector displays generated code as you interact.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy. -
When useful, add an assertion using Inspector’s toolbar controls. Codegen can generate checks for visibility, text, and value.
-
Stop recording, copy the generated code into your editor, and review it before relying on it. The Codegen guide describes this recording-and-review workflow.
What Codegen records—and what you still need to decide
Codegen records interactions and produces code that targets elements through locators. It analyzes the rendered page and prioritizes role, text, and test ID locators; when a locator matches multiple elements, it attempts to make the target unique. That is helpful, but it cannot decide whether the chosen element or recorded scenario represents the behavior your test is meant to protect.
Review the scenario and target
-
Check that the recorded sequence captures the intended user journey rather than incidental clicks or setup steps.
Recommended Free Tools
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy. -
Confirm each locator refers to the intended control, especially where several elements have similar names or text.
-
Check that the test verifies an outcome, not just that it performed actions.
Prefer resilient locators and retrying assertions
Playwright’s locator guidance recommends user-facing attributes and explicit contracts such as page.getByRole(). Locators resolve the current DOM element when an action runs, which helps when the DOM changes between steps. For assertions, the best-practices guide recommends web-first assertions that wait and retry until the expected condition is met. For example:
await expect(page.getByText('welcome')).toBeVisible();Use an assertion that matches the behavior under test; a generated visibility, text, or value check is only useful if it verifies the expected result.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Choose how to use Codegen
| Need | Use |
|---|---|
| Record a new flow in a standalone browser and Inspector | Run npx playwright codegen [url]. |
| Add recorded actions to an existing test in VS Code | Put the cursor at the insertion point and use Record at cursor in the Playwright VS Code extension. |
| Generate a locator without recording a whole test | Stop recording, use the locator picker, hover to preview the target, select it, then copy or edit the locator. The VS Code integration also offers a locator picker. |
The VS Code recording and locator workflows are documented in Getting started with VS Code; the Inspector locator picker is also covered by the Generating tests guide.
Configure browser, language, viewport, and session state
Codegen has CLI options for choosing the browser, output file, target language, and test ID attribute. The CLI reference lists Chromium, Firefox, and WebKit, with Chromium as the documented default. Because exact flags can vary with the installed Playwright version, check npx playwright codegen --help and the official CLI reference for your installation.
The Codegen guide also documents options for viewport size, device emulation, color scheme, timezone, geolocation, language, saved storage state, and HTTP Basic Authentication. Examples below show the documented option names; verify their availability and syntax against your installed version.
Set browser, output, language, and test ID attribute
npx playwright codegen --browser firefox --output=tests/recorded.spec.ts --target=playwright-test --test-id-attribute=data-testid https://example.comUse --browser to select Chromium, Firefox, or WebKit; --output to write generated code to a file; --target to choose a language or target format; and --test-id-attribute when the application uses a test ID attribute other than the default. The CLI documentation includes Python output examples.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Match the target environment
npx playwright codegen --viewport-size="1280,720" --color-scheme=dark --lang=en-US --timezone=America/New_York --geolocation="37.7749,-122.4194" https://example.com--viewport-size sets the recording viewport. --device emulates a named device, including its viewport and user agent. The guide also lists --color-scheme, --timezone, --geolocation, and --lang for context emulation. Match these settings to the environment whose behavior the test needs to cover; changing them can change the page layout and available content.
Reuse an authenticated session carefully
Use --save-storage to save cookies, local storage, and IndexedDB state, then --load-storage to reuse it in a later recording. Treat the resulting file as sensitive authentication data: keep it local, add it to .gitignore, or delete it when finished, as the Codegen guide advises.
npx playwright codegen --save-storage=playwright/.auth/state.json https://example.comFor a later session, load that state with:
npx playwright codegen --load-storage=playwright/.auth/state.json https://example.comUse --user-data-dir to record with a separate existing browser profile directory. The guide notes that Chrome 136 and later prevent automated tools from accessing the default user data directory, so use a separate directory rather than relying on the default profile.
Handle HTTP Basic Authentication with care
--http-credentials supplies HTTP Basic Authentication credentials. The Codegen guide warns that credentials are sent to any origin that requests them during recording and are included in generated code. Record only in a controlled session, and keep credentials out of committed files.
Pause to configure a headed browser
For custom setup before opening Codegen controls, the guide describes calling page.pause() in a headed browser. This is an option for a test or setup flow that needs to configure its browser context before you begin recording.
Troubleshoot common Codegen problems
-
The browser or Inspector does not start: Confirm Playwright is installed for the project and run the command from the intended project directory. Check
npx playwright codegen --helpfor the installed CLI’s accepted options and syntax. -
The generated locator targets the wrong item or is ambiguous: Use the locator picker to inspect the target, then replace or refine the locator using a stable, user-facing role, text, or explicit test ID contract. Review the locator guide.
-
The test fails after the page changes: Re-record only if the user journey changed. Otherwise, inspect the locator and add an assertion for the intended outcome. Prefer a web-first assertion that retries instead of a one-time state check.
Free tools Windows power users keep installed
One-click scans. No signup required.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy. -
The recording does not reflect the expected mobile or regional experience: Set the appropriate device or viewport and, if relevant, language, timezone, geolocation, and color scheme before recording.
-
A saved session does not authenticate: Confirm the correct storage file was loaded and that it contains the required state. Storage may expire or become invalid; save a fresh session when needed, and do not commit the file.
-
Chrome rejects use of the default profile directory: With Chrome 136 or later, use a separate directory through
--user-data-dir; automated tools cannot access the default user data directory according to the Codegen guide.
Or skip the browser setup
If your goal is to capture a site rather than build a Playwright test, ScreenshotNeo is a website screenshot API and MCP server. One GET request can return a PNG, JPEG, WebP, or PDF. For example, this cURL request saves a WebP screenshot of Stripe:
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. It accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed. Its MCP server gives AI agents tools to take screenshots, get page information, and capture PDFs. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.
Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month with no card.
Frequently Asked Questions
Can I use Codegen just to get a locator?
Yes. Stop recording, use the locator picker to preview and select the element, then copy or edit the locator. VS Code also has a locator picker.
Does Codegen create assertions as well as actions?
Yes. Its assertion controls can generate visibility, text, and value checks.
Can Codegen generate Python?
Yes. The CLI’s target option selects the output language or format, and the official CLI reference includes Python output examples.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
