🗺️ Scenario Flowcharts — Visualize & Teach Every QA Flow

Goal: one animated, interactive flowchart for every core QA scenario — so you can see the flow, remember it, and teach it on camera without slides. The edges animate (flow), the diagrams recolor with the light/dark toggle, and many nodes are clickable — they open the real demo site to practice on. Each chart has a 🖥️ Teach with (live site) and a 📖 Learn (chapter) link.

💡 Every flowchart here is written in plain Mermaid text in the page source — you (or any contributor) can drop a ` ```mermaid ` block into any chapter and it renders the same way.

1. The tester’s mindset — “how could this break?”

flowchart LR
  F["New feature"] --> Q{"How could this break?"}
  Q -->|empty| B1["Empty input"]
  Q -->|huge| B2["Huge / long input"]
  Q -->|twice| B3["Do it twice fast"]
  Q -->|midway| B4["Fail mid-flow"]
  Q -->|concurrent| B5["Two users at once"]
  B1 --> T["Turn each risk into a test"]
  B2 --> T
  B3 --> T
  B4 --> T
  B5 --> T

2. The Software Testing Life Cycle (STLC)

flowchart LR
  A["Requirement analysis"] --> B["Test planning"] --> C["Case design"] --> D["Environment setup"] --> E["Execution"] --> F["Closure"]
  F -. "next sprint" .-> A

3. Choosing a test-design technique

flowchart TD
  S{"What am I testing?"}
  S -->|"a range or limit"| BVA["Boundary Value + Equivalence Partitioning"]
  S -->|"combined rules"| DT["Decision Table"]
  S -->|"states & transitions"| ST["State Transition"]
  S -->|"many configs"| PW["Pairwise"]
  S -->|"something new / unknown"| EX["Exploratory charter"]

4. The defect lifecycle

flowchart LR
  N["New"] --> T["Triaged"] --> P["In Progress"] --> X["Fixed"] --> R{"Retest passes?"}
  R -->|yes| C["Closed ✅"]
  R -->|no| P
  T -->|"not a bug"| RJ["Rejected"]
  T -->|"fix later"| DF["Deferred"]

5. Severity vs Priority (the triage decision)

flowchart TD
  B["Bug found"] --> S{"Impact on user / business?"}
  S -->|high| HS["High severity"]
  S -->|low| LS["Low severity"]
  HS --> U{"Fix how urgently?"}
  LS --> U
  U -->|now| HP["High priority"]
  U -->|later| LP["Low priority"]

6. Writing a bug report that gets fixed

flowchart LR
  A["Notice odd behavior"] --> B["Reproduce from a clean state"] --> C["Capture evidence: video, HAR, console"] --> D["Write: title, steps, expected vs actual, env"] --> E["Add severity + repro rate"] --> F["File in tracker"]

7. API test flow (four assertion layers)

flowchart TD
  A["Open Swagger Petstore"] --> B["Send a valid request"] --> C{"Status code correct?"}
  C -->|no| BUG["Log a bug"]
  C -->|yes| D["Check body: fields, types, values"] --> E["Check headers"] --> F["Send negatives: bad token, missing field, other user's id"] --> G["Verify side effect in DB / follow-up GET"]
  click A "https://petstore.swagger.io/" _blank

8. Should I automate this test?

flowchart TD
  Q{"Runs often + stable + high value?"}
  Q -->|yes| A["Automate it"]
  Q -->|"exploratory / one-off / changing UI"| M["Keep it manual"]
  A --> L{"At which level?"}
  L -->|logic| U["Unit test"]
  L -->|service| API["API test"]
  L -->|"critical journey"| E2E["E2E UI test"]

9. The CI/CD test pipeline

flowchart LR
  P["git push"] --> B["Build"] --> S["Smoke tests"] --> R{"Green?"}
  R -->|no| X["Block the merge"]
  R -->|yes| E["E2E + API tests"] --> G{"Gate: 0 critical bugs?"}
  G -->|no| X
  G -->|yes| D["Deploy 🚀"]

10. Choosing a performance test

flowchart TD
  Q{"What do I need to know?"}
  Q -->|"meets expected peak?"| L["Load test"]
  Q -->|"where does it break?"| S["Stress test"]
  Q -->|"survives a sudden surge?"| SP["Spike test"]
  Q -->|"degrades over time?"| SO["Soak test"]

11. Security — the IDOR test (Broken Access Control)

flowchart LR
  A["Log in as User A"] --> B["Note a resource id e.g. /orders/1001"] --> C["Log in as User B"] --> D["Request /orders/1001"] --> E{"Got A's data?"}
  E -->|yes| BUG["🚨 Critical: Broken Access Control"]
  E -->|"403 / 404"| OK["Secure ✅"]

12. AI + MCP agent testing loop

flowchart LR
  A["You: write a charter"] --> B["AI agent (via MCP)"] --> C["Drives a real browser"] --> D["Reads DOM, finds issues, drafts a test"] --> E["You review the assertions"] --> F{"Good enough?"}
  F -->|"refine"| A
  F -->|yes| G["Commit to CI"]

13. A structured exploratory session

flowchart LR
  A["Charter: area + risk + time-box"] --> B["Recon (5 min): map it"] --> C["Attack: boundaries, negatives, interruptions"] --> D["Log findings live"] --> E["Report: bugs, coverage, open questions"]

14. The interview process, end to end

flowchart LR
  A["Recruiter screen"] --> B["Technical round"] --> C["Practical task"] --> D["Behavioral (STAR)"] --> E["Panel / values"] --> O["Offer 🎉"]

🎓 Screen-share this page while teaching — walk a flowchart, then click through to its demo site and do it live. Full per-topic teaching scripts are in the 🎬 Teaching Kit. Publish your videos on AZADEMY.

← Back to the roadmap · See also: Teaching Kit · Cheatsheets