{"id":"f4a45e16-139d-4453-ad72-cf44b22c0a22","shortId":"2ABubM","kind":"skill","title":"webapp-testing","tagline":"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.","description":"# Web Application Testing\n\nTo test local web applications, write native Python Playwright scripts.\n\n**Helper Scripts Available**:\n- `scripts/with_server.py` - Manages server lifecycle (supports multiple servers)\n\n**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.\n\n## Decision Tree: Choosing Your Approach\n\n```\nUser task → Is it static HTML?\n    ├─ Yes → Read HTML file directly to identify selectors\n    │         ├─ Success → Write Playwright script using selectors\n    │         └─ Fails/Incomplete → Treat as dynamic (below)\n    │\n    └─ No (dynamic webapp) → Is the server already running?\n        ├─ No → Run: python scripts/with_server.py --help\n        │        Then use the helper + write simplified Playwright script\n        │\n        └─ Yes → Reconnaissance-then-action:\n            1. Navigate and wait for networkidle\n            2. Take screenshot or inspect DOM\n            3. Identify selectors from rendered state\n            4. Execute actions with discovered selectors\n```\n\n## Example: Using with_server.py\n\nTo start a server, run `--help` first, then use the helper:\n\n**Single server:**\n```bash\npython scripts/with_server.py --server \"npm run dev\" --port 5173 -- python your_automation.py\n```\n\n**Multiple servers (e.g., backend + frontend):**\n```bash\npython scripts/with_server.py \\\n  --server \"cd backend && python server.py\" --port 3000 \\\n  --server \"cd frontend && npm run dev\" --port 5173 \\\n  -- python your_automation.py\n```\n\nTo create an automation script, include only Playwright logic (servers are managed automatically):\n```python\nfrom playwright.sync_api import sync_playwright\n\nwith sync_playwright() as p:\n    browser = p.chromium.launch(headless=True) # Always launch chromium in headless mode\n    page = browser.new_page()\n    page.goto('http://localhost:5173') # Server already running and ready\n    page.wait_for_load_state('networkidle') # CRITICAL: Wait for JS to execute\n    # ... your automation logic\n    browser.close()\n```\n\n## Reconnaissance-Then-Action Pattern\n\n1. **Inspect rendered DOM**:\n   ```python\n   page.screenshot(path='/tmp/inspect.png', full_page=True)\n   content = page.content()\n   page.locator('button').all()\n   ```\n\n2. **Identify selectors** from inspection results\n\n3. **Execute actions** using discovered selectors\n\n## Common Pitfall\n\n❌ **Don't** inspect the DOM before waiting for `networkidle` on dynamic apps\n✅ **Do** wait for `page.wait_for_load_state('networkidle')` before inspection\n\n## Best Practices\n\n- **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. \n- Use `sync_playwright()` for synchronous scripts\n- Always close the browser when done\n- Use descriptive selectors: `text=`, `role=`, CSS selectors, or IDs\n- Add appropriate waits: `page.wait_for_selector()` or `page.wait_for_timeout()`\n\n## Reference Files\n\n- **examples/** - Examples showing common patterns:\n  - `element_discovery.py` - Discovering buttons, links, and inputs on a page\n  - `static_html_automation.py` - Using file:// URLs for local HTML\n  - `console_logging.py` - Capturing console logs during automation","tags":["webapp","testing","skills","anthropics","agent-skills"],"capabilities":["skill","source-anthropics","skill-webapp-testing","topic-agent-skills"],"categories":["skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/anthropics/skills/webapp-testing","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add anthropics/skills","source_repo":"https://github.com/anthropics/skills","install_from":"skills.sh"}},"qualityScore":"0.950","qualityRationale":"deterministic score 0.95 from registry signals: · indexed on github topic:agent-skills · official publisher · 136948 github stars · SKILL.md body (3,574 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T18:50:07.948Z","embedding":null,"createdAt":"2026-04-18T20:23:47.350Z","updatedAt":"2026-05-18T18:50:07.948Z","lastSeenAt":"2026-05-18T18:50:07.948Z","tsv":"'/tmp/inspect.png':317 '1':168,310 '2':174,326 '3':180,332 '3000':233 '4':186 '5173':216,241,284 'abslut':80 'accomplish':371 'action':167,188,308,334 'add':426 'alreadi':148,286 'alway':52,273,411 'api':260 'app':351 'applic':12,30,36 'approach':116 'appropri':427 'autom':247,302,463 'automat':256 'avail':44,380 'backend':222,229 'bash':208,224 'behavior':21 'best':362 'black':102,368 'black-box':101 'box':103,369 'browser':23,27,269,414 'browser.close':304 'browser.new':280 'bundl':365 'button':324,445 'call':98 'captur':22,459 'cd':228,235 'choos':114 'chromium':275 'close':412 'clutter':393 'common':338,388,441 'complex':389 'consid':374 'consol':460 'console_logging.py':458 'content':321 'context':92,110,395 'creat':245 'critic':295 'css':422 'custom':77 'debug':19 'decis':112 'descript':418 'dev':214,239 'direct':99,127,404 'discov':190,336,444 'dom':179,313,344 'done':416 'dynam':140,143,350 'e.g':221 'element_discovery.py':443 'exampl':192,438,439 'execut':187,300,333 'exist':95 'fails/incomplete':137 'file':126,437 'find':74 'first':57,72,201 'frontend':17,223,236 'full':318 'function':18 'handl':387 'headless':271,277 'help':56,154,200,384,398 'helper':42,158,205 'html':122,125,457 'id':425 'identifi':129,181,327 'import':261 'includ':249 'ingest':107 'input':448 'inspect':178,311,330,342,361 'interact':6 'invok':403 'js':298 'larg':87 'launch':274 'lifecycl':48 'link':446 'load':292,357 'local':10,34,456 'localhost':283 'log':28,461 'logic':252,303 'manag':46,255 'mode':278 'multipl':50,219 'nativ':38 'navig':169 'necessari':81 'networkidl':173,294,348,359 'npm':212,237 'one':376 'p':268 'p.chromium.launch':270 'page':279,281,319,451 'page.content':322 'page.goto':282 'page.locator':323 'page.screenshot':315 'page.wait':290,355,429,433 'path':316 'pattern':309,442 'pitfal':339 'playwright':14,40,133,161,251,263,266,407 'playwright.sync':259 'pollut':90 'port':215,232,240 'practic':363 'python':39,152,209,217,225,230,242,257,314 'rather':105 'read':63,124 'readi':289 'reconnaiss':165,306 'reconnaissance-then-act':164,305 'refer':436 'reliabl':391 'render':184,312 'result':331 'role':421 'run':53,69,149,151,199,213,238,287 'screenshot':24,176 'script':41,43,54,71,83,104,134,162,248,366,379,382,386,410 'scripts/with_server.py':45,153,210,226 'see':59,400 'selector':130,136,182,191,328,337,419,423,431 'server':47,51,147,198,207,211,220,227,234,253,285 'server.py':231 'show':440 'simplifi':160 'singl':206 'skill' 'skill-webapp-testing' 'solut':78 'sourc':65 'source-anthropics' 'start':196 'state':185,293,358 'static':121 'static_html_automation.py':452 'success':131 'support':15,49 'sync':262,265,406 'synchron':409 'take':175 'task':118,373 'test':3,9,31,33 'text':420 'thus':89 'timeout':435 'toolkit':4 'topic-agent-skills' 'treat':138 'tree':113 'tri':68 'true':272,320 'ui':20 'url':454 'usag':60,401 'use':13,135,156,193,203,335,364,397,405,417,453 'user':117 'verifi':16 'view':26 'wait':171,296,346,353,428 'web':11,29,35 'webapp':2,144 'webapp-test':1 'whether':375 'window':93,111,396 'with_server.py':194 'without':392 'workflow':390 'write':37,132,159 'yes':123,163 'your_automation.py':218,243","prices":[{"id":"d5110922-b0b8-4cb1-a83f-71b946b497d8","listingId":"f4a45e16-139d-4453-ad72-cf44b22c0a22","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"anthropics","category":"skills","install_from":"skills.sh"},"createdAt":"2026-04-18T20:23:47.350Z"}],"sources":[{"listingId":"f4a45e16-139d-4453-ad72-cf44b22c0a22","source":"github","sourceId":"anthropics/skills/webapp-testing","sourceUrl":"https://github.com/anthropics/skills/tree/main/skills/webapp-testing","isPrimary":false,"firstSeenAt":"2026-04-18T21:24:31.475Z","lastSeenAt":"2026-05-18T18:50:07.948Z"},{"listingId":"f4a45e16-139d-4453-ad72-cf44b22c0a22","source":"skills_sh","sourceId":"anthropics/skills/webapp-testing","sourceUrl":"https://skills.sh/anthropics/skills/webapp-testing","isPrimary":true,"firstSeenAt":"2026-04-18T20:23:47.350Z","lastSeenAt":"2026-05-07T22:40:12.884Z"}],"details":{"listingId":"f4a45e16-139d-4453-ad72-cf44b22c0a22","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"anthropics","slug":"webapp-testing","github":{"repo":"anthropics/skills","stars":136948,"topics":["agent-skills"],"license":null,"html_url":"https://github.com/anthropics/skills","pushed_at":"2026-05-17T22:47:19Z","description":"Public repository for Agent Skills","skill_md_sha":"4726215301db64a0cc4d41fc3219c61f37a30f4a","skill_md_path":"skills/webapp-testing/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/anthropics/skills/tree/main/skills/webapp-testing"},"layout":"multi","source":"github","category":"skills","frontmatter":{"name":"webapp-testing","license":"Complete terms in LICENSE.txt","description":"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."},"skills_sh_url":"https://skills.sh/anthropics/skills/webapp-testing"},"updatedAt":"2026-05-18T18:50:07.948Z"}}