Web App Testing
Discover and test everything. Leave no route untested.
🔧 Runtime Scripts
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
1. Deep Audit Approach
Discovery First
| Target |
How to Find |
| Routes |
Scan app/, pages/, router files |
| API endpoints |
Grep for HTTP methods |
| Components |
Find component directories |
| Features |
Read documentation |
Systematic Testing
- Map - List all routes/APIs
- Scan - Verify they respond
- Test - Cover critical paths
2. Testing Pyramid for Web
/\ E2E (Few)
/ \ Critical user flows
/----\
/ \ Integration (Some)
/--------\ API, data flow
/ \
/------------\ Component (Many)
Individual UI pieces
3. E2E Test Principles
What to Test
| Priority |
Tests |
| 1 |
Happy path user flows |
| 2 |
Authentication flows |
| 3 |
Critical business actions |
| 4 |
Error handling |
E2E Best Practices
| Practice |
Why |
| Use data-testid |
Stable selectors |
| Wait for elements |
Avoid flaky tests |
| Clean state |
Independent tests |
| Avoid implementation details |
Test user behavior |
4. Playwright Principles
Core Concepts
| Concept |
Use |
| Page Object Model |
Encapsulate page logic |
| Fixtures |
Reusable test setup |
| Assertions |
Built-in auto-wait |
| Trace Viewer |
Debug failures |
Configuration
| Setting |
Recommendation |
| Retries |
2 on CI |
| Trace |
on-first-retry |
| Screenshots |
on-failure |
| Video |
retain-on-failure |
5. Visual Testing
When to Use
| Scenario |
Value |
| Design system |
High |
| Marketing pages |
High |
| Component library |
Medium |
| Dynamic content |
Lower |
Strategy
- Baseline screenshots
- Compare on changes
- Review visual diffs
- Update intentional changes
6. API Testing Principles
Coverage Areas
| Area |
Tests |
| Status codes |
200, 400, 404, 500 |
| Response shape |
Matches schema |
| Error messages |
User-friendly |
| Edge cases |
Empty, large, special chars |
7. Test Organization
File Structure
tests/
├── e2e/ # Full user flows
├── integration/ # API, data
├── component/ # UI units
└── fixtures/ # Shared data
Naming Convention
| Pattern |
Example |
| Feature-based |
login.spec.ts |
| Descriptive |
user-can-checkout.spec.ts |
8. CI Integration
Pipeline Steps
- Install dependencies
- Install browsers
- Run tests
- Upload artifacts (traces, screenshots)
Parallelization
| Strategy |
Use |
| Per file |
Playwright default |
| Sharding |
Large suites |
| Workers |
Multiple browsers |
9. Anti-Patterns
| ❌ 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.
AGI Framework Integration
Qdrant Memory Integration
Before executing complex tasks with this skill:
python3 execution/memory_manager.py auto --query "<task summary>"
Decision Tree:
- Cache hit? Use cached response directly — no need to re-process.
- Memory match? Inject
context_chunks into your reasoning.
- No match? Proceed normally, then store results:
python3 execution/memory_manager.py store \
--content "Description of what was decided/solved" \
--type decision \
--tags webapp-testing <relevant-tags>
Note: Storing automatically updates both Vector (Qdrant) and Keyword (BM25) indices.
Agent Team Collaboration
- Strategy: This skill communicates via the shared memory system.
- Orchestration: Invoked by
orchestrator via intelligent routing.
- Context Sharing: Always read previous agent outputs from memory before starting.
Local LLM Support
When available, use local Ollama models for embedding and lightweight inference:
- Embeddings:
nomic-embed-text via Qdrant memory system
- Lightweight analysis: Local models reduce API costs for repetitive patterns
techwavedev