adserver-dashboard 1.0.0

package/e2e/AUTONOMOUS-TESTING.md

@@ -0,0 +1,406 @@
+# Autonomous End-to-End Testing Guide
+
+Complete autonomous testing framework with SSO login, screenshots, DOM snapshots, console logs, and network monitoring.
+
+## 🎯 Features
+
+### Full Observability
+- ✅ **Automatic Screenshots** - Captured at every test step
+- ✅ **DOM Snapshots** - HTML saved for offline debugging
+- ✅ **Console Logs** - All browser console output collected
+- ✅ **Network Monitoring** - Complete API request/response logs
+- ✅ **Error Tracking** - Page errors and HTTP failures captured
+- ✅ **SSO Authentication** - Automatic login flow handling
+
+### Test Coverage
+- ✅ Complete Direct Campaigns workflow
+- ✅ Search functionality with debounce
+- ✅ Pagination (MW Planner design)
+- ✅ View toggle (List/Grid)
+- ✅ Row selection
+- ✅ Campaign actions
+- ✅ Navigation flows
+- ✅ State persistence
+
+## 🚀 Quick Start
+
+### 1. Install Playwright Browsers
+
+```bash
+npm run playwright:install
+```
+
+### 2. Configure Test Credentials (Optional)
+
+Copy the example environment file:
+
+```bash
+cp .env.test.example .env.test
+```
+
+Edit `.env.test` with your credentials:
+
+```env
+TEST_EMAIL=your_email@example.com
+TEST_PASSWORD=your_password
+```
+
+### 3. Run Autonomous Tests
+
+**With UI (Recommended)**
+```bash
+npm run test:e2e:ui
+```
+
+**Headless Mode**
+```bash
+npm run test:e2e
+```
+
+**Watch Mode with Browser**
+```bash
+npm run test:e2e:headed
+```
+
+**Debug Mode**
+```bash
+npm run test:e2e:debug
+```
+
+## 📊 Test Output
+
+### Directory Structure
+
+After running tests, you'll find:
+
+```
+test-results/
+├── Autonomous_Complete_Flow_Test-should_complete_full_Direct_Campaigns_workflow_with_full_observability/
+│   ├── screenshots/
+│   │   ├── 01-login-page.png
+│   │   ├── 02-after-sso-click.png
+│   │   ├── 03-authenticated-home.png
+│   │   ├── step-01-campaigns-page.png
+│   │   ├── step-02-campaigns-loaded.png
+│   │   ├── step-03-search-results.png
+│   │   ├── step-04-list-view.png
+│   │   ├── step-05-row-selected.png
+│   │   ├── step-06-all-selected.png
+│   │   ├── step-07-next-page.png
+│   │   ├── step-08-actions-menu.png
+│   │   ├── step-09-campaign-details.png
+│   │   ├── step-10-grid-view.png
+│   │   ├── step-11-filter-modal.png
+│   │   ├── step-12-create-button.png
+│   │   └── step-13-final-state.png
+│   └── logs/
+│       ├── console.log
+│       ├── network.json
+│       ├── errors.log (if any)
+│       ├── step-01-campaigns-page.html
+│       ├── step-04-list-view.html
+│       ├── step-09-campaign-details.html
+│       ├── step-10-grid-view.html
+│       └── step-13-final-state.html
+```
+
+### Console Logs
+
+View all browser console output:
+
+```
+test-results/[test-name]/logs/console.log
+```
+
+Example:
+```
+[log] 🔐 Starting authentication flow...
+[log] 📸 Screenshot: login page
+[log] ✅ Already authenticated, skipping login
+[log] 📍 Step 1: Navigate to Direct Campaigns page
+[log] 🌐 Request: GET /direct-campaigns
+[log] ✅ HTTP 200: GET /api/direct-campaigns?page=1&limit=12
+[log] ✅ Direct Campaigns page loaded
+...
+```
+
+### Network Logs
+
+View all API requests:
+
+```
+test-results/[test-name]/logs/network.json
+```
+
+Example:
+```json
+[
+  {
+    "url": "http://localhost:5000/api/direct-campaigns?page=1&limit=12",
+    "status": 200,
+    "method": "GET"
+  },
+  {
+    "url": "http://localhost:5000/api/auth/session",
+    "status": 200,
+    "method": "GET"
+  }
+]
+```
+
+### Error Logs
+
+If any errors occur:
+
+```
+test-results/[test-name]/logs/errors.log
+```
+
+## 🔐 Authentication Methods
+
+The enhanced test fixture supports multiple authentication methods:
+
+### 1. SSO Button (Recommended)
+
+Automatically detects and clicks SSO button:
+- Looks for buttons with text: "SSO", "Single Sign", "Login with"
+- Handles redirect flow
+- Waits for authentication completion
+
+### 2. Email/Password Form
+
+Falls back to traditional login:
+- Fills email and password from `.env.test`
+- Submits form
+- Waits for navigation
+
+### 3. Already Authenticated
+
+Detects if already logged in and skips authentication.
+
+### 4. Dev Mode
+
+If no login form is found, assumes dev mode and proceeds.
+
+## 📝 Test Scenarios
+
+### Autonomous Complete Flow
+
+The main test covers the entire workflow:
+
+1. **Authentication**
+   - SSO login with screenshot
+   - Session verification
+
+2. **Navigation**
+   - Navigate to Direct Campaigns
+   - Wait for data load
+
+3. **Search**
+   - Type search query
+   - Wait for debounce
+   - Verify results
+   - Clear search
+
+4. **View Toggle**
+   - Switch to List view
+   - Verify table columns
+   - Switch to Grid view
+   - Verify cards
+
+5. **Selection**
+   - Select individual rows
+   - Select all rows
+   - Unselect
+
+6. **Pagination**
+   - Verify controls visible
+   - Navigate next/previous
+   - Test First/Last buttons
+
+7. **Actions**
+   - Open actions menu
+   - Verify menu items
+   - Close menu
+
+8. **Navigation**
+   - Click campaign row
+   - Navigate to details
+   - Go back
+
+9. **Final State**
+   - Capture final screenshots
+   - Generate summary report
+
+### Additional Tests
+
+- **Pagination State Persistence** - Verifies page number maintained across navigation
+- **Empty Search Results** - Tests empty state handling
+
+## 🔧 Advanced Usage
+
+### Custom Test with Enhanced Fixture
+
+```typescript
+import { test, expect, takeScreenshot, saveDOMSnapshot, waitForAPIResponse } from './fixtures/enhanced-test';
+
+test('my custom test', async ({ authenticatedPage: page, testInfo }) => {
+  // Navigate
+  await page.goto('/my-page');
+
+  // Take screenshot
+  await takeScreenshot(page, 'my-step', testInfo);
+
+  // Save DOM
+  await saveDOMSnapshot(page, 'my-dom', testInfo);
+
+  // Wait for specific API
+  const response = await waitForAPIResponse(page, '/api/my-endpoint');
+  const data = await response.json();
+
+  // All console logs, network logs, and errors are automatically captured!
+});
+```
+
+### Helper Functions
+
+#### `takeScreenshot(page, name, testInfo)`
+Captures full-page screenshot with timestamp.
+
+#### `saveDOMSnapshot(page, name, testInfo)`
+Saves complete HTML for offline inspection.
+
+#### `waitForNetworkIdle(page)`
+Waits for all network requests to complete with logging.
+
+#### `waitForAPIResponse(page, urlPattern)`
+Waits for specific API response and logs it.
+
+## 🐛 Debugging
+
+### View Test in Browser
+
+```bash
+npm run test:e2e:headed
+```
+
+### Step Through Test
+
+```bash
+npm run test:e2e:debug
+```
+
+This opens Playwright Inspector where you can:
+- Step through each action
+- Inspect elements
+- See console logs in real-time
+- View network requests
+
+### View Test Report
+
+```bash
+npm run playwright:report
+```
+
+Opens HTML report with:
+- Test results
+- Screenshots
+- Videos (for failures)
+- Traces
+
+### Check Logs
+
+All console and network logs are in:
+```
+test-results/[test-name]/logs/
+```
+
+## 🔍 Troubleshooting
+
+### Authentication Failing
+
+1. **Check credentials** in `.env.test`
+2. **View screenshot** `01-login-page.png`
+3. **Check console logs** for errors
+4. **Update selectors** in `enhanced-test.ts` if login form changed
+
+### API Errors
+
+1. **Check network logs** `logs/network.json`
+2. **Check error log** `logs/errors.log`
+3. **Verify dev server** is running on port 5000
+
+### Test Timeouts
+
+1. **Increase timeout** in `playwright.config.ts`
+2. **Check network logs** for slow APIs
+3. **Verify data** is actually loading
+
+### Screenshots Not Captured
+
+1. **Check permissions** on `test-results/` directory
+2. **Verify testInfo** is passed to helper functions
+3. **Run test** with `--headed` to see what's happening
+
+## 📈 Performance Tips
+
+### Parallel Testing
+
+Run tests in parallel (default):
+```bash
+npm run test:e2e -- --workers=4
+```
+
+### Specific Test File
+
+```bash
+npm run test:e2e autonomous-flow.spec.ts
+```
+
+### Specific Test
+
+```bash
+npm run test:e2e -- -g "should complete full Direct Campaigns workflow"
+```
+
+### Disable Screenshots (Faster)
+
+Temporarily comment out `takeScreenshot` calls for faster execution during development.
+
+## 🎯 Best Practices
+
+1. **Use Enhanced Fixture** - Always use `authenticatedPage` for automatic logging
+2. **Take Screenshots** - At each significant step
+3. **Save DOM** - Before and after major state changes
+4. **Wait for Network** - Use `waitForNetworkIdle()` after navigation
+5. **Check Logs** - Always review console and network logs after failures
+6. **Descriptive Names** - Use clear names for screenshots and DOM snapshots
+
+## 🚦 CI/CD Integration (Future)
+
+Currently configured for local development only. To add to CI/CD:
+
+1. **Set up test environment**
+2. **Add to CI workflow**:
+   ```yaml
+   - name: Run E2E Tests
+     run: npm run test:e2e
+     env:
+       TEST_EMAIL: ${{ secrets.TEST_EMAIL }}
+       TEST_PASSWORD: ${{ secrets.TEST_PASSWORD }}
+   ```
+3. **Upload artifacts**:
+   ```yaml
+   - uses: actions/upload-artifact@v3
+     if: always()
+     with:
+       name: playwright-results
+       path: test-results/
+   ```
+
+## 📚 Resources
+
+- [Playwright Documentation](https://playwright.dev)
+- [Test Fixtures](https://playwright.dev/docs/test-fixtures)
+- [Debugging](https://playwright.dev/docs/debug)
+- [Best Practices](https://playwright.dev/docs/best-practices)

package/e2e/README.md

@@ -0,0 +1,219 @@
+# End-to-End Testing with Playwright
+
+This directory contains Playwright E2E tests for the Direct Campaigns application. These tests are designed for **local development only** and are not part of the CI/CD pipeline (the frontend is deployed as a static site).
+
+## Setup
+
+### 1. Install Playwright browsers
+
+First time setup:
+
+```bash
+npm run playwright:install
+```
+
+This will install only Chromium browser for testing.
+
+### 2. Ensure dev server is running
+
+The tests require the application to be running on `http://localhost:5000`. The Playwright config is set up to automatically start the dev server, but you can also run it manually:
+
+```bash
+npm run dev
+```
+
+## Running Tests
+
+### Run all tests (headless)
+
+```bash
+npm run test:e2e
+```
+
+### Run tests with UI mode (recommended for development)
+
+```bash
+npm run test:e2e:ui
+```
+
+This opens the Playwright UI where you can:
+- See all tests
+- Run individual tests
+- Watch tests run in real-time
+- Debug test failures
+
+### Run tests in headed mode (see browser)
+
+```bash
+npm run test:e2e:headed
+```
+
+### Debug tests step-by-step
+
+```bash
+npm run test:e2e:debug
+```
+
+### View test report
+
+After running tests, view the HTML report:
+
+```bash
+npm run playwright:report
+```
+
+## Test Structure
+
+### Test Files
+
+- **`direct-campaigns.spec.ts`** - Tests for Direct Campaigns listing page
+  - Page layout and elements
+  - Campaign list display
+  - Search functionality
+  - Row selection
+  - Campaign actions (view, edit, delete)
+
+- **`pagination.spec.ts`** - Tests for pagination functionality
+  - Pagination visibility
+  - Navigation (First, Previous, Next, Last)
+  - Data accuracy (item counts, page numbers)
+  - Mobile vs desktop pagination
+
+- **`view-toggle.spec.ts`** - Tests for view toggle functionality
+  - List vs Grid view switching
+  - View persistence in localStorage
+  - Pagination behavior across views
+
+### Fixtures
+
+- **`fixtures/auth.ts`** - Authentication helper (to be configured with actual login)
+
+## Test Coverage
+
+### Direct Campaigns Page
+✅ Page header and navigation
+✅ Search with debounce (min 3 characters)
+✅ Campaign table display
+✅ Row selection (individual and select all)
+✅ Campaign actions menu
+✅ Row click navigation
+
+### Pagination (MW Planner Design)
+✅ First/Previous/Next/Last buttons
+✅ Page number display ("Page X of Y")
+✅ Item count display ("X to Y of Z")
+✅ Button states (disabled on first/last page)
+✅ Mobile responsive pagination
+✅ Data accuracy across pages
+
+### View Toggle
+✅ Grid view (default)
+✅ List view (table)
+✅ View persistence in localStorage
+✅ Selection clearing on view change
+✅ Pagination in both views
+
+## Configuration
+
+### playwright.config.ts
+
+Key settings:
+- **baseURL**: `http://localhost:5000`
+- **timeout**: 30 seconds per test
+- **retries**: 0 (local), 2 (CI)
+- **webServer**: Auto-starts `npm run dev`
+- **reporter**: HTML report
+- **browsers**: Chromium (default), Firefox and WebKit commented out
+
+### Customization
+
+To test on different browsers, uncomment the desired project in `playwright.config.ts`:
+
+```typescript
+projects: [
+  { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
+  { name: 'firefox', use: { ...devices['Desktop Firefox'] } }, // Uncomment
+  { name: 'webkit', use: { ...devices['Desktop Safari'] } },   // Uncomment
+]
+```
+
+## Writing New Tests
+
+### Example Test Structure
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test.describe('Feature Name', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/your-page');
+    await page.waitForLoadState('networkidle');
+  });
+
+  test('should do something', async ({ page }) => {
+    // Arrange
+    const button = page.getByRole('button', { name: 'Click Me' });
+
+    // Act
+    await button.click();
+
+    // Assert
+    await expect(page.getByText('Success')).toBeVisible();
+  });
+});
+```
+
+### Best Practices
+
+1. **Use data-testid for stability**: Add `data-testid` attributes to important elements
+2. **Wait for network**: Use `page.waitForLoadState('networkidle')` after navigation
+3. **Descriptive names**: Use clear, descriptive test names
+4. **Independent tests**: Each test should be able to run in isolation
+5. **Clean state**: Reset state in `beforeEach` hooks
+6. **Avoid hard-coded waits**: Use `waitForSelector` instead of `waitForTimeout` when possible
+
+## Troubleshooting
+
+### Tests failing due to timing issues
+
+If tests are flaky due to timing:
+- Increase timeout in `playwright.config.ts`
+- Add explicit waits: `await page.waitForSelector('selector')`
+- Use `waitForLoadState('networkidle')` after navigation
+
+### Authentication issues
+
+The auth fixture in `fixtures/auth.ts` needs to be configured with your actual login flow. Update it with:
+- Correct input selectors
+- Valid test credentials
+- Expected redirect URL after login
+
+### Port already in use
+
+If port 5000 is already in use:
+- Stop the existing dev server
+- Or change the port in `playwright.config.ts` and your app config
+
+### Browser not installed
+
+Run the installation command:
+```bash
+npm run playwright:install
+```
+
+## CI/CD Note
+
+⚠️ **Important**: These tests are for local development only. Since the frontend is deployed as a static site, Playwright tests are **not** included in the CI/CD pipeline.
+
+If you want to add E2E tests to CI/CD in the future, you would need to:
+1. Set up a test environment with the backend API
+2. Add Playwright to your CI workflow
+3. Configure authentication and test data
+4. Update the `playwright.config.ts` to handle CI mode
+
+## Resources
+
+- [Playwright Documentation](https://playwright.dev)
+- [Best Practices](https://playwright.dev/docs/best-practices)
+- [Debugging Tests](https://playwright.dev/docs/debug)
+- [Test Assertions](https://playwright.dev/docs/test-assertions)