[{"data":1,"prerenderedAt":569},["ShallowReactive",2],{"blog-article-/blog/generate-playwright-tests-without-code-access":3,"blog-surround-/blog/generate-playwright-tests-without-code-access":560},{"id":4,"title":5,"body":6,"canonical":531,"date":546,"description":547,"extension":67,"featured":248,"image":548,"meta":549,"navigation":248,"ogImage":548,"path":551,"provider":548,"published":248,"seo":552,"stem":553,"tags":554,"url":548,"__hash__":559},"blog/blog/generate-playwright-tests-without-code-access.md","Generate Playwright tests without code access using MCP and Copilot",{"type":7,"value":8,"toc":538},"minimark",[9,13,21,24,27,32,35,46,50,62,132,135,169,172,176,183,188,208,211,215,218,470,473,484,487,490,504,514,517,520,523,534],[10,11,12],"p",{},"Getting GitHub Copilot to write end-to-end tests usually requires giving it access to your source code. That’s because Copilot on its own can’t open a browser, explore a webpage, or understand how a UI behaves, so it lacks the context needed to generate accurate tests.",[10,14,15,16,20],{},"But that changes with ",[17,18,19],"strong",{},"Playwright MCP (Model Context Protocol)",".",[10,22,23],{},"An MCP acts as a bridge between Copilot and the real browser, allowing it to open websites, interact with UI elements, and take snapshots of the page. This unlocks a whole new capability: generating Playwright tests from natural language instructions, even when you don’t have access to the application’s codebase.",[10,25,26],{},"In this post, we’ll show how Copilot, with the help of the Playwright MCP, can generate, run, and validate E2E tests just by telling it what you want in plain English and with no access to the source code.",[28,29,31],"h2",{"id":30},"why-not-just-use-copilot-alone","🧠 Why Not Just Use Copilot Alone?",[10,33,34],{},"GitHub Copilot is powerful—but it typically works best when it has access to your source code. If you're only interacting with a web app in the browser and need to generate tests, Copilot doesn’t have the context it needs.",[10,36,37,38,41,42,45],{},"That's where the ",[17,39,40],{},"Model Context Protocol (MCP)"," changes the game. It gives Copilot the ability to interact with the browser through a real-time interface, gather contextual data like ",[17,43,44],{},"ARIA snapshots",", and perform UI actions that can be converted into executable Playwright tests.",[28,47,49],{"id":48},"️-setting-up-the-test-prompt","🛠️ Setting Up the Test Prompt",[10,51,52,53,56,57,61],{},"We start with a custom ",[17,54,55],{},"test generation prompt"," inside a ",[58,59,60],"code",{},".github/prompts/generate.prompt.md"," file. It instructs Copilot to act as a test generator and use all available tools through the MCP agent.",[63,64,69],"pre",{"className":65,"code":66,"language":67,"meta":68,"style":68},"language-md shiki shiki-themes github-light github-dark","- You are a playwright test generator.\n- You are given a scenario and you need to generate a playwright test for it.\n- DO NOT generate test code based on the scenario alone. \n- DO run steps one by one using the tools provided by the Playwright MCP.\n- Only after all steps are completed, emit a Playwright TypeScript test that uses @playwright/test based on message history\n- Save generated test file in the tests directory\n- Execute the test file and iterate until the test passes\n","md","",[58,70,71,84,92,100,108,116,124],{"__ignoreMap":68},[72,73,76,80],"span",{"class":74,"line":75},"line",1,[72,77,79],{"class":78},"s4XuR","-",[72,81,83],{"class":82},"sVt8B"," You are a playwright test generator.\n",[72,85,87,89],{"class":74,"line":86},2,[72,88,79],{"class":78},[72,90,91],{"class":82}," You are given a scenario and you need to generate a playwright test for it.\n",[72,93,95,97],{"class":74,"line":94},3,[72,96,79],{"class":78},[72,98,99],{"class":82}," DO NOT generate test code based on the scenario alone. \n",[72,101,103,105],{"class":74,"line":102},4,[72,104,79],{"class":78},[72,106,107],{"class":82}," DO run steps one by one using the tools provided by the Playwright MCP.\n",[72,109,111,113],{"class":74,"line":110},5,[72,112,79],{"class":78},[72,114,115],{"class":82}," Only after all steps are completed, emit a Playwright TypeScript test that uses @playwright/test based on message history\n",[72,117,119,121],{"class":74,"line":118},6,[72,120,79],{"class":78},[72,122,123],{"class":82}," Save generated test file in the tests directory\n",[72,125,127,129],{"class":74,"line":126},7,[72,128,79],{"class":78},[72,130,131],{"class":82}," Execute the test file and iterate until the test passes\n",[10,133,134],{},"Here’s a sample instruction we give to Copilot in plain English:",[63,136,138],{"className":65,"code":137,"language":67,"meta":68,"style":68},"Generate a Playwright test for the following scenario:\n1. Navigate to https://debs-obrien.github.io/playwright-movies-app\n2. search for 'Garfield'\n3. verify the movie is in the list\n",[58,139,140,145,153,161],{"__ignoreMap":68},[72,141,142],{"class":74,"line":75},[72,143,144],{"class":82},"Generate a Playwright test for the following scenario:\n",[72,146,147,150],{"class":74,"line":86},[72,148,149],{"class":78},"1.",[72,151,152],{"class":82}," Navigate to https://debs-obrien.github.io/playwright-movies-app\n",[72,154,155,158],{"class":74,"line":94},[72,156,157],{"class":78},"2.",[72,159,160],{"class":82}," search for 'Garfield'\n",[72,162,163,166],{"class":74,"line":102},[72,164,165],{"class":78},"3.",[72,167,168],{"class":82}," verify the movie is in the list\n",[10,170,171],{},"From here, Copilot and MCP take over.",[28,173,175],{"id":174},"from-browser-interaction-to-test-code","🌐 From Browser Interaction to Test Code",[10,177,178,179,182],{},"Once the command is triggered in Copilot Chat (using ",[17,180,181],{},"Cloud 3.5 Sonnet"," in this example), the MCP spins up a browser session and starts executing the steps.",[184,185,187],"h3",{"id":186},"key-highlights","Key highlights:",[189,190,191,195,202,205],"ul",{},[192,193,194],"li",{},"It navigates to the given URL using the Playwright MCP server.",[192,196,197,198,201],{},"It encounters a challenge locating the search field, so it uses a ",[17,199,200],{},"page snapshot"," to analyze the DOM.",[192,203,204],{},"It identifies the right input, types “Garfield,” and proceeds.",[192,206,207],{},"Finally, it auto-generates a Playwright test using those interactions.",[10,209,210],{},"The MCP provides Copilot with rich contextual insight about the page, like a vision system for your LLM.",[28,212,214],{"id":213},"validating-the-test","✅ Validating the Test",[10,216,217],{},"Because our prompt included test validation, Copilot runs the test it just wrote, and it passes ✅",[63,219,223],{"className":220,"code":221,"language":222,"meta":68,"style":68},"language-ts shiki shiki-themes github-light github-dark","import { test, expect } from '@playwright/test';\n\ntest('Movie search - Search for a movie by title', async ({ page }) => {\n  // Navigate to the movies app\n  await page.goto('https://debs-obrien.github.io/playwright-movies-app');\n\n  // Click on the search button to activate the search input\n  await page.getByRole('search').click();\n  \n  // Type 'Garfield' into the search input and press Enter\n  await page.getByRole('textbox', { name: 'Search Input' }).fill('Garfield');\n  await page.getByRole('textbox', { name: 'Search Input' }).press('Enter');\n\n  // Verify that 'The Garfield Movie' appears in the search results\n  await expect(page.getByRole('heading', { name: 'The Garfield Movie', level: 2 })).toBeVisible();\n});\n","ts",[58,224,225,244,250,283,289,308,312,317,341,347,353,386,415,420,426,464],{"__ignoreMap":68},[72,226,227,231,234,237,241],{"class":74,"line":75},[72,228,230],{"class":229},"szBVR","import",[72,232,233],{"class":82}," { test, expect } ",[72,235,236],{"class":229},"from",[72,238,240],{"class":239},"sZZnC"," '@playwright/test'",[72,242,243],{"class":82},";\n",[72,245,246],{"class":74,"line":86},[72,247,249],{"emptyLinePlaceholder":248},true,"\n",[72,251,252,256,259,262,265,268,271,274,277,280],{"class":74,"line":94},[72,253,255],{"class":254},"sScJk","test",[72,257,258],{"class":82},"(",[72,260,261],{"class":239},"'Movie search - Search for a movie by title'",[72,263,264],{"class":82},", ",[72,266,267],{"class":229},"async",[72,269,270],{"class":82}," ({ ",[72,272,273],{"class":78},"page",[72,275,276],{"class":82}," }) ",[72,278,279],{"class":229},"=>",[72,281,282],{"class":82}," {\n",[72,284,285],{"class":74,"line":102},[72,286,288],{"class":287},"sJ8bj","  // Navigate to the movies app\n",[72,290,291,294,297,300,302,305],{"class":74,"line":110},[72,292,293],{"class":229},"  await",[72,295,296],{"class":82}," page.",[72,298,299],{"class":254},"goto",[72,301,258],{"class":82},[72,303,304],{"class":239},"'https://debs-obrien.github.io/playwright-movies-app'",[72,306,307],{"class":82},");\n",[72,309,310],{"class":74,"line":118},[72,311,249],{"emptyLinePlaceholder":248},[72,313,314],{"class":74,"line":126},[72,315,316],{"class":287},"  // Click on the search button to activate the search input\n",[72,318,320,322,324,327,329,332,335,338],{"class":74,"line":319},8,[72,321,293],{"class":229},[72,323,296],{"class":82},[72,325,326],{"class":254},"getByRole",[72,328,258],{"class":82},[72,330,331],{"class":239},"'search'",[72,333,334],{"class":82},").",[72,336,337],{"class":254},"click",[72,339,340],{"class":82},"();\n",[72,342,344],{"class":74,"line":343},9,[72,345,346],{"class":82},"  \n",[72,348,350],{"class":74,"line":349},10,[72,351,352],{"class":287},"  // Type 'Garfield' into the search input and press Enter\n",[72,354,356,358,360,362,364,367,370,373,376,379,381,384],{"class":74,"line":355},11,[72,357,293],{"class":229},[72,359,296],{"class":82},[72,361,326],{"class":254},[72,363,258],{"class":82},[72,365,366],{"class":239},"'textbox'",[72,368,369],{"class":82},", { name: ",[72,371,372],{"class":239},"'Search Input'",[72,374,375],{"class":82}," }).",[72,377,378],{"class":254},"fill",[72,380,258],{"class":82},[72,382,383],{"class":239},"'Garfield'",[72,385,307],{"class":82},[72,387,389,391,393,395,397,399,401,403,405,408,410,413],{"class":74,"line":388},12,[72,390,293],{"class":229},[72,392,296],{"class":82},[72,394,326],{"class":254},[72,396,258],{"class":82},[72,398,366],{"class":239},[72,400,369],{"class":82},[72,402,372],{"class":239},[72,404,375],{"class":82},[72,406,407],{"class":254},"press",[72,409,258],{"class":82},[72,411,412],{"class":239},"'Enter'",[72,414,307],{"class":82},[72,416,418],{"class":74,"line":417},13,[72,419,249],{"emptyLinePlaceholder":248},[72,421,423],{"class":74,"line":422},14,[72,424,425],{"class":287},"  // Verify that 'The Garfield Movie' appears in the search results\n",[72,427,429,431,434,437,439,441,444,446,449,452,456,459,462],{"class":74,"line":428},15,[72,430,293],{"class":229},[72,432,433],{"class":254}," expect",[72,435,436],{"class":82},"(page.",[72,438,326],{"class":254},[72,440,258],{"class":82},[72,442,443],{"class":239},"'heading'",[72,445,369],{"class":82},[72,447,448],{"class":239},"'The Garfield Movie'",[72,450,451],{"class":82},", level: ",[72,453,455],{"class":454},"sj4cs","2",[72,457,458],{"class":82}," })).",[72,460,461],{"class":254},"toBeVisible",[72,463,340],{"class":82},[72,465,467],{"class":74,"line":466},16,[72,468,469],{"class":82},"});\n",[10,471,472],{},"🔁 What’s Next?\nFrom here, you can:",[189,474,475,478,481],{},[192,476,477],{},"Review or refine the test",[192,479,480],{},"Use GitHub MCP to open a pull request",[192,482,483],{},"Merge it into your test suite",[10,485,486],{},"And remember this all happened without needing access to the codebase.",[10,488,489],{},"💡 Why This Matters\nThis workflow is a major win for:",[189,491,492,495,498,501],{},[192,493,494],{},"QA testers in black-box environments",[192,496,497],{},"Agencies testing external or client-owned websites",[192,499,500],{},"Regulated industries with restricted code access",[192,502,503],{},"Developers wanting to speed up test creation with natural language",[10,505,506,507],{},"🎬 Watch It in Action\nWant to see the full demo? Watch the YouTube video and experience how easy it is to generate reliable Playwright tests with the Playwright MCP and Copilot: ",[508,509,513],"a",{"href":510,"rel":511},"https://youtu.be/AaCj939XIQ4",[512],"nofollow","Watch the Demo",[10,515,516],{},"🎉 Final Thoughts\nThe combination of Playwright, Copilot, and the Model Context Protocol (MCP) unlocks a new level of intelligent automation.",[10,518,519],{},"Go give it a try. Happy testing!",[521,522],"hr",{},[10,524,525],{},[526,527,528,529,20],"em",{},"This post was originally published on ",[508,530,533],{"href":531,"rel":532},"https://dev.to/debs_obrien/generate-playwright-tests-without-code-access-using-mcp-and-copilot-2m05",[512],"DEV.to",[535,536,537],"style",{},"html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":68,"searchDepth":86,"depth":86,"links":539},[540,541,542,545],{"id":30,"depth":86,"text":31},{"id":48,"depth":86,"text":49},{"id":174,"depth":86,"text":175,"children":543},[544],{"id":186,"depth":94,"text":187},{"id":213,"depth":86,"text":214},"2025-06-18","Discover how to use MCP (Model Context Protocol) and GitHub Copilot to generate Playwright tests without needing access to your application's source code, perfect for testing external sites or black-box testing scenarios.",null,{"loading":550},"eager","/blog/generate-playwright-tests-without-code-access",{"title":5,"description":547},"blog/generate-playwright-tests-without-code-access",[555,556,557,558],"playwright","testing","mcp","ai","8-ntqna0zEMn7BEbT9wkybLxaQ6F3Fi9KStmj1dqamo",[561,565],{"title":562,"path":563,"stem":564,"children":-1},"Vibe Coding with Copilot and Gemini 2.5 pro - Simplifying My Blog with AI-Assisted Refactoring","/blog/vibe-coding-with-copilot-and-gemini","blog/vibe-coding-with-copilot-and-gemini",{"title":566,"path":567,"stem":568,"children":-1},"Letting Playwright MCP explore your site and write your tests","/blog/letting-playwright-mcp-explore-your-site","blog/letting-playwright-mcp-explore-your-site",1790839746386]