Understanding Playwright AI-powered Test Agents with typescript

Playwright now includes three intelligent AI-powered agents that automate the entire testing lifecycle. These agents work inside VS Code using GitHub Copilot Chat and help you plan, generate, and maintain test cases with minimal manual effort.

The Three Playwright AI Agents

planner — Explores the app & creates a test plan

The planner agent interacts with your running application, navigates through UI flows, and automatically produces a Markdown-based test plan. It identifies user journeys, input actions, expected validations, and edge cases.

Output example:

• Login
• Reset Password
• Add Item to Cart
• Checkout Flow

generator — Converts plans into real Playwright tests

planner — Explores the app & creates a test plan

The planner agent interacts with your running application, navigates through UI flows, and automatically produces a Markdown-based test plan. It identifies user journeys, input actions, expected validations, and edge cases.

Output example:

• Login
• Reset Password
• Add Item to Cart
• Checkout Flow

generator — Converts plans into real Playwright tests

The generator agent takes the Markdown test plan and turns each line into real, runnable Playwright TypeScript test files. It auto-creates page objects, locators, fixtures, and test skeletons.

Output example:

• tests/login.spec.ts
• pageObjects/LoginPage.ts

healer — Fixes tests when they fail

The healer agent watches your test execution. If a test breaks due to:

• Locator changes
• Timing issues
• New UI components
• App redesign

…the healer automatically repairs the broken test and updates it in your project.

So in summary, Playwright comes with three Playwright Test Agents out of the box.

• planner explores the app and produces a Markdown test plan
• generator transforms the Markdown plan into the Playwright Test files
• healer executes the test suite and automatically repairs failing tests

Steps to set up:

Precondition -

Setup Prerequisites

1. VS Code

You need VS Code v1.105+ (older versions won’t support Agents API).

2. Playwright version

Check your version:

npx playwright --version
        

Must be 1.56 or newer.

Installing the Playwright AI Agents

Use the init command:

npx playwright init-agents --loop=vscode
        

This creates:

🎭 planner.chatmode.md

🎭 generator.chatmode.md

🎭 healer.chatmode.md

These chatmode files are the brains of the agents.

Connect VS Code with GitHub Copilot Chat

Playwright AI Agents rely on GitHub Copilot Chat backend.

You must:

Sign in to GitHub inside VS Code

Bottom-left → Accounts → Sign in

Install GitHub Copilot Chat Extension

Search in Extensions:

GitHub Copilot Chat
        

Enable it.

How to Use Playwright AI Agents for planning, generation and fixation - Process flow

Easy understanding of the flow