Transcripted Summary
Welcome back to station two. In our last session, we locked down our mindset and established our five-star kitchen governance rules. Now it is time to look at the infrastructure that makes autonomous automation possible.
When we talk about AI interacting with software, a question comes up: how does an LLM gain the capability to open a browser, read a webpage, and interact with elements on the webpage? It does not happen by accident. It does not happen by magic. It happens through an open source standard called the Model Context Protocol, better known as MCP.
# MCP as a Bridge Across a River
Think of MCP as a bridge across a river.
On one side of the river, you have your AI client, which operates as the cognitive engine. It understands the language of your test strategies and the logic of your software requirements, but it is completely sandboxed. It has no physical ability to reach outside of its chat window.
On the other side of the river sits your target resource — the environment, database, or application you need to interact with. By itself, the AI engine cannot reach across the river to touch that resource.
The MCP server sits right in the middle as the bridge, translating high-level intent into precise, deterministic machine actions.
Let's look at how we apply this concept in two ways. When we build our autonomous web testing pipeline, Claude Code operates as our AI client on the cognitive side of the river. The target resource on the other side is a browser instance. The Playwright MCP server is right in the middle. When you type a command into Claude Code like "go to my website and test the signup form," the Playwright MCP server operates as the bridge. It takes that intent, translates it into Playwright code under the hood, drives the browser instance, and feeds data back to AI.
We take the same blueprint and apply it to test management using Inflectra. In this pipeline, Claude Code remains our AI client, but our target resource updates to Inflectra SpiraPlan. The bridge is now the Inflectra Spira MCP server. When your framework needs to map business requirements to test execution, the Inflectra Spira MCP server allows Claude Code to reach across the river. AI can dynamically read user stories, parse acceptance criteria directly from SpiraPlan, and update test case statuses in real time.
Whether you are controlling a browser or managing an enterprise test lifecycle, the architecture never changes — because you are mastering a universal protocol that unlocks complete control over the entire engineering stack.
# How AI "Sees" the Screen
Now, how does AI see what is on the screen? A misconception is that the agent is looking at pixels like a human does. In reality, depending on pixels or screenshots is prone to hallucinations.
Instead, the Playwright MCP uses a dedicated safety layer. It pulls what we call an accessibility tree — a semantic DOM tree — from the browser. This snapshot translates the page into a hierarchy of labels, roles, and states. Because AI reads this deterministic structure instead of guessing what a button looks like, its understanding of the application is accurate technical truth.
# Configuring the Playwright MCP Server
Before we jump into VS Code, let's look at the blueprint on this slide for configuring the Playwright MCP server. A heads up on how the ecosystem has evolved: if you have seen older MCP tutorials, you might remember an open source community package called @modelcontextprotocol/server-playwright. Microsoft has taken ownership of the protocol integration and migrated the package to @playwright/mcp.
We need to register the server definition with our AI workspace client so it knows how to launch it behind the scenes. The setup process follows four items:
- Open the VS Code command palette using
Ctrl+Shift+Pon Windows orCmd+Shift+Pon Mac. - Search for MCP: Open User Configuration to open our configuration file.
- Paste our server definition into the MCP servers JSON block.
- Register the server directly with the Claude Code CLI session.
In just a moment, I am going to copy this block, transition over to my editor, and paste it into VS Code. Now, keep in mind that VS Code and Claude Code manage their tool configurations independently. After updating our VS Code settings, we also need to register this server with our Claude Code CLI session. In our terminal, we run claude mcp add playwright --scope user -- npx.cmd @playwright/mcp@latest.
Finally, we run claude mcp list to verify our connection. At this point, let's switch over to VS Code.
In VS Code, I'm going to press the command keys Ctrl+Shift+P and select Open User Configuration. At this point, I will copy and paste the MCP servers information. Let me also structure this block of code. Bingo. Okay, save it.
Notice that this block of code is how I register the Playwright MCP server with the Claude Code CLI, but let me show you the command to register it. I've already registered the Playwright MCP server, but I still want to paste it here because I went over it in the presentation. Now I want to show you exactly what happens when you have it and what you will see if you don't have it. And after this, I'm going to give you the command so you can check the connection.
Now it shows "MCP server playwright already exists in my user config." That's good.
Notice that we use npx.cmd on Windows. On Mac, replace npx.cmd with npx without the .cmd. So for example, if you have a Mac, remove .cmd. This makes sure the background shell executes the batch runner, but by passing --scope user, we register this server globally across all workspace environments.
To verify our connection, this is when I'm going to type in claude mcp list. Press Enter and you will see a check mark to show that it has been connected. Now, when we launch Claude Code, it reads that bridge definition and gives our agent instant access to all the browser tools like navigate, fill, and click.
# Driving the Application Under Test
Let's look at my website, which is the application under test (AUT). We are looking at the student registration practice form. As you can see on my screen, we have a student registration form. It has many fields such as first name, last name, gender, and many more other fields, including programming language.
With the help of Playwright MCP, we will see the fields on this form get filled out automatically. Now, let's go back to VS Code and trigger AI. I am going to go to Claude Code and paste this prompt.
This request prompt says: using the Playwright MCP server, navigate to the test application form. Complete the student registration form by filling out all form fields with mock student data. Ensure you select TypeScript as the programming language and click the submit button. Here's the catch — return the form entries back to this chat window.
So at a high level, the steps are: the AI client will read my request prompt, refer to the Playwright MCP server, retrieve the accessibility snapshot, and begin generating tool calls to interact with the browser.
At this point, now let's run. The Playwright MCP server was effective at filling out this form. Let's now verify the information is correct. Student name is the same — Alex Morgan. Student email is the same. Gender, mobile, date of birth, address, programming language, country, state/province, city, county — it is all the same.
# Hitting the Wall
Now, although Playwright MCP was very good at filling out the form, we have a wall. And I say it's a wall because as an automation architect, these are the questions:
- Can the Playwright MCP server interact with the browser? Yes, it can.
- Can it scrape the web? Absolutely.
- Does the Playwright MCP have knowledge of our local code base? No, it does not.
This is the wall. If Playwright MCP cannot access our code base, then it also does not have knowledge of our Page Object Model design pattern. While the Playwright MCP is great at surfing the web and filling out forms, it cannot see our development framework.
To solve this problem, we must move beyond generic browser surfing and tap into an ecosystem designed for us. In our next session, we'll step into station three, where we will transition to the Playwright Test MCP, which has knowledge of our code base, and look at how to shift quality left.
