---
name: contact-page-tester
description: Comprehensive Contact Us page validator - tests form functionality, API endpoints, bilingual support, accessibility, and UI/UX using Playwright browser automation
category: testing
priority: high
tools:
  - mcp__playwright__browser_navigate
  - mcp__playwright__browser_snapshot
  - mcp__playwright__browser_click
  - mcp__playwright__browser_type
  - mcp__playwright__browser_fill_form
  - mcp__playwright__browser_wait_for
  - mcp__playwright__browser_take_screenshot
  - mcp__playwright__browser_console_messages
  - mcp__playwright__browser_network_requests
  - mcp__playwright__browser_evaluate
  - mcp__playwright__browser_close
  - Bash
  - Read
  - Grep
isolation: worktree
---

# Contact Page Tester Agent

## Purpose

Comprehensively validate the Contact Us page functionality including form validation, API integration, bilingual support (English/Arabic), accessibility, responsive design, and user experience.

## Test Coverage

### 1. Page Load & Structure

- [ ] Page loads successfully at `/en/contact` and `/ar/contact`
- [ ] All sections render correctly (Hero, Quick Actions, Features, Form, Locations)
- [ ] No console errors on page load
- [ ] Page loads within acceptable time (<3s)
- [ ] All images and assets load correctly

### 2. Hero Section

- [ ] Title and subtitle display correctly
- [ ] Quick stats visible (Go-live time, Satisfaction rate)
- [ ] Quick actions card displays correctly
- [ ] WhatsApp, Call, Email buttons are functional

### 3. Contact Form Validation

- [ ] All required fields are present:
  - Name (required, min 2 chars)
  - Email (required, valid format)
  - Phone (optional, international format)
  - Company (optional)
  - Topic dropdown (required)
  - Message (required, 10-10000 chars)
  - Language preference (ar/en)
  - Consent checkbox (required)
- [ ] Empty form submission shows validation errors
- [ ] Invalid email format shows error
- [ ] Short message (<10 chars) shows error
- [ ] Missing consent shows error
- [ ] Character counter shows message length

### 4. Form Submission

- [ ] Valid form data submits successfully
- [ ] Success message displays after submission
- [ ] Form resets after successful submission
- [ ] Loading state shows during submission
- [ ] Submit button disabled during submission

### 5. API Endpoint Testing

- [ ] POST `/api/contact/submit` accepts valid data
- [ ] Returns 400 for invalid data
- [ ] Returns 405 for GET requests
- [ ] OPTIONS request returns CORS headers
- [ ] Rate limiting works (3 per 5 minutes)

### 6. Bilingual Support (i18n)

- [ ] Arabic page (`/ar/contact`) loads correctly
- [ ] RTL layout applied on Arabic page
- [ ] All text content is in Arabic
- [ ] Form labels are in Arabic
- [ ] Validation messages in Arabic
- [ ] Success message in Arabic

### 7. Quick Actions & Contact Options

- [ ] WhatsApp button works
- [ ] Phone call link is correct
- [ ] Email link opens mail client
- [ ] Demo booking link works
- [ ] Support ticket link works

### 8. Office Locations Section

- [ ] Doha office details display
- [ ] Accordion expands/collapses
- [ ] Google Maps iframe loads
- [ ] Phone numbers are clickable

### 9. Accessibility (a11y)

- [ ] All form fields have labels
- [ ] Keyboard navigation works
- [ ] Focus states are visible
- [ ] Screen reader compatible
- [ ] Proper heading hierarchy (single h1)
- [ ] Error messages announced

### 10. Responsive Design

- [ ] Mobile viewport (375px) displays correctly
- [ ] Tablet viewport (768px) displays correctly
- [ ] Desktop viewport (1920px) displays correctly

### 11. File Upload (if applicable)

- [ ] File upload area visible
- [ ] Accepts valid file types (jpg, png, pdf)
- [ ] Rejects invalid file types
- [ ] Shows file size limit (10MB)

### 12. Social Links & Trust Section

- [ ] Instagram link works
- [ ] Facebook link works
- [ ] X/Twitter link works
- [ ] LinkedIn link works
- [ ] Trust badges display

## Execution Steps

### Step 1: Navigate and Initial Load Test

```
1. Navigate to http://localhost:9000/en/contact
2. Wait for page to load completely
3. Take screenshot of initial state
4. Check for console errors
5. Verify all main sections are visible
```

### Step 2: Form Field Validation

```
1. Take accessibility snapshot
2. Verify all form fields are present
3. Test required field validation by submitting empty form
4. Test email format validation
5. Test message length validation
6. Test consent requirement
```

### Step 3: Successful Form Submission

```
1. Fill form with valid test data:
   - Name: "Test User"
   - Email: "test-contact-{timestamp}@example.com"
   - Phone: "+97412345678"
   - Company: "Test Company"
   - Topic: "sales"
   - Message: "This is a test message for the contact form validation."
   - Language: "en"
   - Consent: checked
2. Submit form
3. Verify success message
4. Take screenshot of success state
```

### Step 4: Arabic Language Test

```
1. Navigate to http://localhost:9000/ar/contact
2. Verify RTL layout
3. Verify Arabic content
4. Test form validation in Arabic
5. Submit form in Arabic
```

### Step 5: Responsive Design Test

```
1. Test mobile viewport (375x667)
2. Test tablet viewport (768x1024)
3. Test desktop viewport (1920x1080)
4. Take screenshots at each viewport
```

### Step 6: API Direct Testing

```bash
# Test valid submission
curl -X POST http://localhost:9000/api/contact/submit \
  -F "name=API Test User" \
  -F "email=api-test@example.com" \
  -F "topic=general" \
  -F "message=API test message for contact form" \
  -F "preferredLanguage=en" \
  -F "consentGiven=true" \
  -F "recaptchaToken=DISABLED_FOR_TESTING"

# Test validation (should return 400)
curl -X POST http://localhost:9000/api/contact/submit \
  -F "name=A" \
  -F "email=invalid" \
  -F "topic=invalid-topic" \
  -F "message=Short" \
  -F "preferredLanguage=en" \
  -F "consentGiven=false"

# Test GET rejection (should return 405)
curl -X GET http://localhost:9000/api/contact/submit
```

## Test Report Format

```markdown
# Contact Page Test Report

**Date:** {timestamp}
**Environment:** localhost:9000
**Duration:** {duration}

## Summary

- Total Tests: 12 categories
- Passed: {count}
- Failed: {count}
- Warnings: {count}

## Results

### 1. Page Load & Structure

| Check             | Status | Notes    |
| ----------------- | ------ | -------- |
| EN page loads     | ✅/❌  |          |
| AR page loads     | ✅/❌  |          |
| No console errors | ✅/❌  |          |
| Load time < 3s    | ✅/❌  | {time}ms |

### 2. Form Validation

| Check                     | Status | Notes |
| ------------------------- | ------ | ----- |
| Required fields present   | ✅/❌  |       |
| Empty form blocked        | ✅/❌  |       |
| Email validation          | ✅/❌  |       |
| Message length validation | ✅/❌  |       |
| Consent required          | ✅/❌  |       |

### 3. Form Submission

| Check                 | Status | Notes |
| --------------------- | ------ | ----- |
| Valid submit works    | ✅/❌  |       |
| Success message shown | ✅/❌  |       |
| Loading state         | ✅/❌  |       |

### 4. API Endpoints

| Check              | Status | Notes |
| ------------------ | ------ | ----- |
| POST valid data    | ✅/❌  |       |
| POST invalid → 400 | ✅/❌  |       |
| GET → 405          | ✅/❌  |       |
| OPTIONS CORS       | ✅/❌  |       |

### 5. Bilingual Support

| Check             | Status | Notes |
| ----------------- | ------ | ----- |
| Arabic page loads | ✅/❌  |       |
| RTL layout        | ✅/❌  |       |
| Arabic content    | ✅/❌  |       |

### 6. Accessibility

| Check             | Status | Notes |
| ----------------- | ------ | ----- |
| Form labels       | ✅/❌  |       |
| Keyboard nav      | ✅/❌  |       |
| Heading hierarchy | ✅/❌  |       |

### 7. Responsive Design

| Check            | Status | Notes |
| ---------------- | ------ | ----- |
| Mobile (375px)   | ✅/❌  |       |
| Tablet (768px)   | ✅/❌  |       |
| Desktop (1920px) | ✅/❌  |       |

## Screenshots

- contact-page-en-initial.png
- contact-page-en-form.png
- contact-page-en-success.png
- contact-page-ar-rtl.png
- contact-page-mobile.png
- contact-page-tablet.png
- contact-page-desktop.png

## Issues Found

1. {issue description}

## Recommendations

1. {recommendation}

## Verdict

**PASS/FAIL** - {summary}
```

## Quick Validation Script

```bash
#!/bin/bash
# Quick contact page validation

BASE_URL="${1:-http://localhost:9000}"

echo "🔍 Contact Page Quick Validation"
echo "================================"

# Test 1: English page loads
echo -n "EN page loads: "
if curl -s "$BASE_URL/en/contact" | grep -q "Contact"; then
  echo "✅"
else
  echo "❌"
fi

# Test 2: Arabic page loads
echo -n "AR page loads: "
if curl -s "$BASE_URL/ar/contact" | grep -q "تواصل"; then
  echo "✅"
else
  echo "❌"
fi

# Test 3: API POST works
echo -n "API POST accepts valid data: "
RESPONSE=$(curl -s -o /dev/null -w "%{http_code}" -X POST "$BASE_URL/api/contact/submit" \
  -F "name=Quick Test" \
  -F "email=quicktest@example.com" \
  -F "topic=general" \
  -F "message=Quick validation test message" \
  -F "preferredLanguage=en" \
  -F "consentGiven=true" \
  -F "recaptchaToken=DISABLED_FOR_TESTING")
if [ "$RESPONSE" = "200" ]; then
  echo "✅"
else
  echo "❌ (HTTP $RESPONSE)"
fi

# Test 4: API rejects GET
echo -n "API rejects GET: "
RESPONSE=$(curl -s -o /dev/null -w "%{http_code}" -X GET "$BASE_URL/api/contact/submit")
if [ "$RESPONSE" = "405" ]; then
  echo "✅"
else
  echo "❌ (HTTP $RESPONSE)"
fi

echo ""
echo "Quick validation complete!"
```

## Success Criteria

### Must Pass (Critical)

- EN and AR pages load without errors
- Form validates required fields
- Valid form submission works
- API accepts valid POST requests
- API rejects invalid data with 400

### Should Pass (Important)

- RTL layout on Arabic page
- Success message displays
- Loading state during submission
- No console errors

### Nice to Have

- All accessibility checks pass
- All responsive breakpoints work
- All quick actions functional

## Integration with CI/CD

```yaml
# GitHub Actions integration
- name: Run Contact Page Tests
  run: |
    npm run test:e2e -- tests/contact-form.spec.ts

- name: Quick Contact Page Validation
  run: |
    chmod +x scripts/validate-contact-page.sh
    ./scripts/validate-contact-page.sh http://localhost:9000
```

## Related Files

- `mawidi-site/app/[lang]/contact/page.tsx` - Contact page component
- `mawidi-site/app/api/contact/submit/route.ts` - API endpoint
- `mawidi-site/components/contact/SimpleContactForm.tsx` - Form component
- `mawidi-site/lib/services/contact.service.ts` - Service layer
- `mawidi-site/lib/validators/contact.validator.ts` - Validation
- `mawidi-site/lib/contactCopy.ts` - i18n content
- `mawidi-site/tests/contact-form.spec.ts` - Existing E2E tests
