Skip to main content
Glama
README.md
# ๐ŸŽญ Playwright AI Agentic Testing Framework
[![Playwright Agentic QE Pipeline](https://github.com/pradhankm/playwright-ai-agentic-ui-api-test-automation-MCP-framework/actions/workflows/ci.yml/badge.svg)](https://github.com/pradhankm/playwright-ai-agentic-ui-api-test-automation-MCP-framework/actions/workflows/ci.yml)

A production-ready Quality Engineering test framework leveraging **Playwright**, **Model Context Protocol (MCP)**, **VS Code**, and **GitHub Copilot AI Agents** for unified UI and REST API automation.

---

## ๐Ÿ—๏ธ Architecture & Core Components

- **Agentic Loop (Plan โ†’ Generate โ†’ Heal):** Autonomous test creation, specification generation, and self-healing broken locators via MCP.
- **Hybrid Test Capabilities:** Cross-browser UI automation + Schema-validated REST API contract testing via `Zod`.
- **VS Code Native MCP Integration:** Connects Copilot Chat directly to Playwright's local browser runtime context via standard I/O.

---

## ๐Ÿš€ Quickstart Guide

### Prerequisites
- Node.js 18+ installed
- VS Code with GitHub Copilot & Playwright extensions enabled

### Setup Commands
```bash
# 1. Install dependencies & browsers
npm install
npx playwright install

# 2. Initialize Playwright MCP Agents
npm run agents:init
```

---

## ๐Ÿค– Using Playwright AI Agents

In VS Code Copilot Chat, interact with the agentic loop:

- **Planner Agent:**
  `@playwright-test-planner draft test specs for specs/ui-shopping-flow.md using tests/seed/seed.spec.ts`
- **Generator Agent:**
  `@playwright-test-generator write TypeScript tests for specs/ui-shopping-flow.md into tests/ui/checkout.spec.ts`
- **Healer Agent:**
  `@playwright-test-healer diagnose and repair failing tests in tests/ui/checkout.spec.ts`

---

## ๐Ÿงช Running Tests

```bash
# Run all tests (UI + API)
npm run test

# Run UI tests only
npm run test:ui

# Run API tests only
npm run test:api

# View HTML Report
npm run test:report
```