內文簡介
＜內容簡介＞

在前端領域，快節奏且不斷革新的開發環境下，如何能在迅速產出的同時保持高品質的程式碼成為一大挑戰，因此「測試」變得十分重要。選擇何種測試方式、如何撰寫和執行測試成為開發者必須深思的議題。缺乏測試的程式碼難以確保品質，而解決這個問題的關鍵在於建立適當的測試策略。

主要分為八大部份：
● 測試入門：深入介紹前端網頁測試的基本概念、測試技術、以及前端測試的多樣種類。
● 單元測試：詳細探討如何針對最小範圍進行邏輯驗證，強調元件測試的重要性，並評比常用測試框架，確保基礎工作得當。
● 整合測試：驗證特定功能，介紹如何以使用者的角度測試功能與盡量擬真、模擬和快照該怎麼用，逐步提升品質的穩定性。
● 端對端測試：驗證操作流程，探討如何透過模擬真實使用者的操作行為，實現更全面的測試，以達到完整的功能覆蓋。
● 視覺測試：驗證畫面正確性，詳述如何精確比對畫面，並針對跨瀏覽器和跨視區等多種變因，加速UI 測試的進行。
● 測試時機：介紹執行測試的不同時機和方法，包含前置指令、手動觸發、合併程式碼前後和持續整合，以及從程式碼的覆蓋率來推敲使用案例的覆蓋率。
● 狀況題：針對各種測試的疑難雜症，提供實用的解決方案，解救攻城獅克服測試的挑戰。
● 分享如何善用GitHub Copilot 與ChatGPT 提升撰寫測試的效率，有效提高產能。

★本書特色：

● 透過圖文並茂、程式碼範例的深入說明，易於學習、演練和實踐各種前端測試，並在實際應用中感受寫測試的成效。
● 提供明確的原則和觀點，幫助你評估寫測試的策略與成本，並依此做出最適合的選擇。
● 分享有效使用AI 工具產生測試程式的秘訣，提高產能。
● 透過清楚易懂的範例，深入淺出地解說各類挑戰，協助你輕鬆應對測試戰場的難題。

★專家推薦：

這本書非常適合前端工程師全面性地打基礎，不僅能學會撰寫測試程式，還能全局地做出適當的決策。我喜歡這本書的地方在於其結構分明、面向完整，閱讀起來緊湊而輕鬆易懂，範例大小適中且容易實作。這本書可以幫助前端和後端工程師節省時間，進而更有效地學習，拓展人生與職涯的長度、廣度與深度。感謝 Summer 的付出，幫助大家提升產品品質，改善使用者體驗。
Odd-e Taiwan 敏捷技術教練 | 陳仕傑 (91) 2024/5/1

雖然寫測試可能還是靠開發者自己的個人經驗，但還是有一些前輩或大神們整理出來的方法論可以參考。
跟著 Summer 的書學怎麼寫前端測試，也就是學著怎麼寫出更有讓自己更有信心的前端程式碼！
五倍學院 | 高見龍

在 Summer 的這本書中，透過深入淺出的方式，介紹了各種不同類型的測試，從單元測試、整合測試、端對端測試，一直到前端特有且重要的視覺測試，全部都有所著墨。同時也示範了如何在 CI 上執行測試，並結合豐富的實務經驗，說明了前端測試為什麼會更著重在測試行為，而非程式的實作。書中更有系統地整理出不同時機適合使用的測試方式和工具。如果你想要對於前端測試有更全面的認識，從類型、工具、到執行有更完整的了解，這絕對是一本值得一看的好書。
PJCHENder 網頁開發咩腳版主、《從 Hooks 開始，讓你的網頁 React 起來》作者 | 陳柏融

★目錄：

CHAPTER 1測試入門
1-1 什麼是前端網頁測試？為什麼要寫測試？
1-2 前端測試的種類
1-3 測試技術
1-4 測試命名模式
1-5 Mock、Spy 與 Double
1-6 本章回顧與總結

CHAPTER 2單元測試（Unit Testing）
2-1 單元測試
2-2 環境建置、安裝與工具評比
2-3 最小範圍的驗證邏輯
2-4 元件該怎麼寫測試？以 React 為例
2-5 淺渲染與完全渲染
2-6 本章回顧與總結

CHAPTER 3整合測試（Integration Testing）
3-1 整合測試
3-2 以使用者的角度測試功能和盡量擬真
3-3 模擬元件、API 的回應與第三方套件
3-4 快照
3-5 狀態管理該怎麼寫測試？以 Redux 為例
3-6 本章回顧與總結

CHAPTER 4端對端測試（End-to-End Testing）
4-1 端對端測試
4-2 環境建置與安裝
4-3 驗證操作流程
4-4 本章回顧與總結

CHAPTER 5視覺測試（Visual Testing）
5-1 視覺測試
5-2 驗證畫面正確性
5-3 工具評比
5-4 本章回顧與總結

CHAPTER 6寫完測試，然後呢？執行測試的時機和方法
6-1 前置指令與手動觸發測試
6-2 在合併程式碼之前執行測試
6-3 在 CI 上常態地執行測試
6-4 從程式碼的覆蓋率來推敲使用案例的覆蓋率
6-5 本章回顧與總結

CHAPTER 7狀況題
7-1 UI 一更新測試就失敗，該怎麼辦？
7-2 重複測試，該怎麼處理呢？
7-3 Timer 怎麼測？
7-4 如何只模擬部份模組？
7-5 如何 debug ？找不到這個元素怎麼辦？怎麼知道資料流是什麼樣子？
7-6 多國語系怎麼測？
7-7 設定和解除怎麼用？ beforeEach、afterEach、 beforeAll、afterAll 是什麼？
7-8 測試該進行型別檢查嗎？
7-9 為什麼有些 test case 有時執行成功，有時執行失敗？
7-10 如何只跑特定測試？以 Jest 為例

CHAPTER 8善用 AI 寫測試
8-1 善用 GitHub Copilot 寫測試
8-2 善用 Mermaid 與 ChatGPT 寫測試

CHAPTER 9總結

CHAPTER 10中英文名詞索引

＜作者簡介＞

唐心皓（Summer）
工程師、講者以及作家，是技術部落格「Summer。桑莫。夏天」與《打造高速網站，從網站指標開始！全方位提升使用者體驗與流量的關鍵》的作者。擅長SEO、前端效能與測試。相信知識的分享能打破隔閡、讓世界更加美好。

相關分類

購物須知

寄送時間	全台灣24h到貨，遲到提供100元現金積點。全年無休，週末假日照常出貨。例外說明
送貨方式	透過宅配送達。除網頁另有特別標示外，均為常溫配送。消費者訂購之商品若經配送兩次無法送達，再經本公司以電話與Email均無法聯繫逾三天者，本公司將取消該筆訂單，並且全額退款。
送貨範圍	限台灣本島與離島地區註，部分離島地區包括連江馬祖、綠島、蘭嶼、琉球鄉…等貨件，將送至到岸船公司碼頭，需請收貨人自行至碼頭取貨。注意！收件地址請勿為郵政信箱。註：離島地區不配送安裝商品、手機門號商品、超大材商品及四機商品。
售後服務	缺掉頁更換新品
執照證號＆登錄字號	本公司食品業者登錄字號A-116606102-00000-0

關於退貨

PChome24h購物的消費者，都可以依照消費者保護法的規定，享有商品貨到次日起七天猶豫期的權益。(請留意猶豫期非試用期!!)您所退回的商品必須回復原狀（復原至商品到貨時的原始狀態並且保持完整包裝，包括商品本體、配件、贈品、保證書、原廠包裝及所有附隨文件或資料的完整性）。商品一經拆封/啟用保固，將使商品價值減損，您理解本公司將依法收取回復原狀必要之費用(若無法復原，費用將以商品價值損失計算)，請先確認商品正確、外觀可接受再行使用，以免影響您的權利，祝您購物順心。
如果您所購買商品是下列特殊商品，請留意下述退貨注意事項：
1. 易於腐敗之商品、保存期限較短之商品、客製化商品、報紙、期刊、雜誌，依據消費者保護法之規定，於收受商品後將無法享有七天猶豫期之權益且不得辦理退貨。
2. 影音商品、電腦軟體或個人衛生用品等一經拆封即無法回復原狀的商品，在您還不確定是否要辦理退貨以前，請勿拆封，一經拆封則依消費者保護法之規定，無法享有七天猶豫期之權益且不得辦理退貨。
3. 非以有形媒介提供之數位內容或一經提供即為完成之線上服務，一經您事先同意後始提供者，依消費者保護法之規定，您將無法享有七天猶豫期之權益且不得辦理退貨。
4. 組合商品於辦理退貨時，應將組合銷售商品一同退貨，若有遺失、毀損或缺件，PChome將可能要求您依照損毀程度負擔回復原狀必要之費用。
若您需辦理退貨，請利用顧客中心「查訂單」或「退訂/退款查詢」的「退訂/退貨」功能填寫申請，我們將於接獲申請之次日起1個工作天內檢視您的退貨要求，檢視完畢後將以E-mail回覆通知您，並將委託本公司指定之宅配公司，在5個工作天內透過電話與您連絡前往取回退貨商品。請您保持電話暢通，並備妥原商品及所有包裝及附件，以便於交付予本公司指定之宅配公司取回（宅配公司僅負責收件，退貨商品仍由特約廠商進行驗收），宅配公司取件後會提供簽收單據給您，請注意留存。
退回商品時，請以本公司或特約廠商寄送商品給您時所使用的外包裝（紙箱或包裝袋），原封包裝後交付給前來取件的宅配公司；如果本公司或特約廠商寄送商品給您時所使用的外包裝（紙箱或包裝袋）已經遺失，請您在商品原廠外盒之外，再以其他適當的包裝盒進行包裝，切勿任由宅配單直接粘貼在商品原廠外盒上或書寫文字。
若因您要求退貨或換貨、或因本公司無法接受您全部或部分之訂單、或因契約解除或失其效力，而需為您辦理退款事宜時，您同意本公司得代您處理發票或折讓單等相關法令所要求之單據，以利本公司為您辦理退款。
本公司收到您所提出的申請後，若經確認無誤，將依消費者保護法之相關規定，返還您已支付之對價（含信用卡交易），退款日當天會再發送E-mail通知函給您。

前端測試指南：策略與實踐

搜尋更多

內文簡介

相關分類