rxminder/tests/e2e

🎭 End-to-End Testing with Playwright

Overview

This directory contains comprehensive end-to-end tests for the Medication Reminder App using Playwright. These tests simulate real user interactions across different browsers and devices.

Test Structure

tests/e2e/
├── README.md                 # This documentation
├── fixtures.ts              # Custom test fixtures and utilities
├── helpers.ts               # Test helper functions and data
├── auth.spec.ts             # Authentication flow tests
├── medication.spec.ts       # Medication management tests
├── admin.spec.ts            # Admin interface tests
├── ui-navigation.spec.ts    # UI and navigation tests
└── reminders.spec.ts        # Reminder system tests

Test Categories

🔐 Authentication Tests (auth.spec.ts)

• User registration and login
• Admin authentication
• OAuth button visibility
• Invalid credential handling
• Session management

💊 Medication Management (medication.spec.ts)

• Adding new medications
• Editing existing medications
• Deleting medications
• Marking doses as taken
• Viewing medication history

👑 Admin Interface (admin.spec.ts)

• User management operations
• Password changes
• User status toggles
• Admin permissions

🎨 UI & Navigation (ui-navigation.spec.ts)

• Theme switching
• Modal interactions
• Responsive design
• Search functionality
• Account management

⏰ Reminder System (reminders.spec.ts)

• Custom reminder creation
• Reminder editing and deletion
• Scheduled dose display
• Missed dose handling

Setup and Installation

1. Install Playwright

# Install Playwright and browsers
bun add -D @playwright/test
bunx playwright install

2. Update Package.json

{
  "scripts": {
    "test:e2e": "playwright test",
    "test:e2e:ui": "playwright test --ui",
    "test:e2e:debug": "playwright test --debug",
    "test:e2e:report": "playwright show-report"
  }
}

Running Tests

Basic Test Execution

# Run all E2E tests
bun run test:e2e

# Run tests in UI mode (interactive)
bun run test:e2e:ui

# Run specific test file
bunx playwright test auth.spec.ts

# Run tests in debug mode
bun run test:e2e:debug

Browser-Specific Testing

# Run on specific browser
bunx playwright test --project=chromium
bunx playwright test --project=firefox
bunx playwright test --project=webkit

# Run on mobile browsers
bunx playwright test --project="Mobile Chrome"
bunx playwright test --project="Mobile Safari"

Test Reporting

# Generate and view HTML report
bun run test:e2e:report

# Run with specific reporter
bunx playwright test --reporter=line
bunx playwright test --reporter=json

Test Configuration

The tests are configured via playwright.config.ts:

• Base URL: http://localhost:8080
• Auto-start: Docker Compose before tests
• Browsers: Chrome, Firefox, Safari, Mobile Chrome, Mobile Safari
• Retries: 2 on CI, 0 locally
• Screenshots: On failure
• Videos: On failure
• Traces: On retry

Test Data and Fixtures

Custom Fixtures (fixtures.ts)

• adminPage: Auto-login as admin user
• userPage: Auto-login as regular user

Helper Functions (helpers.ts)

• MedicationHelpers: Medication CRUD operations
• AuthHelpers: Authentication actions
• ModalHelpers: Modal interactions
• WaitHelpers: Wait utilities
• TestData: Pre-defined test data

Example Usage

import { test } from './fixtures';
import { MedicationHelpers, TestData } from './helpers';

test('should add medication', async ({ adminPage }) => {
  const medicationHelper = new MedicationHelpers(adminPage);
  const testMed = TestData.medications[0];

  await medicationHelper.addMedication(testMed.name, testMed.dosage, testMed.frequency);
});

Best Practices

✅ Test Organization

• Group related tests in describe blocks
• Use descriptive test names
• Keep tests independent and isolated

✅ Selectors

• Use data-testid attributes for reliable targeting
• Prefer semantic selectors (role, text content)
• Avoid CSS selectors that may change

✅ Waiting Strategies

• Use waitForSelector() for dynamic content
• Leverage auto-waiting for most actions
• Add explicit waits for complex interactions

✅ Test Data

• Use helper functions for common operations
• Keep test data in centralized location
• Clean up test data after tests

Debugging Tests

Local Debugging

# Debug specific test
bunx playwright test auth.spec.ts --debug

# Run with headed browser
bunx playwright test --headed

# Slow down execution
bunx playwright test --slow-mo=1000

CI/CD Integration

# Run in CI mode
CI=true bunx playwright test

# Generate artifacts for CI
bunx playwright test --reporter=github

Adding New Tests

1. Create Test File

import { test, expect } from './fixtures';

test.describe('New Feature', () => {
  test('should do something', async ({ adminPage }) => {
    // Test implementation
  });
});

2. Add Helper Functions

// In helpers.ts
export class NewFeatureHelpers {
  constructor(private page: any) {}

  async performAction() {
    // Helper implementation
  }
}

3. Update Documentation

• Add test description to this README
• Update test count in project documentation

Troubleshooting

Common Issues

Tests timeout:

• Increase timeout in config
• Add explicit waits
• Check application startup time

Flaky tests:

• Add proper wait conditions
• Use retry logic
• Check for race conditions

Browser compatibility:

• Test across all configured browsers
• Check for browser-specific issues
• Use cross-browser compatible selectors

Debug Commands

# Show browser developer tools
bunx playwright test --debug

# Record test execution
bunx playwright codegen localhost:8080

# Trace viewer
bunx playwright show-trace trace.zip

Continuous Integration

Example GitHub Actions workflow:

name: E2E Tests
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
      - run: bun install
      - run: bunx playwright install --with-deps
      - run: bun run test:e2e
      - uses: actions/upload-artifact@v3
        if: always()
        with:
          name: playwright-report
          path: playwright-report/

Coverage and Metrics

The E2E tests provide coverage for:

• ✅ User authentication flows
• ✅ Core medication management
• ✅ Admin functionality
• ✅ UI interactions and navigation
• ✅ Responsive design
• ✅ Cross-browser compatibility

For optimal coverage, run tests regularly and add new tests for new features.