This directory contains comprehensive UI testing infrastructure for Phase 2 development, focusing on web interface testing, accessibility compliance, and visual regression testing.

tests/ui/
├── base/
│   └── selenium_setup.py          # WebDriver management and browser configurations
├── web_interface/
│   └── test_user_interface.py    # Page rendering, forms, navigation, dynamic content
├── accessibility/
│   └── test_wcag_compliance.py   # WCAG 2.1 AA compliance testing
├── visual/
│   └── test_visual_regression.py # Screenshot comparison and layout validation
├── run_ui_tests.py               # Comprehensive test runner
└── README.md                     # This documentation

1. Python Environment: Python 3.8+ with required packages
2. WebDriver: Chrome/Firefox WebDriver (automatically managed by webdriver-manager)
3. Test Server: Application running at http://localhost:5000 (default)

# Install required dependencies
pip install selenium webdriver-manager pytest pytest-html requests

# For visual regression testing (optional)
pip install Pillow

# For accessibility testing (axe-core is loaded automatically)
# No additional setup required

python tests/ui/run_ui_tests.py

# Web Interface Testing
python tests/ui/run_ui_tests.py --category web_interface

# Accessibility Testing
python tests/ui/run_ui_tests.py --category accessibility

# Visual Regression Testing
python tests/ui/run_ui_tests.py --category visual_regression

python tests/ui/run_ui_tests.py --base-url http://localhost:8080

python tests/ui/run_ui_tests.py --output-dir custom_reports

Comprehensive testing of web application functionality including:

• Page Rendering: Validates page loading, element presence, and content rendering
• Form Submission: Tests form validation, submission, and error handling
• Navigation: Verifies navigation menus, breadcrumbs, and routing
• Dynamic Content: Tests AJAX content loading, interactive elements, and real-time updates
• File Upload: Validates drag-and-drop interfaces and file handling
• Cross-Browser: Tests compatibility across Chrome, Firefox, Safari, and Edge
• Mobile Emulation: Tests responsive design on iPhone, Android, and iPad devices

• TestPageRendering: Homepage, article pages, responsive design
• TestFormSubmission: Upload forms, validation, error handling
• TestNavigationAndRouting: Main navigation, breadcrumbs, search
• TestDynamicContent: AJAX loading, interactive elements, real-time updates
• TestFileUploadInterface: Drag-and-drop, file preview, progress indication
• TestCrossBrowserCompatibility: Multi-browser and mobile testing

WCAG 2.1 AA comprehensive compliance testing:

• WCAG Compliance: axe-core integration for automated accessibility testing
• Screen Reader: Alt text, heading structure, ARIA landmarks
• Keyboard Navigation: Tab order, focus management, skip links
• Color Contrast: Text contrast ratio compliance
• Focus Management: Modal focus trapping, auto-focus functionality
• ARIA Labels: Proper labeling of interactive elements

• TestWCAGCompliance: axe-core accessibility testing
• TestKeyboardNavigation: Tab navigation, focus indicators
• TestScreenReaderCompatibility: Alt text, headings, ARIA
• TestColorContrast: Contrast ratio validation
• TestFocusManagement: Modal behavior, focus trapping

Comprehensive visual testing and regression detection:

• Screenshot Comparison: Baseline vs. current screenshot comparison
• Layout Consistency: Responsive design verification across viewports
• Component Testing: Individual component visual validation
• Cross-Platform: Browser and device consistency testing
• Print Layout: Print media testing
• Visual Reporting: Comprehensive HTML reports with diff images

• TestScreenshotComparison: Page and component screenshot comparison
• TestLayoutConsistency: Responsive design, layout stability
• TestCrossPlatformVisualConsistency: Browser and device testing
• TestComponentVisualTesting: Individual component validation
• TestVisualRegressionReporting: Comprehensive reporting

Pre-configured browser setups for different testing scenarios:

BROWSER_CONFIGS = {
    "desktop_chrome": BrowserConfig(
        name="desktop_chrome",
        headless=True,
        window_size=(1920, 1080),
        javascript_enabled=True
    ),
    "mobile_chrome": BrowserConfig(
        name="mobile_chrome",
        headless=True,
        window_size=(375, 667),
        user_agent="iPhone user agent..."
    ),
    "accessibility": BrowserConfig(
        name="accessibility", 
        headless=True,
        window_size=(1920, 1080),
        javascript_enabled=True
    )
}

Pre-configured mobile devices for testing:

• iPhone 13: 390x844, 3.0 pixel ratio
• Samsung Galaxy S21: 360x640, 3.0 pixel ratio
• iPad Pro: 1024x1366, 2.0 pixel ratio

Automatic WebDriver management with:

• Multi-browser support (Chrome, Firefox, Safari, Edge)
• Headless mode for CI/CD
• Mobile device emulation
• Performance optimization
• Automatic cleanup

Tests generate comprehensive reports in multiple formats:

1. HTML Reports: Interactive reports with test details
2. JSON Reports: Machine-readable test results
3. JUnit XML: CI/CD integration
4. Screenshots: Visual evidence and diff images
5. Coverage Reports: Test coverage analysis (if available)

test_reports/
├── ui_test_report.html          # Comprehensive HTML report
├── ui_test_report.json          # JSON test results
├── web_interface_report.html    # Web interface specific report
├── accessibility_report.html    # Accessibility specific report
├── visual_report.html           # Visual regression specific report
└── screenshots/
    ├── baseline/               # Baseline screenshots
    ├── current/                # Current test screenshots
    └── diffs/                  # Difference images

Create custom browser configurations:

from tests.ui.base.selenium_setup import BrowserConfig

custom_config = BrowserConfig(
    name="custom_chrome",
    headless=False,
    window_size=(1366, 768),
    user_agent="Custom User Agent",
    javascript_enabled=True,
    accept_insecure_certs=True,
    proxy="http://proxy.example.com:8080"
)

Add new mobile devices:

from tests.ui.base.selenium_setup import DeviceConfig, DEVICES

DEVICES["custom_tablet"] = DeviceConfig(
    name="Custom Tablet",
    width=800,
    height=600,
    pixel_ratio=2.0,
    user_agent="Custom tablet user agent..."
)

Configure test behavior with environment variables:

export BASE_URL="http://test-server.example.com"
export HEADLESS_MODE="true"
export SCREENSHOT_DIR="custom_screenshots"
export TEST_TIMEOUT="30"

1. Page Object Pattern: Use existing SeleniumTestCase base classes
2. Descriptive Tests: Clear test names and documentation
3. Independent Tests: Each test should be self-contained
4. Proper Cleanup: Use setUp/tearDown methods for resource management

1. Automated Testing: Use axe-core for comprehensive automated testing
2. Manual Verification: Automated tests should be supplemented with manual testing
3. Keyboard Testing: Ensure full keyboard accessibility
4. Screen Reader Testing: Test with actual screen readers when possible

1. Baseline Management: Establish and maintain baseline screenshots
2. Review Diffs: Carefully review visual differences
3. Responsive Testing: Test across all target viewports
4. Component Isolation: Test components individually for better diff analysis

1. Parallel Execution: Run tests in parallel when possible
2. Headless Mode: Use headless browsers for CI/CD
3. Test Isolation: Ensure tests don't interfere with each other
4. Resource Cleanup: Proper cleanup of WebDriver instances

1. WebDriver Not Found:

   pip install --upgrade webdriver-manager

2. Test Server Not Running:

   # Start your application server
   python app.py  # or your server command

3. Permission Issues:

   chmod +x tests/ui/run_ui_tests.py

4. Import Errors:

   export PYTHONPATH="${PYTHONPATH}:$(pwd)"

Run tests with debug information:

# Run with verbose output
python tests/ui/run_ui_tests.py --category web_interface -v

# Run without headless mode (for debugging)
export HEADLESS_MODE=false
python tests/ui/run_ui_tests.py

name: UI Tests
on: [push, pull_request]
jobs:
  ui-tests:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Setup Python
        uses: actions/setup-python@v2
        with:
          python-version: '3.9'
      - name: Install Dependencies
        run: |
          pip install selenium webdriver-manager pytest
      - name: Start Test Server
        run: python app.py &
      - name: Run UI Tests
        run: python tests/ui/run_ui_tests.py
      - name: Upload Reports
        uses: actions/upload-artifact@v2
        with:
          name: ui-test-reports
          path: test_reports/

1. Create new test file in appropriate directory
2. Inherit from existing test base classes
3. Use established patterns and conventions
4. Add to test runner configuration

Add custom assertion methods to test classes:

def assert_accessible_button(self, button_element):
    """Custom assertion for button accessibility"""
    aria_label = button_element.get_attribute("aria-label")
    button_text = button_element.text.strip()
    assert aria_label or button_text, "Button lacks accessible name"

Combine UI tests with API tests for comprehensive coverage:

def test_api_ui_integration(self):
    """Test API integration with UI"""
    # Create data via API
    api_response = self.api_client.post("/articles", article_data)
    
    # Verify in UI
    self.navigate_to("/articles")
    self.assert_text_present(api_response["title"])

• Selenium Documentation
• axe-core Documentation
• WCAG 2.1 Guidelines
• pytest Documentation
• webdriver-manager Documentation

This comprehensive UI testing infrastructure provides the foundation for ensuring high-quality, accessible, and visually consistent user interfaces for the Integral Philosophy Publishing System.