Skip to content

Commit 63dd02e

Browse files
Ihor-KhomenkoIhor-Khomenko
committed
added skills for Playwright MCP, updated Cursor and Claude instructions
1 parent 5b90660 commit 63dd02e

12 files changed

Lines changed: 1403 additions & 1 deletion

File tree

‎.claude/skills/playwright-cli/SKILL.md‎

Lines changed: 282 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,282 @@
1+
---
2+
name: playwright-cli
3+
description: Interactive browser automation via playwright-cli (snapshots, tracing, exploration). For the OpenProject E2E repo, committed Playwright tests follow .cursor/skills/tests/SKILL.md; use this skill for CLI sessions and mapping selectors into locators, not for pasting raw page.* calls into specs.
4+
allowed-tools: Bash(playwright-cli:*)
5+
---
6+
7+
# Browser Automation with playwright-cli
8+
9+
## This repository (openproject-e2e)
10+
11+
When this workspace is the OpenProject E2E integration test repo, `playwright-cli` is for **interactive exploration**: navigating apps, snapshots, optional tracing/video, and discovering resilient selector strategies. **Committed code** (specs, page objects, locators) must follow [`.cursor/skills/tests/SKILL.md`](../../../.cursor/skills/tests/SKILL.md): JSON locators in `locators/`, page objects with `getLocator`, no inline selectors in `tests/`, and the logging/error conventions documented there. Generated TypeScript lines from the CLI are inputs for locator keys and page methods, not copy-paste test bodies.
12+
13+
## Quick start
14+
15+
```bash
16+
# open new browser
17+
playwright-cli open
18+
# navigate to a page
19+
playwright-cli goto https://playwright.dev
20+
# interact with the page using refs from the snapshot
21+
playwright-cli click e15
22+
playwright-cli type "page.click"
23+
playwright-cli press Enter
24+
# take a screenshot (rarely used, as snapshot is more common)
25+
playwright-cli screenshot
26+
# close the browser
27+
playwright-cli close
28+
```
29+
30+
## Commands
31+
32+
### Core
33+
34+
```bash
35+
playwright-cli open
36+
# open and navigate right away
37+
playwright-cli open https://example.com/
38+
playwright-cli goto https://playwright.dev
39+
playwright-cli type "search query"
40+
playwright-cli click e3
41+
playwright-cli dblclick e7
42+
playwright-cli fill e5 "user@example.com"
43+
playwright-cli drag e2 e8
44+
playwright-cli hover e4
45+
playwright-cli select e9 "option-value"
46+
playwright-cli upload ./document.pdf
47+
playwright-cli check e12
48+
playwright-cli uncheck e12
49+
playwright-cli snapshot
50+
playwright-cli snapshot --filename=after-click.yaml
51+
playwright-cli eval "document.title"
52+
playwright-cli eval "el => el.textContent" e5
53+
playwright-cli dialog-accept
54+
playwright-cli dialog-accept "confirmation text"
55+
playwright-cli dialog-dismiss
56+
playwright-cli resize 1920 1080
57+
playwright-cli close
58+
```
59+
60+
### Navigation
61+
62+
```bash
63+
playwright-cli go-back
64+
playwright-cli go-forward
65+
playwright-cli reload
66+
```
67+
68+
### Keyboard
69+
70+
```bash
71+
playwright-cli press Enter
72+
playwright-cli press ArrowDown
73+
playwright-cli keydown Shift
74+
playwright-cli keyup Shift
75+
```
76+
77+
### Mouse
78+
79+
```bash
80+
playwright-cli mousemove 150 300
81+
playwright-cli mousedown
82+
playwright-cli mousedown right
83+
playwright-cli mouseup
84+
playwright-cli mouseup right
85+
playwright-cli mousewheel 0 100
86+
```
87+
88+
### Save as
89+
90+
```bash
91+
playwright-cli screenshot
92+
playwright-cli screenshot e5
93+
playwright-cli screenshot --filename=page.png
94+
playwright-cli pdf --filename=page.pdf
95+
```
96+
97+
### Tabs
98+
99+
```bash
100+
playwright-cli tab-list
101+
playwright-cli tab-new
102+
playwright-cli tab-new https://example.com/page
103+
playwright-cli tab-close
104+
playwright-cli tab-close 2
105+
playwright-cli tab-select 0
106+
```
107+
108+
### Storage
109+
110+
```bash
111+
playwright-cli state-save
112+
playwright-cli state-save auth.json
113+
playwright-cli state-load auth.json
114+
115+
# Cookies
116+
playwright-cli cookie-list
117+
playwright-cli cookie-list --domain=example.com
118+
playwright-cli cookie-get session_id
119+
playwright-cli cookie-set session_id abc123
120+
playwright-cli cookie-set session_id abc123 --domain=example.com --httpOnly --secure
121+
playwright-cli cookie-delete session_id
122+
playwright-cli cookie-clear
123+
124+
# LocalStorage
125+
playwright-cli localstorage-list
126+
playwright-cli localstorage-get theme
127+
playwright-cli localstorage-set theme dark
128+
playwright-cli localstorage-delete theme
129+
playwright-cli localstorage-clear
130+
131+
# SessionStorage
132+
playwright-cli sessionstorage-list
133+
playwright-cli sessionstorage-get step
134+
playwright-cli sessionstorage-set step 3
135+
playwright-cli sessionstorage-delete step
136+
playwright-cli sessionstorage-clear
137+
```
138+
139+
### Network
140+
141+
```bash
142+
playwright-cli route "**/*.jpg" --status=404
143+
playwright-cli route "https://api.example.com/**" --body='{"mock": true}'
144+
playwright-cli route-list
145+
playwright-cli unroute "**/*.jpg"
146+
playwright-cli unroute
147+
```
148+
149+
### DevTools
150+
151+
```bash
152+
playwright-cli console
153+
playwright-cli console warning
154+
playwright-cli network
155+
playwright-cli run-code "async page => await page.context().grantPermissions(['geolocation'])"
156+
playwright-cli tracing-start
157+
playwright-cli tracing-stop
158+
playwright-cli video-start
159+
playwright-cli video-stop video.webm
160+
```
161+
162+
## Open parameters
163+
```bash
164+
# Use specific browser when creating session
165+
playwright-cli open --browser=chrome
166+
playwright-cli open --browser=firefox
167+
playwright-cli open --browser=webkit
168+
playwright-cli open --browser=msedge
169+
# Connect to browser via extension
170+
playwright-cli open --extension
171+
172+
# Use persistent profile (by default profile is in-memory)
173+
playwright-cli open --persistent
174+
# Use persistent profile with custom directory
175+
playwright-cli open --profile=/path/to/profile
176+
177+
# Start with config file
178+
playwright-cli open --config=my-config.json
179+
180+
# Close the browser
181+
playwright-cli close
182+
# Delete user data for the default session
183+
playwright-cli delete-data
184+
```
185+
186+
## Snapshots
187+
188+
After each command, playwright-cli provides a snapshot of the current browser state.
189+
190+
```bash
191+
> playwright-cli goto https://example.com
192+
### Page
193+
- Page URL: https://example.com/
194+
- Page Title: Example Domain
195+
### Snapshot
196+
[Snapshot](.playwright-cli/page-2026-02-14T19-22-42-679Z.yml)
197+
```
198+
199+
You can also take a snapshot on demand using `playwright-cli snapshot` command.
200+
201+
If `--filename` is not provided, a new snapshot file is created with a timestamp. Default to automatic file naming, use `--filename=` when artifact is a part of the workflow result.
202+
203+
## Browser Sessions
204+
205+
```bash
206+
# create new browser session named "mysession" with persistent profile
207+
playwright-cli -s=mysession open example.com --persistent
208+
# same with manually specified profile directory (use when requested explicitly)
209+
playwright-cli -s=mysession open example.com --profile=/path/to/profile
210+
playwright-cli -s=mysession click e6
211+
playwright-cli -s=mysession close # stop a named browser
212+
playwright-cli -s=mysession delete-data # delete user data for persistent session
213+
214+
playwright-cli list
215+
# Close all browsers
216+
playwright-cli close-all
217+
# Forcefully kill all browser processes
218+
playwright-cli kill-all
219+
```
220+
221+
## Local installation
222+
223+
In some cases user might want to install playwright-cli locally. If running globally available `playwright-cli` binary fails, use `npx playwright-cli` to run the commands. For example:
224+
225+
```bash
226+
npx playwright-cli open https://example.com
227+
npx playwright-cli click e1
228+
```
229+
230+
## Example: Form submission
231+
232+
```bash
233+
playwright-cli open https://example.com/form
234+
playwright-cli snapshot
235+
236+
playwright-cli fill e1 "user@example.com"
237+
playwright-cli fill e2 "password123"
238+
playwright-cli click e3
239+
playwright-cli snapshot
240+
playwright-cli close
241+
```
242+
243+
## Example: Multi-tab workflow
244+
245+
```bash
246+
playwright-cli open https://example.com
247+
playwright-cli tab-new https://example.com/other
248+
playwright-cli tab-list
249+
playwright-cli tab-select 0
250+
playwright-cli snapshot
251+
playwright-cli close
252+
```
253+
254+
## Example: Debugging with DevTools
255+
256+
```bash
257+
playwright-cli open https://example.com
258+
playwright-cli click e4
259+
playwright-cli fill e7 "test"
260+
playwright-cli console
261+
playwright-cli network
262+
playwright-cli close
263+
```
264+
265+
```bash
266+
playwright-cli open https://example.com
267+
playwright-cli tracing-start
268+
playwright-cli click e4
269+
playwright-cli fill e7 "test"
270+
playwright-cli tracing-stop
271+
playwright-cli close
272+
```
273+
274+
## Specific tasks
275+
276+
* **Request mocking** [references/request-mocking.md](references/request-mocking.md)
277+
* **Running Playwright code** [references/running-code.md](references/running-code.md)
278+
* **Browser session management** [references/session-management.md](references/session-management.md)
279+
* **Storage state (cookies, localStorage)** [references/storage-state.md](references/storage-state.md)
280+
* **Test generation** [references/test-generation.md](references/test-generation.md)
281+
* **Tracing** [references/tracing.md](references/tracing.md)
282+
* **Video recording** [references/video-recording.md](references/video-recording.md)

‎.claude/skills/playwright-cli/references/request-mocking.md‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
# Request Mocking
2+
3+
Intercept, mock, modify, and block network requests.
4+
5+
**OpenProject E2E repository:** `playwright-cli route` and `run-code` routing are for **CLI-driven** sessions. For **committed Playwright tests**, prefer `page.route` in fixtures or test setup if needed, and keep selectors and UI structure aligned with `.cursor/skills/tests/SKILL.md` (locators JSON, page objects).
6+
7+
## CLI Route Commands
8+
9+
```bash
10+
# Mock with custom status
11+
playwright-cli route "**/*.jpg" --status=404
12+
13+
# Mock with JSON body
14+
playwright-cli route "**/api/users" --body='[{"id":1,"name":"Alice"}]' --content-type=application/json
15+
16+
# Mock with custom headers
17+
playwright-cli route "**/api/data" --body='{"ok":true}' --header="X-Custom: value"
18+
19+
# Remove headers from requests
20+
playwright-cli route "**/*" --remove-header=cookie,authorization
21+
22+
# List active routes
23+
playwright-cli route-list
24+
25+
# Remove a route or all routes
26+
playwright-cli unroute "**/*.jpg"
27+
playwright-cli unroute
28+
```
29+
30+
## URL Patterns
31+
32+
```
33+
**/api/users - Exact path match
34+
**/api/*/details - Wildcard in path
35+
**/*.{png,jpg,jpeg} - Match file extensions
36+
**/search?q=* - Match query parameters
37+
```
38+
39+
## Advanced Mocking with run-code
40+
41+
For conditional responses, request body inspection, response modification, or delays:
42+
43+
### Conditional Response Based on Request
44+
45+
```bash
46+
playwright-cli run-code "async page => {
47+
await page.route('**/api/login', route => {
48+
const body = route.request().postDataJSON();
49+
if (body.username === 'admin') {
50+
route.fulfill({ body: JSON.stringify({ token: 'mock-token' }) });
51+
} else {
52+
route.fulfill({ status: 401, body: JSON.stringify({ error: 'Invalid' }) });
53+
}
54+
});
55+
}"
56+
```
57+
58+
### Modify Real Response
59+
60+
```bash
61+
playwright-cli run-code "async page => {
62+
await page.route('**/api/user', async route => {
63+
const response = await route.fetch();
64+
const json = await response.json();
65+
json.isPremium = true;
66+
await route.fulfill({ response, json });
67+
});
68+
}"
69+
```
70+
71+
### Simulate Network Failures
72+
73+
```bash
74+
playwright-cli run-code "async page => {
75+
await page.route('**/api/offline', route => route.abort('internetdisconnected'));
76+
}"
77+
# Options: connectionrefused, timedout, connectionreset, internetdisconnected
78+
```
79+
80+
### Delayed Response
81+
82+
```bash
83+
playwright-cli run-code "async page => {
84+
await page.route('**/api/slow', async route => {
85+
await new Promise(r => setTimeout(r, 3000));
86+
route.fulfill({ body: JSON.stringify({ data: 'loaded' }) });
87+
});
88+
}"
89+
```

0 commit comments

Comments
 (0)