# Webapp Testing

> Web application testing principles. E2E, Playwright, component testing, and deep audit strategies.

- Skill: `besync-labs/webapp-testing` (Agent Skill)
- Install (CLI): `npx skillmds@latest add besync-labs/webapp-testing`
- Raw SKILL.md: https://api.skillmd.com/api/skills/besync-labs/webapp-testing/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: besync-labs (https://skillmd.com/u/besync-labs)
- Updated: 2026-09-10
- Page: https://skillmd.com/skills/besync-labs/webapp-testing

---


# Web App Testing

> Discover and test everything. Leave no route untested.

---

## 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

1. **Map** - List all routes/APIs
2. **Scan** - Verify they respond
3. **Test** - Cover critical paths

---

## 2. Testing Pyramid

```
        /\          E2E (Few)
       /  \         Critical user flows
      /----\
     /      \       Integration (Some)
    /--------\      API, data flow
   /          \
  /------------\    Unit/Component (Many)
                    Individual 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            |

### Best Practices

| Practice           | Why                |
| ------------------ | ------------------ |
| Use data-testid    | Stable selectors   |
| Wait for elements  | Avoid flaky tests  |
| Clean state        | Independent tests  |
| Avoid impl details | Test user behavior |

---

## 4. Playwright Configuration

### Recommended Settings

| Setting     | Recommendation    |
| ----------- | ----------------- |
| Retries     | 2 on CI           |
| Trace       | on-first-retry    |
| Screenshots | on-failure        |
| Video       | retain-on-failure |

### Core Concepts

| Concept           | Use                    |
| ----------------- | ---------------------- |
| Page Object Model | Encapsulate page logic |
| Fixtures          | Reusable test setup    |
| Assertions        | Built-in auto-wait     |
| Trace Viewer      | Debug failures         |

---

## 5. 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` |

---

## 6. API Testing

### 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. CI Integration

### Pipeline Steps

1. Install dependencies
2. Install browsers (`npx playwright install`)
3. Run tests
4. Upload artifacts (traces, screenshots)

### Parallelization

| Strategy | Use                |
| -------- | ------------------ |
| Per file | Playwright default |
| Sharding | Large suites       |
| Workers  | Multiple browsers  |

---

## 8. Anti-Patterns

| ❌ Don't            | ✅ Do          |
| ------------------- | -------------- |
| Test implementation | Test behavior  |
| Hardcode waits      | Use auto-wait  |
| Skip cleanup        | Isolate tests  |
| Ignore flaky tests  | Fix root cause |

---

## 9. Recommended Testing Standards

### Required Coverage

| Vertical      | Minimum Coverage |
| ------------- | ---------------- |
| Auth          | 90%+             |
| Payment       | 95%+             |
| Core Features | 80%+             |

### Test Types Required

- [ ] Unit tests (Jest/Vitest)
- [ ] Integration tests (Supertest)
- [ ] E2E tests (Playwright)
- [ ] Visual regression (optional)

---

> **Remember:** E2E tests are expensive. Use them for critical paths only.