DEV Community

Cover image for Playwright Agents: Planner, Generator, and Healer in Action
Debbie O'Brien for Playwright end to end Testing

Posted on • Edited on

Playwright Agents: Planner, Generator, and Healer in Action

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
Enter fullscreen mode Exit fullscreen mode

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
  });
});
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Then initialise your agents and choose your preferred agent loop:

npx playwright agents --loop=vscode/claude/opencode
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
vinav_mevada_4176b941c4c9 profile image
Vinav Mevada

I am getting below exception while executing code .

Error: Playwright Test did not expect test() to be called here.
Most common reasons include:

  • You are calling test() in a configuration file.
  • You are calling test() in a file that is imported by the configuration file.
  • You have two different versions of @playwright/test. This usually happens when one of the dependencies in your package.json depends on @playwright/test.

at seed.spec.ts:3

1 | import { test, expect } from '@playwright/test';
2 |

3 | test('User is able to login', async ({ page }) => {
| ^
4 | await page.goto('thinking-tester-contact-list.herok...);

Collapse
 
vinav_mevada_4176b941c4c9 profile image
Vinav Mevada

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 ?

Collapse
 
lokeshtheramaraja profile image
Lokesh Theramaraja

I am getting the same.. pls assist

Collapse
 
carien_hartzenberg_9ee032 profile image
Carien Hartzenberg • Edited

@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)?

Collapse
 
varun_kumar_5778fd2f95b09 profile image
varun kumar

@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.

Collapse
 
lokeshtheramaraja profile image
Lokesh Theramaraja

Getting below error for me and my whole team. unable to find any answers anywhere... pls assist folks.

Collapse
 
slobo989 profile image
Slobo989

There is a bug opened for this:
github.com/microsoft/playwright/is...

Collapse
 
oscaruzzo profile image
Oscaruzzo

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.

Collapse
 
oscaruzzo profile image
Oscaruzzo

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).

Collapse
 
debs_obrien profile image
Debbie O'Brien Playwright end to end Testing

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

Collapse
 
slobo989 profile image
Slobo989

Hello @debs_obrien is there a plan to release these agents to .net version of playwright?

Collapse
 
kailashpathak7 profile image
Kailash P.

Thanks Deb .. Explained very well.