內文簡介
＜內容簡介＞

你有這些煩惱嗎？
「雖然知道測試很重要，但遲遲尚未著手進行」
「雖然有一定的開發經驗，但沒寫過測試」
「不確定目前採用的測試方法是不是最合適的選擇」

想要就自信滿滿地寫下測試程式碼，然後暢快地說出
「會寫測試真是太好了！」

這本書就是專門為您所寫的教戰手冊
立刻就能派上用場的測試工具應用技巧！

現在的Web應用程式都需要在畫面上提供越來越高階的功能，而為了要確保品質跟易於維護與否，前端自動化測試就扮演著相當重要的角色。

本書是針對Web應用程式開發「前端測試」基本知識與具體實務執行方式的書籍。
透過真實的程式碼來進行教學，講解基本的測試程式碼寫法，更分享了前端特有的測試方法與工具該如何應用。
•UI元件測試
•視覺回歸測試
•E2E測試
•提升無障礙性
•在持續整合環境執行測試

有系統地學習前端測試，做到高品質、好維護！

還不只這些，就連「顧及無障礙性」跟「在持續整合環境執行測試」的議題也都跟上趨勢，相信各位可以紮實地學會開發現場第一線人員必備的測試知識與技巧。

適用對象：
•完全沒有建構過前端軟體的讀者
•完全沒有寫過測試程式碼的讀者
•沒有寫過囊括資料庫在內的E2E測試的讀者

★目錄：

前言
本書適用對象
本書軟體執行環境

第 1 章　測試的目的與障礙
　1-1本書的內容編排
　1-2 寫測試的目的
　1-3 寫測試的障礙

第 2 章　測試方法與測試策略
　2-1 以範圍與目的來思考測試
　2-2 前端測試的範圍
　2-3 前端測試的目的
　2-4 測試策略模型
　2-5 測試策略計畫

第 3 章　單元測試入門
　3-1 建構環境
　3-2 組成測試的元素
　3-3 實施測試的方法
　3-4 條件判斷
　3-5 臨界值與例外處理
　3-6 比對器
　3-7 非同步測試　

第 4 章　模擬（Mock）
　4-1 模擬的目的
　4-2 運用模擬模組的 Stub
　4-3 Web API 的模擬基礎
　4-4 Web API 模擬生成函式
　4-5 使用模擬函式的 Spy
　4-6 Web API 的細部模擬
　4-7 依賴當前時間的測試　

第 5 章 UI　元件測試
　5-1 UI 元件基本知識
　5-2 安裝需要的函式庫
　5-3 開始 UI 元件測試
　5-4 項目清單 UI 元件測試
　5-5 互動式 UI 元件測試
　5-6 使用公用函式進行測試
　5-7 含有非同步處理的 UI 元件測試
　5-8 UI 元件的快照測試（snapshot testing）
　5-9 原生角色與無障礙名稱（accessible name）

第 6 章　怎麼看程式碼覆蓋率報告（Coverage Report）
　6-1 程式碼覆蓋率報告簡介
　6-2 怎麼解讀程式碼覆蓋率報告
　6-3 選擇喜歡的報表產生器

第 7 章　Web 應用程式整合測試
　7-1 Next.js 應用程式開發與整合測試
　7-2 React Context 整合測試
　7-3 Next.js Router 的畫面顯示整合測試
　7-4 Next.js Router 系統操作整合測試
　7-5 使用React Hook Form 讓表單更好操作
　7-6 表單驗證測試
　7-7 模擬 Web API 回應的 MSW（Mock Service Worker）
　7-8 Web API 整合測試
　7-9 圖片上傳整合測試　

第 8 章　UI 元件總管
　8-1 Storybook 基本介紹
　8-2 Storybook 必要的附加元件（Add-on）
　8-3 註冊依賴 Context API 的 Story
　8-4 註冊依賴 Web API 的 Story
　8-5 註冊依賴 Next.js Router 的 Story
　8-6 用 Play function 進行互動測試
　8-7 運用 addon-a11y 進行無障礙性測試
　8-8 Storybook 的測試執行器
　8-9 將 Story 作為整合測試加以運用　

第 9 章　視覺回歸測試
　9-1 為什麼需要視覺回歸測試
　9-2 使用 reg-cli 比較圖片
　9-3 導入 Storycap
　9-4 導入 reg-suit
　9-5 準備外部儲存服務
　9-6 讓 reg-suit 與 GitHub Actions 連動
　9-7 運用視覺回歸測試來積極進行重構

第 10 章　E2E 測試
　10-1 E2E測試簡介
　10-2 Playwright 的安裝與基本講解
　10-3 簡介測試目標的應用程式
　10-4 在開發環境中執行E2E測試
　10-5 簡介 Prisma 以及如何準備測試
　10-6 登入功能的 E2E 測試
　10-7 個人資訊功能的 E2E 測試
　10-8 使用 E2E 測試確認按讚（Like）功能
　10-9 建立新文章頁面的 E2E 測試
　10-10 文章編輯頁面的 E2E 測試
　10-11 文章清單頁面的 E2E 測試
　10-12 面對 Flaky 測試

結語
索引

附錄 A　使用 GitHub Actios執行 UI 元件測試（PDF 電子書，請線上下載）
附錄 B　使用 GitHub Actios 執行 E2E 測試（PDF 電子書，請線上下載）

相關分類

購物須知

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

關於退貨

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

前端開發測試入門｜現在知道也還不遲的自動化測試策略必備知識

搜尋更多

內文簡介

相關分類