# 🤖 Agentic AI Playwright MCP Demo

> **A full end-to-end proof-of-concept showing how Agentic AI (GitHub Copilot) autonomously reads work items, queries databases, explores browsers, generates Excel test cases, and writes Playwright test scripts — all without human intervention.**

---

## 🎯 What Does This POC Demonstrate?

Traditional test automation requires a human to:
1. Read the requirement
2. Write test cases manually
3. Find test data in the database
4. Explore the UI to find selectors
5. Write the automation script

**With Agentic AI + MCP, the AI does ALL of this autonomously:**

```
AI reads work item (Azure DevOps MCP)
    ↓
AI explores the browser (Playwright MCP)  
    ↓
AI queries the database (MySQL MCP)
    ↓
AI generates Excel test cases (Excel MCP)
    ↓
AI writes complete Playwright TypeScript test scripts
```

---

## 🏗️ Tech Stack

| Tool | Purpose |
|---|---|
| **GitHub Copilot (Agent Mode)** | The AI orchestrator — drives all MCP tools |
| **MCP Playwright** | Live browser control — AI can navigate, click, read selectors |
| **MCP Azure DevOps** | AI reads user stories and acceptance criteria directly |
| **MCP MySQL** | AI queries real DB to get dynamic test data |
| **MCP Excel** | AI generates formatted test case spreadsheets |
| **Playwright Test (TypeScript)** | Test framework that runs the generated specs |
| **Page Object Model** | Clean, maintainable test structure |

---

## 📁 Project Structure

```
agentic-ai-playwright-mcp-demo/
├── .vscode/
│   ├── mcp.json                      ← MCP server configuration
│   └── Templates/
│       └── ManualTestCasesTemplate.xlsx
├── ManualTestCases/                  ← AI-generated Excel test case files
├── Prompts/
│   └── SearchActiveOrders            ← Plain text prompt → AI generates test
├── tests/
│   ├── TC_P001_login_happy_path.spec.ts
│   ├── TC_N001_login_empty_password.spec.ts
│   └── SearchActiveOrders.spec.ts   ← DB-driven E2E test
├── .env.example                      ← Safe template (no secrets)
├── playwright.config.ts
└── POC-Setup-Guide.md               ← Complete step-by-step setup guide
```

---

## 🚀 Quick Start

### 1. Clone and install
```bash
git clone https://github.com/YOUR_USERNAME/agentic-ai-playwright-mcp-demo.git
cd agentic-ai-playwright-mcp-demo
npm install
npx playwright install chromium
```

### 2. Configure environment
```bash
cp .env.example .env
# Edit .env with your values (the demo app is public — no changes needed for basic tests)
```

### 3. Run the tests
```bash
# Login tests (no DB needed — uses public SauceDemo site)
npx playwright test tests/TC_P001_login_happy_path.spec.ts --project=chromium --reporter=list
npx playwright test tests/TC_N001_login_empty_password.spec.ts --project=chromium --reporter=list

# DB-driven test (uses fallback data if no MySQL configured)
npx playwright test tests/SearchActiveOrders.spec.ts --project=chromium --reporter=list

# All tests + HTML report
npm test && npm run report
```

---

## 🤖 How to Use Agentic AI to Generate Tests

### Step 1 — Open Copilot in Agent Mode
1. Open VS Code
2. Open Copilot Chat (`Ctrl+Shift+I`)
3. Switch to **Agent** mode

### Step 2 — Analyse a work item
```
Do the analysis of work item 12345 from my Azure DevOps project 
[PROJECT_NAME] and give me positive, negative, and edge case test scenarios
```

### Step 3 — Generate Excel test cases
```
Create a new Excel file in the ManualTestCases folder named 12345_ManualTestCases.xlsx 
using the template in .vscode/Templates/ManualTestCasesTemplate.xlsx 
and populate it with all the test scenarios
```

### Step 4 — Generate Playwright script from prompt
```
Read the file Prompts/SearchActiveOrders and generate a complete Playwright 
TypeScript test script. Use MCP browser automation to explore the app 
interactively and MCP MySQL to query the DB for real test data.
```

---

## 📋 Test Scenarios Covered

### Positive Tests
| ID | Scenario |
|---|---|
| TC_P001 | Login with valid credentials → redirected to Products page |

### Negative Tests  
| ID | Scenario |
|---|---|
| TC_N001 | Login with empty password → error message displayed, stays on login page |

### End-to-End (DB-Driven)
| ID | Scenario |
|---|---|
| SearchActiveOrders | Query DB → Login → Add to cart → Checkout with DB customer data → Confirm order |

---

## 🔧 MCP Server Setup

Configure MCP servers in `.vscode/mcp.json`:

```json
{
  "servers": {
    "playwright":    { "command": "npx", "args": ["@playwright/mcp@latest"] },
    "azure-devops":  { "command": "npx", "args": ["@azure-devops/mcp@latest", "YOUR_ORG"] },
    "mysql":         { "command": "node", "args": ["path/to/mysql-mcp/index.js"], "env": { ... } },
    "excel-mcp":     { "command": "path/to/excel-mcp.exe" }
  }
}
```

👉 See [POC-Setup-Guide.md](./POC-Setup-Guide.md) for complete, step-by-step instructions.

---

## 📖 Full Setup Guide

The file [POC-Setup-Guide.md](./POC-Setup-Guide.md) covers:
- All prerequisites and installation commands
- MySQL Northwind sample database setup
- MCP server installation and connection
- How to write effective AI prompts
- How to run and interpret test reports
- How to push safely to GitHub (no secrets!)

---

## 🛡️ Security Notes

- ✅ All credentials are loaded from `.env` (not hard-coded)
- ✅ `.env` is in `.gitignore` — secrets are never committed
- ✅ `.env.example` shows the structure with placeholder values only
- ✅ The demo app is a **public** site (https://www.saucedemo.com) — no proprietary URLs
- ✅ Database queries use parameterised structure — no SQL injection risk

---

## 📄 License

MIT — free to use, modify, and share.

---

*Built with ❤️ using GitHub Copilot Agent, MCP Servers, and Playwright*