playwright-form-validation

What this skill does

# Playwright Form Validation Tester

Automates comprehensive form validation testing by systematically submitting invalid data, capturing validation messages, and generating detailed test reports.

## Quick Start

Test a login form's validation:

```bash
# User asks: "Test the validation on the login form at example.com/login"

# Skill will:
# 1. Navigate to form
# 2. Test empty email field
# 3. Test invalid email format
# 4. Test empty password field
# 5. Test valid submission
# 6. Generate report with screenshots
```

**Output:** Validation report showing all error messages, missing validations, and screenshots of each error state.

## Table of Contents

1. When to Use This Skill
2. What This Skill Does
3. Instructions
4. Supporting Files
5. Expected Outcomes
6. Integration Points
7. Expected Benefits
8. Success Metrics
9. Requirements
10. Red Flags to Avoid
11. Notes

## When to Use This Skill

### Explicit Triggers
- "Test form validation on [URL]"
- "Check validation errors for this form"
- "Test invalid inputs on the signup form"
- "Verify error messages are displayed"
- "Run validation tests on [form]"

### Implicit Triggers
- QA testing workflows requiring form validation checks
- Accessibility audits checking error message clarity
- Security testing for input sanitization
- Regression testing after form changes
- Documentation of validation behavior

### Debugging Triggers
- "Why isn't this form showing validation errors?"
- "Are all required fields validated?"
- "What validation messages does this form show?"
- "Check if email validation is working"

## What This Skill Does

This skill performs systematic form validation testing:

1. **Field Discovery** - Identifies all form fields and their types
2. **Empty Value Testing** - Submits form with each field empty
3. **Invalid Format Testing** - Tests common invalid patterns (email, phone, etc.)
4. **Boundary Testing** - Tests min/max lengths and values
5. **Valid Submission** - Verifies successful submission with valid data
6. **Error Capture** - Screenshots and catalogs all validation messages
7. **Report Generation** - Creates comprehensive validation report

## Instructions

### Overview

The validation testing workflow has 7 main steps:

1. Navigate to form and capture initial state
2. Identify all form fields and their constraints
3. Test empty field validation for required fields
4. Test invalid format validation (email, phone, etc.)
5. Test boundary values (min/max lengths and values)
6. Test valid submission to verify success path
7. Generate comprehensive validation report

### Quick Workflow Example

```typescript
// 1. Navigate and snapshot
await browser_navigate({ url: "https://example.com/login" });
await browser_snapshot({ filename: "initial.md" });

// 2. Test empty email
await browser_fill_form({
  fields: [{ name: "Email", type: "textbox", ref: "ref_1", value: "" }]
});
await browser_click({ element: "Submit", ref: "ref_submit" });
await browser_take_screenshot({ filename: "empty-email.png" });

// 3. Test invalid email format
await browser_navigate({ url: "https://example.com/login" }); // Reset
await browser_fill_form({
  fields: [{ name: "Email", type: "textbox", ref: "ref_1", value: "invalid" }]
});
await browser_click({ element: "Submit", ref: "ref_submit" });
await browser_take_screenshot({ filename: "invalid-email.png" });

// 4. Test valid submission
await browser_navigate({ url: "https://example.com/login" });
await browser_fill_form({
  fields: [
    { name: "Email", type: "textbox", ref: "ref_1", value: "[email protected]" },
    { name: "Password", type: "textbox", ref: "ref_2", value: "ValidPass123!" }
  ]
});
await browser_click({ element: "Submit", ref: "ref_submit" });
await browser_take_screenshot({ filename: "success.png" });

// 5. Generate report using template
```

### Key Testing Patterns

**Empty Fields** - Test each required field with empty value
**Invalid Formats** - Test email (`invalid`), phone (`abc`), URL (`not-url`)
**Boundaries** - Test min/max length (`"short"`, `"a".repeat(101)`)
**Cross-Field** - Test password mismatch, invalid date ranges
**Valid Data** - Verify success path works

### Detailed Workflow

For complete step-by-step instructions with all code examples, see:
- `references/detailed-workflow.md` - Full workflow with code samples
- `references/validation-patterns.md` - Field type testing patterns
- `examples/examples.md` - Complete form testing examples

## Supporting Files

- **references/validation-patterns.md** - Common validation patterns and test cases for different field types
- **examples/examples.md** - Complete validation test examples for common forms (login, signup, checkout)
- **templates/validation-report-template.md** - Markdown template for validation reports
- **scripts/parse_validation_errors.py** - Helper to extract validation messages from snapshots

## Expected Outcomes

### Successful Validation Test

```markdown
✅ Form Validation Test Complete

Form: Login Form (https://example.com/login)
Fields tested: 2 (email, password)
Validations found: 4
Missing validations: 0

Results by field:

Email Field:
✅ Empty value - "Email is required"
✅ Invalid format - "Please enter a valid email address"

Password Field:
✅ Empty value - "Password is required"
✅ Too short - "Password must be at least 8 characters"

Valid submission: ✅ Success (redirected to dashboard)

Screenshots saved: 5
Report: .claude/artifacts/2025-12-20/validation-report-login-form.md
```

### Validation Issues Found

```markdown
⚠️ Form Validation Issues Detected

Form: Signup Form (https://example.com/signup)
Fields tested: 5
Validations found: 3
Missing validations: 2

Issues:

❌ Phone field - No validation for invalid format
   Tested: "abc123", "12-34" → No error message shown

❌ Age field - No validation for negative values
   Tested: "-5" → Submission accepted

Recommendations:
1. Add phone number format validation
2. Add min value constraint to age field
3. Consider adding password strength indicator

Report: .claude/artifacts/2025-12-20/validation-report-signup-form.md
```

## Integration Points

### With Quality Gates
- Run validation tests as part of QA workflow
- Include in pre-release testing checklist
- Automate regression testing for form changes

### With Accessibility Testing
- Verify error messages are clear and descriptive
- Check that errors are associated with fields (aria-describedby)
- Validate screen reader compatibility

### With Security Testing
- Verify input sanitization on client side
- Check for XSS vulnerabilities in error messages
- Test SQL injection patterns in text fields

### With Documentation
- Auto-generate validation documentation from reports
- Create field reference guides with validation rules
- Document error message copy for style guides

## Expected Benefits

| Metric | Before | After | Improvement |
|--------|--------|-------|-------------|
| **Time to test form** | 30 min (manual) | 2 min (automated) | 93% reduction |
| **Test coverage** | 40% (spot checks) | 100% (systematic) | 2.5x increase |
| **Bugs found** | 2-3 (missed edge cases) | 8-10 (comprehensive) | 3x increase |
| **Documentation** | None → Screenshots + report | Manual notes → Auto-generated | Consistent |
| **Regression testing** | Rarely done | Automated | Reliable |

## Success Metrics

A validation test is successful when:

✅ All form fields identified and cataloged
✅ Empty value validation tested for required fields
✅ Invalid format validation tested for typed fields (email, phone, etc.)
✅ Boundary values tested for constrained fields (min/max)
✅ Valid submission verified with success confirmation
✅ All validation messages captured and documented
✅ Screenshots saved for each error state
✅ Validation report generated with findings
✅ Missing validations identified and reported
✅ Recommendations provided for improvements

## Requirements

**Browser Automation:**
- Playwright MCP server configured
- Browser installed via `mcp__playwright__b