CH10 · 前端測試 詳細 ROADMAP
計畫文件，不會被 Quartz 渲染。
回主 roadmap → frontend/ROADMAP.md
章節目標
這一章只放前端特有的測試主題 ——RTL / Playwright / MSW / 視覺迴歸 / 元件測試 / A11y 測試 / 前端效能測試。
通用測試主題 （測試金字塔、AAA pattern、Test Doubles、Coverage 策略、Test Smells、TDD/BDD、Flaky Tests、Mutation Testing、測試 ROI、Review 標準等）屬於 content/testing/ 系列 ，不在本章。
🌱 基本介紹
# 主題 Slug Stage 大綱 01 前端測試跟後端測試差在哪 01-frontend-vs-backend-testing🌱 DOM 操作、使用者互動模擬、視覺驗證、瀏覽器環境的特殊性、前端獨有的測試類型
❓ 為什麼需要
# 主題 Slug Stage 大綱 02 為什麼要用 Testing Library（vs Enzyme） 02-why-testing-library🌱 Enzyme 鼓勵測 implementation detail（instance / state）、RTL 測使用者行為、重構不壞測試、accessibility bonus、React 官方為什麼推 RTL 03 為什麼要視覺迴歸測試 （unit test 不夠嗎）03-why-visual-testing🌱 CSS 爆掉 unit test 抓不到、設計一致性、Chromatic / Percy / Lost Pixel 解的問題、Design System 團隊必備 04 為什麼前端需要 A11y 測試 04-why-a11y-testing🌱 a11y 違規造成的法律風險、自動測能抓的比例（axe-core 約 30%）、手動測不可或缺
🕰️ 演進
# 主題 Slug Stage 大綱 05 JS 測試框架演進（前端） 05-js-test-framework-evolution🌱 Jasmine → Mocha → Jest → Vitest → Bun test，每個的時代價值 06 E2E 測試工具演進 06-e2e-evolution🌱 Selenium 笨重時代 → WebDriver → Cypress DX 革命 → Playwright 跨瀏覽器 + 速度 07 React 測試工具演進 07-react-testing-evolution🌱 Enzyme → React Testing Library，為什麼捨棄 Enzyme
🧠 知識型
前端測試類型
# 主題 Slug Stage 大綱 08 單元測試（Jest / Vitest） ⛔️ testing/13-unit-test-jest-vitest 🌿 跨系列 09 E2E（Playwright） ⛔️ testing/14-e2e-playwright 🌿 跨系列 10 元件測試（Component testing） 10-component-testing🌱 Cypress / Playwright Component Testing、Storybook 整合、跟 unit 的差異 11 視覺迴歸測試 11-visual-regression🌱 Chromatic / Percy / Lost Pixel / Playwright Screenshots、baseline 管理、flaky 處理 12 Snapshot Testing（前端角度） 12-snapshot-frontend🌱 Jest / Vitest snapshot、UI 序列化、何時有用何時是 anti-pattern 13 前端效能測試 13-frontend-performance-testing🌱 Lighthouse CI、Playwright trace、Web Vitals 收集、CWV gate 在 CI 14 A11y 測試 14-a11y-testing🌱 axe-core / Pa11y、自動 vs 手動的分界、跨 CH12 A11y
前端測試核心工具
# 主題 Slug Stage 大綱 15 Testing Library 哲學 15-testing-library-philosophy🌱 「The more your tests resemble the way your software is used, the more confidence they can give you」、query 優先順序（getByRole > getByLabelText > getByText > getByTestId）、accessibility-first 16 MSW（Mock Service Worker） 16-msw🌱 Service Worker 層攔截、測試 + dev 共用 mock、為什麼比 axios mock 強、GraphQL 支援 17 Playwright 前端進階 17-playwright-advanced🌱 Page Object Model、fixtures、跨瀏覽器平行、trace viewer、network mocking
跨系列參考
# 主題 Slug Stage 大綱 18 測試策略總覽 ⛔️ process/02-testing-strategy 🌿 跨系列 19 TDD / BDD / SDD ⛔️ process/14-tdd-bdd-sdd 🌿 跨系列
🔧 小實作注意事項
# 主題 Slug Stage 大綱 20 第一支 RTL 測試（Counter 範例） 20-first-rtl-test🌱 從零搭 Vitest + RTL、寫第一個測試、debug 常見錯誤 21 測非同步：loading / error / success 21-async-testing🌱 waitFor / findBy*、fake timers、MSW 整合22 測 custom hook 22-testing-custom-hooks🌱 renderHook、跟 component test 的差異23 測 form（RHF + Zod） 23-testing-forms🌱 user event 模擬、驗證錯誤測試、submit flow 24 測 state management（Zustand / Redux） 24-testing-state🌱 獨立 store 測試、跟 component 整合測試 25 Playwright 第一支 E2E 25-first-playwright-test🌱 從零搭 Playwright、page object model、fixtures 26 Storybook + 測試整合 26-storybook-testing🌱 play function、interaction test、視覺迴歸自動化、Chromatic 27 A11y 自動測整合 27-a11y-automation🌱 @axe-core/react、jest-axe、Playwright axe integration、CI fail-on-violation 28 CI 中跑前端測試的最佳實踐 28-frontend-ci-testing🌱 平行化、分 shard、cache、Playwright retry、Chromatic 費用控管
💣 Anti-pattern
# 主題 Slug Stage 大綱 29 前端測試 Anti-patterns 29-frontend-testing-anti-patterns🌱 測 React instance / private state、過度 mock 整個 component、screen.debug() 留在 production、brittle snapshots、把 data-testid 當主要 query、E2E 測純 UI 裝飾、測 CSS 實作細節
🧰 對應檢查工具
# 主題 Slug Stage 大綱 30 前端測試工具生態 30-frontend-testing-tooling🌱 Vitest / Jest / Playwright / Cypress / Storybook / MSW / Testing Library / Chromatic / Lost Pixel / jest-axe、選型決策樹
📎 補充
# 主題 Slug Stage 大綱 S01 Chaos / Stress 測試（前端角度） s01-chaos-frontend🌱 模擬慢網路 / 高延遲 / 斷線的前端表現測試 S02 Testing Library 進階 query patterns s02-rtl-advanced-queries🌱 accessible query、複雜 DOM 結構、自訂 matchers
章節進度統計
知識主題 ：30 + 2 補充 = 32 項🌿 growing：4（跨系列）
🌱 seed：28
⚠️ 屬於 content/testing/ 通用測試系列（不在本章）
以下通用測試主題會在 content/testing/ROADMAP.md（待建）規劃，本章不重複：
測試金字塔 vs 獎盃
測試哲學演進（user-centric / behavior / structural）
為什麼要寫測試、為什麼不只寫 E2E、為什麼 TDD
Test Doubles（Mock / Stub / Fake / Spy）
Test Coverage 策略（100% coverage 的陷阱）
Flaky Tests 成因與對策
Mutation Testing
契約測試（Contract Testing）
整合測試通論
好測試的寫作原則（AAA / Given-When-Then / 獨立性 / 命名）
測試組織與結構
Test Smells 合輯
測試 ROI：哪些該測、哪些不該測
測試 Review 標準
測試技術債管理
Property-based Testing
AI 輔助生成測試
測試文化建立
測試資料（Fixtures / Factories）通論
跨系列連結
→ content/testing/ 通用測試系列（本章跳過的通用內容）
→ frontend/framework/ CH6（元件測試、Storybook 整合）
→ frontend/application/ CH8 F09（Mock / Contract）
→ frontend/a11y/ CH12（A11y 測試深入）
→ frontend/architecture/ CH7（重構前測試準備）
→ process/ 系列（測試策略、TDD/BDD）
→ standards/ 系列（好的測試標準）