# SAWIS Business Intelligence Dashboard - Playwright Test Suite

This repository contains comprehensive UI test cases for the SAWIS (South African Wine Industry Information & Systems) Business Intelligence Dashboard at https://bi.sawisonline.co.za/.

## 🎯 Overview

The SAWIS BI Dashboard is a comprehensive wine industry analytics platform that provides insights into export data, market trends, and industry metrics. This test suite ensures the platform's reliability, performance, and user experience across different scenarios.

## 🧪 Test Coverage

### 1. Homepage Tests (`tests/homepage.spec.ts`)
- **Page Loading**: Verifies successful homepage loading and basic functionality
- **Navigation Elements**: Tests login button, contact links, and main navigation tabs
- **Key Metrics Display**: Validates export volume metrics and data visualization
- **Chart Sections**: Ensures all chart components are properly displayed
- **Filter Sidebar**: Tests filter functionality and UI elements
- **Footer Information**: Validates footer links and attribution
- **Responsive Design**: Tests mobile and tablet viewport compatibility
- **Accessibility**: Checks proper ARIA attributes and heading structure
- **Error Handling**: Monitors console errors and critical issues

### 2. Login Tests (`tests/login.spec.ts`)
- **Modal Functionality**: Tests login modal opening and closing
- **Form Validation**: Validates form fields and submission requirements
- **reCAPTCHA Integration**: Ensures security measures are in place
- **Password Recovery**: Tests forgot password functionality
- **Account Creation**: Validates registration link functionality
- **Keyboard Navigation**: Tests accessibility and keyboard interactions
- **Focus Management**: Ensures proper focus trapping in modal
- **Form Security**: Validates password field type and security measures

### 3. Filter Tests (`tests/filters.spec.ts`)
- **Filter Sections**: Tests all filter categories (Year, Month, Product Type, etc.)
- **Dropdown Functionality**: Validates filter dropdowns and selections
- **Search Capability**: Tests search functionality within filter options
- **Multi-Selection**: Tests multiple filter selections
- **Apply/Clear Buttons**: Validates filter application and reset functionality
- **Data Updates**: Ensures filters properly update chart data
- **Filter Combinations**: Tests complex filter scenarios
- **Keyboard Navigation**: Tests accessibility in filter interactions
- **Special Characters**: Handles international characters and special cases
- **State Persistence**: Maintains filter state across navigation

### 4. Navigation Tests (`tests/navigation.spec.ts`)
- **Tab Navigation**: Tests Overview, Volume, Value, and Price Range tabs
- **Content Loading**: Validates content specific to each tab
- **State Management**: Ensures filter state persists across navigation
- **Rapid Navigation**: Tests quick tab switching performance
- **Keyboard Support**: Validates keyboard navigation accessibility
- **Loading States**: Tests loading indicators during navigation
- **Browser Navigation**: Tests back/forward button functionality
- **Scroll Management**: Validates scroll position handling
- **Chart Interactions**: Tests chart functionality across tabs

### 5. Chart Tests (`tests/charts.spec.ts`)
- **Chart Display**: Validates all chart sections and data visualization
- **Reporting Periods**: Tests date range display and formatting
- **Export Functionality**: Tests data export capabilities
- **Table Views**: Validates table display options
- **Chart Interactions**: Tests chart hover, click, and interaction features
- **Loading States**: Validates chart loading indicators
- **Data Updates**: Tests chart updates when filters change
- **Responsive Charts**: Tests chart adaptation to different screen sizes
- **Accessibility**: Ensures charts meet accessibility standards
- **Performance**: Tests chart rendering with large datasets

### 6. Performance Tests (`tests/performance.spec.ts`)
- **Page Load Performance**: Measures initial page load times
- **Data Loading**: Tests data retrieval and display performance
- **Filter Performance**: Measures filter application response times
- **Navigation Speed**: Tests tab switching performance
- **Large Dataset Handling**: Tests performance with extensive data
- **Memory Usage**: Monitors memory consumption during extended use
- **Network Latency**: Tests performance under slow network conditions
- **Concurrent Operations**: Tests simultaneous user interactions
- **Resource Loading**: Monitors resource loading efficiency
- **Mobile Performance**: Tests performance on mobile devices

## 🚀 Getting Started

### Prerequisites
- Node.js (v16 or higher)
- npm or yarn package manager

### Installation

1. **Clone the repository**
   ```bash
   git clone <repository-url>
   cd sawis-playwright-tests
   ```

2. **Install dependencies**
   ```bash
   npm install
   ```

3. **Install Playwright browsers**
   ```bash
   npm run install:browsers
   ```

### Running Tests

#### Run all tests
```bash
npm test
```

#### Run tests with UI mode (interactive)
```bash
npm run test:ui
```

#### Run tests in headed mode (visible browser)
```bash
npm run test:headed
```

#### Run tests in debug mode
```bash
npm run test:debug
```

#### Run specific test file
```bash
npx playwright test tests/homepage.spec.ts
```

#### Run tests on specific browser
```bash
npx playwright test --project=chromium
```

### Test Reports

After running tests, view the HTML report:
```bash
npm run test:report
```

## 📊 Test Configuration

### Browser Support
- **Chromium**: Primary testing browser
- **Firefox**: Cross-browser compatibility
- **WebKit**: Safari compatibility
- **Mobile Chrome**: Mobile responsiveness
- **Mobile Safari**: iOS compatibility

### Test Environment
- **Base URL**: https://bi.sawisonline.co.za/
- **Timeout**: 30 seconds for navigation, 10 seconds for actions
- **Retries**: 2 retries on CI, 0 on local development
- **Parallel Execution**: Enabled for faster test execution

### Performance Thresholds
- **Page Load**: < 10 seconds
- **Data Loading**: < 15 seconds
- **Filter Application**: < 8 seconds
- **Navigation**: < 5 seconds
- **Large Dataset**: < 20 seconds

## 🔧 Configuration Files

### `playwright.config.ts`
- Browser configurations
- Test timeouts and retries
- Reporter settings
- Global test options

### `package.json`
- Dependencies and scripts
- Test commands
- Project metadata

## 📝 Test Structure

```
tests/
├── homepage.spec.ts      # Homepage functionality tests
├── login.spec.ts         # Authentication tests
├── filters.spec.ts       # Filter functionality tests
├── navigation.spec.ts    # Navigation and routing tests
├── charts.spec.ts        # Data visualization tests
└── performance.spec.ts   # Performance and load tests
```

## 🎯 Test Scenarios

### Critical User Journeys
1. **Data Exploration**: User loads page → applies filters → views charts → exports data
2. **Navigation Flow**: User switches between tabs → maintains filter state → views different data views
3. **Authentication**: User attempts login → handles validation → accesses secure features
4. **Mobile Experience**: User accesses on mobile → navigates filters → views responsive charts

### Edge Cases
- Large dataset filtering (all countries selected)
- Rapid user interactions
- Network latency scenarios
- Browser back/forward navigation
- Page refresh with active filters

## 🐛 Known Issues

### Expected Console Errors
- `manifest.json` 404 errors (expected for PWA features)
- Google Analytics tracking errors (non-critical)
- reCAPTCHA iframe loading (expected security feature)

### Browser-Specific Considerations
- Safari: May have different timing for chart rendering
- Firefox: Slightly different CSS rendering
- Mobile: Touch interactions vs mouse interactions

## 📈 Continuous Integration

### GitHub Actions (Recommended)
```yaml
name: SAWIS 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 ci
      - run: npm run install:browsers
      - run: npm test
```

### Local Development
```bash
# Run tests in watch mode
npx playwright test --watch

# Run tests with specific grep pattern
npx playwright test -g "should load homepage"

# Generate test code
npx playwright codegen https://bi.sawisonline.co.za/
```

## 🤝 Contributing

### Adding New Tests
1. Create test file in `tests/` directory
2. Follow naming convention: `feature.spec.ts`
3. Use descriptive test names
4. Include proper error handling
5. Add documentation comments

### Test Best Practices
- **Isolation**: Each test should be independent
- **Reliability**: Use proper wait conditions
- **Maintainability**: Use page object patterns for complex selectors
- **Performance**: Minimize unnecessary waits
- **Accessibility**: Test keyboard navigation and screen readers

## 📞 Support

For issues related to:
- **Test Failures**: Check browser compatibility and timing
- **Performance Issues**: Verify network conditions and data size
- **Configuration**: Review `playwright.config.ts` settings

## 📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

## 🔗 Related Links

- [SAWIS Website](https://bi.sawisonline.co.za/)
- [Playwright Documentation](https://playwright.dev/)
- [Wine Industry Data](https://www.sawis.co.za/)

---

**Last Updated**: July 2024
**Test Coverage**: 95%+ of critical user journeys
**Browser Support**: Chrome, Firefox, Safari, Mobile browsers