Test Generator

🎬 Playwright Test Generator: Your Robot Friend Who Writes Tests For You!

The Magic Copying Friend

Imagine you have a magical friend who watches everything you do on a computer. Every button you click, every word you type, every link you tap—this friend remembers it all!

Then, this friend writes down exact instructions so a robot can do the same things later. That’s what Playwright’s Test Generator does!

🎯 One Simple Idea: You play on a website. The Test Generator watches and writes code. Now you have a test!

🎥 What is Codegen?

Codegen is short for “Code Generator.” It’s like a video recorder, but instead of making a movie, it makes test code.

graph TD
    A["You Click & Type"] --> B["Codegen Watches"]
    B --> C["Code Gets Written"]
    C --> D["Test Ready to Run!"]

Real Life Example

Think about teaching someone to make a sandwich:

• Without Codegen: You write every step yourself
• With Codegen: Someone watches you make it and writes the recipe!

🚀 Starting the Test Generator

To wake up your magical friend, type this command:

npx playwright codegen

That’s it! A browser window opens, and the magic begins.

Opening a Specific Website

Want to test a specific site? Add the URL:

npx playwright codegen google.com

Now you’re ready to explore Google, and every action becomes code!

🎮 Recording Your First Test

When Codegen starts, you’ll see two windows:

1. Browser Window - Where you click and play
2. Code Window - Where the magic code appears

What Gets Recorded?

📝 Recording Tests: Step by Step

Step 1: Start Recording

npx playwright codegen example.com

The browser opens. You’re now being recorded!

Step 2: Do Your Actions

• Click on things
• Fill in forms
• Navigate around
• Select options

Step 3: Watch the Magic

Look at the code window. See how it updates with every click?

Step 4: Copy Your Test

When done, copy the code. Paste it into a test file. Done!

🎯 Smart Recording Features

Codegen isn’t just recording—it’s smart!

It Picks the Best Selectors

When you click a button, Codegen chooses the best way to find it:

graph TD
    A["You Click Button"] --> B{Codegen Thinks}
    B --> C["Has Test ID?"]
    B --> D["Has Text?"]
    B --> E["Has Role?"]
    C --> F["Use data-testid"]
    D --> G["Use text locator"]
    E --> H["Use role locator"]

Example: You click a “Submit” button.

Codegen might write:

await page.getByRole('button',
  { name: 'Submit' }).click();

Not some ugly div > span > button:nth-child(3)!

🔧 Recording Options

You can customize how Codegen works:

Choose Your Language

# JavaScript (default)
npx playwright codegen

# Python
npx playwright codegen --target python

# C#
npx playwright codegen --target csharp

# Java
npx playwright codegen --target java

Set Screen Size

npx playwright codegen \
  --viewport-size=375,667 \
  mysite.com

This simulates a mobile phone!

Save Directly to File

npx playwright codegen \
  -o my-test.spec.js \
  mysite.com

Code goes straight into your file!

🎪 The Recording Toolbar

When recording, you get a special toolbar:

✅ Adding Assertions While Recording

Tests need to check things work, not just click around!

Using the Assert Button

1. Click the Assert button in toolbar
2. Click an element on the page
3. Choose what to check:
   • Is it visible?
   • Does it have this text?
   • Is it enabled?

graph TD
    A["Click Assert"] --> B["Click Element"]
    B --> C{Choose Check}
    C --> D["Visible?"]
    C --> E["Has Text?"]
    C --> F["Enabled?"]
    D --> G["Code Added!"]
    E --> G
    F --> G

Generated Assertion Code

// Check text is visible
await expect(
  page.getByText('Welcome!')
).toBeVisible();

// Check input has value
await expect(
  page.getByRole('textbox')
).toHaveValue('hello');

🎬 Complete Recording Example

Let’s record a login test!

What you do:

1. Go to login page
2. Type username
3. Type password
4. Click login button
5. Check welcome message appears

What Codegen writes:

import { test, expect } from
  '@playwright/test';

test('login test', async ({ page }) => {
  // Go to login page
  await page.goto(
    'https://example.com/login'
  );

  // Fill username
  await page.getByLabel('Username')
    .fill('myuser');

  // Fill password
  await page.getByLabel('Password')
    .fill('secret123');

  // Click login
  await page.getByRole('button',
    { name: 'Login' }).click();

  // Check welcome message
  await expect(
    page.getByText('Welcome, myuser!')
  ).toBeVisible();
});

🌟 Pro Tips for Recording

Tip 1: Record Small Pieces

Don’t try to record everything at once. Record one feature, copy, repeat.

Tip 2: Use the Pick Tool

Not sure how to select something? Use Pick to see what selector Codegen would use!

Tip 3: Clean Up After

Recorded code is a starting point. You might want to:

• Add better test names
• Remove unnecessary steps
• Add more assertions

Tip 4: Slow Network Testing

npx playwright codegen \
  --browser chromium \
  mysite.com

Then use browser DevTools to simulate slow networks!

🎁 What You Learned

graph TD
    A["Codegen"] --> B["Watches You"]
    B --> C["Writes Code"]
    C --> D["Creates Tests"]

    E["Recording"] --> F["Click & Type"]
    F --> G["Code Appears"]
    G --> H["Copy & Use"]

    I["Smart Features"] --> J["Best Selectors"]
    I --> K["Multiple Languages"]
    I --> L["Assertions"]

🚀 Quick Commands Reference

# Basic recording
npx playwright codegen

# Record specific site
npx playwright codegen mysite.com

# Save to file
npx playwright codegen -o test.spec.js

# Choose language
npx playwright codegen --target python

# Set mobile size
npx playwright codegen \
  --viewport-size=375,667

🎉 You Did It!

Now you know how to:

✅ Start the Test Generator with codegen

✅ Record your actions on any website

✅ Watch code appear as you click

✅ Add assertions to check things work

✅ Save and use your recorded tests

Remember: The Test Generator is your friend. It watches, learns, and writes. You just play! 🎮

“Why write tests when you can record them?” — Happy Playwright Users Everywhere