This full-day, hands-on tutorial dives into test automation using the
Model Context Protocol (MCP) and AI agents. Participants will first master the MCP architecture, the standardized foundation for AI-driven applications.
The core of the tutorial focuses on
Playwright's AI Agents (Planner, Generator, Healer). You will learn to leverage these agents to:
- Intelligently discover and map application test surfaces (Planner).
- Automatically generate executable Playwright code from natural language specifications (Generator).
- Implement self-healing mechanisms to automatically detect and repair broken tests after UI changes (Healer).
The session covers integration techniques, including connecting MCP with
GitHub Copilot for an issue-to-implementation workflow, and best practices for production-ready, CI/CD-integrated test suites.
Prerequisites:- Basic understanding of JavaScript/TypeScript
- Familiarity with web testing concepts
- Node.js 18+ installed
- VS Code or similar IDE
Tutorial Objectives:By the end of this tutorial, participants will be able to:
- Understand the Model Context Protocol (MCP) architecture and its role in AI-driven automation
- Set up and configure MCP Playwright servers in multiple environments
- Leverage AI agents (Planner, Generator, Healer) for test automation
- Build intelligent, self-healing test automation frameworks
- Integrate MCP with GitHub Copilot and other AI tools
- Implement best practices for production-ready test automation
Tutorial AgendaMorning Session (9:00 AM - 12:30 PM)- 9:00 - 9:30 AM: Welcome & Tutorial Introduction
- Participant introductions and icebreaker
- Tutorial objectives and expected outcomes
- Overview of the day's schedule
- Environment setup verification
- 9:30 - 10:45 AM: Module 1 - Understanding MCP (Model Context Protocol)
- What is MCP and why it matters
- The evolution from custom integrations to standardized protocols
- MCP as the "USB-C for AI applications"
- MCP Architecture deep dive
- Client-Server architecture
- MCP Host, Client, and Server relationships
- Data layer: JSON-RPC 2.0 protocol
- Transport layer: stdio, SSE, WebSockets
- MCP vs traditional approaches (ChatGPT plugins, custom APIs)
- Real-world use cases and success stories
- Hands-on Exercise 1:
- Setting up your first MCP server
- Configuring Claude Desktop/VS Code with MCP
- Testing basic MCP connectivity
- Resources Provided:
- MCP architecture diagrams
- Configuration templates
- Troubleshooting guide
- 10:45 - 11:00 AM: Coffee Break
- 11:00 AM - 12:30 PM: Module 2 - Playwright MCP Fundamentals
- Introduction to Playwright MCP Server
- Microsoft's official implementation vs community alternatives
- Key features: accessibility tree usage, deterministic actions
- Supported capabilities: vision, PDF handling
- MCP Server architecture for Playwright
- Browser automation via MCP protocol
- Tools, Resources, and Prompts in MCP context
- Storage modes: persistent vs isolated profiles
- Demo Session:
- Installing Playwright MCP: npx @playwright/mcp@latest
- Configuration options and arguments
- Connecting MCP to different clients (Claude Desktop, VS Code, Cursor)
- Live demonstration of browser automation via MCP
- Hands-on Exercise 2:
- Configure Playwright MCP in your development environment
- Create your first AI-driven browser automation
- Use natural language prompts to navigate and interact with a demo website
- Capture and analyze accessibility snapshots
- Challenge: Automate a simple e-commerce flow (browse → add to cart → checkout) using only natural language prompts through MCP.
Lunch Break (12:30 - 1:30 PM)Afternoon Session (1:30 PM - 5:00 PM)- 1:30 - 3:00 PM: Module 3 - Playwright AI Agents
- Introduction to Playwright Test Agents
- The three agents: Planner, Generator, Healer
- Agent workflows and lifecycle
- Planner Agent: Intelligent test discovery
- How it explores applications
- Generating comprehensive test plans
- Generator Agent: Automated test creation
- Converting test plans to Playwright code
- Natural language to code translation
- Healer Agent: Self-healing tests
- Detecting and fixing broken tests
- Automatic locator updates
- Handling UI changes
- Demo Session:
- Setting up Playwright Agents: npx @playwright/test init-agents
- Live demo: Planner agent exploring a web application
- Live demo: Generator creating tests from specifications
- Live demo: Healer fixing failing tests after UI changes
- Hands-on Exercise 3:
- Initialize agents in your project
- Use Planner agent to explore a sample application
- Generate test specs in Markdown format
- Convert specs to executable Playwright tests with Generator
- Introduce breaking changes and use Healer to repair tests
- Group Activity: Teams work on different sections of an e-commerce application, comparing agent-generated tests vs manually written tests.
- 3:00 - 3:15 PM: Coffee Break
- 3:15 - 5:00 PM: Module 4 - Advanced Integration & Best Practices
- Integrating MCP with GitHub Copilot Coding Agent
- How Copilot uses Playwright MCP
- Verifying code changes in real browsers
- Issue-to-implementation workflow
- Advanced MCP features
- Custom MCP servers for specific needs
- Multi-tool workflows (MCP + web search + internal tools)
- Security considerations and sandboxing
- Best practices for production deployments
- Test organization and structure
- Page Object Model with AI-generated tests
- CI/CD integration (GitHub Actions, Docker)
- Test data management and fixtures
- Handling flaky tests with AI assistance
