🎬 Codegen — Let It Write the Code for You

Codegen — Let It Write the Code for You: npx playwright codegen is the modern web counterpart of IDE macro recorders you may know from Java IDEs — but with a critical difference:

npx playwright codegen is the modern web counterpart of IDE macro recorders you may know from Java IDEs — but with a critical difference: ordinary macro recorders save pixel coordinates and absolute DOM positions (so they break the moment the page changes), while Codegen uses semantic locator strategies like role, text, and testid. Can you take Codegen's output and drop it directly into a production test? No — and knowing that is the key to using Codegen correctly: it generates raw material; you design the test structure. The generated code doesn't eliminate repetition, doesn't use Page Object, and doesn't write assertions; you take that output, convert it into a POM class, wire it to a fixture, and add meaningful expect() lines. In Java you recorded with Selenium IDE and exported, but the output looked like Selenium RC syntax and needed rewriting on every version upgrade. Codegen output uses the current Playwright API. The QA reality: instead of manually extracting locators from the DOM to test a new form flow, running Codegen for 2 minutes produces a rough skeleton that's far faster — it's a genuine productivity multiplier when used as a drafting accelerator, and a disappointment when treated as an "automatic test generator".

The command npx playwright codegen opens TWO windows: (1) a real browser window — where you browse like a normal user, and (2) a Playwright Inspector window — where the code line matching every step you take appears LIVE. When you're done, you copy that code into your test file; with a few small touch-ups (locator priority, adding assertions) it's usually production-ready.

This is the built-in, command-line, no-extension-required version of Selenium IDE (the browser extension that records actions and exports Java/other-language code). The difference: Selenium IDE usually generates CSS/XPath, while Playwright codegen prioritizes durable locators like getByRole/getByLabel — so the resulting code is usually less brittle than Selenium IDE's output.

Commands and Options

Codegen in Action — the Real Window Flow

Running the command opens two windows: a real browser + an empty Playwright Inspector panel. "Record" is on, and a language picker (JavaScript/Python/Java/C#) is visible.

Click, Type — Code Appears Instantly

Clicking and typing in the email box produces a .fill(...) line; clicking "Sign in" adds a .click() line. You write zero code — you just browse like a normal user.

Add an Assertion (Pick Locator)

Clicking the "Assert visibility" button in the Inspector and then clicking an element on the page adds an automatic expect(...).toBeVisible() line — you don't even have to hand-write assertions.

When you're done, the "Copy" button puts all the code on your clipboard to paste into your test file. You can also have it write straight to a file from the start with -o login.spec.ts.

Codegen Is a Starting Point, Not a Finished Test

Codegen output usually works, but don't trust it blindly: (1) it sometimes records unnecessary clicks/duplicate lines — clean them up. (2) An auto-generated locator can sometimes be an ambiguous match needing .first() — check it. (3) Don't re-record repeated flows like login in every test file — record it once, move it into a Page Object or fixture (see earlier tabs). (4) NEVER commit the session file saved by --save-storage to git.

Good locator suggestions