🤖 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

---

📁 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

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

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

3. Run the tests

# 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

Negative Tests

End-to-End (DB-Driven)

---

🔧 MCP Server Setup

Configure MCP servers in .vscode/mcp.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 for complete, step-by-step instructions.

---

📖 Full Setup Guide

The file 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