You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Playwright comes with three Playwright Agents out of the box: **🎭 planner**, **🎭 generator** and **🎭 healer**.
9
9
10
-
Playwright’s agentic workflow makes it possible to generate test coverage in three straightforward steps.
11
-
These steps can be performed independently, manually, or as chained calls in an agentic loop.
10
+
These agents can be used independently, sequentially, or as the chained calls in the agentic loop.
11
+
Using them sequentially will produce test coverage for your product.
12
12
13
-
1.**Plan**: A planning agent explores the app and produces a test plan in `specs/*.md`.
13
+
***🎭 planner**explores the app and produces a Markdown test plan
14
14
15
-
2.**Generate**: A generating agent transforms the plan into `tests/*.spec.ts` files. It executes actions against your site to verify selectors and flows, then emits testing code and assertions.
15
+
***🎭 generator**transforms the Markdown plan into the Playwright Test files
16
16
17
-
3.**Heal**: A healing agent executes the test suite and automatically repairs failing tests by applying diffs in place.
17
+
***🎭 healer**executes the test suite and automatically repairs failing tests
18
18
19
19
### Getting Started
20
20
21
-
In order to use Playwright Agents, you must add their definitions to your project using
21
+
Start with adding Playwright Agent definitions to your project using
22
22
the `init-agents` command. These definitions should be regenerated whenever Playwright
23
-
is updated.
23
+
is updated to pick up new tools and instructions.
24
24
25
-
You need to run this command for each agentic loop you will be using:
26
-
27
-
```bash
28
-
# Generate agent files for each agentic loop
29
-
# Visual Studio Code
25
+
```bash tab=bash-vscode
30
26
npx playwright init-agents --loop=vscode
31
-
# Claude Code
27
+
```
28
+
29
+
```bash tab=bash-claude
32
30
npx playwright init-agents --loop=claude
33
-
# opencode
31
+
```
32
+
33
+
```bash tab=bash-opencode
34
34
npx playwright init-agents --loop=opencode
35
35
```
36
36
37
-
Once the agents have been generated, you can use your AI tool of choice to command these agents to build Playwright Tests. Playwright splits this into three steps with one agent per step:
37
+
Once the agents have been generated, you can use your AI tool of choice to command these agents to build Playwright Tests.
38
+
38
39
39
-
## 1. Plan
40
+
## 🎭 Planner
40
41
41
-
The planning agent explores your app environment and produces a test plan for one or many scenarios and user flows.
42
+
Planner agent explores your app and produces a test plan for one or many scenarios and user flows.
42
43
43
44
**Input**
44
45
45
-
* A clear request to the planning agent (e.g., “Generate a plan for guest checkout.”)
46
-
* A live app entry point (URL) or a seed Playwright test that sets up the environment necessary to talk to your app
47
-
* A Product Requirement Document (PRD) (optional)
46
+
* A clear request to the planner (e.g., “Generate a plan for guest checkout.”)
47
+
* A `seed test` that sets up the environment necessary to interact with your app
48
+
**(optional)*A Product Requirement Document (PRD) for context
<agent:planner> Generate a test plan for "Guest Checkout" scenario.
53
-
Use `seed.spec.ts` as a seed test for the plan.
54
+
> - Notice how the `seed.spec.ts` is included in the context of the planner.
55
+
> - 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.
56
+
> - 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.
57
+
58
+
```js title="Example: seed.spec.ts"
59
+
import { test, expect } from'./fixtures';
60
+
61
+
test('seed', async ({ page }) => {
62
+
// this test uses custom fixtures from ./fixtures
63
+
});
54
64
```
55
65
56
66
**Output**
57
67
58
-
* A Markdown test plan saved to `specs/[scenario name].md`. The plan is human-readable but precise enough for test generation.
68
+
* A Markdown test plan saved as `specs/basic-operations.md`.
69
+
* The plan is human-readable but precise enough for test generation.
# TodoMVC Application - Basic Operations Test Plan
65
76
66
-
## Purpose
67
-
Allow a user to purchase without creating an account.
77
+
## Application Overview
68
78
69
-
## Preconditions
70
-
- Test seed `tests/seed.spec.ts`.
71
-
- Payment sandbox credentials available via env vars.
79
+
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:
72
80
73
-
## Scenarios
81
+
- **Task Management**: Add, edit, complete, and delete individual todos
82
+
- **Bulk Operations**: Mark all todos as complete/incomplete and clear all completed todos
83
+
- **Filtering System**: View todos by All, Active, or Completed status with URL routing support
84
+
- **Real-time Counter**: Display of active (incomplete) todo count
85
+
- **Interactive UI**: Hover states, edit-in-place functionality, and responsive design
86
+
- **State Persistence**: Maintains state during session navigation
74
87
75
-
### SC-1: Add single item to cart and purchase
76
-
**Steps**
77
-
1. Open home page.
78
-
2. Search for "Wireless Mouse".
79
-
3. Open product page and add to cart.
80
-
4. Proceed to checkout as guest.
81
-
5. Fill shipping and payment details.
82
-
6. Confirm order.
88
+
## Test Scenarios
83
89
84
-
**Expected**
85
-
- Cart count increments after item is added.
86
-
- Checkout page shows item, price, tax, and total.
87
-
- Order confirmation number appears; status is "Processing".
90
+
### 1. Adding New Todos
88
91
89
-
### SC-2: Tax and shipping recalculation on address change
0 commit comments