[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M76VCME09D0B0HTCCQHR9NTG":3,"skill-same:01M76VCME09D0B0HTCCQHR9NTG":66},{"skillNo":4,"name":5,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":14,"sourceHtmlUrl":15,"categories":16,"keywords":17,"publishedAt":18,"linkOnly":19,"markdownContent":20,"markdownBody":21,"frontMatter":22,"refName":23,"commitSha":24,"skillDirectory":5,"forksCount":25,"repositoryHtmlUrl":26,"repositoryHomepageUrl":6,"ownerHtmlUrl":27,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":28,"install":29,"resources":42},"01M76VCME09D0B0HTCCQHR9NTG","webapp-testing",null,"whz39coding\u002Fzh-awesome-codex-skills","whz39coding","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F150695239?v=4","01M75700F4ESSQA1A3D0PDMQHP","01M75700G9NXGCKBD4NVVQGW2R",7,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fwhz39coding\u002Fzh-awesome-codex-skills\u002Fblob\u002Fmaster\u002Fwebapp-testing\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwhz39coding\u002Fzh-awesome-codex-skills\u002Fblob\u002Fmaster\u002Fwebapp-testing\u002FSKILL.md",[],[],"2026-11-12 13:55:43",false,"---\nname: webapp-testing\ndescription: 使用 Playwright 与本地 Web 应用交互并测试的工具包。支持验证前端功能、调试 UI 行为、截图和查看浏览器日志。Keywords: Playwright, web app testing, browser screenshots.\nlicense: Complete terms in LICENSE.txt\n---\n\n# Web Application Testing\n\nTo test local web applications, write native Python Playwright scripts.\n\n**Helper Scripts Available**:\n- `scripts\u002Fwith_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\u002FIncomplete → Treat as dynamic (below)\n    │\n    └─ No (dynamic webapp) → Is the server already running?\n        ├─ No → Run: python scripts\u002Fwith_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\u002Fwith_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\u002Fwith_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:\u002F\u002Flocalhost: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='\u002Ftmp\u002Finspect.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\u002F` 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\u002F** - Examples showing common patterns:\n  - `element_discovery.py` - Discovering buttons, links, and inputs on a page\n  - `static_html_automation.py` - Using file:\u002F\u002F URLs for local HTML\n  - `console_logging.py` - Capturing console logs during automation\n","# Web Application Testing\n\nTo test local web applications, write native Python Playwright scripts.\n\n**Helper Scripts Available**:\n- `scripts\u002Fwith_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\u002FIncomplete → Treat as dynamic (below)\n    │\n    └─ No (dynamic webapp) → Is the server already running?\n        ├─ No → Run: python scripts\u002Fwith_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\u002Fwith_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\u002Fwith_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:\u002F\u002Flocalhost: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='\u002Ftmp\u002Finspect.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\u002F` 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\u002F** - Examples showing common patterns:\n  - `element_discovery.py` - Discovering buttons, links, and inputs on a page\n  - `static_html_automation.py` - Using file:\u002F\u002F URLs for local HTML\n  - `console_logging.py` - Capturing console logs during automation\n",{},"master","d2a3feea872bb061f0758151f8ee52b18e809c74",2,"https:\u002F\u002Fgithub.com\u002Fwhz39coding\u002Fzh-awesome-codex-skills","https:\u002F\u002Fgithub.com\u002Fwhz39coding","2026-06-02 11:03:05",{"source":7,"skillName":5,"commands":30,"prompt":40,"zipAvailable":41},[31,34,37],{"tool":32,"command":33},"npx","npx skills add whz39coding\u002Fzh-awesome-codex-skills --skill webapp-testing",{"tool":35,"command":36},"bunx","bunx skills add whz39coding\u002Fzh-awesome-codex-skills --skill webapp-testing",{"tool":38,"command":39},"pnpm","pnpm dlx skills add whz39coding\u002Fzh-awesome-codex-skills --skill webapp-testing","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fwhz39coding\u002Fzh-awesome-codex-skills\u002Fblob\u002Fmaster\u002Fwebapp-testing\u002FSKILL.md",true,[43,49,53,57,62],{"path":44,"resourceType":45,"resourceTypeDesc":46,"sizeBytes":47,"sourceHtmlUrl":48},"examples\u002Fconsole_logging.py","SCRIPT","脚本",1027,"https:\u002F\u002Fgithub.com\u002Fwhz39coding\u002Fzh-awesome-codex-skills\u002Fblob\u002Fmaster\u002Fwebapp-testing\u002Fexamples\u002Fconsole_logging.py",{"path":50,"resourceType":45,"resourceTypeDesc":46,"sizeBytes":51,"sourceHtmlUrl":52},"examples\u002Felement_discovery.py",1463,"https:\u002F\u002Fgithub.com\u002Fwhz39coding\u002Fzh-awesome-codex-skills\u002Fblob\u002Fmaster\u002Fwebapp-testing\u002Fexamples\u002Felement_discovery.py",{"path":54,"resourceType":45,"resourceTypeDesc":46,"sizeBytes":55,"sourceHtmlUrl":56},"examples\u002Fstatic_html_automation.py",953,"https:\u002F\u002Fgithub.com\u002Fwhz39coding\u002Fzh-awesome-codex-skills\u002Fblob\u002Fmaster\u002Fwebapp-testing\u002Fexamples\u002Fstatic_html_automation.py",{"path":58,"resourceType":59,"resourceTypeDesc":60,"sizeBytes":61,"sourceHtmlUrl":14},"LICENSE.txt","LICENSE","许可证",11357,{"path":63,"resourceType":45,"resourceTypeDesc":46,"sizeBytes":64,"sourceHtmlUrl":65},"scripts\u002Fwith_server.py",3693,"https:\u002F\u002Fgithub.com\u002Fwhz39coding\u002Fzh-awesome-codex-skills\u002Fblob\u002Fmaster\u002Fwebapp-testing\u002Fscripts\u002Fwith_server.py",[67,74,81,88,95,102],{"skillNo":68,"name":69,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":70,"sourceHtmlUrl":71,"categories":72,"keywords":73,"publishedAt":18},"01M76VCHF8MC0BTMGDP2TABZNQ","theme-factory","https:\u002F\u002Fgithub.com\u002Fwhz39coding\u002Fzh-awesome-codex-skills\u002Fblob\u002Fmaster\u002Ftheme-factory\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwhz39coding\u002Fzh-awesome-codex-skills\u002Fblob\u002Fmaster\u002Ftheme-factory\u002FSKILL.md",[],[],{"skillNo":75,"name":76,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":77,"sourceHtmlUrl":78,"categories":79,"keywords":80,"publishedAt":18},"01M76VC9ZWT75WD547GAMDTTVP","slack-gif-creator","https:\u002F\u002Fgithub.com\u002Fwhz39coding\u002Fzh-awesome-codex-skills\u002Fblob\u002Fmaster\u002Fslack-gif-creator\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwhz39coding\u002Fzh-awesome-codex-skills\u002Fblob\u002Fmaster\u002Fslack-gif-creator\u002FSKILL.md",[],[],{"skillNo":82,"name":83,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":84,"sourceHtmlUrl":85,"categories":86,"keywords":87,"publishedAt":18},"01M76VC7EHZV0GHMSPESSDCY31","skill-installer","https:\u002F\u002Fgithub.com\u002Fwhz39coding\u002Fzh-awesome-codex-skills\u002Fblob\u002Fmaster\u002Fskill-installer\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwhz39coding\u002Fzh-awesome-codex-skills\u002Fblob\u002Fmaster\u002Fskill-installer\u002FSKILL.md",[],[],{"skillNo":89,"name":90,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":91,"sourceHtmlUrl":92,"categories":93,"keywords":94,"publishedAt":18},"01M76VC3WBAQ5XZS17B3S52HVX","skill-creator","https:\u002F\u002Fgithub.com\u002Fwhz39coding\u002Fzh-awesome-codex-skills\u002Fblob\u002Fmaster\u002Fskill-creator\u002Flicense.txt","https:\u002F\u002Fgithub.com\u002Fwhz39coding\u002Fzh-awesome-codex-skills\u002Fblob\u002Fmaster\u002Fskill-creator\u002FSKILL.md",[],[],{"skillNo":96,"name":97,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":13,"licenseFileUrl":98,"sourceHtmlUrl":99,"categories":100,"keywords":101,"publishedAt":18},"01M76VBYJVQ53GGNEX0R5JJRWP","paperjsx","https:\u002F\u002Fgithub.com\u002Fwhz39coding\u002Fzh-awesome-codex-skills\u002Fblob\u002Fmaster\u002Fpaperjsx\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwhz39coding\u002Fzh-awesome-codex-skills\u002Fblob\u002Fmaster\u002Fpaperjsx\u002FSKILL.md",[],[],{"skillNo":103,"name":104,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":7,"ownerLogin":8,"ownerAvatarUrl":9,"ownerAccountNo":10,"ownerDisplayName":6,"repositoryNo":11,"starsCount":12,"licenseSpdxId":105,"licenseFileUrl":106,"sourceHtmlUrl":107,"categories":108,"keywords":109,"publishedAt":18},"01M76VBVTHN9H4V7TB23EQYQPS","notion-spec-to-implementation","MIT","https:\u002F\u002Fgithub.com\u002Fwhz39coding\u002Fzh-awesome-codex-skills\u002Fblob\u002Fmaster\u002Fnotion-spec-to-implementation\u002FLICENSE.txt","https:\u002F\u002Fgithub.com\u002Fwhz39coding\u002Fzh-awesome-codex-skills\u002Fblob\u002Fmaster\u002Fnotion-spec-to-implementation\u002FSKILL.md",[],[]]