Writing every locator by hand is slow. Inspecting the DOM, guessing selectors, running the test, finding out you picked the wrong element, repeating. Codegen short-circuits this. It watches you use the application and writes the test code for you. Not perfect code, but working code you can refine.
# Open Codegen with a URL
npx playwright codegen https://www.testerrank.com/banking
# Codegen with a specific browser
npx playwright codegen --browser=firefox https://www.testerrank.com/banking
# Codegen with a specific viewport size
npx playwright codegen --viewport-size=1280,720 https://www.testerrank.com/banking
# Codegen emulating a mobile device
npx playwright codegen --device="iPhone 13" https://www.testerrank.com/bankingRun the codegen command -- two windows open: a browser and an inspector
Interact with the application in the browser window -- click buttons, fill forms, navigate
Watch the inspector panel -- it generates TypeScript code for every action in real-time
When you are done with the flow, click the copy button in the inspector
Paste the generated code into a new .spec.ts file in your tests folder
Review and refine: replace fragile selectors, add meaningful assertions, clean up variable names
// What Codegen generates (works but rough)
test('test', async ({ page }) => {
await page.goto('https://www.testerrank.com/banking');
await page.getByLabel('Username').click();
await page.getByLabel('Username').fill('testuser');
await page.getByLabel('Password').click();
await page.getByLabel('Password').fill('password123');
await page.getByRole('button', { name: 'Login' }).click();
});// What you should refine it to
test('should login to Banking Portal', async ({ page }) => {
await page.goto('/banking');
await page.getByLabel('Username').fill('testuser');
await page.getByLabel('Password').fill('password123');
await page.getByRole('button', { name: 'Login' }).click();
// Codegen does NOT add assertions -- you must add them
await expect(page.getByRole('heading', { name: /dashboard/i })).toBeVisible();
});Codegen generates zero assertions. It records actions but not verifications. A test without assertions is just a script that clicks around -- it does not actually test anything. Always add expect() statements after using Codegen.
Use Codegen when you are new to an application and do not know the element structure. Record the flow, get working locators, then add assertions and structure. It is like getting a rough draft from AI and then editing it to be production-ready.
Q: Do you use code generators for writing tests?
A: Yes, I use Playwright Codegen to bootstrap tests. It records my browser interactions and generates correct locators and API calls. But I always refine the output: I add meaningful test names, add assertions that Codegen does not generate, replace absolute URLs with relative ones using baseURL, remove redundant click actions, and organize tests with describe blocks and hooks. Codegen handles the tedious part -- finding locators. I handle the important part -- writing assertions that actually verify the application works correctly.
Key Point: Codegen records your browser actions and generates test code. It gives you locators and actions. You add assertions, structure, and meaningful names.