Playwright Form Automation Tutorial

This project is a playground for learning Playwright end-to-end (E2E) testing. It contains a Vite-powered React page containing an interactive registration form, and a Playwright test suite to automate filling it out.

📁 Key Files

• React App Code: App.jsx (The registration form component)
• CSS Styles: App.css (Vibrant modern form layout styling)
• Playwright Config: playwright.config.js (Auto-spins the Vite dev server and manages tests)
• Playwright Test Script: tests/form-fill.spec.js (Our automated testing script)

🚀 How to Run

1. Install Dependencies

If you have just cloned the project:

npm install

2. Run Playwright Tests (Headless)

This will auto-start the React server in the background and run the tests:

npx playwright test

3. Run Tests in Interactive UI Mode

Opens Playwright's beautiful visual runner (highly recommended for learning!):

npx playwright test --ui

4. Run Development Server Manually

To test the React form interactively in your browser:

npm run dev

Open http://localhost:5173 in your web browser.