# Playwright Test Suite for staging.ipw.co.za

## 📋 Overview

This comprehensive Playwright test suite provides automated testing for the staging.ipw.co.za website, covering:

- **Authentication Testing** - Login, logout, session management
- **Security & Vulnerability Testing** - XSS prevention, CSRF protection, security headers
- **Accessibility Testing** - WCAG compliance, keyboard navigation, screen reader support
- **Performance Testing** - Page load times, resource optimization, performance metrics
- **Main Functionality Testing** - Navigation, forms, core website functionality
- **Post-Login Functionality Testing** - Dashboard, user features, protected areas

## 🚀 Quick Start

### Prerequisites

- Node.js (v16 or higher)
- npm or yarn
- MySQL database (optional, for test result storage)

### Installation

1. **Install dependencies:**
   ```bash
   npm install
   ```

2. **Install Playwright browsers:**
   ```bash
   npx playwright install
   ```

3. **Set up environment variables (optional):**
   ```bash
   # Copy the example environment file
   cp .env.example .env
   
   # Edit .env with your database credentials
   DB_HOST=localhost
   DB_USER=root
   DB_PASSWORD=your_password
   DB_NAME=playwright_tests
   ```

4. **Set up database (optional):**
   ```bash
   # Check database connection
   npm run check-db
   
   # Create required tables
   npm run check-schema
   ```

## 🧪 Running Tests

### Current Test Status

**✅ Site Accessibility Tests**: PASSED (100% success rate)  
**⚠️ Authentication Tests**: FAILED (Login form structure analysis required)  
**⚠️ Other Test Suites**: Blocked by authentication issues  

### Comprehensive Test Suite

Run all tests with a comprehensive report:

```bash
npm run test:comprehensive
```

**Note**: Currently, only site accessibility tests are passing. Authentication tests require manual inspection of the login form structure.

### Working Tests

Run the successful site accessibility tests:

```bash
npx playwright test tests/site-accessibility.spec.js
```

This will:
- Test site accessibility and structure
- Verify responsive design
- Check error handling
- Generate detailed reports

### Individual Test Suites

```bash
# Authentication tests
npm run test:auth

# Security and vulnerability tests
npm run test:security

# Accessibility tests
npm run test:accessibility

# Performance tests
npm run test:performance

# All tests with HTML report
npm run test:full
```

### Specific Test Files

```bash
# Run specific test file
npx playwright test tests/authentication.spec.js

# Run with UI mode
npx playwright test --ui

# Run in headed mode (see browser)
npx playwright test --headed

# Run with debug mode
npx playwright test --debug
```

## 📊 Test Results

### Reports

- **HTML Report**: `playwright-report/index.html`
- **JSON Report**: `test-results.json`
- **Comprehensive Report**: `comprehensive-test-report.json`
- **Summary Report**: `test-summary.json`

### Database Integration

If database is configured, test results are automatically saved to:

- `playwright_test_results` - Individual test results
- `playwright_execution_summaries` - Test run summaries
- `playwright_performance_trends` - Performance trend analysis

### Viewing Results

```bash
# Open HTML report
npx playwright show-report

# Generate custom HTML report
npm run test:report

# Generate PDF report
npm run test:pdf

# Send email report (includes HTML, PDF, and JSON)
npm run test:email

# Save results to database
npm run test:save-results
```

## 🔧 Configuration

### Test Credentials

The tests use the following credentials (configured in environment):

- **Username**: `daniel`
- **Password**: `Betauser`

### Browser Support

Tests run on:
- Chromium (Desktop)
- Firefox (Desktop)
- WebKit (Desktop)
- Mobile Chrome
- Mobile Safari

### Performance Thresholds

- **Page Load Time**: < 5 seconds
- **DOM Content Loaded**: < 2 seconds
- **First Contentful Paint**: < 2 seconds
- **Touch Response Time**: < 100ms

## 📁 Project Structure

```
├── tests/
│   ├── authentication.spec.js          # Login/logout tests
│   ├── security.spec.js                # Security & vulnerability tests
│   ├── accessibility.spec.js           # Accessibility compliance tests
│   ├── performance.spec.js             # Performance optimization tests
│   ├── main-functionality.spec.js      # Core functionality tests
│   └── post-login-functionality.spec.js # Post-authentication tests
├── scripts/
│   ├── check-db.js                     # Database connection check
│   ├── check-schema.js                 # Database schema setup
│   ├── save-test-results.js            # Save results to database
│   ├── run-comprehensive-tests.js      # Comprehensive test runner
│   ├── global-setup.js                 # Global test setup
│   └── global-teardown.js              # Global test cleanup
├── playwright.config.js                # Playwright configuration
├── package.json                        # Dependencies and scripts
└── README.md                          # This file
```

## 🛡️ Security Testing

The security test suite includes:

- **XSS Prevention**: Tests for script injection vulnerabilities
- **CSRF Protection**: Validates CSRF token implementation
- **Input Sanitization**: Checks for proper input handling
- **Security Headers**: Validates security header configuration
- **Directory Traversal**: Tests for path traversal vulnerabilities
- **Rate Limiting**: Validates rate limiting implementation
- **Authentication Bypass**: Tests for authentication vulnerabilities

## ♿ Accessibility Testing

The accessibility test suite covers:

- **WCAG Compliance**: Checks for accessibility standards
- **Keyboard Navigation**: Tests keyboard accessibility
- **Screen Reader Support**: Validates screen reader compatibility
- **Color Contrast**: Checks color contrast ratios
- **Form Labels**: Validates form accessibility
- **Semantic HTML**: Checks for proper HTML structure
- **ARIA Attributes**: Validates ARIA implementation

## ⚡ Performance Testing

The performance test suite measures:

- **Page Load Times**: Core Web Vitals metrics
- **Resource Optimization**: Image, CSS, and JavaScript optimization
- **Concurrent Load**: Performance under multiple users
- **JavaScript Execution**: JS performance and memory usage
- **Mobile Performance**: Mobile-specific performance metrics

## 🔍 Troubleshooting

### Common Issues

1. **Tests fail with timeout errors:**
   - Check network connectivity
   - Verify the staging site is accessible
   - Increase timeout values in playwright.config.js

2. **Database connection errors:**
   - Verify database credentials in .env
   - Ensure MySQL is running
   - Check database permissions

3. **Authentication tests fail:**
   - Verify test credentials are correct
   - Check if the login form structure has changed
   - Ensure the staging site is accessible

### Debug Mode

Run tests in debug mode for detailed troubleshooting:

```bash
npx playwright test --debug
```

### Verbose Output

Enable verbose logging:

```bash
DEBUG=pw:api npx playwright test
```

## 📈 Continuous Integration

### GitHub Actions Example

```yaml
name: Playwright Tests
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3
    - uses: actions/setup-node@v3
      with:
        node-version: 18
    - run: npm install
    - run: npx playwright install
    - run: npm run test:comprehensive
    - uses: actions/upload-artifact@v3
      if: always()
      with:
        name: playwright-report
        path: playwright-report/
```

## 🤝 Contributing

1. Follow the test specification template
2. Add comprehensive test coverage
3. Include proper documentation
4. Test on multiple browsers
5. Validate accessibility and security

## 📞 Support

For questions or issues:

1. Check the troubleshooting section
2. Review test logs and reports
3. Verify environment configuration
4. Check Playwright documentation: https://playwright.dev/

## 📄 License

MIT License - see LICENSE file for details.

---

**Last Updated**: December 2024  
**Test Coverage**: Authentication, Security, Accessibility, Performance, Functionality  
**Target Site**: staging.ipw.co.za  
**Test Credentials**: daniel / Betauser