feat: establish Playwright E2E testing infrastructure with configuration and initial tests

playwright/README.md

@@ -0,0 +1,147 @@
+# Playwright E2E Testing
+
+Production-grade End-to-End testing infrastructure for Mifos X Web App using [Playwright](https://playwright.dev/).
+
+## Prerequisites
+
+Before running the tests, ensure the local environment is running:
+
+1. **Backend:** Ensure Fineract is running on `https://localhost:8443`
+2. **Frontend:** Serve the Angular app:
+   ```bash
+   ng serve
+   ```
+
+## Quick Start
+
+```bash
+# Run all tests
+npm run playwright
+
+# Run with UI mode (recommended for debugging)
+npm run playwright:ui
+
+# Run with visible browser
+npm run playwright:headed
+
+# Debug mode (step through tests)
+npm run playwright:debug
+```
+
+## Architecture
+
+This framework follows the **Page Object Model (POM)** pattern:
+
+```
+playwright/
+├── pages/
+│   ├── BasePage.ts      # Abstract base class with common utilities
+│   └── LoginPage.ts     # Login page object
+└── tests/
+    └── login.spec.ts    # Login smoke tests
+```
+
+### Design Principles
+
+| Principle                  | Implementation                                |
+| -------------------------- | --------------------------------------------- |
+| **Separation of Concerns** | Locators in Page Objects, assertions in Tests |
+| **DRY**                    | Common actions in `BasePage`                  |
+| **Maintainability**        | Centralized locators per page                 |
+| **CI/CD Optimization**     | Artifacts only on failure                     |
+
+## Configuration
+
+### SSL Certificate Handling
+
+The local Fineract backend uses a self-signed certificate. This is handled automatically:
+
+```typescript
+// playwright.config.ts
+ignoreHTTPSErrors: true;
+```
+
+### TypeScript Isolation
+
+Uses a dedicated `tsconfig.playwright.json` to avoid conflicts with Jest:
+
+```json
+{
+  "types": ["node"] // Excludes Jest types
+}
+```
+
+## Writing New Tests
+
+### 1. Create a Page Object
+
+```typescript
+// playwright/pages/DashboardPage.ts
+import { BasePage } from './BasePage';
+
+export class DashboardPage extends BasePage {
+  readonly url = '/#/';
+
+  get welcomeMessage() {
+    return this.page.locator('.welcome-message');
+  }
+
+  async assertOnDashboard(): Promise<void> {
+    await expect(this.page).toHaveURL(/.*\//);
+  }
+}
+```
+
+### 2. Write the Test
+
+```typescript
+// playwright/tests/dashboard.spec.ts
+import { test, expect } from '@playwright/test';
+import { LoginPage } from '../pages/LoginPage';
+import { DashboardPage } from '../pages/DashboardPage';
+
+test('should display dashboard after login', async ({ page }) => {
+  const loginPage = new LoginPage(page);
+  const dashboardPage = new DashboardPage(page);
+
+  await loginPage.navigate();
+  await loginPage.loginAndWaitForDashboard('mifos', 'password');
+  await dashboardPage.assertOnDashboard();
+});
+```
+
+## CI/CD
+
+Tests run automatically on push/PR via GitHub Actions:
+
+```bash
+.github/workflows/playwright.yml
+```
+
+### Viewing Test Reports
+
+After CI runs, download the `playwright-report` artifact from the Actions tab.
+
+## Test Credentials
+
+| Username | Password   | Environment   |
+| -------- | ---------- | ------------- |
+| `mifos`  | `password` | Local/Sandbox |
+
+## Troubleshooting
+
+### Tests fail with SSL errors
+
+Ensure `ignoreHTTPSErrors: true` is set in `playwright.config.ts`.
+
+### Tests timeout on CI
+
+Increase the timeout in `playwright.config.ts`:
+
+```typescript
+navigationTimeout: 60000,
+```
+
+### TypeScript conflicts with Jest
+
+Ensure tests are only in `playwright/` directory and `tsconfig.playwright.json` excludes other directories.