القائمة
Web application testing principles. E2E, Playwright, deep audit strategies.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Gather relevant source files for a task, resolve their dependencies, and package everything into a structured context prompt.
Produce an architectural design and implementation plan based on task requirements, identifying scope, dependencies, impact, and a step-by-step rollout strategy.
Explore the codebase and export a structured context file (e.g., context.xml) for pasting into an external LLM like ChatGPT or Claude Web.
Trace execution paths from an error or bug report to find the root cause, gathering surrounding context (callers, imports, tests) along the way.
Analyze dependencies, callers, and coupling before refactoring, then produce a safe incremental refactoring plan.
Review recent code changes by gathering git diffs, identifying affected callers and tests, and analyzing for security, performance, and breaking changes.
| name | webapp-testing |
| description | Web application testing principles. E2E, Playwright, deep audit strategies. |
| allowed-tools | Read, Write, Edit, Glob, Grep, Bash |
Discover and test everything. Leave no route untested.
Execute these for automated browser testing:
| Script | Purpose | Usage |
|---|---|---|
scripts/playwright_runner.py | Basic browser test | python scripts/playwright_runner.py https://example.com |
| With screenshot | python scripts/playwright_runner.py <url> --screenshot | |
| Accessibility check | python scripts/playwright_runner.py <url> --a11y |
Requires: pip install playwright && playwright install chromium
| Target | How to Find |
|---|---|
| Routes | Scan app/, pages/, router files |
| API endpoints | Grep for HTTP methods |
| Components | Find component directories |
| Features | Read documentation |
/\ E2E (Few)
/ \ Critical user flows
/----\
/ \ Integration (Some)
/--------\ API, data flow
/ \
/------------\ Component (Many)
Individual UI pieces
| Priority | Tests |
|---|---|
| 1 | Happy path user flows |
| 2 | Authentication flows |
| 3 | Critical business actions |
| 4 | Error handling |
| Practice | Why |
|---|---|
| Use data-testid | Stable selectors |
| Wait for elements | Avoid flaky tests |
| Clean state | Independent tests |
| Avoid implementation details | Test user behavior |
| Concept | Use |
|---|---|
| Page Object Model | Encapsulate page logic |
| Fixtures | Reusable test setup |
| Assertions | Built-in auto-wait |
| Trace Viewer | Debug failures |
| Setting | Recommendation |
|---|---|
| Retries | 2 on CI |
| Trace | on-first-retry |
| Screenshots | on-failure |
| Video | retain-on-failure |
| Scenario | Value |
|---|---|
| Design system | High |
| Marketing pages | High |
| Component library | Medium |
| Dynamic content | Lower |
| Area | Tests |
|---|---|
| Status codes | 200, 400, 404, 500 |
| Response shape | Matches schema |
| Error messages | User-friendly |
| Edge cases | Empty, large, special chars |
tests/
├── e2e/ # Full user flows
├── integration/ # API, data
├── component/ # UI units
└── fixtures/ # Shared data
| Pattern | Example |
|---|---|
| Feature-based | login.spec.ts |
| Descriptive | user-can-checkout.spec.ts |
| Strategy | Use |
|---|---|
| Per file | Playwright default |
| Sharding | Large suites |
| Workers | Multiple browsers |
| ❌ Don't | ✅ Do |
|---|---|
| Test implementation | Test behavior |
| Hardcode waits | Use auto-wait |
| Skip cleanup | Isolate tests |
| Ignore flaky tests | Fix root cause |
Remember: E2E tests are expensive. Use them for critical paths only.