What does `npx playwright codegen <url>` open, and what does it produce?
answer
- Two windows open, not one
- Browser plus Inspector recorder
- Actions become locator calls live
- A flag saves it to a file
- Output is a draft, not a suite
basics
~20 sPlaywright's codegen command opens a browser plus a recorder window, transcribes every click, keystroke and navigation into runnable test code as you go, and hands back a first draft you copy or save with -o.
solid answer
~40 s`npx playwright codegen https://tracker.example.com` launches two windows: a browser Playwright drives, and the Playwright Inspector recorder that shows generated code updating live as you use the site. A click becomes `locator.click()`, typing becomes a single `fill()` with the final value, a dropdown becomes `selectOption()`. If you pass a URL the first emitted line is `await page.goto(...)`. The recorder's language dropdown switches the output binding, its toolbar buttons insert `expect()` assertions where you press them, and `-o tests/track.spec.ts` saves the script to a file instead of leaving you to copy it. Default output is a `playwright-test` block using the `page` fixture. Treat what comes out as a draft: it is one flat function of literal values, with assertions only where you added them.
code
bash · 4 linesnpx playwright codegen https://tracker.example.com/orders/42
# pick the engine and save straight to a spec file
npx playwright codegen -b webkit -o tests/track-order.spec.ts https://tracker.example.comgo deeper
Remember the shape: a browser window plus a recorder window, code appearing as you click, and -o to save it. Be able to run the command against a URL from memory.
Explain what the recorder converts each interaction into, why typing collapses into one fill call, and that the session is configured by CLI flags rather than by your test project's config.
Show judgement about the output: name concretely what a recording lacks, which generated lines you would rewrite first, and how you keep a recorded draft from landing in the suite unreviewed.
Frame where recording belongs in your team's workflow — as an exploration and learning aid that shortens the first draft, not as an input path into the suite that bypasses review.
`codegen` is Playwright's recorder: you drive a real browser by hand and it writes the equivalent test code for you, action by action. ## What the command starts `npx playwright codegen https://tracker.example.com/orders/42` opens **two** windows: - a **browser window** under Playwright's control (Chromium by default; `-b firefox` or `-b webkit` pick another engine, `--channel chrome` a branded build); - the **Playwright Inspector** recorder window, which shows the generated script growing line by line, with a language dropdown, a **Copy** button, a **Clear** button and buttons that insert assertions. The URL argument is optional. Pass one and the first generated line is `await page.goto('...')`; omit it and the recorder opens `about:blank` and records the navigation you type into the address bar. The browsers have to be installed first (`npx playwright install`), and no test project is required — codegen is a standalone CLI you can run in an empty directory. ## What the recorder turns into code Codegen records intent, not raw input events: - a click becomes `await locator.click()`; - typing into a field becomes **one** `fill()` call carrying the final value, not one call per keystroke; - choosing in a `<select>` becomes `selectOption()`; - a checkbox becomes `check()` or `uncheck()`; - a keyboard shortcut becomes `press('Enter')`; - choosing a file becomes `setInputFiles()`; - opening a popup or new tab yields a second `page` object taken from the popup event; - the toolbar's assert buttons insert `expect(locator).toBeVisible()`, `toContainText()` or `toHaveValue()` lines at the point you press them. | you do this in the browser | codegen writes | | --- | --- | | click the "Refresh status" button | `await page.getByRole('button', { name: 'Refresh status' }).click();` | | type into the "Delivery notes" box | `await page.getByLabel('Delivery notes').fill('Leave at door');` | | choose "Fastest" in the route select | `await page.getByLabel('Route').selectOption('Fastest');` | | press Enter in the search box | `await page.getByRole('textbox').press('Enter');` | ## Getting the code out Three routes, in rising order of convenience: 1. read it in the recorder window and press **Copy**; 2. switch the language dropdown first if your suite is not TypeScript, then copy; 3. run with `-o tests/track-order.spec.ts`, which saves the generated script to that file. ## The session is configured on the command line The recording session is driven by flags, not by a test project's `use` block, so a `baseURL` or a custom test-id attribute configured for your suite does not apply unless you pass the matching flag. The ones worth knowing: `--target` (output language), `-o` (output file), `-b` / `--channel` (engine), `--device` and `--viewport-size` (emulation), `--save-storage` and `--load-storage` (session reuse), `--test-id-attribute` (which attribute becomes `getByTestId`). ## What you get is a draft On a food-delivery order tracker, ten minutes of clicking through live status and the driver map produces a single flat `test('test', ...)` body: literal order ids, recording-order steps, no assertions beyond the ones you inserted, and a brittle CSS fallback wherever the page offered the generator nothing user-facing to anchor on. Everything a real test needs on top of that — naming, data setup, the checks that make it a test rather than a walkthrough — is yours to add. Read every generated line before you commit it.
- Does codegen need an existing Playwright test project to run?No. It is a standalone CLI: `npx playwright codegen <url>` works in an empty directory as long as the browsers are installed. It does not read a `playwright.config.ts`, which is why the recording session is configured with flags such as `--device` and `--test-id-attribute` rather than from a project's `use` block.
- How does codegen record typing — one call per keystroke or one per field?One per field. The recorder collapses a burst of typing into a single `fill()` carrying the final value, which is both shorter and more reliable than replaying keystrokes. Use `press()` explicitly when the key itself matters, such as Enter to submit or Escape to close the driver-map overlay.
It is a dashcam for a browsing session that writes code instead of video: it faithfully records what happened, and it is still on you to decide which part of the footage matters.
saying these in an interview costs you the question
- Thinks codegen produces a finished, maintainable test
- Believes the recorder adds waits and assertions on its own
- Cannot name the flag that saves output to a file
- Assumes codegen reads the project config for baseURL
- Thinks each keystroke becomes a separate generated call