前端開發測試入門|現在知道也還不遲的自動化測試策略必備知識
活動訊息
內容簡介
你有這些煩惱嗎？
「雖然知道測試很重要，但遲遲尚未著手進行」
「雖然有一定的開發經驗，但沒寫過測試」
「不確定目前採用的測試方法是不是最合適的選擇」
想要就自信滿滿地寫下測試程式碼，然後暢快地說出
「會寫測試真是太好了！」
這本書就是專門為您所寫的教戰手冊
立刻就能派上用場的測試工具應用技巧！
現在的Web應用程式都需要在畫面上提供越來越高階的功能，而為了要確保品質跟易於維護與否，前端自動化測試就扮演著相當重要的角色。
本書是針對Web應用程式開發「前端測試」基本知識與具體實務執行方式的書籍。
透過真實的程式碼來進行教學，講解基本的測試程式碼寫法，更分享了前端特有的測試方法與工具該如何應用。
‧UI元件測試
‧視覺回歸測試
‧E2E測試
‧提升無障礙性
‧在持續整合環境執行測試
有系統地學習前端測試，做到高品質、好維護！
還不只這些，就連「顧及無障礙性」跟「在持續整合環境執行測試」的議題也都跟上趨勢，相信各位可以紮實地學會開發現場第一線人員必備的測試知識與技巧。
適用對象：
‧完全沒有建構過前端軟體的讀者
‧完全沒有寫過測試程式碼的讀者
‧沒有寫過囊括資料庫在內的E2E測試的讀者
「雖然知道測試很重要，但遲遲尚未著手進行」
「雖然有一定的開發經驗，但沒寫過測試」
「不確定目前採用的測試方法是不是最合適的選擇」
想要就自信滿滿地寫下測試程式碼，然後暢快地說出
「會寫測試真是太好了！」
這本書就是專門為您所寫的教戰手冊
立刻就能派上用場的測試工具應用技巧！
現在的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 電子書，請線上下載）
本書適用對象
本書軟體執行環境
第 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 電子書，請線上下載）
配送方式
-
台灣
- 國內宅配：本島、離島
-
到店取貨：
不限金額免運費
-
海外
- 國際快遞：全球
-
港澳店取：
訂購/退換貨須知
加入金石堂 LINE 官方帳號『完成綁定』，隨時掌握出貨動態：
提醒您！！
金石堂及銀行均不會請您操作ATM! 如接獲電話要求您前往ATM提款機，請不要聽從指示，以免受騙上當！
退換貨須知：
**提醒您，鑑賞期不等於試用期，退回商品須為全新狀態**
-
依據「消費者保護法」第19條及行政院消費者保護處公告之「通訊交易解除權合理例外情事適用準則」，以下商品購買後，除商品本身有瑕疵外，將不提供7天的猶豫期：
- 易於腐敗、保存期限較短或解約時即將逾期。（如：生鮮食品）
- 依消費者要求所為之客製化給付。（客製化商品）
- 報紙、期刊或雜誌。（含MOOK、外文雜誌）
- 經消費者拆封之影音商品或電腦軟體。
- 非以有形媒介提供之數位內容或一經提供即為完成之線上服務，經消費者事先同意始提供。（如：電子書、電子雜誌、下載版軟體、虛擬商品…等）
- 已拆封之個人衛生用品。（如：內衣褲、刮鬍刀、除毛刀…等）
- 若非上列種類商品，均享有到貨7天的猶豫期（含例假日）。
- 辦理退換貨時，商品（組合商品恕無法接受單獨退貨）必須是您收到商品時的原始狀態（包含商品本體、配件、贈品、保證書、所有附隨資料文件及原廠內外包裝…等），請勿直接使用原廠包裝寄送，或於原廠包裝上黏貼紙張或書寫文字。
- 退回商品若無法回復原狀，將請您負擔回復原狀所需費用，嚴重時將影響您的退貨權益。
商品評價