[{"data":1,"prerenderedAt":244},["ShallowReactive",2],{"blog-article-/blog/automate-your-screenshot-documentation-with-playwright-mcp":3,"blog-surround-/blog/automate-your-screenshot-documentation-with-playwright-mcp":235},{"id":4,"title":5,"body":6,"canonical":219,"date":220,"description":221,"extension":222,"featured":223,"image":224,"meta":225,"navigation":226,"ogImage":224,"path":227,"provider":224,"published":226,"seo":228,"stem":229,"tags":230,"url":224,"__hash__":234},"blog/blog/automate-your-screenshot-documentation-with-playwright-mcp.md","Automate Your Screenshot Documentation with Playwright MCP",{"type":7,"value":8,"toc":202},"minimark",[9,13,16,21,24,27,30,34,45,48,59,62,66,69,88,93,100,121,124,128,131,134,137,141,145,148,152,155,159,162,166,169,173,176,180,198],[10,11,12],"p",{},"Creating visual documentation has always been a time-consuming process. As developers and technical writers, we've all experienced the tedious cycle of manually taking screenshots, adding highlights, organizing files, and updating documentation whenever our applications change.",[10,14,15],{},"What if I told you there's a way to automate this entire workflow with a single prompt?",[17,18,20],"h2",{"id":19},"the-problem-with-manual-screenshot-documentation","The Problem with Manual Screenshot Documentation",[10,22,23],{},"Traditional documentation workflows involve:",[10,25,26],{},"• Manual navigation through your application\n• Individual screenshots at each step\n• Post-processing to add highlights and annotations\n• File organization and naming\n• Repetitive updates when features change",[10,28,29],{},"This process can take time for a simple user flow, and it's often the reason documentation gets outdated quickly.",[17,31,33],{"id":32},"enter-playwright-mcp-server","Enter Playwright MCP Server",[10,35,36,37,44],{},"The ",[38,39,43],"a",{"href":40,"rel":41},"https://github.com/microsoft/playwright-mcp",[42],"nofollow","Playwright MCP (Model Context Protocol)"," server changes everything. With one simple prompt, you can generate complete visual documentation automatically.",[10,46,47],{},"Here's a simple prompt as an example:",[49,50,55],"pre",{"className":51,"code":53,"language":54},[52],"language-text","Navigate to the website and fill in the search term for movie. \nAs you interact with each element, add a red CSS border around \nthe element and take a screenshot.\n","text",[56,57,53],"code",{"__ignoreMap":58},"",[10,60,61],{},"That's it. No complex setup, no scripting required.",[17,63,65],{"id":64},"how-it-works","How It Works",[10,67,68],{},"The Playwright MCP server:",[70,71,72,76,79,82,85],"ol",{},[73,74,75],"li",{},"Navigates to your specified website",[73,77,78],{},"Interacts with elements step by step",[73,80,81],{},"Adds CSS highlighting to show user interactions",[73,83,84],{},"Captures screenshots automatically at each step",[73,86,87],{},"Saves organized files with descriptive names",[89,90,92],"h3",{"id":91},"the-technical-magic","The Technical Magic",[10,94,95,96,99],{},"Behind the scenes, Playwright MCP uses the ",[56,97,98],{},"evaluate"," JavaScript tool to inject CSS directly into the page:",[49,101,105],{"className":102,"code":103,"language":104,"meta":58,"style":58},"language-javascript shiki shiki-themes github-light github-dark","element.style.border = '3px solid red';\nelement.style.borderRadius = '5px';\n","javascript",[56,106,107,115],{"__ignoreMap":58},[108,109,112],"span",{"class":110,"line":111},"line",1,[108,113,114],{},"element.style.border = '3px solid red';\n",[108,116,118],{"class":110,"line":117},2,[108,119,120],{},"element.style.borderRadius = '5px';\n",[10,122,123],{},"This creates clear visual indicators of where users should focus their attention.",[17,125,127],{"id":126},"real-world-results","Real-World Results",[10,129,130],{},"In the demonstration, the automated process generated:",[10,132,133],{},"• Initial page screenshot - The starting state\n• Search element highlighted - Shows where to find the search\n• Search input highlighted - Indicates the active input field\n• Final search results - The completed user journey",[10,135,136],{},"Each screenshot is automatically saved with descriptive filenames, ready to drop into your documentation.",[17,138,140],{"id":139},"perfect-use-cases","Perfect Use Cases",[89,142,144],{"id":143},"workshop-documentation","Workshop Documentation",[10,146,147],{},"Create step-by-step visual guides for hands-on workshops without spending hours on manual screenshots.",[89,149,151],{"id":150},"user-flow-testing","User Flow Testing",[10,153,154],{},"Document complex user journeys for QA teams with consistent visual markers.",[89,156,158],{"id":157},"tutorial-creation","Tutorial Creation",[10,160,161],{},"Generate professional-looking tutorial assets that highlight exactly where users should click.",[89,163,165],{"id":164},"product-documentation","Product Documentation",[10,167,168],{},"Keep your product docs up-to-date with automated visual guides that regenerate when features change.",[17,170,172],{"id":171},"conclusion","Conclusion",[10,174,175],{},"Playwright MCP transforms documentation from a time-consuming chore into an automated process. With one simple prompt, you can generate professional visual guides that would traditionally take hours to create manually.",[17,177,179],{"id":178},"useful-links","Useful Links",[10,181,182,183,187,188,187,193],{},"• ",[38,184,186],{"href":40,"rel":185},[42],"Playwright MCP","\n• ",[38,189,192],{"href":190,"rel":191},"https://youtu.be/uE0r51pneSA",[42],"Playwright MCP + Browser Extension",[38,194,197],{"href":195,"rel":196},"https://youtu.be/exsikHe20D8",[42],"Install Playwright MCP",[199,200,201],"style",{},"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":58,"searchDepth":117,"depth":117,"links":203},[204,205,206,210,211,217,218],{"id":19,"depth":117,"text":20},{"id":32,"depth":117,"text":33},{"id":64,"depth":117,"text":65,"children":207},[208],{"id":91,"depth":209,"text":92},3,{"id":126,"depth":117,"text":127},{"id":139,"depth":117,"text":140,"children":212},[213,214,215,216],{"id":143,"depth":209,"text":144},{"id":150,"depth":209,"text":151},{"id":157,"depth":209,"text":158},{"id":164,"depth":209,"text":165},{"id":171,"depth":117,"text":172},{"id":178,"depth":117,"text":179},"https://dev.to/debs_obrien/automate-your-screenshot-documentation-with-playwright-mcp-3gk4","2024-09-03","Creating visual documentation has always been a time-consuming process. What if I told you there's a way to automate this entire workflow with a single prompt using Playwright MCP?","md",false,null,{},true,"/blog/automate-your-screenshot-documentation-with-playwright-mcp",{"title":5,"description":221},"blog/automate-your-screenshot-documentation-with-playwright-mcp",[231,232,233],"playwright","mcp","ai","l_CfI99K6e-ZKqzV-uAAX7JJQ2T_T3Gql1RoqfE7It0",[236,240],{"title":237,"path":238,"stem":239,"children":-1},"Playwright Agents Planner, Generator, and Healer in Action","/blog/playwright-agents-planner-generator-and-healer-in-action","blog/playwright-agents-planner-generator-and-healer-in-action",{"title":241,"path":242,"stem":243,"children":-1},"Taking my babies to a conference","/blog/brought-my-babies-to-a-conference","blog/brought-my-babies-to-a-conference",1790839746467]