《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