nhonrao/agentic-ai-playwright-mcp-demo
Browser automation이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요. 원문 보기
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.
개요
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 1. Open VS Code 2. Open Copilot Chat (Ctrl+Shift+I) 3. Switch to mode Configure MCP servers in .vscode/mcp.json: 👉 See POC-Setup-Guide.md for complete, step-by-step instructions. 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!) - ✅ 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 site (https://www.saucedemo.
README
원문 README의 일부입니다. 원문 보기.
🤖 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:
- Read the requirement
- Write test cases manually
- Find test data in the database
- Explore the UI to find selectors
- 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
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
설치
npx @playwright/mcp@latest