{"id":90624,"date":"2025-09-05T09:00:00","date_gmt":"2025-09-05T16:00:00","guid":{"rendered":"https:\/\/github.blog\/?p=90624"},"modified":"2025-09-05T08:23:52","modified_gmt":"2025-09-05T15:23:52","slug":"how-to-debug-a-web-app-with-playwright-mcp-and-github-copilot","status":"publish","type":"post","link":"https:\/\/github.blog\/ai-and-ml\/github-copilot\/how-to-debug-a-web-app-with-playwright-mcp-and-github-copilot\/","title":{"rendered":"How to debug a web app with Playwright MCP and GitHub Copilot"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<html><body><p>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&rsquo;d have end-to-end or acceptance tests that could automate the process. Sadly, many projects lack robust testing.<\/p>\n\n\n\n<p>Fortunately, GitHub Copilot with the help of the Playwright Model Context Protocol (MCP) server can automate that entire process.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n\n\t\t<div class=\"mod-vh position-relative\" style=\"height: 0; padding-bottom: calc((9 \/ 16)*100%);\">\n\t\t\t<iframe loading=\"lazy\" class=\"position-absolute top-0 left-0 width-full height-full\" src=\"https:\/\/www.youtube.com\/embed\/Sh9D3lQs3A8?version=3&amp;rel=1&amp;showsearch=0&amp;showinfo=1&amp;iv_load_policy=1&amp;fs=1&amp;hl=en-US&amp;autohide=2&amp;wmode=transparent\" title=\"YouTube video player\" allow=\"accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen=\"\" frameborder=\"0\"><\/iframe>\n\t\t<\/div>\n<\/div><\/figure>\n\n\n\n<p>Let&rsquo;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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-are-playwright-and-mcp-a-quick-overview-nbsp\">What are Playwright and MCP? A quick overview&nbsp;<\/h2>\n\n\n\n<p><a href=\"https:\/\/playwright.dev\/\">Playwright<\/a> 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&rsquo;s feature set, and assure quality.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>Originally developed by Anthropic, <a href=\"https:\/\/github.blog\/ai-and-ml\/llms\/what-the-heck-is-mcp-and-why-is-everyone-talking-about-it\/\">MCP<\/a> 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.<\/p>\n\n\n\n<p>Bringing this together: there&rsquo;s a <a href=\"https:\/\/github.com\/microsoft\/playwright-mcp\/blob\/main\/README.md\">Playwright MCP server<\/a>, 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!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-configure-playwright-mcp-server-for-github-copilot-in-vs-code\">How to configure Playwright MCP server for GitHub Copilot in VS Code<\/h2>\n\n\n\n<p>For you to use the Playwright MCP server, it needs to be available in your IDE. In VS Code, you can <a href=\"https:\/\/insiders.vscode.dev\/redirect?url=vscode%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522playwright%2522%252C%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522%2540playwright%252Fmcp%2540latest%2522%255D%257D\">install the Playwright MCP server<\/a> to make it available to all projects, or create a file in your <code>.vscode<\/code> folder tiled <code>mcp.json<\/code> and add the following:<\/p>\n\n\n<div class=\"wp-block-code-wrapper\">\n<pre class=\"wp-block-code language-javascript\"><code>{\n  \"servers\": {\n    \"playwright\": {\n      \"command\": \"npx\",\n      \"args\": [\n        \"@playwright\/mcp@latest\"\n      ]\n    }\n  }\n}<\/code><\/pre>\n<clipboard-copy aria-label=\"Copy\" class=\"code-copy-btn\" data-copy-feedback=\"Copied!\" value='{\n  \"servers\": {\n    \"playwright\": {\n      \"command\": \"npx\",\n      \"args\": [\n        \"@playwright\/mcp@latest\"\n      ]\n    }\n  }\n}' tabindex=\"0\" role=\"button\"><svg aria-hidden=\"true\" height=\"16\" viewbox=\"0 0 16 16\" version=\"1.1\" width=\"16\" class=\"octicon octicon-copy js-clipboard-copy-icon\"><path d=\"M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z\"><\/path><path d=\"M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z\"><\/path><\/svg><svg aria-hidden=\"true\" height=\"16\" viewbox=\"0 0 16 16\" version=\"1.1\" width=\"16\" class=\"octicon octicon-check js-clipboard-check-icon\"><path d=\"M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z\"><\/path><\/svg><\/clipboard-copy><\/div>\n\n\n<p>Once you do that, you&rsquo;ll notice a small <strong>play<\/strong> button appear just over <code>playwright<\/code> in the file. When you select that button, it&rsquo;ll start the server so you can use it with Copilot agent mode! (<a href=\"https:\/\/github.blog\/ai-and-ml\/github-copilot\/agent-mode-101-all-about-github-copilots-powerful-mode\/\">Get the guide<\/a> to using agent mode in Copilot.)<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-recalc-dims=\"1\" decoding=\"async\" loading=\"lazy\" height=\"816\" width=\"1024\" src=\"https:\/\/github.blog\/wp-content\/uploads\/2025\/09\/image.png?resize=1024%2C816\" alt='A screenshot showing the play button below \"servers\", just above \"playwright\", in a VS Code window.' class=\"wp-image-90625\" srcset=\"https:\/\/github.blog\/wp-content\/uploads\/2025\/09\/image.png?w=1330 1330w, https:\/\/github.blog\/wp-content\/uploads\/2025\/09\/image.png?w=300 300w, https:\/\/github.blog\/wp-content\/uploads\/2025\/09\/image.png?w=768 768w, https:\/\/github.blog\/wp-content\/uploads\/2025\/09\/image.png?w=1024 1024w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/figure>\n\n\n\n<p>You&rsquo;ll likely need to <a href=\"https:\/\/playwright.dev\/docs\/test-configuration\">configure Playwright<\/a>, especially if you have a complex startup process for your website. My project is based on the <a href=\"https:\/\/github.com\/github-samples\/agents-in-sdlc\">website in the Agents in SDLC workshop<\/a> (available on <a href=\"https:\/\/github.com\/github-samples\/agents-in-sdlc\">GitHub samples<\/a>), and already has a frontend written with Astro &amp; Svelte, and a backend using Flask. This configuration allowed Playwright to properly <a href=\"https:\/\/playwright.dev\/docs\/api\/class-testconfig#test-config-web-server\">start the app<\/a>. Also, fun fact: The config file was actually created by Copilot!<\/p>\n\n\n\n<p>I used this prompt with Copilot agent mode to do it, and you can modify it for your particular requirements:<\/p>\n\n\n<div class=\"wp-block-code-wrapper\">\n<pre class=\"wp-block-code language-plaintext\"><code>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.<\/code><\/pre>\n<clipboard-copy aria-label=\"Copy\" class=\"code-copy-btn\" data-copy-feedback=\"Copied!\" value=\"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.\" tabindex=\"0\" role=\"button\"><svg aria-hidden=\"true\" height=\"16\" viewbox=\"0 0 16 16\" version=\"1.1\" width=\"16\" class=\"octicon octicon-copy js-clipboard-copy-icon\"><path d=\"M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z\"><\/path><path d=\"M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z\"><\/path><\/svg><svg aria-hidden=\"true\" height=\"16\" viewbox=\"0 0 16 16\" version=\"1.1\" width=\"16\" class=\"octicon octicon-check js-clipboard-check-icon\"><path d=\"M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z\"><\/path><\/svg><\/clipboard-copy><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"the-scenario\">The scenario<\/h2>\n\n\n\n<p>Let&rsquo;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&rsquo;t work, a user files the following issue on GitHub:<\/p>\n\n\n<div class=\"wp-block-code-wrapper\">\n<pre class=\"wp-block-code language-plaintext\"><code>## Error\n\nThe publisher filter doesn't actually filter the games by publisher.\n\n## Repro steps\n\n1. Go to the homepage.\n2. Select a publisher from the dropdown list; the page updates.\n3. Review the updated list, noting no change in the games listed.\n\n## Expected behavior\n\nThe only games displayed are ones published by the selected publisher.\n\n## Actual behavior\n\nAll games are still displayed.<\/code><\/pre>\n<clipboard-copy aria-label=\"Copy\" class=\"code-copy-btn\" data-copy-feedback=\"Copied!\" value=\"## Error\n\nThe publisher filter doesn't actually filter the games by publisher.\n\n## Repro steps\n\n1. Go to the homepage.\n2. Select a publisher from the dropdown list; the page updates.\n3. Review the updated list, noting no change in the games listed.\n\n## Expected behavior\n\nThe only games displayed are ones published by the selected publisher.\n\n## Actual behavior\n\nAll games are still displayed.\" tabindex=\"0\" role=\"button\"><svg aria-hidden=\"true\" height=\"16\" viewbox=\"0 0 16 16\" version=\"1.1\" width=\"16\" class=\"octicon octicon-copy js-clipboard-copy-icon\"><path d=\"M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z\"><\/path><path d=\"M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z\"><\/path><\/svg><svg aria-hidden=\"true\" height=\"16\" viewbox=\"0 0 16 16\" version=\"1.1\" width=\"16\" class=\"octicon octicon-check js-clipboard-check-icon\"><path d=\"M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z\"><\/path><\/svg><\/clipboard-copy><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"how-copilot-agent-mode-automates-bug-reproduction-with-playwright\">How Copilot agent mode automates bug reproduction with Playwright<\/h2>\n\n\n\n<p>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&rsquo;re looking at, the problems we need to solve, what we expect Copilot to do and let Copilot take it from there!<\/p>\n\n\n\n<p>If you&rsquo;re following along in the video, you&rsquo;ll notice I paraphrased the user&rsquo;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.&nbsp;<\/p>\n\n\n\n<p>In practice, I ended up sending the following prompt to Copilot agent mode:<\/p>\n\n\n<div class=\"wp-block-code-wrapper\">\n<pre class=\"wp-block-code language-plaintext\"><code>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!<\/code><\/pre>\n<clipboard-copy aria-label=\"Copy\" class=\"code-copy-btn\" data-copy-feedback=\"Copied!\" value=\"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!\" tabindex=\"0\" role=\"button\"><svg aria-hidden=\"true\" height=\"16\" viewbox=\"0 0 16 16\" version=\"1.1\" width=\"16\" class=\"octicon octicon-copy js-clipboard-copy-icon\"><path d=\"M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z\"><\/path><path d=\"M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z\"><\/path><\/svg><svg aria-hidden=\"true\" height=\"16\" viewbox=\"0 0 16 16\" version=\"1.1\" width=\"16\" class=\"octicon octicon-check js-clipboard-check-icon\"><path d=\"M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z\"><\/path><\/svg><\/clipboard-copy><\/div>\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>&#128161; <strong>Pro tip:<\/strong> If you want to be fancy, you can also incorporate the <a href=\"https:\/\/github.com\/github\/github-mcp-server\/blob\/main\/README.md\">GitHub MCP server<\/a> into the flow by asking Copilot to track down the issue and to read the text directly. To streamline this blog, I&rsquo;m going to stick to just the Playwright MCP server (but <a href=\"https:\/\/github.blog\/ai-and-ml\/generative-ai\/a-practical-guide-on-how-to-use-the-github-mcp-server\/\">you can learn more about the GitHub MCP server and how to use it in our guide<\/a>).<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>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&rsquo;s report: The publisher filter didn&rsquo;t do anything.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>What I really appreciated: After proposing a fix, it returned to Playwright to validate that the fix would actually work.<\/p>\n\n\n\n<p>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.&nbsp;&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"why-you-should-use-playwright-mcp-with-github-copilot-for-web-app-debugging\">Why you should use Playwright MCP with GitHub Copilot for web app debugging<\/h2>\n\n\n\n<p>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&rsquo;m speaking from experience).<\/p>\n\n\n\n<p>Here&rsquo;s why all this matters: Providing Copilot agent mode with the ability to use Playwright allows it to &ldquo;see&rdquo; 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&rsquo;t already done so.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-group post-content-cta has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<p><a href=\"https:\/\/docs.github.com\/en\/copilot\/tutorials\/enhance-agent-mode-with-mcp\"><strong>Read the Docs<\/strong><\/a><strong> <\/strong>to start using agent mode in GitHub Copilot &gt;<\/p>\n<\/div>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Reproduce and debug web app issues with ease using the Playwright MCP server and GitHub Copilot.<\/p>\n","protected":false},"author":2279,"featured_media":90561,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_gh_post_show_toc":"yes","_gh_post_is_no_robots":"","_gh_post_is_featured":"yes","_gh_post_is_excluded":"","_gh_post_is_unlisted":"","_gh_post_related_link_1":"","_gh_post_related_link_2":"","_gh_post_related_link_3":"","_gh_post_sq_img":"","_gh_post_sq_img_id":"","_gh_post_cta_title":"","_gh_post_cta_text":"","_gh_post_cta_link":"","_gh_post_cta_button":"","_gh_post_recirc_hide":"","_gh_post_recirc_col_1":"","_gh_post_recirc_col_2":"","_gh_post_recirc_col_3":"","_gh_post_recirc_col_4":"","_featured_video":"","_gh_post_additional_query_params":"","_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"enabled":false},"version":2},"_wpas_customize_per_network":false,"_links_to":"","_links_to_target":""},"categories":[3293,3295],"tags":[2535,3661,3648],"coauthors":[3493],"class_list":["post-90624","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ai-and-ml","category-github-copilot","tag-github-copilot","tag-mcp","tag-model-context-protocol"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to debug a web app with Playwright MCP and GitHub Copilot - The GitHub Blog<\/title>\n<meta name=\"description\" content=\"Reproduce and debug web app issues with ease using the Playwright MCP server and GitHub Copilot.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/github.blog\/ai-and-ml\/github-copilot\/how-to-debug-a-web-app-with-playwright-mcp-and-github-copilot\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to debug a web app with Playwright MCP and GitHub Copilot\" \/>\n<meta property=\"og:description\" content=\"Reproduce and debug web app issues with ease using the Playwright MCP server and GitHub Copilot.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/github.blog\/ai-and-ml\/github-copilot\/how-to-debug-a-web-app-with-playwright-mcp-and-github-copilot\/\" \/>\n<meta property=\"og:site_name\" content=\"The GitHub Blog\" \/>\n<meta property=\"article:published_time\" content=\"2025-09-05T16:00:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/github.blog\/wp-content\/uploads\/2025\/08\/copilot-wallpaper-generic-logo-header.png?fit=1920%2C1080\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"1080\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Christopher Harrison\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Christopher Harrison\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/github.blog\\\/ai-and-ml\\\/github-copilot\\\/how-to-debug-a-web-app-with-playwright-mcp-and-github-copilot\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/github.blog\\\/ai-and-ml\\\/github-copilot\\\/how-to-debug-a-web-app-with-playwright-mcp-and-github-copilot\\\/\"},\"author\":{\"name\":\"Christopher Harrison\",\"@id\":\"https:\\\/\\\/github.blog\\\/#\\\/schema\\\/person\\\/e0e3ce7aee5bfe3284c624b7524e3948\"},\"headline\":\"How to debug a web app with Playwright MCP and GitHub Copilot\",\"datePublished\":\"2025-09-05T16:00:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/github.blog\\\/ai-and-ml\\\/github-copilot\\\/how-to-debug-a-web-app-with-playwright-mcp-and-github-copilot\\\/\"},\"wordCount\":1030,\"image\":{\"@id\":\"https:\\\/\\\/github.blog\\\/ai-and-ml\\\/github-copilot\\\/how-to-debug-a-web-app-with-playwright-mcp-and-github-copilot\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/github.blog\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/copilot-wallpaper-generic-logo-header.png?fit=1920%2C1080\",\"keywords\":[\"GitHub Copilot\",\"MCP\",\"Model Context Protocol\"],\"articleSection\":[\"AI &amp; ML\",\"GitHub Copilot\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/github.blog\\\/ai-and-ml\\\/github-copilot\\\/how-to-debug-a-web-app-with-playwright-mcp-and-github-copilot\\\/\",\"url\":\"https:\\\/\\\/github.blog\\\/ai-and-ml\\\/github-copilot\\\/how-to-debug-a-web-app-with-playwright-mcp-and-github-copilot\\\/\",\"name\":\"How to debug a web app with Playwright MCP and GitHub Copilot - The GitHub Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/github.blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/github.blog\\\/ai-and-ml\\\/github-copilot\\\/how-to-debug-a-web-app-with-playwright-mcp-and-github-copilot\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/github.blog\\\/ai-and-ml\\\/github-copilot\\\/how-to-debug-a-web-app-with-playwright-mcp-and-github-copilot\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/github.blog\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/copilot-wallpaper-generic-logo-header.png?fit=1920%2C1080\",\"datePublished\":\"2025-09-05T16:00:00+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/github.blog\\\/#\\\/schema\\\/person\\\/e0e3ce7aee5bfe3284c624b7524e3948\"},\"description\":\"Reproduce and debug web app issues with ease using the Playwright MCP server and GitHub Copilot.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/github.blog\\\/ai-and-ml\\\/github-copilot\\\/how-to-debug-a-web-app-with-playwright-mcp-and-github-copilot\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/github.blog\\\/ai-and-ml\\\/github-copilot\\\/how-to-debug-a-web-app-with-playwright-mcp-and-github-copilot\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/github.blog\\\/ai-and-ml\\\/github-copilot\\\/how-to-debug-a-web-app-with-playwright-mcp-and-github-copilot\\\/#primaryimage\",\"url\":\"https:\\\/\\\/github.blog\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/copilot-wallpaper-generic-logo-header.png?fit=1920%2C1080\",\"contentUrl\":\"https:\\\/\\\/github.blog\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/copilot-wallpaper-generic-logo-header.png?fit=1920%2C1080\",\"width\":1920,\"height\":1080,\"caption\":\"A decorative header image with GitHub Copilot logo.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/github.blog\\\/ai-and-ml\\\/github-copilot\\\/how-to-debug-a-web-app-with-playwright-mcp-and-github-copilot\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/github.blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"AI &amp; ML\",\"item\":\"https:\\\/\\\/github.blog\\\/ai-and-ml\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"GitHub Copilot\",\"item\":\"https:\\\/\\\/github.blog\\\/ai-and-ml\\\/github-copilot\\\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"How to debug a web app with Playwright MCP and GitHub Copilot\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/github.blog\\\/#website\",\"url\":\"https:\\\/\\\/github.blog\\\/\",\"name\":\"The GitHub Blog\",\"description\":\"Updates, ideas, and inspiration from GitHub to help developers build and design software.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/github.blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/github.blog\\\/#\\\/schema\\\/person\\\/e0e3ce7aee5bfe3284c624b7524e3948\",\"name\":\"Christopher Harrison\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e196df5ac94dde39f50b563ac78bdfff24d307a199c2add2e3689e74e5d6a8da?s=96&d=mm&r=gcfe3e7011acd5f1b71e1022b178db9e1\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e196df5ac94dde39f50b563ac78bdfff24d307a199c2add2e3689e74e5d6a8da?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/e196df5ac94dde39f50b563ac78bdfff24d307a199c2add2e3689e74e5d6a8da?s=96&d=mm&r=g\",\"caption\":\"Christopher Harrison\"},\"description\":\"Senior Developer Advocate, GitHub\",\"url\":\"https:\\\/\\\/github.blog\\\/author\\\/geektrainer\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to debug a web app with Playwright MCP and GitHub Copilot - The GitHub Blog","description":"Reproduce and debug web app issues with ease using the Playwright MCP server and GitHub Copilot.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/github.blog\/ai-and-ml\/github-copilot\/how-to-debug-a-web-app-with-playwright-mcp-and-github-copilot\/","og_locale":"en_US","og_type":"article","og_title":"How to debug a web app with Playwright MCP and GitHub Copilot","og_description":"Reproduce and debug web app issues with ease using the Playwright MCP server and GitHub Copilot.","og_url":"https:\/\/github.blog\/ai-and-ml\/github-copilot\/how-to-debug-a-web-app-with-playwright-mcp-and-github-copilot\/","og_site_name":"The GitHub Blog","article_published_time":"2025-09-05T16:00:00+00:00","og_image":[{"width":1920,"height":1080,"url":"https:\/\/github.blog\/wp-content\/uploads\/2025\/08\/copilot-wallpaper-generic-logo-header.png?fit=1920%2C1080","type":"image\/png"}],"author":"Christopher Harrison","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Christopher Harrison","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/github.blog\/ai-and-ml\/github-copilot\/how-to-debug-a-web-app-with-playwright-mcp-and-github-copilot\/#article","isPartOf":{"@id":"https:\/\/github.blog\/ai-and-ml\/github-copilot\/how-to-debug-a-web-app-with-playwright-mcp-and-github-copilot\/"},"author":{"name":"Christopher Harrison","@id":"https:\/\/github.blog\/#\/schema\/person\/e0e3ce7aee5bfe3284c624b7524e3948"},"headline":"How to debug a web app with Playwright MCP and GitHub Copilot","datePublished":"2025-09-05T16:00:00+00:00","mainEntityOfPage":{"@id":"https:\/\/github.blog\/ai-and-ml\/github-copilot\/how-to-debug-a-web-app-with-playwright-mcp-and-github-copilot\/"},"wordCount":1030,"image":{"@id":"https:\/\/github.blog\/ai-and-ml\/github-copilot\/how-to-debug-a-web-app-with-playwright-mcp-and-github-copilot\/#primaryimage"},"thumbnailUrl":"https:\/\/github.blog\/wp-content\/uploads\/2025\/08\/copilot-wallpaper-generic-logo-header.png?fit=1920%2C1080","keywords":["GitHub Copilot","MCP","Model Context Protocol"],"articleSection":["AI &amp; ML","GitHub Copilot"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/github.blog\/ai-and-ml\/github-copilot\/how-to-debug-a-web-app-with-playwright-mcp-and-github-copilot\/","url":"https:\/\/github.blog\/ai-and-ml\/github-copilot\/how-to-debug-a-web-app-with-playwright-mcp-and-github-copilot\/","name":"How to debug a web app with Playwright MCP and GitHub Copilot - The GitHub Blog","isPartOf":{"@id":"https:\/\/github.blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/github.blog\/ai-and-ml\/github-copilot\/how-to-debug-a-web-app-with-playwright-mcp-and-github-copilot\/#primaryimage"},"image":{"@id":"https:\/\/github.blog\/ai-and-ml\/github-copilot\/how-to-debug-a-web-app-with-playwright-mcp-and-github-copilot\/#primaryimage"},"thumbnailUrl":"https:\/\/github.blog\/wp-content\/uploads\/2025\/08\/copilot-wallpaper-generic-logo-header.png?fit=1920%2C1080","datePublished":"2025-09-05T16:00:00+00:00","author":{"@id":"https:\/\/github.blog\/#\/schema\/person\/e0e3ce7aee5bfe3284c624b7524e3948"},"description":"Reproduce and debug web app issues with ease using the Playwright MCP server and GitHub Copilot.","breadcrumb":{"@id":"https:\/\/github.blog\/ai-and-ml\/github-copilot\/how-to-debug-a-web-app-with-playwright-mcp-and-github-copilot\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/github.blog\/ai-and-ml\/github-copilot\/how-to-debug-a-web-app-with-playwright-mcp-and-github-copilot\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/github.blog\/ai-and-ml\/github-copilot\/how-to-debug-a-web-app-with-playwright-mcp-and-github-copilot\/#primaryimage","url":"https:\/\/github.blog\/wp-content\/uploads\/2025\/08\/copilot-wallpaper-generic-logo-header.png?fit=1920%2C1080","contentUrl":"https:\/\/github.blog\/wp-content\/uploads\/2025\/08\/copilot-wallpaper-generic-logo-header.png?fit=1920%2C1080","width":1920,"height":1080,"caption":"A decorative header image with GitHub Copilot logo."},{"@type":"BreadcrumbList","@id":"https:\/\/github.blog\/ai-and-ml\/github-copilot\/how-to-debug-a-web-app-with-playwright-mcp-and-github-copilot\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/github.blog\/"},{"@type":"ListItem","position":2,"name":"AI &amp; ML","item":"https:\/\/github.blog\/ai-and-ml\/"},{"@type":"ListItem","position":3,"name":"GitHub Copilot","item":"https:\/\/github.blog\/ai-and-ml\/github-copilot\/"},{"@type":"ListItem","position":4,"name":"How to debug a web app with Playwright MCP and GitHub Copilot"}]},{"@type":"WebSite","@id":"https:\/\/github.blog\/#website","url":"https:\/\/github.blog\/","name":"The GitHub Blog","description":"Updates, ideas, and inspiration from GitHub to help developers build and design software.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/github.blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/github.blog\/#\/schema\/person\/e0e3ce7aee5bfe3284c624b7524e3948","name":"Christopher Harrison","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/e196df5ac94dde39f50b563ac78bdfff24d307a199c2add2e3689e74e5d6a8da?s=96&d=mm&r=gcfe3e7011acd5f1b71e1022b178db9e1","url":"https:\/\/secure.gravatar.com\/avatar\/e196df5ac94dde39f50b563ac78bdfff24d307a199c2add2e3689e74e5d6a8da?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e196df5ac94dde39f50b563ac78bdfff24d307a199c2add2e3689e74e5d6a8da?s=96&d=mm&r=g","caption":"Christopher Harrison"},"description":"Senior Developer Advocate, GitHub","url":"https:\/\/github.blog\/author\/geektrainer\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/github.blog\/wp-content\/uploads\/2025\/08\/copilot-wallpaper-generic-logo-header.png?fit=1920%2C1080","jetpack_shortlink":"https:\/\/wp.me\/pamS32-nzG","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/github.blog\/wp-json\/wp\/v2\/posts\/90624","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/github.blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/github.blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/github.blog\/wp-json\/wp\/v2\/users\/2279"}],"replies":[{"embeddable":true,"href":"https:\/\/github.blog\/wp-json\/wp\/v2\/comments?post=90624"}],"version-history":[{"count":2,"href":"https:\/\/github.blog\/wp-json\/wp\/v2\/posts\/90624\/revisions"}],"predecessor-version":[{"id":90627,"href":"https:\/\/github.blog\/wp-json\/wp\/v2\/posts\/90624\/revisions\/90627"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/github.blog\/wp-json\/wp\/v2\/media\/90561"}],"wp:attachment":[{"href":"https:\/\/github.blog\/wp-json\/wp\/v2\/media?parent=90624"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/github.blog\/wp-json\/wp\/v2\/categories?post=90624"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/github.blog\/wp-json\/wp\/v2\/tags?post=90624"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/github.blog\/wp-json\/wp\/v2\/coauthors?post=90624"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}