WEB-890: Implement storageState authentication bypass for Playwright E2E

Signed-off-by: DeathGun44 <krishnamewara841@gmail.com>

Author: DeathGun44

.gitignore

@@ -69,3 +69,4 @@ src/environments/.env.ts
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+/playwright/.auth/

playwright.config.ts

@@ -1,4 +1,4 @@
-/**
+/**
  * Copyright since 2025 Mifos Initiative
  *
  * This Source Code Form is subject to the terms of the Mozilla Public
@@ -43,8 +43,8 @@ export default defineConfig({
 
   // Global test settings
   use: {
-    // Base URL for the Angular app
-    baseURL: 'http://localhost:4200',
+    // Base URL for the Angular app (configurable via env for CI)
+    baseURL: process.env.E2E_BASE_URL || 'http://localhost:4200',
 
     // Handle self-signed certificates from Fineract backend
     ignoreHTTPSErrors: true,
@@ -73,17 +73,25 @@ export default defineConfig({
   // Global test timeout (per test)
   timeout: process.env.CI ? 180000 : 120000,
 
-  // Configure projects for different browsers
+  // Configure projects for authentication setup and browser testing
   projects: [
+    {
+      name: 'setup',
+      testMatch: /.*\.setup\.ts/,
+      testDir: './playwright',
+      retries: process.env.CI ? 2 : 0
+    },
     {
       name: 'chromium',
       use: {
         ...devices['Desktop Chrome'],
+        storageState: 'playwright/.auth/user.json',
         // Launch options for handling SSL in headed mode
         launchOptions: {
           args: ['--ignore-certificate-errors']
         }
-      }
+      },
+      dependencies: ['setup']
     }
   ],
 

playwright/auth.setup.ts

@@ -0,0 +1,65 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+import { test as setup, expect } from '@playwright/test';
+import fs from 'fs';
+import path from 'path';
+
+const authFile = 'playwright/.auth/user.json';
+const emptyState: { cookies: never[]; origins: never[] } = { cookies: [], origins: [] };
+
+setup('authenticate', async ({ page, browser }) => {
+  const authPath = path.resolve(authFile);
+  const authDir = path.dirname(authPath);
+  if (!fs.existsSync(authDir)) {
+    fs.mkdirSync(authDir, { recursive: true });
+  }
+  if (fs.existsSync(authPath)) {
+    fs.unlinkSync(authPath);
+  }
+
+  const username = process.env.E2E_USERNAME || 'mifos';
+  const password = process.env.E2E_PASSWORD || 'password';
+
+  await page.goto('/#/login');
+  await page.locator('input[formcontrolname="username"]').waitFor({ state: 'visible', timeout: 60000 });
+
+  await page.locator('input[formcontrolname="username"]').fill(username);
+  await page.locator('input[formcontrolname="password"]').fill(password);
+  await page.getByRole('button', { name: /login/i }).click();
+
+  try {
+    await expect(page).not.toHaveURL(/.*login.*/, { timeout: 30000 });
+    await expect(page.locator('mat-toolbar')).toBeVisible({ timeout: 10000 });
+  } catch {
+    console.log('Auth setup: login failed (no Fineract backend). Writing empty storageState for CI.');
+    fs.writeFileSync(authPath, JSON.stringify(emptyState));
+    return;
+  }
+
+  console.log('Auth setup: copying mifosXCredentials from sessionStorage → localStorage');
+  const credsCopied = await page.evaluate(() => {
+    const creds = sessionStorage.getItem('mifosXCredentials');
+    if (!creds) return false;
+    localStorage.setItem('mifosXCredentials', creds);
+    return true;
+  });
+
+  if (!credsCopied) {
+    throw new Error('CRITICAL: mifosXCredentials not found in sessionStorage. ' + 'Did the auth storage key change?');
+  }
+
+  await page.context().storageState({ path: authFile });
+  console.log('Auth setup: storageState saved to', authFile);
+
+  const verifyContext = await browser.newContext({ storageState: authFile });
+  const verifyPage = await verifyContext.newPage();
+  await verifyPage.goto('/#/');
+  await expect(verifyPage).not.toHaveURL(/.*login.*/, { timeout: 30000 });
+  await verifyContext.close();
+  console.log('Auth setup: storageState verification passed ✓');
+});

playwright/tests/authenticated-smoke.spec.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright since 2025 Mifos Initiative
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+import { test, expect } from '@playwright/test';
+
+test.describe('Authenticated Smoke Tests', () => {
+  test('should load dashboard without login redirect', async ({ page }) => {
+    await page.goto('/#/');
+
+    await expect(page).not.toHaveURL(/.*login.*/, { timeout: 30000 });
+    await expect(page.locator('mat-toolbar')).toBeVisible({ timeout: 10000 });
+  });
+});

playwright/tests/login-responsive.spec.ts

@@ -1,4 +1,4 @@
-/**
+/**
  * Copyright since 2025 Mifos Initiative
  *
  * This Source Code Form is subject to the terms of the Mozilla Public
@@ -8,6 +8,8 @@
 import { test, expect } from '@playwright/test';
 import { LoginPage } from 'playwright/pages/login.page';
 
+test.use({ storageState: { cookies: [], origins: [] } });
+
 /**
  * Login Responsive Layout Tests
  *
@@ -209,7 +211,7 @@ test.describe('Login Page - Responsive Layout', () => {
 
     for (const viewport of viewports) {
       await page.setViewportSize(viewport);
-      await page.goto('http://localhost:4200/login');
+      await page.goto('/#/login');
       await page.waitForLoadState('networkidle');
 
       // Check no horizontal scroll

playwright/tests/login.spec.ts

@@ -9,6 +9,8 @@
 import { test, expect } from '@playwright/test';
 import { LoginPage } from '../pages/login.page';
 
+test.use({ storageState: { cookies: [], origins: [] } });
+
 /**
  * Login Smoke Tests
  *
@@ -67,8 +69,6 @@ test.describe('Login Page', () => {
     await expect(loginPage.loginButton).toBeEnabled();
   });
 
-  // Skip in CI - requires Fineract backend
-  test.skip(!!process.env.CI, 'Requires Fineract backend');
   test('should successfully login with valid credentials', async () => {
     // Perform login with valid credentials
     // This uses the login() method which follows the exact codegen sequence
@@ -82,12 +82,8 @@ test.describe('Login Page', () => {
     // Attempt login with wrong password
     await loginPage.login('mifos', 'wrongpassword');
 
-    // Wait for the login attempt to process and any error notification to appear
-    // The app shows a snackbar notification for authentication errors
-    await page.waitForTimeout(3000);
-
-    // Should remain on login page after failed attempt (URL still contains /login)
-    await expect(page).toHaveURL(/.*login.*/);
+    // Should remain on login page after failed attempt
+    await expect(page).toHaveURL(/.*login.*/, { timeout: 10000 });
 
     // Verify we're still on the login page by checking form elements are visible
     await expect(loginPage.usernameInput).toBeVisible();
@@ -98,8 +94,6 @@ test.describe('Login Page', () => {
    * Simple test that exactly mirrors the codegen script.
    * This is the baseline test generated from codegen.
    */
-  // Skip in CI - requires Fineract backend
-  test.skip(!!process.env.CI, 'Requires Fineract backend');
   test('codegen baseline: login with mifos credentials', async () => {
     // This test uses the exact codegen interaction sequence
     await loginPage.login('mifos', 'password');