Transcripted Summary
Welcome to station three. In our last station, we looked at the Playwright MCP server and ran into a major wall for SDETs: Playwright MCP can surf the web, but it has no understanding of our localized frameworks or design patterns.
To bridge that gap, Microsoft released the Playwright Test MCP, which is a specialized ecosystem. It provides three agents: the Planner, the Generator, and the Healer.
# The Three Agents
Let's go over to the Playwright Test Agents webpage.
The Planner agent operates as the strategist and the brain. It looks at the DOM and maps out a testing strategy. The webpage states it explores the app and produces a markdown test plan.
But how does the Planner know where to start? This is where the seed file comes into play. The seed file is a component of the Playwright Test MCP ecosystem. It operates as the map and configuration baseline that controls the Planner agent. The objective is to feed the Planner agent the URLs, environment settings, and entry parameters it needs to target our application.
Next is the Generator agent, which transforms the markdown plan into Playwright test files. It operates as the SDET by converting those strategy plans into automation test scenarios.
Last is the Healer agent. It executes the test suite and automatically repairs failing tests. I want to demonstrate how we can make the Healer agent notify us that a locator is different between the test application and the page object file.
# Initializing the Agent Definitions
To unlock all three of these agents, we must initialize the Playwright Test agent definitions inside our directory. If you look at the "get started" section, we see the agents can be initialized across multiple agent loop environments. The environments are VS Code, Claude Code, Codex, and OpenCode. We will implement VS Code. So let me copy this command, go to VS Code, and watch my screen as I paste the command.
Now it shows done. Our directory tree should generate a folder containing our agent definitions — .github/agents. And yes, we see all three agents in our directory.
Let's open up each file. First is the Planner agent. With the Planner agent, we see a description that states: use this agent when you need to create a comprehensive test plan for a web application or a website. Then it has tools to carry out the plan. It also has information on what the test planner will do. We see number one is navigate and explore, analyze user flows, design comprehensive scenarios, structure test plans, create documentation. And we see quality standards and an output format.
Now let's go to the next agent, which is the Generator agent. With the Generator agent, we see the description, the tools, model, MCP servers, and what to generate for each test.
And finally, let's open the Healer agent. In the Healer agent, we see the same type of information and the workflow, which includes initial execution, debug failed tests, error investigation, root cause analysis, code remediation, verification, and iteration.
# Starting at the Requirements
Okay. So with our Playwright Test MCP server fully connected and communicating with our IDE, we have our browser automation ready to go. But before we generate a test, we need to answer a question: what are we testing?
To demonstrate an end-to-end AI workflow, we will walk through the complete software development lifecycle using a feature that has been delivered to production. That means we start at the beginning of the quality pipeline with requirements. The requirements give our AI agents the acceptance criteria required for validation.
But first, we provide access to these requirements with two pieces of information from our user profile: the username (administrator) and the API key. Go ahead and generate a new API key by clicking the generate new button.
As you can see on this slide, step one is to execute a command in the terminal. Whether you prefer doing everything manually or letting AI manage your configs, the Python package must exist in your local environment so the system can run it.
Now that the package is installed, we reach steps two and three: register and verify the bridge connection.
Option A is the traditional route. You write a PowerShell here-string with your SpiraPlan URL, username, and API key. Then pass that information into claude mcp add-json. Then test it with claude mcp list.
Option B is the agentic AI route. Instead of dealing with terminal JSON syntax, we can hand the configuration details over to Claude Code in plain language and let the agent automatically handle steps two and three.
Step four is how we configure the MCP.
Let's open up the terminal to start with step one. It will install the package and the dependencies. So let me copy this information and paste it.
Next, we configure the server with Option B and use Claude Code. So I'm going to copy some information into Claude Code — let's open up a new one. So this information, it shows Inflectra variables, but let's go to Inflectra to get that information. I'm going to start with the URL. I'm going to copy and go back to Claude Code and replace the URL variable with that information. Administrator is the username. And last, we need the Inflectra API key, so let me go back and copy to the clipboard. And now we're going to paste that information.
Let's see what Claude Code returns back to us. If Claude Code prompts us for the scope location, we select user scope, so it writes to claude.json for security. Bingo.
All right. So now we go to the MCP file and add the configuration for the Inflectra MCP. I'm going to copy this information that I have pasted already, and the MCP file is right here, and let me paste. It's the same information that was in our file right here. Just replace it with your information. At this point, before jumping to the next step, let's do a quick window reload in VS Code by pressing Ctrl+Shift+P and reload window.
# Connecting Two Halves of the Quality Pipeline
By configuring both Playwright Test MCP and Inflectra Spira MCP, we have connected two items of the quality pipeline. At this point, let's ask Claude Code to execute our business task. I'm going to copy this information that I have and paste it.
The prompt says: using Inflectra Spira MCP, pull all requirement IDs and the names from SpiraPlan for a student registration form and product Rex Jones II.
Look at that. We see workspace search and product search artifact — those are the Inflectra Spira tools that Claude instantly recognized. Bingo, we see four requirements with IDs 789 to 792. Just like that, without touching a line of code, we have established a link between our AI coding agent and our quality management system.
Let's go back to the product real quick. The product is Rex Jones II right here. Here's the requirements artifact. And we see the IDs 789 through 792.
Now that Claude Code can read our requirements from SpiraPlan, our next step is to take these requirements and watch Playwright Test MCP generate a test plan with the Planner agent.
Quiz
The quiz for this chapter can be found in 3.4.
