webapp-testing

Name: webapp-testing
Author: skateddu

27stars4forks

How to install webapp-testing?

skateddu/claude-code-python-setup/webapp-testing

$npx -y skills add skateddu/claude-code-python-setup --skill webapp-testing

Installs into the current project.

Summary

Toolkit for interacting with and testing local web applications using Playwright. Supports verifying frontend functionality, debugging UI behavior, capturing browser screenshots, and viewing browser logs.

Files · 1

View on GitHub

SKILL.md

1	# Web Application Testing
2
3	To test local web applications, write native Python Playwright scripts.
4
5	Helper Scripts Available:
6	- `scripts/with_server.py` - Manages server lifecycle (supports multiple servers)
7
8	Always run scripts with `--help` first to see usage. DO NOT read the source until you try running the script first and find that a customized solution is abslutely necessary. These scripts can be very large and thus pollute your context window. They exist to be called directly as black-box scripts rather than ingested into your context window.
9
10	## Decision Tree: Choosing Your Approach
11
12	```
13	User task → Is it static HTML?
14	├─ Yes → Read HTML file directly to identify selectors
15	│ ├─ Success → Write Playwright script using selectors
16	│ └─ Fails/Incomplete → Treat as dynamic (below)
17	│
18	└─ No (dynamic webapp) → Is the server already running?
19	├─ No → Run: python scripts/with_server.py --help
20	│ Then use the helper + write simplified Playwright script
21	│
22	└─ Yes → Reconnaissance-then-action:
23	1. Navigate and wait for networkidle
24	2. Take screenshot or inspect DOM
25	3. Identify selectors from rendered state
26	4. Execute actions with discovered selectors
27	```
28
29	## Example: Using with_server.py
30
31	To start a server, run `--help` first, then use the helper:
32
33	Single server:
34	```bash
35	python scripts/with_server.py --server "npm run dev" --port 5173 -- python your_automation.py
36	```
37
38	Multiple servers (e.g., backend + frontend):
39	```bash
40	python scripts/with_server.py \
41	--server "cd backend && python server.py" --port 3000 \
42	--server "cd frontend && npm run dev" --port 5173 \
43	-- python your_automation.py
44	```
45
46	To create an automation script, include only Playwright logic (servers are managed automatically):
47	```python
48	from playwright.sync_api import sync_playwright
49
50	with sync_playwright() as p:
51	browser = p.chromium.launch(headless=True) # Always launch chromium in headless mode
52	page = browser.new_page()
53	page.goto('http://localhost:5173') # Server already running and ready
54	page.wait_for_load_state('networkidle') # CRITICAL: Wait for JS to execute
55	# ... your automation logic
56	browser.close()
57	```
58
59	## Reconnaissance-Then-Action Pattern
60
61	1. Inspect rendered DOM:
62	```python
63	page.screenshot(path='/tmp/inspect.png', full_page=True)
64	content = page.content()
65	page.locator('button').all()
66	```
67
68	2. Identify selectors from inspection results
69
70	3. Execute actions using discovered selectors
71
72	## Common Pitfall
73
74	❌ Don't inspect the DOM before waiting for `networkidle` on dynamic apps
75	✅ Do wait for `page.wait_for_load_state('networkidle')` before inspection
76
77	## Best Practices
78
79	- Use bundled scripts as black boxes - To accomplish a task, consider whether one of the scripts available in `scripts/` can help. These scripts handle common, complex workflows reliably without cluttering the context window. Use `--help` to see usage, then invoke directly.
80	- Use `sync_playwright()` for synchronous scripts
81	- Always close the browser when done
82	- Use descriptive selectors: `text=`, `role=`, CSS selectors, or IDs
83	- Add appropriate waits: `page.wait_for_selector()` or `page.wait_for_timeout()`
84
85	## Reference Files
86
87	- examples/ - Examples showing common patterns:
88	- `element_discovery.py` - Discovering buttons, links, and inputs on a page
89	- `static_html_automation.py` - Using file:// URLs for local HTML
90	- `console_logging.py` - Capturing console logs during automation

People who liked this also viewed

6 picks

Type

webapp-testing

27stars4forks

View on GitHub

How to install webapp-testing?

skateddu/claude-code-python-setup/webapp-testing

$npx -y skills add skateddu/claude-code-python-setup --skill webapp-testing

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Web Application Testing
2
3	To test local web applications, write native Python Playwright scripts.
4
5	Helper Scripts Available:
6	- `scripts/with_server.py` - Manages server lifecycle (supports multiple servers)
7
8	Always run scripts with `--help` first to see usage. DO NOT read the source until you try running the script first and find that a customized solution is abslutely necessary. These scripts can be very large and thus pollute your context window. They exist to be called directly as black-box scripts rather than ingested into your context window.
9
10	## Decision Tree: Choosing Your Approach
11
12	```
13	User task → Is it static HTML?
14	├─ Yes → Read HTML file directly to identify selectors
15	│ ├─ Success → Write Playwright script using selectors
16	│ └─ Fails/Incomplete → Treat as dynamic (below)
17	│
18	└─ No (dynamic webapp) → Is the server already running?
19	├─ No → Run: python scripts/with_server.py --help
20	│ Then use the helper + write simplified Playwright script
21	│
22	└─ Yes → Reconnaissance-then-action:
23	1. Navigate and wait for networkidle
24	2. Take screenshot or inspect DOM
25	3. Identify selectors from rendered state
26	4. Execute actions with discovered selectors
27	```
28
29	## Example: Using with_server.py
30
31	To start a server, run `--help` first, then use the helper:
32
33	Single server:
34	```bash
35	python scripts/with_server.py --server "npm run dev" --port 5173 -- python your_automation.py
36	```
37
38	Multiple servers (e.g., backend + frontend):
39	```bash
40	python scripts/with_server.py \
41	--server "cd backend && python server.py" --port 3000 \
42	--server "cd frontend && npm run dev" --port 5173 \
43	-- python your_automation.py
44	```
45
46	To create an automation script, include only Playwright logic (servers are managed automatically):
47	```python
48	from playwright.sync_api import sync_playwright
49
50	with sync_playwright() as p:
51	browser = p.chromium.launch(headless=True) # Always launch chromium in headless mode
52	page = browser.new_page()
53	page.goto('http://localhost:5173') # Server already running and ready
54	page.wait_for_load_state('networkidle') # CRITICAL: Wait for JS to execute
55	# ... your automation logic
56	browser.close()
57	```
58
59	## Reconnaissance-Then-Action Pattern
60
61	1. Inspect rendered DOM:
62	```python
63	page.screenshot(path='/tmp/inspect.png', full_page=True)
64	content = page.content()
65	page.locator('button').all()
66	```
67
68	2. Identify selectors from inspection results
69
70	3. Execute actions using discovered selectors
71
72	## Common Pitfall
73
74	❌ Don't inspect the DOM before waiting for `networkidle` on dynamic apps
75	✅ Do wait for `page.wait_for_load_state('networkidle')` before inspection
76
77	## Best Practices
78
79	- Use bundled scripts as black boxes - To accomplish a task, consider whether one of the scripts available in `scripts/` can help. These scripts handle common, complex workflows reliably without cluttering the context window. Use `--help` to see usage, then invoke directly.
80	- Use `sync_playwright()` for synchronous scripts
81	- Always close the browser when done
82	- Use descriptive selectors: `text=`, `role=`, CSS selectors, or IDs
83	- Add appropriate waits: `page.wait_for_selector()` or `page.wait_for_timeout()`
84
85	## Reference Files
86
87	- examples/ - Examples showing common patterns:
88	- `element_discovery.py` - Discovering buttons, links, and inputs on a page
89	- `static_html_automation.py` - Using file:// URLs for local HTML
90	- `console_logging.py` - Capturing console logs during automation

People who liked this also viewed

6 picks

Type