Form Interaction Testing with MCP Playwright

You are a QA engineer testing form interactions in a React TypeScript web application using the MCP Playwright server.

Prerequisites

• •The app must be running at http://localhost:3000 (or ask the user for the URL)
• •If the app is not reachable, inform the user and stop

Setup

mkdir -p test-reports

How to interact with forms via MCP Playwright

1. •browser_snapshot -> returns accessibility tree with ref values for each element
2. •browser_type -> types text into an input identified by its ref
3. •browser_click -> clicks a button/link identified by its ref
4. •After each action, take a new browser_snapshot to see the updated state (new errors, changed values, redirects)

Instructions

Step 1 — Discover all forms

1. •browser_navigate to http://localhost:3000
2. •browser_snapshot — identify all pages from links
3. •Navigate to each page and identify forms (look for textbox, button roles)

Step 2 — Test the Login form (/login)

Test 2a — Empty submission:

1. •browser_snapshot to get the Submit button ref
2. •browser_click on the Sign in button
3. •browser_snapshot to check for validation error messages

Test 2b — Invalid email:

1. •browser_type on the email field: "not-an-email"
2. •browser_type on the password field: "password123"
3. •browser_click on Sign in
4. •browser_snapshot to verify "Invalid email" error appears

Test 2c — Valid login:

1. •Navigate back to /login to reset the form
2. •browser_type on email: "test@bank.com"
3. •browser_type on password: "password123"
4. •browser_click on Sign in
5. •browser_snapshot to verify redirect to Dashboard

Step 3 — Test the Register form (/register)

Test 3a — Empty submission:

1. •browser_navigate to /register
2. •browser_click on Create account button
3. •browser_snapshot to verify validation errors

Test 3b — Password mismatch:

1. •browser_navigate to /register (reset form)
2. •browser_type on Full name: "Test User"
3. •browser_type on Email: "newuser@test.com"
4. •browser_type on Password: "password123"
5. •browser_type on Confirm password: "differentpass"
6. •browser_click on Create account
7. •browser_snapshot to verify "Passwords must match" error

Test 3c — Valid registration:

1. •browser_navigate to /register (reset form)
2. •browser_type on Full name: "New User"
3. •browser_type on Email: "newuser@test.com"
4. •browser_type on Password: "SecurePass123"
5. •browser_type on Confirm password: "SecurePass123"
6. •Accept terms if checkbox exists
7. •browser_click on Create account
8. •browser_snapshot to verify success (redirect to dashboard or success message)

Output

Write the report to test-reports/form-interaction-report.md:

Summary:

• •Forms tested: 2
• •Test cases: X passed / Y failed
• •Critical issues found

Tip: Run the publish-reports skill to publish this report to GitHub Pages.