{"id":8650,"date":"2025-10-08T14:59:22","date_gmt":"2025-10-08T14:59:22","guid":{"rendered":"https:\/\/pokecon.jp\/job\/?p=8650"},"modified":"2025-10-08T14:59:22","modified_gmt":"2025-10-08T14:59:22","slug":"agents-playwright","status":"publish","type":"post","link":"https:\/\/pokecon.jp\/job\/8650\/","title":{"rendered":"Agents | Playwright"},"content":{"rendered":"\n<\/p>\n<div>\n<header\/>\n<h2 class=\"anchor anchorWithStickyNavbar_LWe7\" id=\"introduction\">Introduction<a target=\"_blank\" href=\"#introduction\" class=\"hash-link\" aria-label=\"Direct link to Introduction\" title=\"Direct link to Introduction\">\u200b<\/a><\/h2>\n<p>Playwright comes with three Playwright Agents out of the box: <strong>\ud83c\udfad planner<\/strong>, <strong>\ud83c\udfad generator<\/strong> and <strong>\ud83c\udfad healer<\/strong>.<\/p>\n<p>These agents can be used independently, sequentially, or as the chained calls in the agentic loop. Using them sequentially will produce test coverage for your product.<\/p>\n<ul>\n<li><strong>\ud83c\udfad planner<\/strong> explores the app and produces a Markdown test plan<\/li>\n<li><strong>\ud83c\udfad generator<\/strong> transforms the Markdown plan into the Playwright Test files<\/li>\n<li><strong>\ud83c\udfad healer<\/strong> executes the test suite and automatically repairs failing tests<\/li>\n<\/ul>\n<h3 class=\"anchor anchorWithStickyNavbar_LWe7\" id=\"getting-started\">Getting Started<a target=\"_blank\" href=\"#getting-started\" class=\"hash-link\" aria-label=\"Direct link to Getting Started\" title=\"Direct link to Getting Started\">\u200b<\/a><\/h3>\n<p>Start with adding Playwright Agent definitions to your project using the <code>init-agents<\/code> command. These definitions should be regenerated whenever Playwright is updated to pick up new tools and instructions.<\/p>\n<div class=\"tabs-container tabList__CuJ\">\n<ul role=\"tablist\" aria-orientation=\"horizontal\" class=\"tabs\">\n<li role=\"tab\" tabindex=\"0\" aria-selected=\"true\" class=\"tabs__item tabItem_LNqP tabs__item--active\">VS Code<\/li>\n<li role=\"tab\" tabindex=\"-1\" aria-selected=\"false\" class=\"tabs__item tabItem_LNqP\">Claude Code<\/li>\n<li role=\"tab\" tabindex=\"-1\" aria-selected=\"false\" class=\"tabs__item tabItem_LNqP\">OpenCode<\/li>\n<\/ul>\n<div class=\"margin-top--md\">\n<div role=\"tabpanel\" class=\"tabItem_Ymn6\">\n<div class=\"language-bash codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#D4D4D4;--prism-background-color:#212121\">\n<div class=\"codeBlockContent_QJqH\">\n<pre tabindex=\"0\" class=\"prism-code language-bash codeBlock_bY9V thin-scrollbar\" style=\"color:#D4D4D4;background-color:#212121\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">npx playwright init-agents <\/span><span class=\"token parameter variable\" style=\"color:rgb(156, 220, 254)\">--loop<\/span><span class=\"token operator\" style=\"color:rgb(212, 212, 212)\">=<\/span><span class=\"token plain\">vscode<\/span><br\/><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<div role=\"tabpanel\" class=\"tabItem_Ymn6\" hidden=\"\">\n<div class=\"language-bash codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#D4D4D4;--prism-background-color:#212121\">\n<div class=\"codeBlockContent_QJqH\">\n<pre tabindex=\"0\" class=\"prism-code language-bash codeBlock_bY9V thin-scrollbar\" style=\"color:#D4D4D4;background-color:#212121\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">npx playwright init-agents <\/span><span class=\"token parameter variable\" style=\"color:rgb(156, 220, 254)\">--loop<\/span><span class=\"token operator\" style=\"color:rgb(212, 212, 212)\">=<\/span><span class=\"token plain\">claude<\/span><br\/><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<div role=\"tabpanel\" class=\"tabItem_Ymn6\" hidden=\"\">\n<div class=\"language-bash codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#D4D4D4;--prism-background-color:#212121\">\n<div class=\"codeBlockContent_QJqH\">\n<pre tabindex=\"0\" class=\"prism-code language-bash codeBlock_bY9V thin-scrollbar\" style=\"color:#D4D4D4;background-color:#212121\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">npx playwright init-agents <\/span><span class=\"token parameter variable\" style=\"color:rgb(156, 220, 254)\">--loop<\/span><span class=\"token operator\" style=\"color:rgb(212, 212, 212)\">=<\/span><span class=\"token plain\">opencode<\/span><br\/><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"theme-admonition theme-admonition-note admonition_xJq3 alert alert--secondary\">\n<div class=\"admonitionContent_BuS1\">\n<p>VS Code v1.105 (currently on the <a target=\"_blank\" href=\"https:\/\/code.visualstudio.com\/insiders\/\" target=\"_blank\" rel=\"noopener noreferrer\">VS Code Insiders channel<\/a>) is needed for the agentic experience in VS Code. It will become stable shortly, we are a bit ahead of the curve with this functionality!<\/p>\n<\/div>\n<\/div>\n<p>Once the agents have been generated, you can use your AI tool of choice to command these agents to build Playwright Tests.<\/p>\n<h2 class=\"anchor anchorWithStickyNavbar_LWe7\" id=\"-planner\">\ud83c\udfad Planner<a target=\"_blank\" href=\"#-planner\" class=\"hash-link\" aria-label=\"Direct link to \ud83c\udfad Planner\" title=\"Direct link to \ud83c\udfad Planner\">\u200b<\/a><\/h2>\n<p>Planner agent explores your app and produces a test plan for one or many scenarios and user flows.<\/p>\n<p><strong>Input<\/strong><\/p>\n<ul>\n<li>A clear request to the planner (e.g., \u201cGenerate a plan for guest checkout.\u201d)<\/li>\n<li>A <code>seed test<\/code> that sets up the environment necessary to interact with your app<\/li>\n<li><em>(optional)<\/em> A Product Requirement Document (PRD) for context<\/li>\n<\/ul>\n<p><strong>Prompt<\/strong><\/p>\n<p><img decoding=\"async\" src=\"\/assets\/ideal-img\/planner-prompt.3e77e0f.640.png\" alt=\"planner prompt\" width=\"472\"\/><\/p>\n<blockquote>\n<ul>\n<li>Notice how the <code>seed.spec.ts<\/code> is included in the context of the planner.<\/li>\n<li>Planner will run this test to execute all the initialization necessary for your test including the global setup, project dependencies and all the necessary fixtures and hooks.<\/li>\n<li>Planner will also use this seed test as an example of all the generated tests. Alternatively, you can mention the file name in the prompt.<\/li>\n<\/ul>\n<\/blockquote>\n<div class=\"language-js codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#D4D4D4;--prism-background-color:#212121\">\n<p>Example: seed.spec.ts<\/p>\n<div class=\"codeBlockContent_QJqH\">\n<pre tabindex=\"0\" class=\"prism-code language-js codeBlock_bY9V thin-scrollbar\" style=\"color:#D4D4D4;background-color:#212121\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token keyword module\" style=\"color:#C586C0\">import<\/span><span class=\"token plain\"> <\/span><span class=\"token imports punctuation\" style=\"color:rgb(212, 212, 212)\">{<\/span><span class=\"token imports\"> test<\/span><span class=\"token imports punctuation\" style=\"color:rgb(212, 212, 212)\">,<\/span><span class=\"token imports\"> expect <\/span><span class=\"token imports punctuation\" style=\"color:rgb(212, 212, 212)\">}<\/span><span class=\"token plain\"> <\/span><span class=\"token keyword module\" style=\"color:#C586C0\">from<\/span><span class=\"token plain\"> <\/span><span class=\"token string\" style=\"color:rgb(206, 145, 120)\">'.\/fixtures'<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">;<\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\" style=\"display:inline-block\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\"\/><span class=\"token function\" style=\"color:rgb(220, 220, 170)\">test<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">(<\/span><span class=\"token string\" style=\"color:rgb(206, 145, 120)\">'seed'<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">,<\/span><span class=\"token plain\"> <\/span><span class=\"token keyword\" style=\"color:#C586C0\">async<\/span><span class=\"token plain\"> <\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">(<\/span><span class=\"token parameter punctuation\" style=\"color:rgb(212, 212, 212)\">{<\/span><span class=\"token parameter\" style=\"color:#9CDCFE\"> page <\/span><span class=\"token parameter punctuation\" style=\"color:rgb(212, 212, 212)\">}<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">)<\/span><span class=\"token plain\"> <\/span><span class=\"token arrow operator\" style=\"color:rgb(212, 212, 212)\">=&gt;<\/span><span class=\"token plain\"> <\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">{<\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">  <\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\"\/><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">}<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">)<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">;<\/span><br\/><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<p><strong>Output<\/strong><\/p>\n<ul>\n<li>A Markdown test plan saved as <code>specs\/basic-operations.md<\/code>.<\/li>\n<li>The plan is human-readable but precise enough for test generation.<\/li>\n<\/ul>\n<details class=\"details_lb9f alert alert--secondary details_r1OI\" data-collapsed=\"true\">\n<summary>Example: <b>specs\/basic-operations.md<\/b><\/summary>\n<div>\n<div class=\"collapsibleContent_i85q\">\n<div class=\"language-markdown codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#D4D4D4;--prism-background-color:#212121\">\n<div class=\"codeBlockContent_QJqH\">\n<pre tabindex=\"0\" class=\"prism-code language-markdown codeBlock_bY9V thin-scrollbar\" style=\"color:#D4D4D4;background-color:#212121\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token title important punctuation\" style=\"color:rgb(212, 212, 212);font-weight:bold\">#<\/span><span class=\"token title important\" style=\"color:#569CD6;font-weight:bold\"> TodoMVC Application - Basic Operations Test Plan<\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\" style=\"display:inline-block\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\"\/><span class=\"token title important punctuation\" style=\"color:rgb(212, 212, 212);font-weight:bold\">##<\/span><span class=\"token title important\" style=\"color:#569CD6;font-weight:bold\"> Application Overview<\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\" style=\"display:inline-block\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">The TodoMVC application is a React-based todo list manager that demonstrates standard todo application functionality. The application provides comprehensive task management capabilities with a clean, intuitive interface. Key features include:<\/span><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\" style=\"display:inline-block\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\"\/><span class=\"token list punctuation\" style=\"color:rgb(212, 212, 212)\">-<\/span><span class=\"token plain\"> <\/span><span class=\"token bold punctuation\" style=\"color:rgb(212, 212, 212)\">**<\/span><span class=\"token bold content\">Task Management<\/span><span class=\"token bold punctuation\" style=\"color:rgb(212, 212, 212)\">**<\/span><span class=\"token plain\">: Add, edit, complete, and delete individual todos<\/span><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\"\/><span class=\"token list punctuation\" style=\"color:rgb(212, 212, 212)\">-<\/span><span class=\"token plain\"> <\/span><span class=\"token bold punctuation\" style=\"color:rgb(212, 212, 212)\">**<\/span><span class=\"token bold content\">Bulk Operations<\/span><span class=\"token bold punctuation\" style=\"color:rgb(212, 212, 212)\">**<\/span><span class=\"token plain\">: Mark all todos as complete\/incomplete and clear all completed todos  <\/span><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\"\/><span class=\"token list punctuation\" style=\"color:rgb(212, 212, 212)\">-<\/span><span class=\"token plain\"> <\/span><span class=\"token bold punctuation\" style=\"color:rgb(212, 212, 212)\">**<\/span><span class=\"token bold content\">Filtering System<\/span><span class=\"token bold punctuation\" style=\"color:rgb(212, 212, 212)\">**<\/span><span class=\"token plain\">: View todos by All, Active, or Completed status with URL routing support<\/span><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\"\/><span class=\"token list punctuation\" style=\"color:rgb(212, 212, 212)\">-<\/span><span class=\"token plain\"> <\/span><span class=\"token bold punctuation\" style=\"color:rgb(212, 212, 212)\">**<\/span><span class=\"token bold content\">Real-time Counter<\/span><span class=\"token bold punctuation\" style=\"color:rgb(212, 212, 212)\">**<\/span><span class=\"token plain\">: Display of active (incomplete) todo count<\/span><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\"\/><span class=\"token list punctuation\" style=\"color:rgb(212, 212, 212)\">-<\/span><span class=\"token plain\"> <\/span><span class=\"token bold punctuation\" style=\"color:rgb(212, 212, 212)\">**<\/span><span class=\"token bold content\">Interactive UI<\/span><span class=\"token bold punctuation\" style=\"color:rgb(212, 212, 212)\">**<\/span><span class=\"token plain\">: Hover states, edit-in-place functionality, and responsive design<\/span><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\"\/><span class=\"token list punctuation\" style=\"color:rgb(212, 212, 212)\">-<\/span><span class=\"token plain\"> <\/span><span class=\"token bold punctuation\" style=\"color:rgb(212, 212, 212)\">**<\/span><span class=\"token bold content\">State Persistence<\/span><span class=\"token bold punctuation\" style=\"color:rgb(212, 212, 212)\">**<\/span><span class=\"token plain\">: Maintains state during session navigation<\/span><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\" style=\"display:inline-block\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\"\/><span class=\"token title important punctuation\" style=\"color:rgb(212, 212, 212);font-weight:bold\">##<\/span><span class=\"token title important\" style=\"color:#569CD6;font-weight:bold\"> Test Scenarios<\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\" style=\"display:inline-block\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\"\/><span class=\"token title important punctuation\" style=\"color:rgb(212, 212, 212);font-weight:bold\">###<\/span><span class=\"token title important\" style=\"color:#569CD6;font-weight:bold\"> 1. Adding New Todos<\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\" style=\"display:inline-block\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\"\/><span class=\"token bold punctuation\" style=\"color:rgb(212, 212, 212)\">**<\/span><span class=\"token bold content\">Seed:<\/span><span class=\"token bold punctuation\" style=\"color:rgb(212, 212, 212)\">**<\/span><span class=\"token plain\"> <\/span><span class=\"token code-snippet code keyword\" style=\"color:#C586C0\">`tests\/seed.spec.ts`<\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\" style=\"display:inline-block\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\"\/><span class=\"token title important punctuation\" style=\"color:rgb(212, 212, 212);font-weight:bold\">####<\/span><span class=\"token title important\" style=\"color:#569CD6;font-weight:bold\"> 1.1 Add Valid Todo<\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\" style=\"display:inline-block\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\"\/><span class=\"token bold punctuation\" style=\"color:rgb(212, 212, 212)\">**<\/span><span class=\"token bold content\">Steps:<\/span><span class=\"token bold punctuation\" style=\"color:rgb(212, 212, 212)\">**<\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\"\/><span class=\"token list punctuation\" style=\"color:rgb(212, 212, 212)\">1.<\/span><span class=\"token plain\"> Click in the \"What needs to be done?\" input field<\/span><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\"\/><span class=\"token list punctuation\" style=\"color:rgb(212, 212, 212)\">2.<\/span><span class=\"token plain\"> Type \"Buy groceries\"<\/span><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\"\/><span class=\"token list punctuation\" style=\"color:rgb(212, 212, 212)\">3.<\/span><span class=\"token plain\"> Press Enter key<\/span><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\" style=\"display:inline-block\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\"\/><span class=\"token bold punctuation\" style=\"color:rgb(212, 212, 212)\">**<\/span><span class=\"token bold content\">Expected Results:<\/span><span class=\"token bold punctuation\" style=\"color:rgb(212, 212, 212)\">**<\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\"\/><span class=\"token list punctuation\" style=\"color:rgb(212, 212, 212)\">-<\/span><span class=\"token plain\"> Todo appears in the list with unchecked checkbox<\/span><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\"\/><span class=\"token list punctuation\" style=\"color:rgb(212, 212, 212)\">-<\/span><span class=\"token plain\"> Counter shows \"1 item left\"<\/span><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\"\/><span class=\"token list punctuation\" style=\"color:rgb(212, 212, 212)\">-<\/span><span class=\"token plain\"> Input field is cleared and ready for next entry<\/span><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\"\/><span class=\"token list punctuation\" style=\"color:rgb(212, 212, 212)\">-<\/span><span class=\"token plain\"> Todo list controls become visible (Mark all as complete checkbox)<\/span><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\" style=\"display:inline-block\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\"\/><span class=\"token title important punctuation\" style=\"color:rgb(212, 212, 212);font-weight:bold\">####<\/span><span class=\"token title important\" style=\"color:#569CD6;font-weight:bold\"> 1.2 Add Multiple Todos<\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">...<\/span><br\/><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/details>\n<h2 class=\"anchor anchorWithStickyNavbar_LWe7\" id=\"-generator\">\ud83c\udfad Generator<a target=\"_blank\" href=\"#-generator\" class=\"hash-link\" aria-label=\"Direct link to \ud83c\udfad Generator\" title=\"Direct link to \ud83c\udfad Generator\">\u200b<\/a><\/h2>\n<p>Generator agent uses the Markdown plan to produce executable Playwright Tests. It verifies selectors and assertions live as it performs the scenarios. Playwright supports generation hints and provides a catalog of assertions for efficient structural and behavioral validation.<\/p>\n<p><strong>Input<\/strong><\/p>\n<ul>\n<li>Markdown plan from <code>specs\/<\/code><\/li>\n<\/ul>\n<p><strong>Prompt<\/strong><\/p>\n<p><img decoding=\"async\" src=\"\/assets\/ideal-img\/generator-prompt.d16aa4b.640.png\" alt=\"generator prompt\" width=\"472\"\/><\/p>\n<blockquote>\n<ul>\n<li>Notice how the <code>basic-operations.md<\/code> is included in the context of the generator.<\/li>\n<li>This is how generator knows where to get the test plan from. Alternatively, you can mention the file name in the prompt.<\/li>\n<\/ul>\n<\/blockquote>\n<p><strong>Output<\/strong><\/p>\n<ul>\n<li>A test suite under <code>tests\/<\/code><\/li>\n<li>Generated tests may include initial errors that can be healed automatically by the healer agent<\/li>\n<\/ul>\n<details class=\"details_lb9f alert alert--secondary details_r1OI\" data-collapsed=\"true\">\n<summary>Example: <b>tests\/add-valid-todo.spec.ts<\/b><\/summary>\n<div>\n<div class=\"collapsibleContent_i85q\">\n<div class=\"language-ts codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#D4D4D4;--prism-background-color:#212121\">\n<div class=\"codeBlockContent_QJqH\">\n<pre tabindex=\"0\" class=\"prism-code language-ts codeBlock_bY9V thin-scrollbar\" style=\"color:#D4D4D4;background-color:#212121\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\"\/><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\" style=\"display:inline-block\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\"\/><span class=\"token keyword\" style=\"color:#C586C0\">import<\/span><span class=\"token plain\"> <\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">{<\/span><span class=\"token plain\"> test<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">,<\/span><span class=\"token plain\"> expect <\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">}<\/span><span class=\"token plain\"> <\/span><span class=\"token keyword\" style=\"color:#C586C0\">from<\/span><span class=\"token plain\"> <\/span><span class=\"token string\" style=\"color:rgb(206, 145, 120)\">'..\/fixtures'<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">;<\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\" style=\"display:inline-block\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">test<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">.<\/span><span class=\"token function\" style=\"color:rgb(220, 220, 170)\">describe<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">(<\/span><span class=\"token string\" style=\"color:rgb(206, 145, 120)\">'Adding New Todos'<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">,<\/span><span class=\"token plain\"> <\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">(<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">)<\/span><span class=\"token plain\"> <\/span><span class=\"token operator\" style=\"color:rgb(212, 212, 212)\">=&gt;<\/span><span class=\"token plain\"> <\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">{<\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">  <\/span><span class=\"token function\" style=\"color:rgb(220, 220, 170)\">test<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">(<\/span><span class=\"token string\" style=\"color:rgb(206, 145, 120)\">'Add Valid Todo'<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">,<\/span><span class=\"token plain\"> <\/span><span class=\"token keyword\" style=\"color:#C586C0\">async<\/span><span class=\"token plain\"> <\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">(<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">{<\/span><span class=\"token plain\"> page <\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">}<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">)<\/span><span class=\"token plain\"> <\/span><span class=\"token operator\" style=\"color:rgb(212, 212, 212)\">=&gt;<\/span><span class=\"token plain\"> <\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">{<\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">    <\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">    <\/span><span class=\"token keyword\" style=\"color:#C586C0\">const<\/span><span class=\"token plain\"> todoInput <\/span><span class=\"token operator\" style=\"color:rgb(212, 212, 212)\">=<\/span><span class=\"token plain\"> page<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">.<\/span><span class=\"token function\" style=\"color:rgb(220, 220, 170)\">getByRole<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">(<\/span><span class=\"token string\" style=\"color:rgb(206, 145, 120)\">'textbox'<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">,<\/span><span class=\"token plain\"> <\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">{<\/span><span class=\"token plain\"> name<\/span><span class=\"token operator\" style=\"color:rgb(212, 212, 212)\">:<\/span><span class=\"token plain\"> <\/span><span class=\"token string\" style=\"color:rgb(206, 145, 120)\">'What needs to be done?'<\/span><span class=\"token plain\"> <\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">}<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">)<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">;<\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">    <\/span><span class=\"token keyword\" style=\"color:#C586C0\">await<\/span><span class=\"token plain\"> todoInput<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">.<\/span><span class=\"token function\" style=\"color:rgb(220, 220, 170)\">click<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">(<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">)<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">;<\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\" style=\"display:inline-block\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">    <\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">    <\/span><span class=\"token keyword\" style=\"color:#C586C0\">await<\/span><span class=\"token plain\"> todoInput<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">.<\/span><span class=\"token function\" style=\"color:rgb(220, 220, 170)\">fill<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">(<\/span><span class=\"token string\" style=\"color:rgb(206, 145, 120)\">'Buy groceries'<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">)<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">;<\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\" style=\"display:inline-block\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">    <\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">    <\/span><span class=\"token keyword\" style=\"color:#C586C0\">await<\/span><span class=\"token plain\"> todoInput<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">.<\/span><span class=\"token function\" style=\"color:rgb(220, 220, 170)\">press<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">(<\/span><span class=\"token string\" style=\"color:rgb(206, 145, 120)\">'Enter'<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">)<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">;<\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\" style=\"display:inline-block\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">    <\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">    <\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">    <\/span><span class=\"token keyword\" style=\"color:#C586C0\">await<\/span><span class=\"token plain\"> <\/span><span class=\"token function\" style=\"color:rgb(220, 220, 170)\">expect<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">(<\/span><span class=\"token plain\">page<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">.<\/span><span class=\"token function\" style=\"color:rgb(220, 220, 170)\">getByText<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">(<\/span><span class=\"token string\" style=\"color:rgb(206, 145, 120)\">'Buy groceries'<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">)<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">)<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">.<\/span><span class=\"token function\" style=\"color:rgb(220, 220, 170)\">toBeVisible<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">(<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">)<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">;<\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">    <\/span><span class=\"token keyword\" style=\"color:#C586C0\">const<\/span><span class=\"token plain\"> todoCheckbox <\/span><span class=\"token operator\" style=\"color:rgb(212, 212, 212)\">=<\/span><span class=\"token plain\"> page<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">.<\/span><span class=\"token function\" style=\"color:rgb(220, 220, 170)\">getByRole<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">(<\/span><span class=\"token string\" style=\"color:rgb(206, 145, 120)\">'checkbox'<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">,<\/span><span class=\"token plain\"> <\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">{<\/span><span class=\"token plain\"> name<\/span><span class=\"token operator\" style=\"color:rgb(212, 212, 212)\">:<\/span><span class=\"token plain\"> <\/span><span class=\"token string\" style=\"color:rgb(206, 145, 120)\">'Toggle Todo'<\/span><span class=\"token plain\"> <\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">}<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">)<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">;<\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">    <\/span><span class=\"token keyword\" style=\"color:#C586C0\">await<\/span><span class=\"token plain\"> <\/span><span class=\"token function\" style=\"color:rgb(220, 220, 170)\">expect<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">(<\/span><span class=\"token plain\">todoCheckbox<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">)<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">.<\/span><span class=\"token function\" style=\"color:rgb(220, 220, 170)\">toBeVisible<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">(<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">)<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">;<\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">    <\/span><span class=\"token keyword\" style=\"color:#C586C0\">await<\/span><span class=\"token plain\"> <\/span><span class=\"token function\" style=\"color:rgb(220, 220, 170)\">expect<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">(<\/span><span class=\"token plain\">todoCheckbox<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">)<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">.<\/span><span class=\"token plain\">not<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">.<\/span><span class=\"token function\" style=\"color:rgb(220, 220, 170)\">toBeChecked<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">(<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">)<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">;<\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\" style=\"display:inline-block\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">    <\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">    <\/span><span class=\"token keyword\" style=\"color:#C586C0\">await<\/span><span class=\"token plain\"> <\/span><span class=\"token function\" style=\"color:rgb(220, 220, 170)\">expect<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">(<\/span><span class=\"token plain\">page<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">.<\/span><span class=\"token function\" style=\"color:rgb(220, 220, 170)\">getByText<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">(<\/span><span class=\"token string\" style=\"color:rgb(206, 145, 120)\">'1 item left'<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">)<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">)<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">.<\/span><span class=\"token function\" style=\"color:rgb(220, 220, 170)\">toBeVisible<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">(<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">)<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">;<\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\" style=\"display:inline-block\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">    <\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">    <\/span><span class=\"token keyword\" style=\"color:#C586C0\">await<\/span><span class=\"token plain\"> <\/span><span class=\"token function\" style=\"color:rgb(220, 220, 170)\">expect<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">(<\/span><span class=\"token plain\">todoInput<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">)<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">.<\/span><span class=\"token function\" style=\"color:rgb(220, 220, 170)\">toHaveValue<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">(<\/span><span class=\"token string\" style=\"color:rgb(206, 145, 120)\">''<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">)<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">;<\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">    <\/span><span class=\"token keyword\" style=\"color:#C586C0\">await<\/span><span class=\"token plain\"> <\/span><span class=\"token function\" style=\"color:rgb(220, 220, 170)\">expect<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">(<\/span><span class=\"token plain\">todoInput<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">)<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">.<\/span><span class=\"token function\" style=\"color:rgb(220, 220, 170)\">toBeFocused<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">(<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">)<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">;<\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\" style=\"display:inline-block\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">    <\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">    <\/span><span class=\"token keyword\" style=\"color:#C586C0\">await<\/span><span class=\"token plain\"> <\/span><span class=\"token function\" style=\"color:rgb(220, 220, 170)\">expect<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">(<\/span><span class=\"token plain\">page<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">.<\/span><span class=\"token function\" style=\"color:rgb(220, 220, 170)\">getByRole<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">(<\/span><span class=\"token string\" style=\"color:rgb(206, 145, 120)\">'checkbox'<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">,<\/span><span class=\"token plain\"> <\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">{<\/span><span class=\"token plain\"> name<\/span><span class=\"token operator\" style=\"color:rgb(212, 212, 212)\">:<\/span><span class=\"token plain\"> <\/span><span class=\"token string\" style=\"color:rgb(206, 145, 120)\">'\u276fMark all as complete'<\/span><span class=\"token plain\"> <\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">}<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">)<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">)<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">.<\/span><span class=\"token function\" style=\"color:rgb(220, 220, 170)\">toBeVisible<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">(<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">)<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">;<\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">  <\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">}<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">)<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">;<\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\"\/><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">}<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">)<\/span><span class=\"token punctuation\" style=\"color:rgb(212, 212, 212)\">;<\/span><br\/><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/details>\n<h2 class=\"anchor anchorWithStickyNavbar_LWe7\" id=\"-healer\">\ud83c\udfad Healer<a target=\"_blank\" href=\"#-healer\" class=\"hash-link\" aria-label=\"Direct link to \ud83c\udfad Healer\" title=\"Direct link to \ud83c\udfad Healer\">\u200b<\/a><\/h2>\n<p>When the test fails, the healer agent:<\/p>\n<ul>\n<li>Replays the failing steps<\/li>\n<li>Inspects the current UI to locate equivalent elements or flows<\/li>\n<li>Suggests a patch (e.g., locator update, wait adjustment, data fix)<\/li>\n<li>Re-runs the test until it passes or until guardrails stop the loop<\/li>\n<\/ul>\n<p><strong>Input<\/strong><\/p>\n<p><strong>Prompt<\/strong><\/p>\n<p><img decoding=\"async\" src=\"\/assets\/ideal-img\/healer-prompt.5677507.640.png\" alt=\"healer prompt\" width=\"469\"\/><\/p>\n<p><strong>Output<\/strong><\/p>\n<ul>\n<li>A passing test, or a skipped test if the healer believes the that functionality is broken.<\/li>\n<\/ul>\n<h2 class=\"anchor anchorWithStickyNavbar_LWe7\" id=\"artifacts-and-conventions\">Artifacts and Conventions<a target=\"_blank\" href=\"#artifacts-and-conventions\" class=\"hash-link\" aria-label=\"Direct link to Artifacts and Conventions\" title=\"Direct link to Artifacts and Conventions\">\u200b<\/a><\/h2>\n<p>The static agent definitions and generated files follow a simple, auditable structure:<\/p>\n<div class=\"language-bash codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#D4D4D4;--prism-background-color:#212121\">\n<div class=\"codeBlockContent_QJqH\">\n<pre tabindex=\"0\" class=\"prism-code language-bash codeBlock_bY9V thin-scrollbar\" style=\"color:#D4D4D4;background-color:#212121\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">repo\/<\/span><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">  .github\/                    <\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">  specs\/                      <\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">    basic-operations.md<\/span><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">  tests\/                      <\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">    seed.spec.ts              <\/span><span class=\"token plain\"\/><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">    tests\/create\/add-valid-todo.spec.ts<\/span><br\/><\/span><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">  playwright.config.ts<\/span><br\/><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<h3 class=\"anchor anchorWithStickyNavbar_LWe7\" id=\"agent-definitions\">Agent Definitions<a target=\"_blank\" href=\"#agent-definitions\" class=\"hash-link\" aria-label=\"Direct link to Agent Definitions\" title=\"Direct link to Agent Definitions\">\u200b<\/a><\/h3>\n<p>Under the hood, agent definitions are collections of instructions and MCP tools. They are provided by Playwright and should be regenerated whenever Playwright is updated.<\/p>\n<p>Example for Claude Code subagents:<\/p>\n<div class=\"language-bash codeBlockContainer_Ckt0 theme-code-block\" style=\"--prism-color:#D4D4D4;--prism-background-color:#212121\">\n<div class=\"codeBlockContent_QJqH\">\n<pre tabindex=\"0\" class=\"prism-code language-bash codeBlock_bY9V thin-scrollbar\" style=\"color:#D4D4D4;background-color:#212121\"><code class=\"codeBlockLines_e6Vv\"><span class=\"token-line\" style=\"color:#D4D4D4\"><span class=\"token plain\">npx playwright init-agents <\/span><span class=\"token parameter variable\" style=\"color:rgb(156, 220, 254)\">--loop<\/span><span class=\"token operator\" style=\"color:rgb(212, 212, 212)\">=<\/span><span class=\"token plain\">vscode<\/span><br\/><\/span><\/code><\/pre>\n<\/div>\n<\/div>\n<h3 class=\"anchor anchorWithStickyNavbar_LWe7\" id=\"specs-in-specs\">Specs in <code>specs\/<\/code><a target=\"_blank\" href=\"#specs-in-specs\" class=\"hash-link\" aria-label=\"Direct link to specs-in-specs\" title=\"Direct link to specs-in-specs\">\u200b<\/a><\/h3>\n<p>Specs are structured plans describing scenarios in human-readable terms. They include steps, expected outcomes, and data. Specs can start from scratch or extend a seed test.<\/p>\n<h3 class=\"anchor anchorWithStickyNavbar_LWe7\" id=\"tests-in-tests\">Tests in <code>tests\/<\/code><a target=\"_blank\" href=\"#tests-in-tests\" class=\"hash-link\" aria-label=\"Direct link to tests-in-tests\" title=\"Direct link to tests-in-tests\">\u200b<\/a><\/h3>\n<p>Generated Playwright tests, aligned one-to-one with specs wherever feasible.<\/p>\n<h3 class=\"anchor anchorWithStickyNavbar_LWe7\" id=\"seed-tests-seedspects\">Seed tests <code>seed.spec.ts<\/code><a target=\"_blank\" href=\"#seed-tests-seedspects\" class=\"hash-link\" aria-label=\"Direct link to seed-tests-seedspects\" title=\"Direct link to seed-tests-seedspects\">\u200b<\/a><\/h3>\n<p>Seed tests provide a ready-to-use <code>page<\/code> context to bootstrap execution.<\/p>\n<\/div>\n\n<br \/><a href=\"https:\/\/playwright.dev\/docs\/test-agents\">\u5143\u306e\u8a18\u4e8b\u3092\u78ba\u8a8d\u3059\u308b <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"Introduction\u200b Playwright comes with three Playwright Agents out of the box: \ud83c\udfad planner, \ud83c\udfad generator and \ud83c\udfad heale [&hellip;]","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"tags":[],"class_list":["post-8650","post","type-post","status-publish","format-standard","hentry","category-hatena-blog"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Agents | Playwright - \u30dd\u30b1\u30b3\u30f3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/playwright.dev\/docs\/test-agents\" \/>\n<meta property=\"og:locale\" content=\"ja_JP\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Agents | Playwright - \u30dd\u30b1\u30b3\u30f3\" \/>\n<meta property=\"og:description\" content=\"Introduction\u200b Playwright comes with three Playwright Agents out of the box: \ud83c\udfad planner, \ud83c\udfad generator and \ud83c\udfad heale [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/playwright.dev\/docs\/test-agents\" \/>\n<meta property=\"og:site_name\" content=\"\u30dd\u30b1\u30b3\u30f3\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-08T14:59:22+00:00\" \/>\n<meta name=\"author\" content=\"info@pokecon.jp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u57f7\u7b46\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"info@pokecon.jp\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593\" \/>\n\t<meta name=\"twitter:data2\" content=\"4\u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/playwright.dev\\\/docs\\\/test-agents#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/8650\\\/\"},\"author\":{\"name\":\"info@pokecon.jp\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#\\\/schema\\\/person\\\/16c9f07b1ba984d165d9aee259bda997\"},\"headline\":\"Agents | Playwright\",\"datePublished\":\"2025-10-08T14:59:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/8650\\\/\"},\"wordCount\":573,\"articleSection\":[\"\u306f\u3066\u306a\u30d6\u30ed\u30b0\"],\"inLanguage\":\"ja\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/8650\\\/\",\"url\":\"https:\\\/\\\/playwright.dev\\\/docs\\\/test-agents\",\"name\":\"Agents | Playwright - \u30dd\u30b1\u30b3\u30f3\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#website\"},\"datePublished\":\"2025-10-08T14:59:22+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#\\\/schema\\\/person\\\/16c9f07b1ba984d165d9aee259bda997\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/playwright.dev\\\/docs\\\/test-agents#breadcrumb\"},\"inLanguage\":\"ja\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/playwright.dev\\\/docs\\\/test-agents\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/playwright.dev\\\/docs\\\/test-agents#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u30db\u30fc\u30e0\",\"item\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Agents | Playwright\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#website\",\"url\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/\",\"name\":\"\u30dd\u30b1\u30b3\u30f3\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ja\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/#\\\/schema\\\/person\\\/16c9f07b1ba984d165d9aee259bda997\",\"name\":\"info@pokecon.jp\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ja\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g\",\"caption\":\"info@pokecon.jp\"},\"url\":\"https:\\\/\\\/pokecon.jp\\\/job\\\/author\\\/infopokecon-jp\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Agents | Playwright - \u30dd\u30b1\u30b3\u30f3","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:\/\/playwright.dev\/docs\/test-agents","og_locale":"ja_JP","og_type":"article","og_title":"Agents | Playwright - \u30dd\u30b1\u30b3\u30f3","og_description":"Introduction\u200b Playwright comes with three Playwright Agents out of the box: \ud83c\udfad planner, \ud83c\udfad generator and \ud83c\udfad heale [&hellip;]","og_url":"https:\/\/playwright.dev\/docs\/test-agents","og_site_name":"\u30dd\u30b1\u30b3\u30f3","article_published_time":"2025-10-08T14:59:22+00:00","author":"info@pokecon.jp","twitter_card":"summary_large_image","twitter_misc":{"\u57f7\u7b46\u8005":"info@pokecon.jp","\u63a8\u5b9a\u8aad\u307f\u53d6\u308a\u6642\u9593":"4\u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/playwright.dev\/docs\/test-agents#article","isPartOf":{"@id":"https:\/\/pokecon.jp\/job\/8650\/"},"author":{"name":"info@pokecon.jp","@id":"https:\/\/pokecon.jp\/job\/#\/schema\/person\/16c9f07b1ba984d165d9aee259bda997"},"headline":"Agents | Playwright","datePublished":"2025-10-08T14:59:22+00:00","mainEntityOfPage":{"@id":"https:\/\/pokecon.jp\/job\/8650\/"},"wordCount":573,"articleSection":["\u306f\u3066\u306a\u30d6\u30ed\u30b0"],"inLanguage":"ja"},{"@type":"WebPage","@id":"https:\/\/pokecon.jp\/job\/8650\/","url":"https:\/\/playwright.dev\/docs\/test-agents","name":"Agents | Playwright - \u30dd\u30b1\u30b3\u30f3","isPartOf":{"@id":"https:\/\/pokecon.jp\/job\/#website"},"datePublished":"2025-10-08T14:59:22+00:00","author":{"@id":"https:\/\/pokecon.jp\/job\/#\/schema\/person\/16c9f07b1ba984d165d9aee259bda997"},"breadcrumb":{"@id":"https:\/\/playwright.dev\/docs\/test-agents#breadcrumb"},"inLanguage":"ja","potentialAction":[{"@type":"ReadAction","target":["https:\/\/playwright.dev\/docs\/test-agents"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/playwright.dev\/docs\/test-agents#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u30db\u30fc\u30e0","item":"https:\/\/pokecon.jp\/job\/"},{"@type":"ListItem","position":2,"name":"Agents | Playwright"}]},{"@type":"WebSite","@id":"https:\/\/pokecon.jp\/job\/#website","url":"https:\/\/pokecon.jp\/job\/","name":"\u30dd\u30b1\u30b3\u30f3","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pokecon.jp\/job\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ja"},{"@type":"Person","@id":"https:\/\/pokecon.jp\/job\/#\/schema\/person\/16c9f07b1ba984d165d9aee259bda997","name":"info@pokecon.jp","image":{"@type":"ImageObject","inLanguage":"ja","@id":"https:\/\/secure.gravatar.com\/avatar\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2b0549cd9f7907c092ca5fbb283baf72337f235726e4b46fa39ec0b701ac2fe2?s=96&d=wavatar&r=g","caption":"info@pokecon.jp"},"url":"https:\/\/pokecon.jp\/job\/author\/infopokecon-jp\/"}]}},"_links":{"self":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts\/8650","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/comments?post=8650"}],"version-history":[{"count":1,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts\/8650\/revisions"}],"predecessor-version":[{"id":8651,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/posts\/8650\/revisions\/8651"}],"wp:attachment":[{"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/media?parent=8650"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/categories?post=8650"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pokecon.jp\/job\/wp-json\/wp\/v2\/tags?post=8650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}