第一部分
前端自动化测试框架准备篇

第1章
前端自动化测试概述

1.1 前端自动化测试概述

随着软件技术的不断发展，软件的质量问题越来越受到企业的重视，对于一些应用（比如微信、支付宝等）来说，软件的质量缺陷会给人们的生活带来很大的影响。在这种趋势下，利用有限的人工覆盖“无限”的测试场景，成为软件质量保障工作者的极致追求。

时至今日，测试活动也由最开始的人工操作“点点点”逐渐演化为单元测试（Unit Test），API测试/集成测试，UI测试组成的多层次测试活动，这也就是测试金字塔模型（Test Pyramid），如图1-1所示。

在测试金字塔模型中，单元测试主要针对测试模块单元（一般指方法，类）的测试，具备投入小、收益产出高的特征，可以较早期地发现代码缺陷。

API测试/集成测试主要包括模块接口测试，子功能模块集成起来的功能模块测试等，目的是为了验证在单元测试的基础上，所有模块集成起来的子系统、子功能是否仍然满足质量指标。

UI测试的主要目的是，从软件使用者角度来检验软件的质量，而UI自动化测试则是以自动化的方式来代替人工执行测试。在测试金字塔模型中，UI层测试是各种测试中投入最大、收益最低、运行最慢的一种。

在传统的观念中，大家常常把UI自动化测试等同于前端自动化测试。但是UI自动化测试是不是等同于前端自动化测试呢？在回答“是”或者“不是”之前，我们有必要了解下前端开发技术的发展史。

前端（Front End），是相对于后端（Back End/Server端）来说的，即应用程序的前台部分，也就是通常意义上的用户可见部分。根据应用程序的不同，前端也分为浏览器页面（包括H5），手机客户端，或者C/S（Client/Server）程序，嵌入式程序的用户操作界面。

前端Web开发技术，一般指代针对浏览器开发的技术。前端Web开发的历史，就是前端技术的进化史，从HTML（Hyper Text Markup Language）即超文本标记语言诞生至现在，前端Web开发技术经历了如下阶段：

• 静态页面阶段

较为早期的应用程序开发，Web开发不是作为一个职业存在的，它仅仅是后端开发的一部分，后端开发在开发应用程序时，会建立很多用于展示的静态模板文件，浏览器将要请求的数据发送给后端，后端收到浏览器请求后，把相应的数据经过处理填入这些静态模板里，经过CSS的渲染，展现给用户。

这个阶段，Web页面完全是静态的，同样的页面链接，任何时候访问，内容是完全一样无法改变的，任何的页面改动，都需要利用模板文件重新生成，十分不方便，这也是最初的互联网雏形。

• 动态页面阶段

随着JavaScript的应用，Web动态页面应运而生，JavaScript可以用来为网页添加各种各样的动态功能，比如嵌入动态文本，对浏览器事件做出响应，在数据被提交到服务器前对其进行验证等。

Web页面从此奠定了HTML + CSS + JavaScript的基础，使得访问相同的URL可以得到不同的内容，Web开发技术进入了动态页面阶段。

MVC（Model View Controller）模式开始流行。MVC是模型（Model）、视图（View）和控制器（Controller）的缩写，它使业务逻辑、数据、界面显示分离。这时Web开发属于View层。

但此阶段服务器在处理客户端的请求时，用户只能等待，HTML页面必须整体返回，无法做到只更新一部分数据，用户只能把大量时间浪费在等待页面加载上。

• 响应式页面阶段

Ajax（Asynchronous JavaScript and XML）的出现改变了上述情况，作为一种能够创建交互式网页应用的网页开发技术，它使用户操作与服务器响应异步化。特别是随着Gmail这个里程碑式产品的使用，Web开发全面进入了“响应式页面”时代，也催生了前端开发这个岗位。

前端开发不再仅仅是开发后端所需要的页面模板，前端可以独立得到后端的各种数据，从此前端也变得越来越复杂。

• 现代Web应用程序阶段

前端能够通过Ajax获取到数据，那么也就有了对数据处理的需求和能力。前端代码必须保存获取到的这些数据，并在处理后展示给用户。这样前端客观上也可以作为一个迷你版的后端，于是，各种前端MVC、MVVM（用View-Model来代替后端的Controller）框架大行其道。

而SPA（Single Page Application）的出现，则让前端有了应用程序的雏形。SPA能够加载单个HTML页面并在用户与应用程序交互时动态更新该页面。在SPA之后，前端开发变成了前端应用开发。

随后，前端技术出现“井喷”，Angular、Vue、Node.js的出现彻底改变了前端技术。特别是Node.js（Node.js是一个支持JavaScript运行在服务器端的开发平台）的出现，使得前端开发也可以编写后端程序，JavaScript事实上也成为服务器端开发语言。

了解了前端技术发展史，前端自动化测试的定义也就清楚了：

前端自动化测试是针对前端代码的测试（目前最流行的前端语言是JavaScript）。

因为JavaScript事实上已经不再只限于前端的开发，也可以胜任后端的开发，再加上Node.js的出现让更多的项目中出现了由前端开发者负责的BFF（Backend For Frontend，服务于前端的后端）层，因此前端的自动化测试就自然而然地扩展了。前端自动化测试不仅包括UI自动化测试，还可以包括API，集成测试和单元测试。也就是说，前端自动化的可覆盖范围，应包括测试金字塔的每一层。