《Web前端測試與集成》是2017年9月1日清華大學出版社出版的圖書，作者是金鑫、武帥。
基本介紹
- 書名：Web前端測試與集成
- 作者：金鑫，武帥
- ISBN：9787302472759
- 定價：69
- 出版社：清華大學出版社
- 出版時間：2017.09.01
內容提要,目錄,
內容提要
全書共分為四部分。第一部分為基礎篇，總覽了前端開發測試中的挑戰與測試轉型，介紹了測試基礎環境的搭建；第二部分為單元測試篇，深入介紹了如何基於Jasmine單元測試框架和gulp、Karma等構建、執行工具對前端JavaScript代碼進行單元測試，以及AngularJS單元測試的最佳實踐和代碼覆蓋率等；第三部分為自動化測試篇，基於Protractor介紹了在Node.js環境下通過Selenium WebDriver全面覆蓋各個主流瀏覽器，進行自動化測試的最佳實踐，包括頁面對象模型、性能測試和分散式測試等；第四部分為集成篇，闡述了基於持續集成以實現更快、更可靠的軟體交付，展示了如何通過Jenkins與TFS、VSTS和GitHub的集成，實現Web套用的持續測試。
本書適合所有Web開發人員、測試人員和項目經理做學習、參考之用。
目錄
基礎篇
第1章 前端開發測試總覽 ...2
1.1 Web技術的發展和挑戰 ...2
1.2 傳統開發流程的局限性 ...4
1.3 傳統手工測試的局限性 ...6
1.4 開發模式的轉型 ...7
1.4.1 敏捷軟體開發 ...7
1.4.2 全流程測試 ...9
1.4.3 讓測試自動化 ...11
1.4.4 持續集成 ...11
1.4.5 DevOps ...12
1.5 本書目標 ...13
1.1 Web技術的發展和挑戰 ...2
1.2 傳統開發流程的局限性 ...4
1.3 傳統手工測試的局限性 ...6
1.4 開發模式的轉型 ...7
1.4.1 敏捷軟體開發 ...7
1.4.2 全流程測試 ...9
1.4.3 讓測試自動化 ...11
1.4.4 持續集成 ...11
1.4.5 DevOps ...12
1.5 本書目標 ...13
第2章 搭建測試基礎環境 ...15
2.1 JavaScript的運行環境Node.js ...15
2.1.1 什麼是Node.js ...15
2.1.2 Node.js的版本發展 ...17
2.1.3 安裝Node.js ...18
2.2 軟體包管理系統Node Package Manager（npm） ...21
2.2.1 安裝和更新npm ...21
2.2.2 package.json ...22
2.2.3 安裝軟體包 ...23
2.2.4 列出已安裝的軟體包 ...27
2.3 代碼編輯器（Visual Studio Code） ...28
2.3.1 安裝Visual Studio Code ... 28
2.3.2 初識Visual Studio Code ... 29
2.1 JavaScript的運行環境Node.js ...15
2.1.1 什麼是Node.js ...15
2.1.2 Node.js的版本發展 ...17
2.1.3 安裝Node.js ...18
2.2 軟體包管理系統Node Package Manager（npm） ...21
2.2.1 安裝和更新npm ...21
2.2.2 package.json ...22
2.2.3 安裝軟體包 ...23
2.2.4 列出已安裝的軟體包 ...27
2.3 代碼編輯器（Visual Studio Code） ...28
2.3.1 安裝Visual Studio Code ... 28
2.3.2 初識Visual Studio Code ... 29
單元測試篇
第3章單元測試概論 ...34
3.1 單元測試的特性 ...34
3.2 單元測試的重要性 ...35
3.3 測試金字塔 ...37
3.4 測試先行（Test-First） ...8
3.4.1 測試驅動開發（Test-Driven Development） ...39
3.4.2 行為驅動開發（Behavior-Driven Development） ... 40
3.5 Web 前端測試框架 ...42
3.1 單元測試的特性 ...34
3.2 單元測試的重要性 ...35
3.3 測試金字塔 ...37
3.4 測試先行（Test-First） ...8
3.4.1 測試驅動開發（Test-Driven Development） ...39
3.4.2 行為驅動開發（Behavior-Driven Development） ... 40
3.5 Web 前端測試框架 ...42
第4章深入Jasmine單元測試 ...44
4.1 初識Jasmine ...44
4.1.1 獲取Jasmine ... 44
4.1.2 前端單元測試架構 ...46
4.1.3 Jasmine測試框架類庫 ... 46
4.2 組織測試用例 ...48
4.2.1 describe ... 48
4.2.2 it ... 49
4.2.3 安裝和拆卸 ... 50
4.2.4 禁用測試套件和掛起測試用例 ...54
4.3 創建單元測試 ...554.3.1 準備測試場景 ... 55
4.3.2 編寫測試用例 ... 56
4.3.3 執行測試 ...... 58
4.4 Jasmine的斷言 ...59
4.4.1 內置匹配器 ... 59
4.4.2 自定義匹配器（Custom Matcher） ........................ 67
4.4.3 自定義相等檢驗器（Custom Equality Tester）.................. 68
4.4.4 非對稱相等檢驗器（Asymmetric Equality Tester） ............... 70
4.4.5 輔助匹配函式 ... 71
4.5 測試替身（Test Double） ...74
4.5.1 測試替身的類型 ... 74
4.5.2 使用Jasmine Spies ...... 77
4.6 測試異步代碼 ...84
4.6.1 Jasmine的異步支持 ... 87
4.6.2 模擬JavaScript Timeout 相關函式........................... 89
4.7 Jasmine外掛程式 ...90
4.7.1 jasmine-ajax ... 90
4.7.2 jasmine-jquery ... 94
4.8 基於瀏覽器調試 ......100
4.1 初識Jasmine ...44
4.1.1 獲取Jasmine ... 44
4.1.2 前端單元測試架構 ...46
4.1.3 Jasmine測試框架類庫 ... 46
4.2 組織測試用例 ...48
4.2.1 describe ... 48
4.2.2 it ... 49
4.2.3 安裝和拆卸 ... 50
4.2.4 禁用測試套件和掛起測試用例 ...54
4.3 創建單元測試 ...554.3.1 準備測試場景 ... 55
4.3.2 編寫測試用例 ... 56
4.3.3 執行測試 ...... 58
4.4 Jasmine的斷言 ...59
4.4.1 內置匹配器 ... 59
4.4.2 自定義匹配器（Custom Matcher） ........................ 67
4.4.3 自定義相等檢驗器（Custom Equality Tester）.................. 68
4.4.4 非對稱相等檢驗器（Asymmetric Equality Tester） ............... 70
4.4.5 輔助匹配函式 ... 71
4.5 測試替身（Test Double） ...74
4.5.1 測試替身的類型 ... 74
4.5.2 使用Jasmine Spies ...... 77
4.6 測試異步代碼 ...84
4.6.1 Jasmine的異步支持 ... 87
4.6.2 模擬JavaScript Timeout 相關函式........................... 89
4.7 Jasmine外掛程式 ...90
4.7.1 jasmine-ajax ... 90
4.7.2 jasmine-jquery ... 94
4.8 基於瀏覽器調試 ......100
第5章單元測試執行工具Karma ..............................102
5.1 初識Karma ...102
5.2 安裝Karma和相關外掛程式 ...104
5.2.1 安裝Karma ... 104
5.2.2 安裝外掛程式 ...105
5.3 Karma的配置 ...106
5.3.1 生成配置檔案 ...106
5.3.2 配置檔案的說明 ......107
5.4 基於Karma的調試 ...115
5.5 前端自動化任務構建工具 ..............................116
5.5.1 gulp和Grunt ...116
5.5.2 gulp的API ...118
5.5.3 運行gulp任務 ...122
5.6 Karma和gulp集成 ...123
5.1 初識Karma ...102
5.2 安裝Karma和相關外掛程式 ...104
5.2.1 安裝Karma ... 104
5.2.2 安裝外掛程式 ...105
5.3 Karma的配置 ...106
5.3.1 生成配置檔案 ...106
5.3.2 配置檔案的說明 ......107
5.4 基於Karma的調試 ...115
5.5 前端自動化任務構建工具 ..............................116
5.5.1 gulp和Grunt ...116
5.5.2 gulp的API ...118
5.5.3 運行gulp任務 ...122
5.6 Karma和gulp集成 ...123
第6章 AngularJS套用的單元測試 ...........................125
6.1 測試AngularJS套用的挑戰 ..............................125
6.2 初識ngMock ...127
6.2.1 準備測試環境 ...127
6.2.2 理解模組（Module）...128
6.2.3 理解注入機制（Inject）...131
6.3 AngularJS單元測試最佳實踐 ...........................138
6.3.1 測試Controller...138
6.3.2 單元測試中的Scope ...142
6.3.3 測試HTTP互動...144
6.3.4 測試Directive ... 154
6.3.5 測試$timeout和$interval...166
6.3.6 測試Promise ... 171
6.3.7 測試$log ......174
6.3.8 測試$exceptionHandler ... 175
6.1 測試AngularJS套用的挑戰 ..............................125
6.2 初識ngMock ...127
6.2.1 準備測試環境 ...127
6.2.2 理解模組（Module）...128
6.2.3 理解注入機制（Inject）...131
6.3 AngularJS單元測試最佳實踐 ...........................138
6.3.1 測試Controller...138
6.3.2 單元測試中的Scope ...142
6.3.3 測試HTTP互動...144
6.3.4 測試Directive ... 154
6.3.5 測試$timeout和$interval...166
6.3.6 測試Promise ... 171
6.3.7 測試$log ......174
6.3.8 測試$exceptionHandler ... 175
第7章代碼覆蓋率 ...177
7.1 代碼覆蓋率的衡量標準 ...177
7.1.1 函式覆蓋率（Function Coverage） ........................177
7.1.2 語句覆蓋率（Statement Coverage）........................178
7.1.3 分支覆蓋率（Branch Coverage） ........................179
7.1.4 條件覆蓋率（Condition Coverage） ........................179
7.2 代碼覆蓋率的意義 ...179
7.3 JavaScript代碼覆蓋率工具Istanbul ........................180
7.3.1 安裝Istanbul ... 181
7.3.2 覆蓋率測試 ...181
7.3.3 覆蓋率閾值 ...183
7.3.4 忽略代碼 ...183
7.3.5 Istanbul工作原理......184
7.4 使用Karma生成覆蓋率報告 ...........................185
7.1 代碼覆蓋率的衡量標準 ...177
7.1.1 函式覆蓋率（Function Coverage） ........................177
7.1.2 語句覆蓋率（Statement Coverage）........................178
7.1.3 分支覆蓋率（Branch Coverage） ........................179
7.1.4 條件覆蓋率（Condition Coverage） ........................179
7.2 代碼覆蓋率的意義 ...179
7.3 JavaScript代碼覆蓋率工具Istanbul ........................180
7.3.1 安裝Istanbul ... 181
7.3.2 覆蓋率測試 ...181
7.3.3 覆蓋率閾值 ...183
7.3.4 忽略代碼 ...183
7.3.5 Istanbul工作原理......184
7.4 使用Karma生成覆蓋率報告 ...........................185
自動化測試篇
第8章走進自動化測試 ...188
8.1 自動化測試的優勢 ...188
8.2 自動化測試實施流程 ...189
8.3 自動化測試轉型的適應性 ..............................190
8.4 測試工具的選擇 ......192
8.1 自動化測試的優勢 ...188
8.2 自動化測試實施流程 ...189
8.3 自動化測試轉型的適應性 ..............................190
8.4 測試工具的選擇 ......192
第9章初識Selenium ...194
9.1 Selenium發展歷史 ...194
9.2 Selenium工具套裝 ...196
9.2.1 Selenium RC ... 196
9.2.2 Selenium WebDriver ... 197
9.2.3 Selenium Grid ... 198
9.2.4 Selenium IDE ... 198
9.1 Selenium發展歷史 ...194
9.2 Selenium工具套裝 ...196
9.2.1 Selenium RC ... 196
9.2.2 Selenium WebDriver ... 197
9.2.3 Selenium Grid ... 198
9.2.4 Selenium IDE ... 198
第10章Selenium WebDriver 與元素定位 ........................205
10.1 搭建集成開發環境 ...205
10.2 NUnit測試框架 ......207
10.3 編寫測試用例 ...209
10.4 使用工廠模式創建驅動對象 ...........................212
10.5 定位頁面元素 ...214
10.5.1 基於id定位 ...214
10.5.2 基於Name定位...215
10.5.3 基於ClassName定位 ...216
10.5.4 基於TagName 定位 ...217
10.5.5 基於LinkText 定位...217
10.5.6 基於PartialLinkText 定位 ...218
10.5.7 基於CssSelector定位...219
10.5.8 基於XPath定位 ......220
10.1 搭建集成開發環境 ...205
10.2 NUnit測試框架 ......207
10.3 編寫測試用例 ...209
10.4 使用工廠模式創建驅動對象 ...........................212
10.5 定位頁面元素 ...214
10.5.1 基於id定位 ...214
10.5.2 基於Name定位...215
10.5.3 基於ClassName定位 ...216
10.5.4 基於TagName 定位 ...217
10.5.5 基於LinkText 定位...217
10.5.6 基於PartialLinkText 定位 ...218
10.5.7 基於CssSelector定位...219
10.5.8 基於XPath定位 ......220
第11章基於WebDriver 的Protractor 測試框架 ..................227
11.1 WebDriver 的JavaScript綁定 ...........................227
11.1.1 WebDriverJs 與Protractor ... 228
11.1.2 Protractor特點概述...229
11.1.3 Protractor的兼容性...230
11.2 搭建Protractor測試環境 ...230
11.2.1 安裝Protractor編輯器擴展..............................230
11.2.2 準備AngularJS被測網站 ...231
11.2.3 全局安裝Protractor與瀏覽器驅動........................234
11.2.4 本地安裝Protractor與瀏覽器驅動........................235
11.2.5 編寫測試代碼...235
11.2.6 編寫配置檔案...236
11.2.7 運行測試用例...236
11.2.8 調試......237
11.3 選擇JavaScript測試框架 ..............................240
11.3.1 配置JavaScript測試框架...240
11.3.2 JavaScript測試框架的適配器...241
11.4 定位頁面元素 ...244
11.4.1 基於binding定位......245
11.4.2 基於model定位 ......246
11.4.3 基於options定位 ......246
11.4.4 基於buttonText 定位...247
11.4.5 基於repeater定位 ...247
11.4.6 基於js定位...248
11.4.7 鏈式調用定位操作...249
11.4.8 使用$和$$ ... 250
11.4.9 自定義定位策略......251
11.5 異步流程控制 ...252
11.5.1 使用Promise ...253
11.5.2 定製的ControlFlow ... 256
11.5.3 JavaScript測試框架的異步適配器 ........................259
11.6 頁面互動 ...260
11.6.1 操作瀏覽器...260
11.6.2 操作元素...263
11.7 Protractor的等待機制 ...265
11.7.1 waitForAngular ... 265
11.7.2 使用sleep ... 266
11.7.3 隱式等待...266
11.7.4 顯式等待...267
11.8 測試非AngularJS程式 ...269
11.1 WebDriver 的JavaScript綁定 ...........................227
11.1.1 WebDriverJs 與Protractor ... 228
11.1.2 Protractor特點概述...229
11.1.3 Protractor的兼容性...230
11.2 搭建Protractor測試環境 ...230
11.2.1 安裝Protractor編輯器擴展..............................230
11.2.2 準備AngularJS被測網站 ...231
11.2.3 全局安裝Protractor與瀏覽器驅動........................234
11.2.4 本地安裝Protractor與瀏覽器驅動........................235
11.2.5 編寫測試代碼...235
11.2.6 編寫配置檔案...236
11.2.7 運行測試用例...236
11.2.8 調試......237
11.3 選擇JavaScript測試框架 ..............................240
11.3.1 配置JavaScript測試框架...240
11.3.2 JavaScript測試框架的適配器...241
11.4 定位頁面元素 ...244
11.4.1 基於binding定位......245
11.4.2 基於model定位 ......246
11.4.3 基於options定位 ......246
11.4.4 基於buttonText 定位...247
11.4.5 基於repeater定位 ...247
11.4.6 基於js定位...248
11.4.7 鏈式調用定位操作...249
11.4.8 使用$和$$ ... 250
11.4.9 自定義定位策略......251
11.5 異步流程控制 ...252
11.5.1 使用Promise ...253
11.5.2 定製的ControlFlow ... 256
11.5.3 JavaScript測試框架的異步適配器 ........................259
11.6 頁面互動 ...260
11.6.1 操作瀏覽器...260
11.6.2 操作元素...263
11.7 Protractor的等待機制 ...265
11.7.1 waitForAngular ... 265
11.7.2 使用sleep ... 266
11.7.3 隱式等待...266
11.7.4 顯式等待...267
11.8 測試非AngularJS程式 ...269
第12章使用Selenium Server ...273
12.1 Selenium Server環境配置 ..............................273
12.1.1 安裝Java JDK ... 274
12.1.2 下載Selenium Server Standalone ........................ 275
12.1.3 下載瀏覽器驅動......276
12.1.4 配置Protractor ... 276
12.1.5 啟動Selenium Server ... 277
12.2 JSON Wire Protocol 與W3C WebDriver 標準 ..................279
12.3 Selenium 3.0 ...282
12.4 配置瀏覽器 ...282
12.4.1 Chrome ...... 285
12.4.2 Firefox ......285
12.4.3 Edge ...... 288
12.4.4 IE .........289
12.4.5 多瀏覽器測試...291
12.1 Selenium Server環境配置 ..............................273
12.1.1 安裝Java JDK ... 274
12.1.2 下載Selenium Server Standalone ........................ 275
12.1.3 下載瀏覽器驅動......276
12.1.4 配置Protractor ... 276
12.1.5 啟動Selenium Server ... 277
12.2 JSON Wire Protocol 與W3C WebDriver 標準 ..................279
12.3 Selenium 3.0 ...282
12.4 配置瀏覽器 ...282
12.4.1 Chrome ...... 285
12.4.2 Firefox ......285
12.4.3 Edge ...... 288
12.4.4 IE .........289
12.4.5 多瀏覽器測試...291
第13章自動化測試最佳實踐 ...294
13.1 頁面對象模型 ...294
13.1.1 關注點分離...295
13.1.2 實現Protractor頁面對象...296
13.1.3 頁面對象最佳實踐...306
13.2 數據驅動測試 ...307
13.3 測試報告 ...311
13.3.1 控制台報告...312
13.3.2 JUnit報告 ...313
13.3.3 HTML報告 ...315
13.4 性能測試 ...316
13.5 圖像匹配 ...319
13.6 任務自動化 ...322
13.6.1 與gulp集成 ...322
13.6.2 npm腳本 ...325
13.1 頁面對象模型 ...294
13.1.1 關注點分離...295
13.1.2 實現Protractor頁面對象...296
13.1.3 頁面對象最佳實踐...306
13.2 數據驅動測試 ...307
13.3 測試報告 ...311
13.3.1 控制台報告...312
13.3.2 JUnit報告 ...313
13.3.3 HTML報告 ...315
13.4 性能測試 ...316
13.5 圖像匹配 ...319
13.6 任務自動化 ...322
13.6.1 與gulp集成 ...322
13.6.2 npm腳本 ...325
第14章分散式自動化測試 ...327
14.1 分散式測試概述 ...327
14.2 基於Selenium Grid的分散式測試........................328
14.2.1 啟動中央節點...329
14.2.2 註冊工作節點...329
14.2.3 執行測試...331
14.3 基於雲計算的分散式測試 ...........................333
14.4 配置共享 ...336
14.1 分散式測試概述 ...327
14.2 基於Selenium Grid的分散式測試........................328
14.2.1 啟動中央節點...329
14.2.2 註冊工作節點...329
14.2.3 執行測試...331
14.3 基於雲計算的分散式測試 ...........................333
14.4 配置共享 ...336
集成篇
第15章持續集成概論...340
15.1 開發流程自動化 ...340
15.1.1 什麼是持續集成......341
15.1.2 持續集成的價值......341
15.2 持續集成的功能特徵 ...343
15.2.1 編譯......343
15.2.2 測試......344
15.2.3 審計......344
15.2.4 部署......345
15.2.5 反饋......345
15.3 如何實施持續集成 ...345
15.3.1 消除誤解...345
15.3.2 前提條件...346
15.3.3 CI工具......347
15.3.4 實踐準則...348
15.4 選擇持續集成工具 ...350
15.1 開發流程自動化 ...340
15.1.1 什麼是持續集成......341
15.1.2 持續集成的價值......341
15.2 持續集成的功能特徵 ...343
15.2.1 編譯......343
15.2.2 測試......344
15.2.3 審計......344
15.2.4 部署......345
15.2.5 反饋......345
15.3 如何實施持續集成 ...345
15.3.1 消除誤解...345
15.3.2 前提條件...346
15.3.3 CI工具......347
15.3.4 實踐準則...348
15.4 選擇持續集成工具 ...350
第16章持續測試 ......352
16.1 測試策略 ...352
16.2 基於Jenkins的持續集成 ...353
16.3 集成Team Foundation Server ...........................356
16.3.1 創建項目...356
16.3.2 從Visual Studio Code 提交變更...........................358
16.3.3 配置TFS外掛程式...359
16.3.4 創建並配置Jenkins構建項..............................360
16.3.5 集成單元測試...364
16.3.6 集成自動化測試......368
16.3.7 郵件反饋...370
16.4 集成Visual Studio Team Services ........................371
16.5 集成GitHub ...376
16.5.1 配置GitHub ... 377
16.5.2 配置Jenkins ... 379
16.5.3 配置構建任務...380
16.1 測試策略 ...352
16.2 基於Jenkins的持續集成 ...353
16.3 集成Team Foundation Server ...........................356
16.3.1 創建項目...356
16.3.2 從Visual Studio Code 提交變更...........................358
16.3.3 配置TFS外掛程式...359
16.3.4 創建並配置Jenkins構建項..............................360
16.3.5 集成單元測試...364
16.3.6 集成自動化測試......368
16.3.7 郵件反饋...370
16.4 集成Visual Studio Team Services ........................371
16.5 集成GitHub ...376
16.5.1 配置GitHub ... 377
16.5.2 配置Jenkins ... 379
16.5.3 配置構建任務...380
