[Feature]: Option to start webServer when running codegen

[amw]

🚀 Feature Request

I've defined my web server config in playwright.config.ts and I hoped it would start automatically when I run npx playwright codegen, but that isn't the case and I don't even see an option to enable it.

In general codegen seems to be ignoring most of the playwright.config.ts configuration – it also ignored my default browser set via use and when I tried using npx playwright codegen / it didn't open my baseURL, but rather file:///.

Example

playwright codegen --start-web-server

Or maybe more generally:

playwright codegen --use-config

Motivation

People spend a lot of time customizing their Playwright config for their project and then they want to quickly codegen specific test scenarios – it would be nice to respect server, base URL, default browser engine, window sizes, etc. instead of needing to duplicate those choices in package.json scripts helpers.

[mxschmitt]

For manually running codegen we recommend calling await page.pause() inside your test - would that work for you?

You could e.g. do this in an existing test or at the beginning of a new one you want to generate.

For the VSCode approach you could start codegen in VSCode and then generate your test right in there (relates to #26777)

[amw]

I don't usually run my tests in headed mode. But let's say I did, is the supposed workflow to create a new empty test, mark it with test.only, add pause, and then run the test?

Will my clicks and other interactions with the page during pause be recorded and inserted as code into the test body at the pause location?

[yury-s]

I don't usually run my tests in headed mode. But let's say I did, is the supposed workflow to create a new empty test, mark it with test.only, add pause, and then run the test?

Yes, either a new test or you can modify an existing test if you need to bring the page into a particular state before recording. See also https://playwright.dev/docs/codegen#record-using-custom-setup

Will my clicks and other interactions with the page during pause be recorded and inserted as code into the test body at the pause location?

Unfortunately no, they will be in a new test file which you can copy and use for editing existing test.

Our VS Code extension provides more smooth experience, you can record at the cursor location. In the next release of the extension we are also adding an option to run global setup/web server once from VS Code. That option in combination with 'record at cursor' should give you exactly what you desribed.

[yury-s]

Closing per the response above, feel free to open a new issue if it doesn't work.