Plain English Prompt
                    │
                    ▼
        Large Language Model (LLM)
                    │
          Generates Instructions
                    │
                    ▼
                AI Agent
                    │
         Executes the Instructions
                    │
                    ▼
      Model Context Protocol (MCP)
                    │
     Connects to Real Applications
                    │
                    ▼
          Playwright + Browser
                    │
                    ▼
          Browser Automation

├── 📂 pages/                          # Page Object Model classes
│   ├── LoginPage.ts                   # Login page locators & actions
│   └── PimPage.ts                     # PIM module locators & actions
│
├── 📂 tests/                          # Test specifications
│   ├── example.spec.ts                # Sample Playwright test
│   ├── orangehrm-login-data-driven.spec.ts       # Data-driven login (inline)
│   ├── orangehrm-login-data-driven-csv.spec.ts   # Data-driven login (CSV)
│   ├── orangehrm-logout.spec.ts                  # Logout flow test
│   ├── orangehrm-admin-system-users.spec.ts      # Admin module test
│   ├── orangehrm-buzz-post.spec.ts               # Buzz social feed test
│   ├── pim-search.spec.ts                        # PIM employee search
│   └── add-employee.spec.ts                      # Add employee (POM)
│
├── 📂 test_data/                     # Test data files
│   └── loginData.csv                 # CSV test data for login
│
├── 📂 playwright-report/             # HTML test reports
├── 📂 test-results/                  # Test execution artifacts
│
├── 📄 playwright.config.ts           # Playwright configuration
├── 📄 package.json                   # Dependencies & scripts
├── 📄 README.md                      # This file
│
├── 📄 Playwright_MCP_Guide.md        # Detailed MCP concepts guide
├── 📄 PlaywrightMCP_Vs_CLI.md        # MCP vs CLI comparison
├── 📄 playwright-context.md          # MCP test generator context
├── 📄 playwright-context-pom.md      # MCP POM test generator context
├── 📄 prompts.md                     # Sample AI prompts used
└── 📄 notes.md                       # Architecture & concept notes

# Clone the repository
git clone https://github.com/pavanoltraining/POC_Playwright_MCP_orangehrm.git

# Navigate to the project directory
cd POC_Playwright_MCP_orangehrm

# Install dependencies
npm install

# Install Playwright browsers
npx playwright install chromium

npx playwright test

npx playwright test tests/orangehrm-login-data-driven.spec.ts

npx playwright test --ui

npx playwright show-report

npx playwright test --debug

export class LoginPage {
  readonly usernameInput = page.getByPlaceholder("Username");
  readonly passwordInput = page.getByPlaceholder("Password");
  readonly loginButton = page.getByRole("button", { name: "Login" });

  async login(username: string, password: string) {
    await this.usernameInput.fill(username);
    await this.passwordInput.fill(password);
    await this.loginButton.click();
  }
}

export class PimPage {
  async navigateToPim() {
    /* ... */
  }
  async openAddEmployee() {
    /* ... */
  }
  async addEmployee(firstName: string, lastName: string) {
    /* ... */
  }
}

Username,Password,Expected
Admin,admin123,Dashboard
fakeuser,fakepass,Invalid credentials
ESSUser1,ess123,Invalid credentials