Playwright has introduced a powerful new feature: Playwright Agents, new in Version 1.56. These agents can generate test plans, create tests based on those plans, and even debug and fix failing tests automatically. This post demonstrates how Planner, Generator, and Healer agents work together using a movies application as an example.
- 🎭 Planner generates comprehensive test plans.
- 🎭 Generator produces runnable test files from the plans.
- 🎭 Healer debugs and fixes failing tests automatically.
Getting Started with Playwright Agents
To begin make sure you have the latest version of Playwright installed. Then, run the init-agents command with your preferred loop, vscode, claude, or opencode:
npx playwright init-agents --loop=vscode
This command generates the agents along with a seed file.
Seeding your tests
The seed file is used to seed tests and will be copied into generated tests by the agent. It can be left blank, but it is typically used to include fixtures or setup logic that must run before tests.
For example, in a movies application, a fixture can be defined to create a page containing a list of movies. This page becomes the starting point for the tests and is copied into each generated test file.
/* eslint-disable @typescript-eslint/no-unused-vars */
import { listTest as test } from '../helpers/list-test';
import { expect } from '@playwright/test';
test.describe('seed for logged in user', () => {
test('seed using listPage fixture', async ({ listPage }) => {
const page = listPage; // set the page to the listPage fixture
});
});
If you don't have any setup logic you can leave the seed file empty or add a page.goto() to a starting URL.
Planner Agent – Creating a Test Plan
The first step is to use the Planner agent to generate a test plan for a specific feature, for example managing the movies list. The plan should be saved in a specs folder as it is possible you will have multiple plans.
In VS Code open chat mode and select the Playwright Planner Agent. If using the seed file, it should be added to the context before generating the plan.
Example Prompt
Generate a test plan for managing movies list and save as movies-list-plan.md in specs folder
The Playwright Planner Agent explores the site, analyzes the “managing lists” feature, and produces a structured test plan in markdown format. The generated plan can be reviewed and refined as needed.
Generator Agent – Creating the Tests
The Playwright Generator agent is used to generate test files from the test plan. As the test plan may include numerous testing scenarios you may want to choose to generate tests for a specific section of the plan.
In VS Code open the chat and select the Playwright Generator Agent.
Example Prompt
Generate tests for the "Adding a Movie" section of the movies-list-plan.md
The Playwright Generator Agent navigates through the site and executes each of the scenarios from the chosen section of the test plan.
The result is a set of generated test files, a file for each scenario. If you had any setup logic in the seed file, you will see it will have been copied into each test file.
Next step is to run the generated tests.
Healer Agent – Fixing a Failing Test
Sometimes the generated tests will all pass, but sometimes there might be some test failures. Instead of debugging manually you can leverage the Playwright Healer agent. Start a new chat and select the Playwright Healer agent, and ask it to help fix the failing test.
Example Prompt
Run and fix failing tes
The Playwright Healer Agent will run the tests in debug mode, check console logs, network requests and the page snapshots to identify the root cause of the failure. It will keep trying to fix the test until it passes or if the agent believes the functionality is broken it marks the test as skipped.
Conclusion
Playwright Agents enable AI-powered test generation, execution, and healing with minimal manual effort.
To get started, update to the latest version of Playwright (v1.56)
npm install -D @playwright/test@latest
Then initialise your agents and choose your preferred agent loop:
npx playwright agents --loop=vscode/claude/opencode
With Planner, Generator, and Healer working together, maintaining end-to-end tests becomes faster, smarter, and more reliable.
Check out the video to see it in action:
Happy testing with AI and Playwright Agents!
Top comments (12)
I am getting below exception while executing code .
Error: Playwright Test did not expect test() to be called here.
Most common reasons include:
at seed.spec.ts:3
1 | import { test, expect } from '@playwright/test';
2 |
import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
testDir: './tests',
testMatch: ['*/.spec.ts'], // only runs .spec.ts files
fullyParallel: true,
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0,
workers: process.env.CI ? 1 : undefined,
reporter: [['html', { open: 'never' }]],
use: {
baseURL: 'thinking-tester-contact-list.herok...',
trace: 'on-first-retry',
headless: false,
screenshot: 'only-on-failure',
video: 'retain-on-failure',
},
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
],
// optional web server (disable if not needed)
// webServer: {
// command: 'npm run start',
// url: 'localhost:3000',
// reuseExistingServer: !process.env.CI,
// },
});
this is playwright.config.ts file.could you please look into it ?
I am getting the same.. pls assist
@debs_obrien As a huge Playwright fan, this functionality really has me super excited and I am starting to play around and "test" it a little.
I am also very curious about the security behind these agents? Coming from a security software industry, I am super reluctant to just have any AI access my Automation "secrets". Some of my project store the secrets (credentials, api keys, database connection strings etc) in Azure Keyvault and others in appsettings for instance. I do not feel comfortable running my automation tests, extracting these sensitive information via my secret provider service, and have the Playwright agents access it in any way?
Does Playwright use a RAG at all? and how safe is it to have the Playwright planner for instance, access a website and then logging in with credentials either from storage state or provided via my secret provider service (a function I built in my framework)?
@debs_obrien Thanks this is great explanation. Just curious, these agents are using playwright MCP server under the hood , or we need to have playwright map server configured as well as a pre-requisite.
Getting below error for me and my whole team. unable to find any answers anywhere... pls assist folks.
There is a bug opened for this:
github.com/microsoft/playwright/is...
Interesting, but when I try the step "In VS Code open chat mode and select the Playwright Planner Agent" I press ctrl+alt+i and I see no chat mode selection.
I enabled agent mode in VSCode according to this document (it would be nice if you mention it as a prerequisite) code.visualstudio.com/docs/copilot...
But the planner agent does not really open any browser on my pages (I added a page.goto(...) in my seed file).
Interesting. Thanks. Am using VS Code Insiders which is the latest build of VS Code. They should be releasing this week and that should fix some issues. Thought agent mode was turned on by default
Hello @debs_obrien is there a plan to release these agents to .net version of playwright?
Thanks Deb .. Explained very well.