Skip to content

testing-forms.mdx

Latest commit

 

History

History
313 lines (245 loc) · 9.33 KB

testing-forms.mdx

File metadata and controls

313 lines (245 loc) · 9.33 KB
title Testing Forms: The Complete Strategy
description Learn the strategic approach to testing forms thoroughly without writing 100 tests—comprehensive coverage through prioritized scenarios.

Testing Forms: The Complete Strategy

The Form Testing Dilemma

Your app has a user registration form with 10 fields. Your QA lead asks: "How thoroughly should we test this?"

You could test:

  • Every field individually (10 tests)
  • Every combination of valid/invalid inputs (1000+ tests)
  • Every error message (20+ tests)
  • Every browser's form behavior (multiply everything above)

That's overwhelming. You'd spend weeks writing tests for one form.

But you also can't just test the happy path:

Test: "Register user"
1. Fill form with valid data
2. Submit
3. Verify success

That misses edge cases, validation errors, and real user mistakes.

The question is: How do you test forms thoroughly without drowning in test cases?

This guide shows you the strategic approach to form testing—comprehensive coverage without unnecessary duplication.

The Three-Layer Form Testing Strategy

Think of form testing in three layers:

Layer 1: Happy path (1 test)

  • Everything valid, submission succeeds

Layer 2: Critical validations (3-5 tests)

  • Required fields empty
  • Invalid formats (email, phone, etc.)
  • Boundary cases (min/max lengths)

Layer 3: Edge cases (2-3 tests)

  • Special characters
  • Internationalization
  • Browser-specific issues

Total: 6-9 tests instead of 100+.

Let's build this strategy for a real registration form.

The Registration Form Example

Your form has these fields:

  • Email (required, must be valid format)
  • Password (required, min 8 characters)
  • Confirm Password (required, must match)
  • First Name (required)
  • Last Name (required)
  • Phone (optional, must be valid if provided)
  • Company (optional)
  • Terms checkbox (required)

Layer 1: The Happy Path Test

Start with one test that verifies the complete successful flow:

Test: "Register new user - happy path"

1. Navigate to {{variable:APP_URL}}/signup
2. Wait until: Registration form loads
3. Type {{random:email}} in email field
4. Type {{random:password}} in password field
5. Type {{random:password}} in confirm password field
6. Type {{random:first_name}} in first name field
7. Type {{random:last_name}} in last name field
8. Type {{random:phone_number}} in phone field
9. Type {{random:company_name}} in company field
10. Check "I agree to terms" checkbox
11. Click "Sign Up"
12. Wait until: Welcome message appears
13. Verify user is logged in

This test proves: When everything is valid, registration works end-to-end.

Layer 2: Critical Validation Tests

Now test the validations that matter most—the ones users will hit frequently.

Test 2: Empty required fields

Test: "Registration fails with empty required fields"

1. Navigate to {{variable:APP_URL}}/signup
2. Wait until: Registration form loads
3. Click "Sign Up" ← Submit immediately, no fields filled
4. Wait until: Error messages appear
5. Verify error appears for email field
6. Verify error appears for password field
7. Verify error appears for first name field
8. Verify error appears for last name field
9. Verify error for terms checkbox
10. Verify form was NOT submitted

Test 3: Invalid email format

Test: "Registration fails with invalid email"

1. Navigate to {{variable:APP_URL}}/signup
2. Wait until: Registration form loads
3. Type "notanemail" in email field ← Invalid format
4. Type {{random:password}} in password field
5. Type {{random:password}} in confirm password field
6. Type {{random:first_name}} in first name field
7. Type {{random:last_name}} in last name field
8. Check terms checkbox
9. Click "Sign Up"
10. Wait until: Email error message appears
11. Verify message says something like "Please enter a valid email"
12. Verify form was NOT submitted

Test 4: Password too short

Test: "Registration fails with short password"

1. Navigate to {{variable:APP_URL}}/signup
2. Wait until: Registration form loads
3. Type {{random:email}} in email field
4. Type "abc123" in password field ← Only 6 characters
5. Type "abc123" in confirm password field
6. Type {{random:first_name}} in first name field
7. Type {{random:last_name}} in last name field
8. Check terms checkbox
9. Click "Sign Up"
10. Wait until: Password error appears
11. Verify message mentions minimum 8 characters
12. Verify form was NOT submitted

Test 5: Passwords don't match

Test: "Registration fails with mismatched passwords"

1. Navigate to {{variable:APP_URL}}/signup
2. Wait until: Registration form loads
3. Type {{random:email}} in email field
4. Type {{random:password}} in password field
5. Type "DifferentPassword123" in confirm password field ← Mismatch
6. Type {{random:first_name}} in first name field
7. Type {{random:last_name}} in last name field
8. Check terms checkbox
9. Click "Sign Up"
10. Wait until: Error appears
11. Verify message says passwords must match
12. Verify form was NOT submitted

These 4 tests cover the validations users hit most often.

Layer 3: Edge Case Tests

Finally, test unusual but valid scenarios:

Test 6: Optional fields left empty

Test: "Registration succeeds without optional fields"

1. Navigate to {{variable:APP_URL}}/signup
2. Wait until: Registration form loads
3. Type {{random:email}} in email field
4. Type {{random:password}} in password field
5. Type {{random:password}} in confirm password field
6. Type {{random:first_name}} in first name field
7. Type {{random:last_name}} in last name field
8. Leave phone field empty ← Optional
9. Leave company field empty ← Optional
10. Check terms checkbox
11. Click "Sign Up"
12. Wait until: Welcome message appears
13. Verify user is logged in

Test 7: Special characters in name fields

Test: "Registration succeeds with special characters"

1. Navigate to {{variable:APP_URL}}/signup
2. Wait until: Registration form loads
3. Type {{random:email}} in email field
4. Type {{random:password}} in password field
5. Type {{random:password}} in confirm password field
6. Type "María José" in first name field ← Accented characters
7. Type "O'Brien-Smith" in last name field ← Apostrophe and hyphen
8. Check terms checkbox
9. Click "Sign Up"
10. Wait until: Welcome message appears
11. Verify name displays correctly

Total: 7 tests that comprehensively cover your registration form.

The Priority Framework

When deciding what to test, prioritize:

Priority 1 (Must test):

  • Happy path with all valid data
  • Empty required fields
  • Invalid formats for validated fields (email, phone, etc.)
  • Password validations (length, match)

Priority 2 (Should test):

  • Optional fields left empty
  • Boundary cases (max length fields)
  • Terms/consent checkboxes

Priority 3 (Nice to test):

  • Special characters
  • Internationalization (non-English characters)
  • Copy-paste behavior
  • Tab order and keyboard navigation

Start with Priority 1. Add Priority 2 when you have time. Add Priority 3 only if these are known problem areas.

Reusing Form Test Logic with Components

Notice that form tests share common setup. Use components:

Component: "Navigate to Registration Form":

1. Navigate to {{variable:APP_URL}}/signup
2. Wait until: Registration form loads

Now your tests become:

Test: "Register with valid data"
1. Run component: "Navigate to Registration Form"
2. Fill form with valid data
3. Submit and verify

Test: "Register with invalid email"
1. Run component: "Navigate to Registration Form"
2. Fill form with invalid email
3. Submit and verify error

Test: "Register with short password"
1. Run component: "Navigate to Registration Form"
2. Fill form with short password
3. Submit and verify error

This eliminates repetition and makes tests easier to maintain.

What Not to Test

Don't test basic HTML behavior:

  • Does typing in a text field work? (Browser handles this)
  • Does clicking a checkbox check it? (Browser handles this)
  • Do disabled fields stay disabled? (Browser handles this)

Don't test every possible combination:

  • 5 fields with 2 states each = 32 combinations
  • You don't need to test all 32
  • Test happy path + critical failures

Don't duplicate backend validation tests:

  • If your backend has 50 validation rules, don't write 50 e2e tests
  • Test the most common validations in e2e tests
  • Let unit tests cover exhaustive backend validation

Real-World Test Suite Structure

Here's what a complete form test suite looks like:

Registration Form Suite (7 tests):

  1. Happy path - all valid data
  2. Empty required fields
  3. Invalid email format
  4. Password too short
  5. Passwords don't match
  6. Optional fields empty (valid)
  7. Special characters in names

Login Form Suite (4 tests):

  1. Happy path - valid credentials
  2. Empty credentials
  3. Invalid email format
  4. Wrong password

Contact Form Suite (5 tests):

  1. Happy path - all valid data
  2. Empty required fields
  3. Invalid email format
  4. Message too short
  5. Message too long (boundary test)

Total: 16 tests covering 3 forms. Comprehensive but manageable.

What's Next

You now have a strategic approach to form testing—comprehensive without being overwhelming. Apply the three-layer strategy (happy path, critical validations, edge cases) to any form.

Next, let's explore testing another common but complex scenario: e-commerce checkout flows from cart to confirmation.