前端自动化测试与持续集成系统

舒海林 贵州大学明德学院

1 系统相关技术

值得一提的是，基于Node.js容器托管的YunOS官网V2.7发布上线证明前端项目也可以如同后端项目一样以一个完整的工程存在。在这种开发模式下，开发机器上的预览效果即等同线上效果的全貌，修改和迭代不再需要从线上拷贝源代码了。在传统的Java层和客户端层引入了新的一层Node，不仅给前端带来了机遇，也带来了挑战。对后端环境的陌生，使得前端在质量、安全、部署、监控、预警等领域需要重新思考、界定范围并建立新规则。

2 系统需求分析

从前端自动化测试的特点出发分析，前端自动化测试提供质量信息给项目开发者，测试人员，以及维护人员。同时，前端自动化测试通过对有关被测试产品或者服务的而进行的一系列的测试活动，预测网站上线的风险以及对上线网站的回归测试。至于进行前端自动化测试的实际，传统来说是在软件的具体概要已经确定并且完成代码编写后才进行软件测试，但是随着敏捷测试的概念的产生，软件测试被提出与软件开发同时进行，甚至开始于需求设计阶段。对于本次前端自动化测试与持续集成系统来说，我们测试的目的是是对网站进行审核，这种审核是用来帮助软件产品开发团队的，是客观的、独立的，因此在开发过程中的任何阶段都可以进行前端自动化测试与持续集成。

3 软件设计

3.1 系统的特点

前端自动化测试及持续集成系统的特点主要体现在选择测试计划和执行测试计划两个方面。

(1）选择测试计划

如需求分析中所列，根据不同的测试内容，执行不同的测试计划。区别于服务端代码的测试的是GUI软件测试部分。

(2）执行测试计划

执行阶段的工作就是按照步骤来执行测试,所依据的测试用例是设计阶段建立的.狭义上讲，按照测试用例开展测试的阶段就是通常我们提到的测试。在我们这里把执行测试计划分为：前端单元测试、前端覆盖率测试、界面回归测试、前端功能测试、持续集这几个阶段。

3.2 系统的难点

(1）GUI测试的难点

目前，计算机软件与普通用户进行信息传递和交互过程中，GUI（Graphical User Interface）是主要的方式。GUI中文译为图形用户界面，而对GUI软件开展的软件测试也叫GUI软件测试。

极大的方便了用户的操作的同时，GUI的存在也使得GUI软件更复杂、更难以测试。学术界和工业界日渐感兴趣于GUI软件的开发，也重视GUI软件的测试的重要性，然而，还处于初级阶段的测试实践证明， 很多存在于GUI软件的测试的问题还没有解决，由于技术限制，在实际需求中，保证软件质量不能被满足，依然需要投入较多的项目时间和较高人工成本来进行GUI软件测试。

(2）系统开发及推广难点

在一些特殊的情况下，前端自动化测试及持续集成系统需要考虑到测试环境，如是否跨域，日常线上等；需要考虑到性能问题，如测试系统的性能会受本地机器的影响，能否同时测试多个承受大型项目的压力测试等；需要考虑到可用性问题，为了代替手工的测试，是否建立通过仓库地址来执行测试，然后建立测试脚本来调用测试工具，这就要求仓库和脚本对测试平台来说是可访问的，一些私有仓库需要考虑这一点；测试脚本的编写：脚本的测试内容对使用者有技术门槛和较高的学习成本。基于这些信息，如何让测试人员能够方便快捷有效正确地使用测试系统，保证能够按照预期进行测试，对前端自动化测试及持续集成系统的开发提出了挑战。

另外的一个难点是测试脚本的开发，对于目前的工具，写自定义测试用例是有一定门槛的，对于前端同学会好一些，但对于测试同学门槛会更高，给主动接入增加了难度。

3.3 系统技术选型

这里从需求，实现成本和使用成本出发，选择方案一Phantomjs与CasperJS开发前端自动化测试与持续集成系统的开发。

(1）方案一：Phantomjs＋CasperJS

PhantomJS 是一个无界面的,可脚本编程的WebKit浏览器引擎。它原生支持多种web 标准：DOM 操作，CSS选择器，JSON，Canvas以及SVG。

CasperJS 基于PhantomJS和SlimerJS，提供了更加易用API, 增强了测试等方面的支持。

Phantomjs＋CasperJS适合于大部分网站的自动化测试，但是要注意的是，这组技术选型不适合于新特性众多的网站的测试，究其原因最新版的CasperJS所支持的Phantomjs1.9.8用的是2011年的Webkit内核534.34，目标测试网站用到的很多新特性在此版本浏览器上不兼容。

(2）方案二：SlimerJS＋CasperJS

SlimerJS 与PhantomJS相似，运行于Gecko内核之上（与Firefox同核）。SlimerJS的功能相对Phantomjs弱很多，比如不支持--ignore-ssl-errors参数设置，导致登录页面脚本运行失败。

(3）方案三：webdriverio + mocha

webdriverio 自动化工具，基于Selenium WebDriver封装，可运行于chrome, firefox, safari, ie, ios android等浏览器或APP。mocha 是一款BDD测试框架。用户操作测试：编写一套脚本，可运行于不同浏览器，实现功能测试的同时顺带实现浏览器兼容性测试。界面回归测试：像素对比，需要安装webdrivercss插件。作为前端工程师，在写测试脚本时总有一股修改DOM元素从而达到操作效果的冲动，还好webdriver没有提供此类API，避免了对测试对象的破坏与干涉。

3.4 系统架构

前端自动化测试与持续集成系统集前端单元测试、覆盖率测试、界面回归测试、功能测试、持续集成及结果分析等多种功能于一体。利用此平台，测试工作者可以方便地进行测试内容管理和测试结果查看。此外，为了方便测试工作者使用前端自动化测试及持续集成系统，设计了易于理解的交互界面。以下将从几个步骤分析系统的流程：

(1）搭建工程目录

搭建工程目录是自动化测试和项目开展的第一步，旨在自动地下载前端自动化测试与持续集成系统模块，拉去代码版本管理服务器（如SVN）里项目源码的最新版本到本地，然后根据模块的结构组织开展项目并随时实施自动化测试。

(2）安装环境以及插件

自动化安装时需要考虑操作系统以及浏览器测试需求，前端自动化测试与持续集成系统将根据用户的命令，在硬件软件安祖运行条件时根据相应的测试环境来开展测试。

(3）启停测试

多模块协调工作的插件在前端自动化测试系统中普遍存在，部分前端自动化测试模块有很严格的安装启动顺序。被命令行调用的模块成功安装后，启停测试的命令应该根据特定的业务逻辑执行，保证相应模块的业务逻辑能够正常的工作。

(4）测试脚本

根据系统使用者的需求，依据开发人员或者测试人员设计的测试用例，来开发测试脚本，根据对每个测试脚本执行测试用例。在每个测试用例逐一地自动化地执行后，测试结果（成功与失败）将被返回给控制节点，返回结束后对结果进行过滤并且输出显示测试结果。

(5）显示测试结果

在执行测试用例时，node中的监控进程会收集被测系统上的测试结果性能数据和详细日志数据。在该测试用例执行完后，该监控进程自动地会将收集的结果发送到GUI界面。

由系统技术选型以及以上流程，这个系统的架构如下：

图 系统架构图