⚡ PulseFlow SaaS – Multi-Tenant Real-Time Collaboration & Kanban Automation Suite

Enterprise SDET Test Automation Framework engineered for multi-tenant collaborative SaaS platforms. Features multi-role storageState session caching, real-time WebSocket synchronization across multi-browser contexts, HTML5 Drag-and-Drop Kanban gestures, and network route mocking (page.route()).

---

📌 Executive Summary & Technical Highlights

Capability	Engineering Implementation	Business & SDET Value
⚡ Multi-Role Auth Caching	Global setup generates admin.json, member.json, viewer.json	65% faster test runs by eliminating UI login overhead
🔄 Real-Time WebSocket Sync	Multi-browser context testing (browser.newContext())	Validates live synchronization across multiple concurrent users
🛡️ RBAC Permission Matrix	Strict verification for Admin, Member, and Viewer roles	Guarantees compliance and prevents privilege escalation
🖐️ HTML5 Drag-and-Drop	locator.dragTo() gesture automation across columns	Tests fluid Kanban interactions with zero flaky sleeps
🌐 Route Interception	Simulating HTTP 500 crashes and 429 rate limits via page.route()	Verifies frontend error banners and offline recovery

---

🏛️ Framework Architecture

graph TD
    subgraph Test_Runner [Playwright Test Engine]
        GS[Global Setup: config/global-setup.ts] --> AS[Cached storageState: admin/member/viewer.json]
        AS --> FIX[Custom Fixtures: fixtures/auth.fixture.ts]
    end

    subgraph Core_Abstractions [Framework Layer]
        FIX --> POM[Page Objects: KanbanPage]
        FIX --> MC[Multi-Context Sessions: User A & User B]
    end

    subgraph SUT [System Under Test]
        POM --> UI[PulseFlow Kanban UI]
        UI --> WS[WebSocket Hub: Real-Time Broadcast]
    end

    subgraph Reporting [Test Results & CI/CD]
        Test_Runner --> REP[Playwright HTML Report / Traces]
        Test_Runner --> CI[GitHub Actions Workflow]
    end

Loading

---

📂 Framework Directory Structure

02-pulseflow-saas/
├── .github/
│   └── workflows/
│       └── playwright-ci.yml       # GitHub Actions CI workflow
├── config/
│   ├── env.config.ts              # Environment management (local, staging, prod)
│   └── global-setup.ts            # Global authentication & storageState generator
├── fixtures/
│   └── auth.fixture.ts            # Custom fixtures (adminPage, memberPage, multiUserSession)
├── pages/
│   ├── base.page.ts               # Base page with web-first assertions
│   └── kanban.page.ts             # Kanban Board Page Object Model
├── server/
│   ├── app.js                     # Express server & WebSocket broadcast engine
│   └── public/                    # Accessible HTML5/CSS3 Kanban Board UI
├── tests/
│   ├── e2e/
│   │   └── kanban-crud.spec.ts    # Task creation, assignment & deletion
│   ├── gestures/
│   │   └── drag-and-drop.spec.ts  # HTML5 Drag & Drop gesture validation
│   ├── rbac/
│   │   └── role-permissions.spec.ts # Admin vs Member vs Viewer permissions
│   ├── resilience/
│   │   └── route-mocking.spec.ts  # 500 error & 429 rate limit mocking
│   └── websockets/
│       └── realtime-sync.spec.ts  # Multi-context real-time WebSocket sync
├── .env.example                   # Environment variable template
├── package.json                   # NPM dependencies & scripts
├── playwright.config.ts           # Global Playwright configuration
├── PROJECT_GUIDE.md               # Master engineering implementation manual
├── README.md                      # Repository documentation
└── tsconfig.json                  # TypeScript compiler settings

---

🚀 Quick Start & Installation

1. Prerequisites

• Node.js: v20.x or higher
• npm: v10.x or higher

2. Clone & Install Dependencies

git clone https://github.com/AmberVats/02-pulseflow-saas.git
cd 02-pulseflow-saas

npm install

3. Run Tests

Running tests automatically boots the embedded SaaS & WebSocket application on http://127.0.0.1:3001 via Playwright's webServer:

# Run all tests (Defaults to Chromium in Headed Mode on your screen)
npx playwright test

# Run tests in interactive UI Mode (Time-travel debugger)
npm run test:ui

# Run specific test suites
npm run test:websockets   # Real-Time WebSocket Multi-Context Tests
npm run test:rbac         # Role-Based Access Control Tests
npm run test:dragdrop     # HTML5 Drag & Drop Gesture Tests
npm run test:e2e          # Kanban CRUD Tests
npm run test:resilience   # Network Route Mocking Tests

4. View Interactive HTML Test Report

npm run test:report

---

💡 Code Highlights

Real-Time WebSocket Multi-Browser Context Sync (tests/websockets/realtime-sync.spec.ts)

test('task created by User A instantly reflects in User B viewport via WebSockets', async ({
  multiUserSession,
}) => {
  const { userA, userB } = multiUserSession;

  // Launch User A (Admin) and User B (Member) in isolated browser contexts
  await userA.kanban.open();
  await userB.kanban.open();

  // User A creates task on the board
  const liveTaskTitle = `Live Sync Feature Test - ${Date.now()}`;
  await userA.kanban.createCard({ title: liveTaskTitle, column: 'in_progress' });

  // User B's viewport immediately renders the card without page reload
  await expect(userB.page.locator(`text=${liveTaskTitle}`)).toBeVisible();
});

---

🎯 Interview Defense & Key Questions

Interview Question	Senior SDET Answer
"How do you eliminate repetitive login forms across tests?"	"We execute a global setup (global-setup.ts) once before the suite starts to authenticate Admin, Member, and Viewer roles, caching sessions into storageState.json files. Custom fixtures inject these states in milliseconds, cutting execution time by 65%."
"How do you test real-time WebSocket features with Playwright?"	"We spawn multiple isolated browser contexts (browser.newContext()) in a single test. User A triggers an action, and User B asserts that the real-time event was received and rendered in the DOM via WebSockets without a page refresh."
"How do you test complex gestures like Drag and Drop?"	"We use Playwright's native locator.dragTo(targetLocator) method which handles HTML5 drag events, drop target calculations, and column status updates without needing artificial sleeps."

---

👨‍💻 Author & Contributions

• Created by: Amber Vats
• Role: Senior SDET / QA Automation Engineer
• License: MIT