# Form Submission Test Example

This example demonstrates how to test form filling and submission.

## Test Scenario

**Objective**: Fill out a contact form and verify successful submission.

## Prerequisites

- Target URL with a contact form
- Form fields: name, email, message
- Submit button

## Test Steps

### Step 1: Navigate to Form Page

```typescript
await playwright_browser_navigate({
  url: "https://example.com/contact"
})

await playwright_browser_wait_for({
  time: 2
})
```

### Step 2: Get Page Snapshot

```typescript
// Capture snapshot to identify element references
const snapshot = await playwright_browser_snapshot()

// Save for reference
await playwright_browser_take_screenshot({
  type: "png",
  filename: "evidence/form-before.png"
})
```

### Step 3: Fill Form Fields

```typescript
// Fill name field
await playwright_browser_type({
  ref: "textbox[name='name']",
  element: "Name input field",
  text: "John Doe"
})

// Fill email field
await playwright_browser_type({
  ref: "textbox[name='email']",
  element: "Email input field",
  text: "john.doe@example.com"
})

// Fill message field
await playwright_browser_type({
  ref: "textbox[name='message']",
  element: "Message textarea",
  text: "This is a test message from automated testing."
})
```

### Step 4: Submit Form

```typescript
// Take screenshot before submission
await playwright_browser_take_screenshot({
  type: "png",
  filename: "evidence/form-filled.png"
})

// Click submit button
await playwright_browser_click({
  ref: "button[type='submit']",
  element: "Submit button"
})
```

### Step 5: Verify Submission

```typescript
// Wait for success message
await playwright_browser_wait_for({
  text: "Thank you",
  time: 5
})

// Capture result
await playwright_browser_take_screenshot({
  type: "png",
  filename: "evidence/form-result.png"
})

// Verify success
const resultSnapshot = await playwright_browser_snapshot()
if (resultSnapshot.includes("Thank you")) {
  console.log("✅ Form submitted successfully")
} else {
  console.log("❌ Form submission failed")
}
```

## Expected Result

- All form fields filled correctly
- Form submitted without errors
- Success message displayed
- No validation errors

## Evidence Files

- `evidence/form-before.png` - Form before filling
- `evidence/form-filled.png` - Form after filling
- `evidence/form-result.png` - Result after submission

## Error Handling

If form submission fails:

1. Check for validation errors in snapshot
2. Review console messages for JavaScript errors
3. Verify network requests completed successfully
4. Capture error state screenshot