[{"data":1,"prerenderedAt":288},["ShallowReactive",2],{"blog-article-/blog/automating-form-submissions-with-playwright-mcp-and-a-prompt-file":3,"blog-surround-/blog/automating-form-submissions-with-playwright-mcp-and-a-prompt-file":279},{"id":4,"title":5,"body":6,"canonical":265,"date":266,"description":267,"extension":106,"featured":268,"image":269,"meta":270,"navigation":124,"ogImage":269,"path":271,"provider":269,"published":124,"seo":272,"stem":273,"tags":274,"url":269,"__hash__":278},"blog/blog/automating-form-submissions-with-playwright-mcp-and-a-prompt-file.md","Automating Form Submissions with Playwright MCP and a Prompt file",{"type":7,"value":8,"toc":255},"minimark",[9,13,21,29,42,45,48,53,60,67,75,79,82,96,101,179,182,186,189,192,196,199,210,219,223,226,229,233,251],[10,11,12],"p",{},"Have you ever wished you could automate browser tasks — like filling out a form or uploading a file — without writing a full-blown test script? What if all you needed was a plain-text prompt written in natural language?",[10,14,15,16,20],{},"Well now you can with the ",[17,18,19],"strong",{},"Playwright's MCP (Model Context Protocol) server",".",[10,22,23,24,28],{},"With just a ",[25,26,27],"code",{},".prompt.md"," file in VS Code, I was able to:",[30,31,32,36,39],"ul",{},[33,34,35],"li",{},"Fill out a form",[33,37,38],{},"Upload an image",[33,40,41],{},"Submit it — all hands-free",[10,43,44],{},"And I can re-run it any time and easily update the prompt with a different title, date and guest for my event. No rewriting scripts. No code needed.",[10,46,47],{},"Let me show you how it works.",[49,50,52],"h2",{"id":51},"what-is-mcp","What is MCP?",[10,54,55,56,59],{},"MCP stands for ",[17,57,58],{},"Model Context Protocol",", and it's a new way to give LLMs tools to do things like automate your browser and fill in forms.",[10,61,62,63,66],{},"Instead of writing JavaScript or TypeScript to control the browser, you write a ",[17,64,65],{},"prompt"," — just like you would when chatting with an AI assistant. Behind the scenes the LLM (large language model) interprets your prompt and uses the Playwright MCP server to automate your browser.",[10,68,69,70,74],{},"You describe ",[71,72,73],"em",{},"what"," you want to do, and the MCP server opens a browser and navigates, clicks, types and even uploads an image.",[49,76,78],{"id":77},"the-use-case-form-file-upload","The Use Case: Form + File Upload",[10,80,81],{},"Here's what I wanted to automate:",[30,83,84,87,90,93],{},[33,85,86],{},"Open a webpage with a form I need to fill in every so often",[33,88,89],{},"Fill in fields like title, date, social links",[33,91,92],{},"Upload a local image file",[33,94,95],{},"Click submit",[97,98,100],"h3",{"id":99},"i-wrote-a-promptmd-like-this","I wrote a .prompt.md like this:",[102,103,108],"pre",{"className":104,"code":105,"language":106,"meta":107,"style":107},"language-md shiki shiki-themes github-light github-dark","Navigate to https://example.com/form\n\n1. Show: playwright live\n2. Date: 15 July\n3. Time: 1:00 AM\n4. Topic: Playwright Live - Latest updates on Playwright MCP + Live Demo ....\n13. image file `./selfie.png` in the upload section. Click the Submit button when done.\n","md","",[25,109,110,119,126,136,145,154,163],{"__ignoreMap":107},[111,112,115],"span",{"class":113,"line":114},"line",1,[111,116,118],{"class":117},"sVt8B","Navigate to https://example.com/form\n",[111,120,122],{"class":113,"line":121},2,[111,123,125],{"emptyLinePlaceholder":124},true,"\n",[111,127,129,133],{"class":113,"line":128},3,[111,130,132],{"class":131},"s4XuR","1.",[111,134,135],{"class":117}," Show: playwright live\n",[111,137,139,142],{"class":113,"line":138},4,[111,140,141],{"class":131},"2.",[111,143,144],{"class":117}," Date: 15 July\n",[111,146,148,151],{"class":113,"line":147},5,[111,149,150],{"class":131},"3.",[111,152,153],{"class":117}," Time: 1:00 AM\n",[111,155,157,160],{"class":113,"line":156},6,[111,158,159],{"class":131},"4.",[111,161,162],{"class":117}," Topic: Playwright Live - Latest updates on Playwright MCP + Live Demo ....\n",[111,164,166,169,172,176],{"class":113,"line":165},7,[111,167,168],{"class":131},"13.",[111,170,171],{"class":117}," image file ",[111,173,175],{"class":174},"sj4cs","`./selfie.png`",[111,177,178],{"class":117}," in the upload section. Click the Submit button when done.\n",[10,180,181],{},"That's it.",[49,183,185],{"id":184},"how-it-works","How It Works",[10,187,188],{},"I ran the prompt using the Playwright MCP server by clicking the play button in VS Code.",[10,190,191],{},"And just like that — the browser opened, filled out the form, uploaded the file, and submitted it for me. All powered by the LLM interpreting the prompt and interacting with the page in real time.",[49,193,195],{"id":194},"easily-repeatable-and-editable","Easily Repeatable and Editable",[10,197,198],{},"Here's what makes this workflow magical:",[30,200,201,204,207],{},[33,202,203],{},"✅ I can re-run the same flow anytime.",[33,205,206],{},"✏️ I can update the form values by editing a markdown file",[33,208,209],{},"🤖 It's fast to prototype browser interactions with natural language",[211,212],"iframe",{"width":213,"height":214,"src":215,"title":216,"frameBorder":217,"allow":218,"allowFullScreen":124},560,315,"https://www.youtube.com/embed/NSpCfRDS7vo","Automate Form Filling with a Prompt file and the Playwright MCP","0","accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",[49,220,222],{"id":221},"whats-next","What's Next?",[10,224,225],{},"This is just scratching the surface of what the Playwright + MCP can do. I'll be exploring more of these use cases soon.",[10,227,228],{},"If you're interested in prompt-driven browser automation or AI + testing/dev tooling, follow along and let me know what you think in the comments. Would love to know what you automate.",[49,230,232],{"id":231},"links","Links",[30,234,235,244],{},[33,236,237],{},[238,239,243],"a",{"href":240,"rel":241},"https://github.com/microsoft/playwright-mcp",[242],"nofollow","Playwright MCP",[33,245,246],{},[238,247,250],{"href":248,"rel":249},"https://youtu.be/cifdyJkKs04",[242],"Set up Playwright MCP",[252,253,254],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}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);}",{"title":107,"searchDepth":121,"depth":121,"links":256},[257,258,261,262,263,264],{"id":51,"depth":121,"text":52},{"id":77,"depth":121,"text":78,"children":259},[260],{"id":99,"depth":128,"text":100},{"id":184,"depth":121,"text":185},{"id":194,"depth":121,"text":195},{"id":221,"depth":121,"text":222},{"id":231,"depth":121,"text":232},"https://dev.to/debs_obrien/automating-form-submissions-with-playwright-mcp-and-a-prompt-file-43c3","2025-07-10","Have you ever wished you could automate browser tasks — like filling out a form or uploading a file — without writing a full-blown test script? What if all you needed was a plain-text prompt written in natural language? Well now you can with Playwright's MCP server.",false,null,{},"/blog/automating-form-submissions-with-playwright-mcp-and-a-prompt-file",{"title":5,"description":267},"blog/automating-form-submissions-with-playwright-mcp-and-a-prompt-file",[275,276,277],"playwright","mcp","ai","kAjI5AqUrxmTyIpHWS-iDjbdvWaAjvf1w4Y-7ee3p90",[280,284],{"title":281,"path":282,"stem":283,"children":-1},"Testing in a Logged-In State with the Playwright MCP Browser Extension","/blog/testing-logged-in-state-playwright-mcp-browser-extension","blog/testing-logged-in-state-playwright-mcp-browser-extension",{"title":285,"path":286,"stem":287,"children":-1},"Building Your First MCP Server: A Beginners Tutorial","/blog/building-your-first-mcp-server-a-beginners-tutorial","blog/building-your-first-mcp-server-a-beginners-tutorial",1790839746293]