🎬 Teaching Kit — Live Sites to Teach From (no slides)

For the instructor (that’s you, or anyone teaching from this roadmap): every section below maps to a real, live website you can screen-share and a short “demo this” script. Open the tab, share your screen, and show it — no slides to build. All sites are free, public, and safe to demonstrate on.

⚠️ Ethics: the security/performance targets below are explicitly built for practice. Never demo attacks or load tests against sites you don’t own or aren’t authorized to use.

Legend: 🖥️ = open & screen-share · 🎙️ = what to say/show on camera.

Section: Foundations & the tester’s mindset → Stage 0

• 🖥️ SauceDemo — log in as problem_user / secret_sauce (images/layout are deliberately broken)
• 🎙️ “A developer asks ‘how do I make this work?’ A tester asks ‘how could this break?’” Log in as problem_user, point at the broken product images live — that’s the mindset in 10 seconds. Then contrast with standard_user.

Section: Test design (EP / BVA / decision tables) → Stage 1

• 🖥️ DemoQA Practice Form · the-internet / inputs
• 🎙️ On the number input, demo BVA live: type the boundary values and show accept/reject. On the form, demo EP — one valid + one each invalid partition. Show how 5 smart inputs beat 50 random ones.

Section: Bug reports & test cases → Stage 2

• 🖥️ SauceDemo problem_user + your Bug Report template side-by-side · browser DevTools (F12)
• 🎙️ Find the broken image bug live, then fill the template on camera: title = symptom+condition, repro steps, expected vs actual, and press F12 → Network → Copy as cURL / export HAR to attach as evidence. Show a good vs bad bug title.

Section: Testing types → Stage 3

• 🖥️ Responsive/compatibility: DevTools device toolbar on any site · BrowserStack (free trial)
• 🖥️ Accessibility: WAVE — paste any URL for a live a11y audit · axe DevTools
• 🖥️ API layer: ReqRes
• 🎙️ Run WAVE on a real homepage and read the contrast/label errors aloud. Toggle DevTools device mode to show a layout break. One tab per testing type.

Section: Agile, defect lifecycle & tools → Stage 4 · Stage 5

• 🖥️ GitHub Issues (free, live tracker) · browser DevTools · Jira free trial
• 🎙️ Create a real issue live to show the defect lifecycle (New → Triaged → …). In DevTools, open Console (show a JS error), Network (throttle to Slow 3G, show a slow call), and Application (clear cookies to test first-visit).

Section: API testing → Stage 12

• 🖥️ Swagger Petstore — the live API teaching tool (try requests in-browser) · restful-booker · httpbingo · JSONPlaceholder · Postman
• 🖥️ GraphQL: Countries GraphQL playground
• 🎙️ On Petstore, fire a GET and read status/body/headers aloud; then send a bad request and show the 400. On httpbingo hit /status/500 and /delay/3. In the GraphQL playground, over-fetch fields to show field-level testing.

Section: Automation (Playwright) → Stage 8 · Stage 14

• 🖥️ AZADEMY Playwright beginner→advanced playlist · playwright.dev (docs) · target = SauceDemo · npx playwright codegen saucedemo.com (record live) · Playwright Trace Viewer online · your GitHub Actions
• 🎙️ Run codegen on camera — click through login and watch code generate, then rewrite it with role-based locators + a page object. Drop a trace into trace.playwright.dev and step through the timeline. Show a green CI run.

Section: Performance (k6) → Stage 15

• 🖥️ test.k6.io (safe target) · k6 docs · play.grafana.org (live dashboards)
• 🎙️ Run a small k6 run in the terminal and read the p95 / throughput / error-rate output aloud. Open play.grafana.org to show what latency/throughput dashboards look like during a test.

Section: Security (OWASP) → Stage 13

• 🖥️ OWASP Juice Shop (run locally, or the project’s hosted demo) · PortSwigger Web Security Academy (free live labs) · OWASP ZAP
• 🎙️ On Juice Shop, demo an IDOR (change an id in the URL/request) and a reflected XSS in the search box. In a PortSwigger lab, walk one access-control lab end to end. Keep it strictly on these practice targets.

Section: AI × QA + MCP → Stage 11

• 🖥️ Claude Code / Cursor with Playwright MCP · promptfoo · target = any demo site above
• 🎙️ Run claude mcp add playwright … live, then ask the agent “open SauceDemo, add a backpack, check out, tell me what’s broken, and write a Playwright test.” Show it driving a real browser, then review the generated assertions on camera — that’s the QA job. Build one tiny promptfoo eval.

Section: Interviews & mock → Stage 7 · Interview Bank

• 🖥️ Interview Bank (your question set) · Pramp · interviewing.io
• 🎙️ Screen-share the Interview Bank and answer 5 rapid-fire questions live, then do the 30-minute mock protocol on camera as a worked example.

Section: Resume & CV → Resume tutorial

• 🖥️ A real QA/SDET vacancy · QA Resume / CV master template · Reactive Resume or FlowCV · learner’s GitHub portfolio
• 🎙️ Extract 12 job keywords, choose the correct target title, rewrite one weak duty into a measurable result, add two proof links, then export and test the PDF. Show AI doing a gap analysis—but reject any invented experience.

🧰 Instructor’s always-open tab set

Keep these pinned while recording any QA lesson:

🎥 Recording tips

• One concept = one tab. Open it before you hit record.
• Do the thing live; narrate the why, not just the clicks.
• Show a failure, not just the happy path — that’s what teaches testing.
• Point people to the matching roadmap chapter + Cheatsheet in your description.

🎓 This whole roadmap is built to be recorded from. Publish the videos on AZADEMY and link each lesson back here.

← Back to the roadmap · See also: Cheatsheets · Interview Bank