[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71C6FV2QYHNDHGJF2Q5VDFQ":3,"skill-same:01M71C6FV2QYHNDHGJF2Q5VDFQ":74},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":41,"linkOnly":42,"markdownContent":43,"markdownBody":44,"frontMatter":45,"refName":47,"commitSha":48,"skillDirectory":49,"forksCount":14,"repositoryHtmlUrl":50,"repositoryHomepageUrl":6,"ownerHtmlUrl":51,"ownerBlogUrl":6,"ownerDescription":52,"updatedAt":53,"install":54,"resources":67},"01M71C6FV2QYHNDHGJF2Q5VDFQ","webapp-testing",null,"Web application testing principles. E2E, Playwright, deep audit strategies.","yqecea\u002Fgem-swarm","yqecea","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F196189405?v=4","01M71C12KWH5QPTE12J69335KF","Yusuf","01M71C12MFS3BRGNE5SSHB4DY9",1,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fdomain\u002Fwebapp-testing\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40],"testing","webapp testing","webapp","application","grep","principles","web","testing principles","playwright","e2e","edit","write","read","audit","strategies","Bash","deep","2026-11-10 10:12:30",false,"---\nname: webapp-testing\ndescription: Web application testing principles. E2E, Playwright, deep audit strategies.\nallowed-tools: Read, Write, Edit, Glob, Grep, Bash\n---\n\n# Web App Testing\n\n> Discover and test everything. Leave no route untested.\n\n## 🔧 Runtime Scripts\n\n**Execute these for automated browser testing:**\n\n| Script | Purpose | Usage |\n|--------|---------|-------|\n| `scripts\u002Fplaywright_runner.py` | Basic browser test | `python scripts\u002Fplaywright_runner.py https:\u002F\u002Fexample.com` |\n| | With screenshot | `python scripts\u002Fplaywright_runner.py \u003Curl> --screenshot` |\n| | Accessibility check | `python scripts\u002Fplaywright_runner.py \u003Curl> --a11y` |\n\n**Requires:** `pip install playwright && playwright install chromium`\n\n---\n\n## 1. Deep Audit Approach\n\n### Discovery First\n\n| Target | How to Find |\n|--------|-------------|\n| Routes | Scan app\u002F, pages\u002F, router files |\n| API endpoints | Grep for HTTP methods |\n| Components | Find component directories |\n| Features | Read documentation |\n\n### Systematic Testing\n\n1. **Map** - List all routes\u002FAPIs\n2. **Scan** - Verify they respond\n3. **Test** - Cover critical paths\n\n---\n\n## 2. Testing Pyramid for Web\n\n```\n        \u002F\\          E2E (Few)\n       \u002F  \\         Critical user flows\n      \u002F----\\\n     \u002F      \\       Integration (Some)\n    \u002F--------\\      API, data flow\n   \u002F          \\\n  \u002F------------\\    Component (Many)\n                    Individual UI pieces\n```\n\n---\n\n## 3. E2E Test Principles\n\n### What to Test\n\n| Priority | Tests |\n|----------|-------|\n| 1 | Happy path user flows |\n| 2 | Authentication flows |\n| 3 | Critical business actions |\n| 4 | Error handling |\n\n### E2E Best Practices\n\n| Practice | Why |\n|----------|-----|\n| Use data-testid | Stable selectors |\n| Wait for elements | Avoid flaky tests |\n| Clean state | Independent tests |\n| Avoid implementation details | Test user behavior |\n\n---\n\n## 4. Playwright Principles\n\n### Core Concepts\n\n| Concept | Use |\n|---------|-----|\n| Page Object Model | Encapsulate page logic |\n| Fixtures | Reusable test setup |\n| Assertions | Built-in auto-wait |\n| Trace Viewer | Debug failures |\n\n### Configuration\n\n| Setting | Recommendation |\n|---------|----------------|\n| Retries | 2 on CI |\n| Trace | on-first-retry |\n| Screenshots | on-failure |\n| Video | retain-on-failure |\n\n---\n\n## 5. Visual Testing\n\n### When to Use\n\n| Scenario | Value |\n|----------|-------|\n| Design system | High |\n| Marketing pages | High |\n| Component library | Medium |\n| Dynamic content | Lower |\n\n### Strategy\n\n- Baseline screenshots\n- Compare on changes\n- Review visual diffs\n- Update intentional changes\n\n---\n\n## 6. API Testing Principles\n\n### Coverage Areas\n\n| Area | Tests |\n|------|-------|\n| Status codes | 200, 400, 404, 500 |\n| Response shape | Matches schema |\n| Error messages | User-friendly |\n| Edge cases | Empty, large, special chars |\n\n---\n\n## 7. Test Organization\n\n### File Structure\n\n```\ntests\u002F\n├── e2e\u002F           # Full user flows\n├── integration\u002F   # API, data\n├── component\u002F     # UI units\n└── fixtures\u002F      # Shared data\n```\n\n### Naming Convention\n\n| Pattern | Example |\n|---------|---------|\n| Feature-based | `login.spec.ts` |\n| Descriptive | `user-can-checkout.spec.ts` |\n\n---\n\n## 8. CI Integration\n\n### Pipeline Steps\n\n1. Install dependencies\n2. Install browsers\n3. Run tests\n4. Upload artifacts (traces, screenshots)\n\n### Parallelization\n\n| Strategy | Use |\n|----------|-----|\n| Per file | Playwright default |\n| Sharding | Large suites |\n| Workers | Multiple browsers |\n\n---\n\n## 9. Anti-Patterns\n\n| ❌ Don't | ✅ Do |\n|----------|-------|\n| Test implementation | Test behavior |\n| Hardcode waits | Use auto-wait |\n| Skip cleanup | Isolate tests |\n| Ignore flaky tests | Fix root cause |\n\n---\n\n> **Remember:** E2E tests are expensive. Use them for critical paths only.\n","# Web App Testing\n\n> Discover and test everything. Leave no route untested.\n\n## 🔧 Runtime Scripts\n\n**Execute these for automated browser testing:**\n\n| Script | Purpose | Usage |\n|--------|---------|-------|\n| `scripts\u002Fplaywright_runner.py` | Basic browser test | `python scripts\u002Fplaywright_runner.py https:\u002F\u002Fexample.com` |\n| | With screenshot | `python scripts\u002Fplaywright_runner.py \u003Curl> --screenshot` |\n| | Accessibility check | `python scripts\u002Fplaywright_runner.py \u003Curl> --a11y` |\n\n**Requires:** `pip install playwright && playwright install chromium`\n\n---\n\n## 1. Deep Audit Approach\n\n### Discovery First\n\n| Target | How to Find |\n|--------|-------------|\n| Routes | Scan app\u002F, pages\u002F, router files |\n| API endpoints | Grep for HTTP methods |\n| Components | Find component directories |\n| Features | Read documentation |\n\n### Systematic Testing\n\n1. **Map** - List all routes\u002FAPIs\n2. **Scan** - Verify they respond\n3. **Test** - Cover critical paths\n\n---\n\n## 2. Testing Pyramid for Web\n\n```\n        \u002F\\          E2E (Few)\n       \u002F  \\         Critical user flows\n      \u002F----\\\n     \u002F      \\       Integration (Some)\n    \u002F--------\\      API, data flow\n   \u002F          \\\n  \u002F------------\\    Component (Many)\n                    Individual UI pieces\n```\n\n---\n\n## 3. E2E Test Principles\n\n### What to Test\n\n| Priority | Tests |\n|----------|-------|\n| 1 | Happy path user flows |\n| 2 | Authentication flows |\n| 3 | Critical business actions |\n| 4 | Error handling |\n\n### E2E Best Practices\n\n| Practice | Why |\n|----------|-----|\n| Use data-testid | Stable selectors |\n| Wait for elements | Avoid flaky tests |\n| Clean state | Independent tests |\n| Avoid implementation details | Test user behavior |\n\n---\n\n## 4. Playwright Principles\n\n### Core Concepts\n\n| Concept | Use |\n|---------|-----|\n| Page Object Model | Encapsulate page logic |\n| Fixtures | Reusable test setup |\n| Assertions | Built-in auto-wait |\n| Trace Viewer | Debug failures |\n\n### Configuration\n\n| Setting | Recommendation |\n|---------|----------------|\n| Retries | 2 on CI |\n| Trace | on-first-retry |\n| Screenshots | on-failure |\n| Video | retain-on-failure |\n\n---\n\n## 5. Visual Testing\n\n### When to Use\n\n| Scenario | Value |\n|----------|-------|\n| Design system | High |\n| Marketing pages | High |\n| Component library | Medium |\n| Dynamic content | Lower |\n\n### Strategy\n\n- Baseline screenshots\n- Compare on changes\n- Review visual diffs\n- Update intentional changes\n\n---\n\n## 6. API Testing Principles\n\n### Coverage Areas\n\n| Area | Tests |\n|------|-------|\n| Status codes | 200, 400, 404, 500 |\n| Response shape | Matches schema |\n| Error messages | User-friendly |\n| Edge cases | Empty, large, special chars |\n\n---\n\n## 7. Test Organization\n\n### File Structure\n\n```\ntests\u002F\n├── e2e\u002F           # Full user flows\n├── integration\u002F   # API, data\n├── component\u002F     # UI units\n└── fixtures\u002F      # Shared data\n```\n\n### Naming Convention\n\n| Pattern | Example |\n|---------|---------|\n| Feature-based | `login.spec.ts` |\n| Descriptive | `user-can-checkout.spec.ts` |\n\n---\n\n## 8. CI Integration\n\n### Pipeline Steps\n\n1. Install dependencies\n2. Install browsers\n3. Run tests\n4. Upload artifacts (traces, screenshots)\n\n### Parallelization\n\n| Strategy | Use |\n|----------|-----|\n| Per file | Playwright default |\n| Sharding | Large suites |\n| Workers | Multiple browsers |\n\n---\n\n## 9. Anti-Patterns\n\n| ❌ Don't | ✅ Do |\n|----------|-------|\n| Test implementation | Test behavior |\n| Hardcode waits | Use auto-wait |\n| Skip cleanup | Isolate tests |\n| Ignore flaky tests | Fix root cause |\n\n---\n\n> **Remember:** E2E tests are expensive. Use them for critical paths only.\n",{"name":5,"description":7,"allowed-tools":46},"Read, Write, Edit, Glob, Grep, Bash","main","923c514d4d5e15bbfd65ec7eaf949a997679aa3e","src\u002Fskills\u002Fdomain\u002Fwebapp-testing","https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm","https:\u002F\u002Fgithub.com\u002Fyqecea","15 y.o Data Science,Student","2026-04-26 20:00:27",{"source":8,"skillName":5,"commands":55,"prompt":65,"zipAvailable":66},[56,59,62],{"tool":57,"command":58},"npx","npx skills add yqecea\u002Fgem-swarm --skill webapp-testing",{"tool":60,"command":61},"bunx","bunx skills add yqecea\u002Fgem-swarm --skill webapp-testing",{"tool":63,"command":64},"pnpm","pnpm dlx skills add yqecea\u002Fgem-swarm --skill webapp-testing","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fdomain\u002Fwebapp-testing\u002FSKILL.md",true,[68],{"path":69,"resourceType":70,"resourceTypeDesc":71,"sizeBytes":72,"sourceHtmlUrl":73},"scripts\u002Fplaywright_runner.py","SCRIPT","脚本",6531,"https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fdomain\u002Fwebapp-testing\u002Fscripts\u002Fplaywright_runner.py",[75,89,103,114,126,149],{"skillNo":76,"name":77,"nameZh":6,"description":78,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":79,"categories":80,"keywords":81,"publishedAt":41},"01M71C74XVPP23ST10E8MYJZA0","validation","Cross-cutting validation methodology for verifying phase outputs and project integrity","https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fshared\u002Fvalidation\u002FSKILL.md",[],[77,82,83,84,85,86,87,88],"validation methodology","for","project","outputs","phase","methodology","integrity",{"skillNo":90,"name":91,"nameZh":6,"description":92,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":93,"categories":94,"keywords":95,"publishedAt":41},"01M71C72PTKRV481M975R3QDDE","session-management","Manages orchestration session state, tracking, and resumption","https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fshared\u002Fsession-management\u002FSKILL.md",[],[96,97,98,99,100,101,102],"session management","session","management","session state","orchestration","state","tracking",{"skillNo":104,"name":105,"nameZh":6,"description":106,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":107,"categories":108,"keywords":109,"publishedAt":41},"01M71C6ZY1EGM4SGVYT4B2HHD7","implementation-planning","Generates detailed implementation plans from finalized designs","https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fshared\u002Fimplementation-planning\u002FSKILL.md",[],[110,111,112,113],"planning","implementation","implementation planning","plans",{"skillNo":115,"name":116,"nameZh":6,"description":117,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":118,"categories":119,"keywords":120,"publishedAt":41},"01M71C6XQVGMDFJ50BP5SBDS76","execution","Phase execution methodology for orchestration workflows with error handling and completion protocols","https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fshared\u002Fexecution\u002FSKILL.md",[],[116,83,87,121,122,100,86,123,124,125],"error","workflows","protocols","error handling","with",{"skillNo":127,"name":128,"nameZh":6,"description":129,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":130,"categories":131,"keywords":140,"publishedAt":41},"01M71C6VY8APWMNK1XEJ3WP7A2","design-dialogue","Guides structured design conversations for complex engineering tasks","https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fshared\u002Fdesign-dialogue\u002FSKILL.md",[132,135],{"categoryNo":133,"categoryName":134,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计",{"categoryNo":136,"categoryName":137,"taxonomyType":138,"taxonomyTypeDesc":139},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[141,142,143,144,145,83,146,147,148],"dialogue","design","design dialogue","guides","conversations","tasks","engineering","structured",{"skillNo":150,"name":151,"nameZh":6,"description":152,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":153,"categories":154,"keywords":161,"publishedAt":41},"01M71C6R4RJWG3S2R26778TPD8","delegation","Agent delegation best practices for constructing effective subagent prompts with proper scoping","https:\u002F\u002Fgithub.com\u002Fyqecea\u002Fgem-swarm\u002Fblob\u002Fmain\u002Fsrc\u002Fskills\u002Fshared\u002Fdelegation\u002FSKILL.md",[155,158],{"categoryNo":156,"categoryName":157,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":159,"categoryName":160,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[151,162,163,83,164,125,165],"subagent","scoping","best practices","prompts"]