How to debug a web app with Playwright MCP 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.

What are Playwright and MCP? A quick overview 

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!

How to configure Playwright MCP server for GitHub Copilot in VS Code

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:

{
  "servers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

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:

Add Playwright to this project. When configuring Playwright, note the startup script for the site. Ensure the configuration uses this startup script, and reuses the server if one is already launched.

The scenario

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:

## Error

The publisher filter doesn't actually filter the games by publisher.

## Repro steps

1. Go to the homepage.
2. Select a publisher from the dropdown list; the page updates.
3. Review the updated list, noting no change in the games listed.

## Expected behavior

The only games displayed are ones published by the selected publisher.

## Actual behavior

All games are still displayed.

How Copilot agent mode automates bug reproduction with Playwright

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:

A user is reporting the publisher filter doesn't do anything. Can you please use Playwright to confirm this is an issue, and if so track it down? Start by going to the landing page, using the dropdown for publisher, and seeing what happens. Thanks!

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.  

Why you should use Playwright MCP with GitHub Copilot for web app debugging

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. 

The post How to debug a web app with Playwright MCP and GitHub Copilot appeared first on The GitHub Blog.

Source: Read More