{"id":78498,"date":"2026-03-23T18:38:49","date_gmt":"2026-03-23T13:08:49","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=78498"},"modified":"2026-03-23T21:56:02","modified_gmt":"2026-03-23T16:26:02","slug":"playwright-ai-agents-autonomous-planning-scripting-and-self-healing-tests","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/playwright-ai-agents-autonomous-planning-scripting-and-self-healing-tests\/","title":{"rendered":"Playwright AI Agents: Autonomous Planning, Scripting and Self-Healing Tests"},"content":{"rendered":"<p><strong>Introduction<\/strong><br \/>\nTest automation is a core part of software development. Tools like Playwright make end-to-end testing easier with reliable browser automation, smart waits, and strong support for modern web apps.<\/p>\n<p>But even with these tools, a lot of work still feels repetitive. Engineers spend significant time on:<\/p>\n<p>Planning what to test<br \/>\nWriting test scripts<br \/>\nFixing broken tests<\/p>\n<p>In my previous <a href=\"https:\/\/www.tothenew.com\/blog\/ai-powered-test-automation-with-playwright-mcp-smarter-faster-resilient\/\">article<\/a>, I discussed Playwright MCP (Model Context Protocol) and how it lets AI tools interact with Playwright.<\/p>\n<p>Now, things get more interesting with <strong>Playwright AI Agents<\/strong>.<\/p>\n<p><strong>The Problem with Traditional Test Automation<\/strong><br \/>\nEven with frameworks like Playwright, automation isn\u2019t fully automated. A large part still depends on manual effort.<\/p>\n<p>Planning: Understanding the application, exploring flows, and identifying edge cases takes time.<\/p>\n<p>Writing Tests: Creating locators, page objects, and end-to-end flows becomes complex, especially for large applications with hundreds of test cases.<\/p>\n<p>Maintenance: This is the most frustrating part. Small UI or locator changes break tests, leading to constant debugging and fixes.<\/p>\n<p>In short, test automation still involves a lot of repetitive manual work \u2014 and that\u2019s where AI agents can help.<\/p>\n<p><strong>What are Playwright AI Agents?<\/strong><br \/>\nPlaywright AI Agents are AI-powered helpers that assist across the entire testing lifecycle.<\/p>\n<p>They can:<\/p>\n<p>Plan test scenarios<br \/>\nGenerate test scripts<br \/>\nFix failing tests<br \/>\nThink of them as a smart assistant helping write and maintain tests.<\/p>\n<p>How Playwright AI Agents Work<br \/>\nPlaywright provides three built-in agents:<\/p>\n<p><strong>1. Planner Agent<\/strong><br \/>\nExplores the app, understands flows, and creates structured test plans.<\/p>\n<p><strong>2. Generator Agent<\/strong><br \/>\nConverts those plans into executable Playwright test scripts.<\/p>\n<p><strong>3. Healer Agent<\/strong><br \/>\nFixes failing tests by detecting UI changes and updating locators automatically.<\/p>\n<p>Together, they follow a simple flow:<br \/>\nPlanner \u2192 Generator \u2192 Healer<\/p>\n<p><strong>Getting Started with Playwright AI Agents (Using Copilot)<\/strong><\/p>\n<p>Let\u2019s make this practical and see how you can use AI (with Copilot) in your Playwright project.<\/p>\n<p>Playwright integrates AI agents into your workflow, helping with planning, generating, and fixing tests.<\/p>\n<p><strong>Adding Playwright AI Agents to Your Project<\/strong><br \/>\nOnce your basic Playwright project is set up, the next step is to enable Playwright\u2019s built-in AI agents. To add these agents to your project, you just need to run:<\/p>\n<p>npx playwright init-agents &#8211;loop=vscode<\/p>\n<p>After running this command, you\u2019ll notice a new .github\/ folder added to your project. Inside it, there\u2019s an agents\/ folder that contains definitions for the three agents \u2014 planner, generator, and healer.<\/p>\n<p>These files are essentially configuration + instructions that define how each agent works. They include:<\/p>\n<p>Rules for how tasks should be performed<br \/>\nGuidelines the agent should follow<br \/>\nMCP tools that allow agents to interact with your application and code<br \/>\nFor example:<\/p>\n<p>The planner uses these tools to explore the application and understand flows<br \/>\nThe generator uses them to write and update test files<br \/>\nThe healer relies on them to debug and fix failing tests<\/p>\n<div id=\"attachment_78936\" style=\"width: 310px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-78936\" decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-78936\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2026\/03\/AI-Agents-300x117.png\" alt=\"AI Agents\" width=\"300\" height=\"117\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2026\/03\/AI-Agents-300x117.png 300w, \/blog\/wp-ttn-blog\/uploads\/2026\/03\/AI-Agents.png 592w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><p id=\"caption-attachment-78936\" class=\"wp-caption-text\">AI Agents<\/p><\/div>\n<p>At this point, it\u2019s important to understand that these agent definition files are not fixed or read-only.<\/p>\n<p>You can customize them based on your project needs. Think of them as guidelines that control how each agent behaves \u2014 and you\u2019re free to tweak them.<\/p>\n<p>For example:<\/p>\n<p>If you\u2019re working on an existing project, you can ask Copilot (in Agent mode) to analyze your current codebase and update these rules accordingly. This helps the agents align with your existing structure, patterns, and conventions.<br \/>\nIf you\u2019re starting a new project, you can define your own rules from the beginning.<\/p>\n<p>For instance, you might want:<\/p>\n<p>&#8211; Specific locator strategies (like preferring `data-testid`)<br \/>\n&#8211; A particular folder structure<br \/>\n&#8211; Custom coding standards for test files<\/p>\n<p>By updating these rules, you ensure that the Planner, Generator, and Healer agents work exactly the way your project requires.<\/p>\n<p><strong>AI Agents in Copilot Chat<\/strong><br \/>\nOnce everything is set up, open the Copilot chat panel and check the Agent dropdown.<\/p>\n<p>You\u2019ll now see the Playwright agents listed there, such as:<\/p>\n<p>playwright-test-planner<br \/>\nplaywright-test-generator<br \/>\nplaywright-test-healer<br \/>\nThis is where you\u2019ll interact with them \u2014 just select the agent and give your prompt.<\/p>\n<div id=\"attachment_78937\" style=\"width: 310px\" class=\"wp-caption alignnone\"><img aria-describedby=\"caption-attachment-78937\" decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-78937\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2026\/03\/Playwright-Agents-300x222.png\" alt=\"AI Agents in Copilot Chat\" width=\"300\" height=\"222\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2026\/03\/Playwright-Agents-300x222.png 300w, \/blog\/wp-ttn-blog\/uploads\/2026\/03\/Playwright-Agents-768x569.png 768w, \/blog\/wp-ttn-blog\/uploads\/2026\/03\/Playwright-Agents-624x462.png 624w, \/blog\/wp-ttn-blog\/uploads\/2026\/03\/Playwright-Agents.png 956w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><p id=\"caption-attachment-78937\" class=\"wp-caption-text\">AI Agents in Copilot Chat<\/p><\/div>\n<p><strong>MCP Setup (Important)<\/strong><br \/>\nAlong with the agents, Playwright also sets up the playwright-test MCP, which is required for these agents to function properly.<\/p>\n<p>Make sure of the following:<\/p>\n<p>playwright-test MCP is enabled<br \/>\nThis allows agents to interact with the browser and execute actions.<br \/>\nBuilt-in tools are enabled<br \/>\nThese are needed for reading, writing, and updating files in your project.<br \/>\nWithout these, agents won\u2019t be able to fully perform tasks like generating tests or fixing failures.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-78938\" src=\"https:\/\/www.tothenew.com\/blog\/wp-ttn-blog\/uploads\/2026\/03\/Playwright-test-mcp-300x194.png\" alt=\"Playwright test mcp\" width=\"300\" height=\"194\" srcset=\"\/blog\/wp-ttn-blog\/uploads\/2026\/03\/Playwright-test-mcp-300x194.png 300w, \/blog\/wp-ttn-blog\/uploads\/2026\/03\/Playwright-test-mcp-1024x663.png 1024w, \/blog\/wp-ttn-blog\/uploads\/2026\/03\/Playwright-test-mcp-768x497.png 768w, \/blog\/wp-ttn-blog\/uploads\/2026\/03\/Playwright-test-mcp-624x404.png 624w, \/blog\/wp-ttn-blog\/uploads\/2026\/03\/Playwright-test-mcp.png 1202w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>playwright-test mcpNow that everything is in place, let\u2019s see how these agents actually work in a real workflow.<\/p>\n<p><strong>Using Playwright AI Agents in Action<\/strong><\/p>\n<p>Now that everything is set up and the agents are available in the Copilot dropdown, let\u2019s see how you can actually use them in your day-to-day workflow.<\/p>\n<p>Instead of writing manually, you can interact with these agents and let them handle different parts of testing.<\/p>\n<p><strong>1. Planner Agent \u2013 Generating Test Scenarios<\/strong><br \/>\nStart by selecting playwright-test-planner from the agent dropdown.<\/p>\n<p>Now you can give it a simple prompt like:<\/p>\n<p>Generate a comprehensive test plan for PROJECT-1001<\/p>\n<p>In this case, PROJECT-1001 refers to a JIRA ticket. If you have Atlassian JIRA MCP configured in your IDE, the agent can directly read the ticket details from there.<\/p>\n<p>If not, no problem \u2014 just copy the requirement from the JIRA ticket and paste it into the Copilot chat, then ask the planner to generate the test plan.<\/p>\n<p>Once triggered, the planner basically does what a tester would normally do manually. It goes through the application, understands the flow, and breaks things down into meaningful test scenarios.<\/p>\n<p>Behind the scenes, it will:<\/p>\n<p>Explore the application<br \/>\nIdentify key user journeys<br \/>\nConsider edge cases<br \/>\nOrganize everything into a structured test plan<br \/>\nThe output is saved as a Markdown (.md) file inside the specs\/ folder.<\/p>\n<p>What\u2019s really helpful is that the plan is not just a list of points \u2014 it\u2019s properly structured into steps, scenarios, and expected outcomes. So instead of starting from scratch, you already have a clear and organized test plan ready to use.<\/p>\n<p><strong>2. Generator Agent \u2013 Creating Test Scripts<\/strong><\/p>\n<p>Once your test plan is ready, the next step is to generate actual test scripts. For that, switch to playwright-test-generator from the agent dropdown.<\/p>\n<p>You can give a prompt like:<\/p>\n<p>Generate Playwright tests for Customer User Login<\/p>\n<p>You\u2019re not limited to one scenario \u2014 you can either:<\/p>\n<p>Generate tests for the entire test plan<br \/>\nOr target a specific section (like we did above)<br \/>\nThis gives flexibility depending on what to automate first.<\/p>\n<p>Once triggered, the generator does most of the heavy lifting. It will:<\/p>\n<p>Read the test plan from the specs\/ folder<br \/>\nExecute the steps in a real browser<br \/>\nIdentify stable and reliable locators<br \/>\nGenerate Playwright test files<br \/>\nAfter this, you\u2019ll see multiple .spec.ts (or .spec.js) files created inside the tests\/ folder.<\/p>\n<p>And the best part \u2014 these are not just sample templates. They are actual working tests that you can run immediately using Playwright.<\/p>\n<p><strong>3. Healer Agent \u2013 Fixing Failing Tests<\/strong><br \/>\nNow let\u2019s say some tests fail due to changes in the UI or updates in a flow<\/p>\n<p>Select playwright-test-healer and run a prompt like:<\/p>\n<p>Fix failing Playwright tests &lt;test case name&gt;<\/p>\n<p>The healer agent will:<\/p>\n<p>Detect failing tests<br \/>\nRe-run the failing steps<br \/>\nInspect the current UI<br \/>\nUpdate broken locators or assertions<br \/>\nRe-run tests to verify the fix<br \/>\nInstead of manually debugging each failure, the agent handles most of it.<\/p>\n<p><strong>Putting It All Together<\/strong><br \/>\nIf you look at the overall workflow now, it becomes:<\/p>\n<p>Planner \u2192 Generator \u2192 Healer<\/p>\n<p>&#8211; Planner decides what to test<br \/>\n&#8211; Generator writes how to test<br \/>\n&#8211; Healer keeps tests stable<\/p>\n<p>This is where Playwright AI Agents stand out. By handling repetitive tasks like planning, script generation, and test maintenance, they allow engineers to focus on what actually matters \u2014 building better test strategies and improving product quality.<\/p>\n<p><strong>1. Planner Output (Test Plan)<\/strong><br \/>\n# Test Plan: Customer User Login<\/p>\n<p>## Scenario 1: Valid Login<br \/>\nSteps:<br \/>\n1. Navigate to login page<br \/>\n2. Enter valid username and password<br \/>\n3. Click login<\/p>\n<p>Expected Result:<br \/>\n&#8211; User is redirected to dashboard<\/p>\n<p>## Scenario 2: Invalid Login<br \/>\nSteps:<br \/>\n1. Enter invalid credentials<br \/>\n2. Click login<\/p>\n<p>Expected Result:<br \/>\n&#8211; Error message is displayed<\/p>\n<p><strong>2. Generator Output (Test Script)<\/strong><\/p>\n<p>import { test, expect } from &#8216;@playwright\/test&#8217;;<\/p>\n<p>test(&#8216;valid login&#8217;, async ({ page }) =&gt; {<br \/>\nawait page.goto(&#8216;\/login&#8217;);<br \/>\nawait page.fill(&#8216;#username&#8217;, &#8216;testuser&#8217;);<br \/>\nawait page.fill(&#8216;#password&#8217;, &#8216;password123&#8217;);<br \/>\nawait page.click(&#8216;button[type=&#8221;submit&#8221;]&#8217;);<\/p>\n<p>await expect(page).toHaveURL(\/dashboard\/);<br \/>\n});<\/p>\n<p><strong>3. Healer Output (Fixing a Failing Locator)<\/strong><\/p>\n<p>\/\/ Before (failing)<br \/>\nawait page.click(&#8216;button.read-more&#8217;);<\/p>\n<p>\/\/ After<br \/>\nawait page.click(&#8216;button[data-slot=&#8221;read-more&#8221;]&#8217;);<\/p>\n<p><strong>Practical Note<\/strong><br \/>\nWhile working with Playwright AI Agents, one thing to keep in mind is that MCP-based interactions can consume a noticeable number of tokens, especially when agents are exploring applications or generating large test suites.<\/p>\n<p>In real projects, this means you should be mindful of how often you run full flows, prefer targeted prompts, and use agents selectively.<\/p>\n<p>That said, the productivity gains usually outweigh the cost, especially when dealing with complex or large-scale applications.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction Test automation is a core part of software development. Tools like Playwright make end-to-end testing easier with reliable browser automation, smart waits, and strong support for modern web apps. But even with these tools, a lot of work still feels repetitive. Engineers spend significant time on: Planning what to test Writing test scripts Fixing [&hellip;]<\/p>\n","protected":false},"author":947,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":10},"categories":[5880],"tags":[7046,1853,7637,5464],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/78498"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/947"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=78498"}],"version-history":[{"count":3,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/78498\/revisions"}],"predecessor-version":[{"id":79022,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/78498\/revisions\/79022"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=78498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=78498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=78498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}