cqt-agent/expansion-packs/hubtel-workflow/templates/playwright-e2e-test-tmpl.ts

CQT Agent

// Playwright E2E Test Template
import { test, expect } from '@playwright/test'

test.describe('User Journey - Feature Name', () => {
  test.beforeEach(async ({ page }) => {
    // Navigate to starting page
    await page.goto('/dashboard')
    
    // Wait for page to be ready
    await page.waitForLoadState('networkidle')
  })

  test.describe('Happy Path Scenarios', () => {
    test('should complete main user workflow', async ({ page }) => {
      // Step 1: Initial state verification
      await expect(page.locator('[data-testid="welcome-message"]')).toBeVisible()
      await expect(page).toHaveTitle(/Dashboard/)
      
      // Step 2: Navigate to feature
      await page.click('[data-testid="feature-nav-link"]')
      await page.waitForURL('**/feature')
      
      // Step 3: Interact with main feature
      await page.fill('[data-testid="input-field"]', 'test data')
      await page.click('[data-testid="submit-button"]')
      
      // Step 4: Verify success state
      await expect(page.locator('[data-testid="success-message"]')).toBeVisible()
      await expect(page.locator('[data-testid="result-display"]')).toContainText('Success')
    })

    test('should handle form submission with valid data', async ({ page }) => {
      await page.goto('/form')
      
      // Fill form with valid data
      await page.fill('[name="email"]', 'test@example.com')
      await page.fill('[name="password"]', 'SecurePass123!')
      await page.check('[name="agree-terms"]')
      
      // Submit form
      await page.click('[type="submit"]')
      
      // Verify successful submission
      await expect(page.locator('.success-notification')).toBeVisible()
      await expect(page).toHaveURL('**/success')
    })
  })

  test.describe('Error Scenarios', () => {
    test('should handle network errors gracefully', async ({ page }) => {
      // Simulate network failure
      await page.route('**/api/data', (route) => {
        route.abort('internetdisconnected')
      })
      
      await page.goto('/dashboard')
      await page.click('[data-testid="load-data-button"]')
      
      // Verify error handling
      await expect(page.locator('[data-testid="error-message"]')).toBeVisible()
      await expect(page.locator('[data-testid="retry-button"]')).toBeVisible()
    })

    test('should validate required form fields', async ({ page }) => {
      await page.goto('/form')
      
      // Try to submit without filling required fields
      await page.click('[type="submit"]')
      
      // Verify validation errors
      await expect(page.locator('[data-testid="email-error"]')).toBeVisible()
      await expect(page.locator('[data-testid="password-error"]')).toBeVisible()
      
      // Form should not submit
      await expect(page).toHaveURL('**/form')
    })
  })

  test.describe('Accessibility Testing', () => {
    test('should be keyboard navigable', async ({ page }) => {
      await page.goto('/dashboard')
      
      // Tab through interactive elements
      await page.keyboard.press('Tab')
      await expect(page.locator('[data-testid="first-button"]')).toBeFocused()
      
      await page.keyboard.press('Tab')
      await expect(page.locator('[data-testid="second-button"]')).toBeFocused()
      
      // Test Enter key activation
      await page.keyboard.press('Enter')
      await expect(page.locator('[data-testid="modal"]')).toBeVisible()
    })

    test('should have proper ARIA labels and roles', async ({ page }) => {
      await page.goto('/dashboard')
      
      // Check main landmark
      await expect(page.locator('main')).toHaveAttribute('role', 'main')
      
      // Check button accessibility
      const actionButton = page.locator('[data-testid="action-button"]')
      await expect(actionButton).toHaveAttribute('aria-label')
      await expect(actionButton).toHaveAttribute('role', 'button')
      
      // Check form accessibility
      await expect(page.locator('[name="email"]')).toHaveAttribute('aria-required', 'true')
    })

    test('should announce important state changes', async ({ page }) => {
      await page.goto('/form')
      
      // Submit form to trigger state change
      await page.fill('[name="email"]', 'test@example.com')
      await page.click('[type="submit"]')
      
      // Verify live region announcement
      await expect(page.locator('[aria-live="polite"]')).toContainText('Form submitted successfully')
    })
  })

  test.describe('Mobile Responsiveness', () => {
    test('should work on mobile devices', async ({ page }) => {
      // Set mobile viewport
      await page.setViewportSize({ width: 375, height: 667 })
      await page.goto('/dashboard')
      
      // Verify mobile-specific elements
      await expect(page.locator('[data-testid="mobile-menu-button"]')).toBeVisible()
      
      // Test mobile navigation
      await page.click('[data-testid="mobile-menu-button"]')
      await expect(page.locator('[data-testid="mobile-nav-menu"]')).toBeVisible()
      
      // Test touch interactions
      await page.tap('[data-testid="feature-card"]')
      await expect(page).toHaveURL('**/feature')
    })

    test('should handle touch gestures', async ({ page }) => {
      await page.setViewportSize({ width: 375, height: 667 })
      await page.goto('/gallery')
      
      // Test swipe gesture (if implemented)
      const gallery = page.locator('[data-testid="image-gallery"]')
      await gallery.hover()
      await page.mouse.down()
      await page.mouse.move(100, 0)
      await page.mouse.up()
      
      // Verify swipe action
      await expect(page.locator('[data-testid="next-image"]')).toBeVisible()
    })
  })

  test.describe('Performance Testing', () => {
    test('should load page within acceptable time', async ({ page }) => {
      const startTime = Date.now()
      
      await page.goto('/dashboard')
      await page.waitForLoadState('networkidle')
      
      const loadTime = Date.now() - startTime
      expect(loadTime).toBeLessThan(3000) // 3 seconds max
    })

    test('should handle large datasets efficiently', async ({ page }) => {
      await page.goto('/data-table')
      
      // Load large dataset
      await page.click('[data-testid="load-1000-items"]')
      
      // Verify virtual scrolling or pagination works
      await expect(page.locator('[data-testid="table-row"]').first()).toBeVisible()
      
      // Test scrolling performance
      await page.locator('[data-testid="table-container"]').scroll({ top: 1000 })
      await expect(page.locator('[data-testid="table-row"]')).toHaveCountGreaterThan(10)
    })
  })

  test.describe('Integration Testing', () => {
    test('should integrate with external services', async ({ page }) => {
      // Mock external API
      await page.route('**/api/external-service', async (route) => {
        await route.fulfill({
          status: 200,
          contentType: 'application/json',
          body: JSON.stringify({ success: true, data: 'mocked data' })
        })
      })
      
      await page.goto('/integration-test')
      await page.click('[data-testid="call-external-api"]')
      
      await expect(page.locator('[data-testid="api-response"]')).toContainText('mocked data')
    })

    test('should handle authentication flow', async ({ page }) => {
      // Start from login page
      await page.goto('/login')
      
      // Login with valid credentials
      await page.fill('[name="username"]', 'testuser')
      await page.fill('[name="password"]', 'password123')
      await page.click('[type="submit"]')
      
      // Verify redirect to dashboard
      await expect(page).toHaveURL('**/dashboard')
      
      // Verify authenticated state
      await expect(page.locator('[data-testid="user-menu"]')).toBeVisible()
      
      // Test logout
      await page.click('[data-testid="logout-button"]')
      await expect(page).toHaveURL('**/login')
    })
  })
})