JavaScript项目持续集成方案

简介:

简介:JavaScript在越来越多的web项目中被大量应用。通过本文,您将了解到百度的开源项目Tangram,一个JS库的持续集成实现方案。

本文通过三个方面对持续集成实现进行讲述:首先,如何跨越从Html方式的用例组织到自动化测试所必须的用例执行动态组织;接着,如何实现用例的跨浏览器分布式执行;然后,针对当前热门的hudson,我们如何配置、调整以使我们的测试框架可以像常规自动化测试项目那样应用hudson实现项目的持续集成。
所有后续内容中的相关代码,您都可以在github的Tangram项目中看到相应的实现细节。
自动化测试方案
在Tangram,项目的结构被定义成常见的src和test目录的格式,并,拆分良好架构的源码和用例之间采用了一一对应的关系。所以,我们可以很方便的用php实现用例执行页面的自动组织功能。

在成功实现并应用了测试自动执行后,我们的测试执行时间从原来的16人时缩短到了3分钟。

测试用例组织与单浏览器执行流程如下:
1、遍历源码目录并比对用例目录生产测试页必须的用例列表;
2、嵌入用例列表页面的js控制逻辑组织iframe方式挨个载入每一个用例和相应的源码;
3、通过QUnit定制用例的执行;
4、定制用例执行结束逻辑并整合测试结果,回传服务器;
5、服务器端生产测试记录xml文件,并根据需要发送邮件报告或统一存储;

图1. 用例列表展示
 



图2. 用例执行展示
 



分布式执行简介

Tangram项目声明支持几乎目前在中文区常见的所有浏览器,为支持这一目标,我们在测试执行机制中引入了STAF,通过命令调用方式,实现同步的,多测试机(IE6、7、8、9没有办法在同一测试机上安装)多浏览器方式启动用例执行。

执行流程如下:
1、通过web请求确认测试执行范围(以filter模式支持)并启动执行。
2、查询项目配置信息获取测试机信息和测试浏览器信息
3、通过staf远程启动浏览器访问服务器上的测试列表页面
4、待测试完毕后,整合完毕的测试报告收集

图3. 多浏览器测试结果展示(因为浏览器执行并发,我们的实际测试每次执行时间都在3分钟以内完成)
 


 

持续集成与hudson
在完成上述所有必须的JS测试自动化细节后,我们采取了一种相对便捷的方式使hudson可以启动单次测试并执行。

步骤:
1、配置hudson拉取源码的方式为github,并配置轮询相关参数
2、配置测试框架的项目目录指向源码在本地的存放路径
3、配置ant脚本:
a) 配置报告清理及其他环境准备操作;
b) 配置web请求方式实现项目测试的一次分布式批量执行;
c) 配置一次构建所需的出口为报告的产出文件路径;
d) 配置发布所需的压缩相关操作;
e) 配置邮件发送报告和自动上传压缩文件的发布方式支持;

为支持项目发布和个人开发模式同时可以使用hudson上的自动构建功能,我们根据项目在github上的存储细节分别实现ant脚本中的两种不同的编译执行模式:
1、为开发提供的构建流程:
a) 以单个源码方式启动的构建模式;
b) 支持通过diff获取变更源码和用例列表的执行模式;
c) 可定制的分支支持模式,便于每个开发人员特定的需求:
d) 提供简版报告和详细版本报告(开发中),用于跟进具体的项目状态和做问题分析之用;
e) 结合jslint(后续计划)支持的静态检查报告;
f) 通过jscoverage结合测试框架实现的覆盖率报告;

图4. Hudson单次测试结果记录
 



图5. 多人多项目开发模式支持
 



2、为发布提供的构建流程:
a) 固定的每日构建和应需求随时可以启动的构建,两种方式支持的启动模式,用于确认项目是否合适发布;
b) 以编译、压缩后的源码方式启动的构建模式;
c) 发布前的验证工作源码指向了编译压缩产出的用于上线的源码;
d) 构建成功后,自动发送上线步骤等;


图6.项目状态跟踪图(涂抹的部分为测试执行次数)
 



小结
本文介绍了如何使用hudson结合项目特性对JavaScript项目实现持续集成。

参考资料
 参考hudson/Jenkins-ci的web站点 提供了Hudson/Jenkins的使用手册。
 参考QUnit的web站点 提供了js单元测试框架的使用手册。
 Tangram在github的web站点 
 Tangram的官方文档网站

帮助
Mail : yangbo@baidu.com
BaiduHI : bellcliff
MSN : cliff_bell.cn@hotmail.com

 















本文转自百度技术51CTO博客,原文链接:http://blog.51cto.com/baidutech/744426,如需转载请自行联系原作者

相关文章
|
9天前
|
开发框架 JavaScript 安全
js开发:请解释什么是Express框架,以及它在项目中的作用。
【4月更文挑战第24天】Express是Node.js的Web开发框架,简化路由管理,支持HTTP请求处理。它包含中间件系统用于日志、错误处理和静态文件服务,集成多种模板引擎如EJS、Jade、Pug。框架还提供安全中间件提升应用安全,并具有良好的可扩展性,便于项目功能扩展和开发效率提升。
21 3
|
9天前
|
JavaScript 前端开发 编译器
js开发: 请解释什么是Babel,以及它在项目中的作用。
**Babel是JavaScript编译器,将ES6+代码转为旧版JS以保证兼容性。它用于前端项目,功能包括语法转换、插件扩展、灵活配置和丰富的生态系统。Babel确保新特性的使用而不牺牲浏览器支持。** ```markdown - Babel: JavaScript编译器,转化ES6+到兼容旧环境的JS - 保障新语法在不同浏览器的运行 - 支持插件,扩展编译功能 - 灵活配置,适应项目需求 - 富强的生态系统,多样化开发需求 ```
14 4
|
2月前
|
JSON JavaScript 前端开发
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
解决js中Long类型数据在请求与响应过程精度丢失问题(springboot项目中)
43 0
|
2月前
|
JavaScript
vue.js项目评估流程图特效
vue.js项目评估流程图特效
87 2
vue.js项目评估流程图特效
|
3月前
VUE.初始化项目报错缺少core-js
VUE.初始化项目报错缺少core-js
41 0
|
4天前
|
JavaScript 前端开发 开发者
前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)
前端框架(Vue.js&&vue-cli项目框架&&element-ui使用)
|
8天前
|
开发框架 前端开发 JavaScript
next.js博客搭建_初始化next项目(第一步)
next.js博客搭建_初始化next项目(第一步)
15 1
|
8天前
|
Java Docker 容器
SpringBoot项目集成XXL-job
SpringBoot项目集成XXL-job
|
9天前
|
缓存 JavaScript 前端开发
js开发:请解释什么是Webpack,以及它在项目中的作用。
Webpack是开源的JavaScript模块打包器,用于前端项目构建,整合并优化JavaScript、CSS、图片等资源。它实现模块打包、代码分割以提升加载速度,同时进行资源优化和缓存。Webpack的插件机制可扩展功能,支持热更新以加速开发流程。
16 2
|
17天前
|
JavaScript
node.js输入项目目录结构并展示
node.js输入项目目录结构并展示
7 0