Playwright MCP Story Test Automation (Browser Extension Driven)

📌 Project Overview

This project demonstrates how Playwright MCP (Model Context Protocol) can be integrated with a browser extension to extract user story details from Digital.ai Agility (or similar backlog tools), automatically generate structured test cases, and create TDD-style Playwright scripts.
It also captures screenshots for traceability and reporting, reducing the manual effort required for test design and script creation.

🚀 Key Features

🔗 Playwright MCP Browser Extension to interact with a running browser session
📖 Extract user story details (e.g., story description, acceptance criteria)
📝 Auto-generate structured test cases (Test ID, Preconditions, Steps, Expected Results)
⚡ Generate TDD-style Playwright scripts (replaceable locators)
📸 Capture screenshots of story descriptions for traceability
🔄 End-to-end automation workflow from backlog to executable tests

Git Repo https://github.com/microsoft/playwright-mcp/blob/main/extension/README.md

🛠️ Setup Instructions

1️⃣ Clone the Repository

git clone https://github.com/mvsaran/Playwright-MCP-Story-Test-Automation-Browser-Extension-Driven-.git
cd Playwright-MCP-Story-Test-Automation-Browser-Extension-Driven-

2️⃣ Install Dependencies

npm install

3️⃣ Add Playwright MCP Extension

Follow the Playwright MCP Extension Setup Guide.

Steps:

Open Chrome/Edge in developer mode.
Load the Playwright MCP extension.
Connect the extension to the running MCP server.

▶️ Running the MCP Server

Start the Playwright MCP server:

npx playwright-mcp --browser=chrome --extension --output-dir=.playwright-mcp

If successful, you will see logs similar to:

[info] Starting server playwright
[info] Connection state: Running
[info] Discovered 21 tools

🧪 Example Workflow

Story: SauceDemo Login Validation

From Agility Backlog: Story ID S-05236

🔹 Steps Executed via MCP Agent

Navigate to Digital.ai Agility Login:
https://www16.v1host.com/api-examples/Account.mvc/Login?destination=%2Fapi-examples%2F
Perform Login:
- Username: admin
- Password: admin
Filter backlog by Story Number: S-05236
Open story details
Extract story description
Capture screenshot → stored at .playwright-mcp/story-description.png
Generate structured test cases (linked to screenshot)
Convert acceptance criteria into TDD Playwright scripts (with placeholder locators)

📂 Project Structure

PlaywrightBrowser/
 ├── .playwright-mcp/           # MCP session outputs (screenshots, traces)
 │    └── story-description.png
 ├── pages/                     # Page Object files
 │    ├── home.page.ts
 │    ├── login.page.ts
 │    ├── v1-login.page.ts
 │    └── v1-backlog.page.ts
 ├── tests/                     # Test specs
 │    ├── login.spec.ts
 │    └── v1-story-capture.spec.ts
 ├── test-artifacts/            # Reports, screenshots
 ├── test-results/              # Playwright results
 ├── playwright-report/         # Playwright HTML reports
 ├── package.json
 ├── package-lock.json
 └── playwright.config.ts

✅ Outputs Generated

Extracted Story Description
Screenshot Path → .playwright-mcp/story-description.png
Structured Test Case Table (Markdown formatted)
TDD Playwright Scripts (replaceable locators)

📖 Example Test Case (Auto-Generated)

| Test ID | Title | Preconditions | Steps | Expected Result | |---------|-------|--------------|-------|----------------| | TC001 | Successful Login with Valid Credentials | SauceDemo app is accessible | Navigate → Enter standard_user + secret_sauce → Click Login | User redirected to homepage, product list displayed |

💡 Next Steps

Enhance scripts to automatically map locators using AI Agent
Integrate Allure / Mochawesome Reports
Extend support for multiple backlog tools (Jira, Rally, etc.)

👨‍💻 Contributing

Feel free to fork this repo, raise PRs, and suggest enhancements!

📜 License

MIT License

MCP Servers