Generate Tests by Recording Browser Actions

Beginner8 minTrending

Use Playwright Codegen to record user interactions in the browser and automatically generate test scripts with proper locators.

Prerequisites

-Playwright installed
-A running web application

Steps

Launch the code generator

Open a browser with the codegen recorder attached.

$ npx playwright codegen http://localhost:3000

Interact with the page normally. Every click, type, and navigation is recorded as test code in real time.

Generate code for a specific viewport

Record tests at a specific screen size for responsive testing.

$ npx playwright codegen --viewport-size=375,812 http://localhost:3000

Record with authentication state

Start codegen with a saved authentication state to skip login flows.

$ npx playwright codegen --load-storage=auth.json http://localhost:3000

First save auth state with 'npx playwright codegen --save-storage=auth.json' after logging in manually.

Use the locator picker

Launch the inspector to find robust locators for page elements.

$ npx playwright open --inspector http://localhost:3000

Generate tests in a specific language

Output test code in your preferred language.

$ npx playwright codegen --target=playwright-test http://localhost:3000

Supported targets include playwright-test (TypeScript), python-pytest, java-junit, and csharp-mstest.

Full Script

full-script.sh

#!/bin/bash
# Playwright Codegen Workflow
set -euo pipefail

TARGET_URL=${1:-"http://localhost:3000"}

echo "=== Playwright Codegen ==="
echo "Target: $TARGET_URL"
echo ""
echo "Instructions:"
echo "1. A browser window will open with the code generator"
echo "2. Interact with the page to record actions"
echo "3. Copy the generated code from the right panel"
echo "4. Paste into your test file"
echo ""
echo "=== Tips ==="
echo "- Click 'Record' to start/stop recording"
echo "- Use 'Pick locator' to find the best selector for an element"
echo "- Use 'Assert visibility' to add expect() assertions"
echo "- Use 'Assert text' to verify text content"
echo ""
echo "=== Launching Codegen ==="
npx playwright codegen \
  --target=playwright-test \
  "$TARGET_URL"

FAQ

Discussion

Loading comments...

#!/bin/bash # Playwright Codegen Workflow set -euo pipefail TARGET_URL=${1:-"http://localhost:3000"} echo "=== Playwright Codegen ===" echo "Target: $TARGET_URL" echo "" echo "Instructions:" echo "1. A browser window will open with the code generator" echo "2. Interact with the page to record actions" echo "3. Copy the generated code from the right panel" echo "4. Paste into your test file" echo "" echo "=== Tips ===" echo "- Click 'Record' to start/stop recording" echo "- Use 'Pick locator' to find the best selector for an element" echo "- Use 'Assert visibility' to add expect() assertions" echo "- Use 'Assert text' to verify text content" echo "" echo "=== Launching Codegen ===" npx playwright codegen \ --target=playwright-test \ "$TARGET_URL"