Automation with playwright - Part 7 Recording with CodeGen

Start Recording

npx playwright codegen

Opens Chromium browser and Playwright Inspector. As you interact with the browser, code is recorded live.

Example: Login Flow

await page.goto('https://example.com');
await page.getByRole('link', { name: 'Login' }).click();
await page.getByPlaceholder('Username').fill('user123');
await page.getByPlaceholder('Password').fill('pass123');
await page.getByRole('button', { name: 'Login' }).click();

Pick Locator Tool

Use “Pick Locator” in the Inspector to select UI elements and view generated locators. Now you don’t need to write your own selectors and all.

page.getByRole('img', { name: 'Site Logo' });
page.getByText('Home');

Save Script Directly to File

npx playwright codegen --output=tests/example.spec.js

Generate in Another Language

npx playwright codegen --target=python
npx playwright codegen --target=java
npx playwright codegen --target=dotnet

Use Specific Browser

npx playwright codegen --browser=firefox
npx playwright codegen --browser=webkit

Simulate Mobile Device

npx playwright codegen --device="iPhone 13"

Set Viewport Size

npx playwright codegen --viewport-size="1280,720"

View All Options

npx playwright codegen --help

---