Build what's next on GitHub, the place for anyone from anywhere to build anything.
Join us October 28-29 in San Francisco or online for GitHub Universe, our flagship developer event uniting people, agents, and the world's code.
Reproduce and debug web app issues with ease using the Playwright MCP server and GitHub Copilot.
I know it can feel like a unicorn, but most bug reports do, in fact, contain steps to reproduce the error (or repro steps). As wonderful as it is to have those, the process of walking through and validating everything is still tedious. In a perfect world, we’d have end-to-end or acceptance tests that could automate the process. Sadly, many projects lack robust testing.
Fortunately, GitHub Copilot with the help of the Playwright Model Context Protocol (MCP) server can automate that entire process.
Let’s explore how we pass the repro steps to Copilot agent mode, and let it use the Playwright MCP server to walk through them and validate the bug. In turn, it will track down and resolve the error.
Playwright is an end-to-end testing framework for web apps. You can use it to create scripts to act as a user, validate your application’s feature set, and assure quality.
For example, if you were building a shopping app, you could create a series of scripts to walk through the entire flow of searching for a product, adding it to the cart, and completing the purchase. These scripts are automated, allowing you to validate the process within seconds.
Originally developed by Anthropic, MCP is an open (and open source) protocol for exposing tools to AI agents. These tools could include providing additional context and information, or to allow the AI agent to perform actions.
Bringing this together: there’s a Playwright MCP server, which provides tools from Playwright to AI agents (or GitHub Copilot in this case), to both create those scripts and perform the actions directly. This allows Copilot to actually walk through the repro steps for us!
For you to use the Playwright MCP server, it needs to be available in your IDE. In VS Code, you can install the Playwright MCP server to make it available to all projects, or create a file in your .vscode folder tiled mcp.json and add the following:
Once you do that, you’ll notice a small play button appear just over playwright in the file. When you select that button, it’ll start the server so you can use it with Copilot agent mode! (Get the guide to using agent mode in Copilot.)
You’ll likely need to configure Playwright, especially if you have a complex startup process for your website. My project is based on the website in the Agents in SDLC workshop (available on GitHub samples), and already has a frontend written with Astro & Svelte, and a backend using Flask. This configuration allowed Playwright to properly start the app. Also, fun fact: The config file was actually created by Copilot!
I used this prompt with Copilot agent mode to do it, and you can modify it for your particular requirements:
Let’s say we have a crowdfunding website for DevOps-themed board games (a truly booming industry). Filters are available to the user to search by publisher and category. After discovering the publisher filter doesn’t work, a user files the following issue on GitHub:
Copilot agent mode is built to be a peer programmer, which means we can give it tasks and then review its work. In other words, we can describe what we’re looking at, the problems we need to solve, what we expect Copilot to do and let Copilot take it from there!
If you’re following along in the video, you’ll notice I paraphrased the user’s reported issue in my own words. This is something I often do because it allows me to better understand the ask and to go back to the original filer for additional clarity.
In practice, I ended up sending the following prompt to Copilot agent mode:
| 💡 Pro tip: If you want to be fancy, you can also incorporate the GitHub MCP server into the flow by asking Copilot to track down the issue and to read the text directly. To streamline this blog, I’m going to stick to just the Playwright MCP server (but you can learn more about the GitHub MCP server and how to use it in our guide). |
From there, Copilot got to work. It utilized the Playwright MCP server to start the website and perform the repro steps. It then confirmed the user’s report: The publisher filter didn’t do anything.
With this knowledge, Copilot explored the project to track down the bug. It looked at the frontend code, which looked good. With the help of the Playwright MCP server, it also validated the calls to the API were taking place. Then it looked at the backend and discovered the (admittedly) simple problem: a typo.
What I really appreciated: After proposing a fix, it returned to Playwright to validate that the fix would actually work.
After this was done, I knew Copilot confirmed the bug, generated a fix, and demonstrated the fix resolved the bug. From there, I turned my attention to reviewing the code, running additional tests, and finally creating my pull request.
Now yes, the bug itself was straightforward because I wanted to keep the demo focused on Copilot agent mode and Playwright. From experience I can confirm Copilot is invaluable with more complex bugs (I’m speaking from experience).
Here’s why all this matters: Providing Copilot agent mode with the ability to use Playwright allows it to “see” the impact its changes have on the website, and generally interact with your website, too. You can quickly configure Playwright for your project with the help of Copilot to take advantage of this functionality. And you can even take the next step by incorporating Playwright end-to-end tests into your project if you haven’t already done so.
Read the Docs to start using agent mode in GitHub Copilot >
