wp-admin-browser

Name: wp-admin-browser
Author: mralaminahamed

25stars3forks

How to install wp-admin-browser?

mralaminahamed/wp-dev-skills/wp-admin-browser

$npx -y skills add mralaminahamed/wp-dev-skills --skill wp-admin-browser

Installs into the current project.

Summary

Use when a WordPress admin panel needs real browser interaction via Chrome DevTools MCP — logging in, navigating admin menus, clicking buttons, filling and submitting forms, creating/editing/deleting content through the UI, creating a temporary test admin user, verifying JS state

Files · 1

View on GitHub

SKILL.md

1	# WordPress Admin via Browser (Chrome DevTools MCP)
2
3	> Model note: Primarily MCP tool calls — navigate, fill, click. `haiku` works for simple CRUD flows. Complex UI sequences (multi-step forms, dynamic AJAX state) use `sonnet` to handle unexpected DOM states.
4
5	## When to use
6
7	- "Log in to the WordPress admin", "navigate to Settings > General", "create a test user".
8	- "Submit a form in WP admin", "upload a file via the media library", "save plugin settings".
9	- "Create a temporary admin account for testing instead of using the main admin user".
10	- "Verify a feature works end-to-end through the browser UI".
11
12	Not for: Headless automated testing without a real browser — use `wp-plugin-testing`. PHP code changes and plugin logic that don't require browser interaction.
13
14	## Core Rules — Non-Negotiable
15
16	1. Never touch the main admin user. Always create a temporary admin for testing.
17	2. All data operations go through the browser UI. No WP-CLI, no direct DB, no REST API calls to mutate data — use WordPress forms.
18	3. Navigate via menus, not hardcoded URLs. Click the menu item; don't jump straight to `/wp-admin/users.php?action=...`.
19	4. Use `fill_form` + click for all inputs. Never skip the form and post directly.
20
21	---
22
23	## Step 1 — Log In
24
25	```js
26	// POST to wp-login.php via fetch (fastest, no UI needed for login itself)
27	async () => {
28	const res = await fetch('/wp-login.php', {
29	method: 'POST',
30	headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
31	body: new URLSearchParams({
32	log: 'YOUR_USER',
33	pwd: 'YOUR_PASS',
34	'wp-submit': 'Log In',
35	redirect_to: '/wp-admin/',
36	testcookie: '1',
37	}),
38	credentials: 'include',
39	redirect: 'follow',
40	});
41	return { ok: res.ok, url: res.url };
42	}
43	```
44
45	Login via `fetch` is acceptable because it's a pure auth step — no data mutation.
46
47	---
48
49	## Step 2 — Create a Temporary Admin User
50
51	Always create a temp user before any testing that requires admin actions.
52
53	Navigate to Users → Add New via menu clicks, not direct URL.
54
55	```
56	Admin menu → Users → Add New
57	```
58
59	Fill the form using `fill_form`:
60
61	\| Field \| Value \|
62	\|-------\|-------\|
63	\| Username \| `tmp_admin_<timestamp>` \|
64	\| Email \| `tmp+<timestamp>@example.com` \|
65	\| First Name \| `Temp` \|
66	\| Last Name \| `Admin` \|
67	\| Role \| `Administrator` \|
68	\| Password \| strong generated password \|
69	\| Send notification \| unchecked \|
70
71	After testing: delete the temp user via Users list → hover → Delete.
72
73	---
74
75	## Step 3 — Get a REST Nonce (for read-only API calls only)
76
77	```js
78	async () => {
79	return fetch('/wp-admin/admin-ajax.php?action=rest-nonce', {
80	credentials: 'include',
81	}).then(r => r.text());
82	}
83	```
84
85	Use nonce only for GET requests to read data. All mutations go through WP forms.
86
87	---
88
89	## Browser Interaction Rules
90
91	### Navigation
92	```
93	✅ Click: Admin menu → Submenu item
94	❌ Never: navigate_page to hardcoded /wp-admin/edit.php?post_type=...
95	```
96
97	### Forms
98	```
99	✅ fill_form on visible fields → click Submit button
100	❌ Never: fetch POST directly to admin-post.php / admin-ajax.php for data changes
101	❌ Never: wp eval or wp post create via CLI for browser-visible operations
102	```
103
104	### Menus
105	Always wait for the page to load after each menu click before interacting with the next element.
106
107	---
108
109	## Data Operation Checklist
110
111	\| Operation \| Method \|
112	\|-----------\|--------\|
113	\| Create post/page \| Posts → Add New → fill form → Publish \|
114	\| Update user \| Users → find user → Edit → fill form → Update \|
115	\| Delete item \| List view → hover row → Delete (confirm dialog) \|
116	\| Change setting \| Settings menu → fill field → Save Changes \|
117	\| Install plugin \| Plugins → Add New → Search → Install → Activate \|
118
119	---
120
121	## Common Mistakes
122
123	\| Mistake \| Fix \|
124	\|---------\|-----\|
125	\| Using main admin for destructive tests \| Create temp

People who liked this also viewed

6 picks

Type

wp-admin-browser

25stars3forks

View on GitHub

How to install wp-admin-browser?

mralaminahamed/wp-dev-skills/wp-admin-browser

$npx -y skills add mralaminahamed/wp-dev-skills --skill wp-admin-browser

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# WordPress Admin via Browser (Chrome DevTools MCP)
2
3	> Model note: Primarily MCP tool calls — navigate, fill, click. `haiku` works for simple CRUD flows. Complex UI sequences (multi-step forms, dynamic AJAX state) use `sonnet` to handle unexpected DOM states.
4
5	## When to use
6
7	- "Log in to the WordPress admin", "navigate to Settings > General", "create a test user".
8	- "Submit a form in WP admin", "upload a file via the media library", "save plugin settings".
9	- "Create a temporary admin account for testing instead of using the main admin user".
10	- "Verify a feature works end-to-end through the browser UI".
11
12	Not for: Headless automated testing without a real browser — use `wp-plugin-testing`. PHP code changes and plugin logic that don't require browser interaction.
13
14	## Core Rules — Non-Negotiable
15
16	1. Never touch the main admin user. Always create a temporary admin for testing.
17	2. All data operations go through the browser UI. No WP-CLI, no direct DB, no REST API calls to mutate data — use WordPress forms.
18	3. Navigate via menus, not hardcoded URLs. Click the menu item; don't jump straight to `/wp-admin/users.php?action=...`.
19	4. Use `fill_form` + click for all inputs. Never skip the form and post directly.
20
21	---
22
23	## Step 1 — Log In
24
25	```js
26	// POST to wp-login.php via fetch (fastest, no UI needed for login itself)
27	async () => {
28	const res = await fetch('/wp-login.php', {
29	method: 'POST',
30	headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
31	body: new URLSearchParams({
32	log: 'YOUR_USER',
33	pwd: 'YOUR_PASS',
34	'wp-submit': 'Log In',
35	redirect_to: '/wp-admin/',
36	testcookie: '1',
37	}),
38	credentials: 'include',
39	redirect: 'follow',
40	});
41	return { ok: res.ok, url: res.url };
42	}
43	```
44
45	Login via `fetch` is acceptable because it's a pure auth step — no data mutation.
46
47	---
48
49	## Step 2 — Create a Temporary Admin User
50
51	Always create a temp user before any testing that requires admin actions.
52
53	Navigate to Users → Add New via menu clicks, not direct URL.
54
55	```
56	Admin menu → Users → Add New
57	```
58
59	Fill the form using `fill_form`:
60
61	\| Field \| Value \|
62	\|-------\|-------\|
63	\| Username \| `tmp_admin_<timestamp>` \|
64	\| Email \| `tmp+<timestamp>@example.com` \|
65	\| First Name \| `Temp` \|
66	\| Last Name \| `Admin` \|
67	\| Role \| `Administrator` \|
68	\| Password \| strong generated password \|
69	\| Send notification \| unchecked \|
70
71	After testing: delete the temp user via Users list → hover → Delete.
72
73	---
74
75	## Step 3 — Get a REST Nonce (for read-only API calls only)
76
77	```js
78	async () => {
79	return fetch('/wp-admin/admin-ajax.php?action=rest-nonce', {
80	credentials: 'include',
81	}).then(r => r.text());
82	}
83	```
84
85	Use nonce only for GET requests to read data. All mutations go through WP forms.
86
87	---
88
89	## Browser Interaction Rules
90
91	### Navigation
92	```
93	✅ Click: Admin menu → Submenu item
94	❌ Never: navigate_page to hardcoded /wp-admin/edit.php?post_type=...
95	```
96
97	### Forms
98	```
99	✅ fill_form on visible fields → click Submit button
100	❌ Never: fetch POST directly to admin-post.php / admin-ajax.php for data changes
101	❌ Never: wp eval or wp post create via CLI for browser-visible operations
102	```
103
104	### Menus
105	Always wait for the page to load after each menu click before interacting with the next element.
106
107	---
108
109	## Data Operation Checklist
110
111	\| Operation \| Method \|
112	\|-----------\|--------\|
113	\| Create post/page \| Posts → Add New → fill form → Publish \|
114	\| Update user \| Users → find user → Edit → fill form → Update \|
115	\| Delete item \| List view → hover row → Delete (confirm dialog) \|
116	\| Change setting \| Settings menu → fill field → Save Changes \|
117	\| Install plugin \| Plugins → Add New → Search → Install → Activate \|
118
119	---
120
121	## Common Mistakes
122
123	\| Mistake \| Fix \|
124	\|---------\|-----\|
125	\| Using main admin for destructive tests \| Create temp

People who liked this also viewed

6 picks

Type