angularjs中的e2e测试实例


Posted in Javascript onDecember 06, 2014

在上一篇文章里有讲到ng的单元测试,今天来说说e2e(端对端)测试.

当我们测试某个模块的单个功能点时,单元测试最适合,不过当面临用户进行多个页面交互的时候产生bug了,单元测试就不行了,这时候就得用e2e来模拟用户操作还原问题现场.当然利用e2e测试也能够测试程序的健壮性,很多单元测试办不到的事情,e2e测试都能够办到.

之前,ng是利用Angular Scenario Runner来运行e2e测试,现在已经换成Protractor来跑e2e了.

Protractor

Protractor是Angularjs里用来测试e2e的框架,它本身是一个npm模块,内部是构建在WebDriverJS之上的,Protractor能够真正让你的测试用例运行在浏览器上,完全模拟用户的真实行为.

下面贴上它的一些资源地址:

1.Protractor提供的测试api
2.Protractor简单使用例子
3.WebDriverJs指南,这是Protractor依赖的核心,npm模块名为selenium-webdriver

Protractor运行原理

Protractor运行e2e测试所依赖的主要有以下几个东西:

1.WebDriver APIs,就是上面提到的WebDriverJs,是由Selenium提供给前端测试用的相关js api
2.Selenium Server,一个后端jar包,用来负责跟浏览器驱动进行通讯用的
3.WebDriver browser drivers,用来显示真实网站内容并与Selenium Server通讯用,这里才是传递真实浏览器操作的地方

整个运行过程如下图

angularjs中的e2e测试实例

想了解更多关于这几个组件之前交互的可以点击这里

利用ng种子项目来讲解e2e

我们利用ng官方提供的种子项目来讲解一个真实的e2e例子,首先利用下面命令获取种子项目

git clone https://github.com/angular/angular-seed.git

然后运行

npm install

安装相关的所有依赖文件

这里先说下运行e2e测试需要的配置文件,可以看到test/protractor-conf.js这个文件就是用来配置相关功能的,重点说下几个属性

1.specs 代表要运行的测试文件路径,这里写的是e2e/*.js
2.baseUrl 代表测试文件中浏览器间跳转页面的根地址
3.capabilities 代表使用哪个浏览器来运行测试用例,比如使用chrome,可以这样设置

capabilities: {

    'browserName': 'chrome'

  }

framework 代表使用的哪种测试框架,这里使用的是jasmine

想了解更多关于这个配置文件的可以点击这里查看

说完了配置文件,我们再来看看测试用例的写法,先贴上一个官网上的例子

'use strict';
/* https://github.com/angular/protractor/blob/master/docs/getting-started.md */
describe('my app', function() {
  browser.get('index.html');

  it('should automatically redirect to /view1 when location hash/fragment is empty', function() {

    expect(browser.getLocationAbsUrl()).toMatch("/view1");

  });


  describe('view1', function() {
    beforeEach(function() {

      browser.get('index.html#/view1');

    });


    it('should render view1 when user navigates to /view1', function() {

      expect(element.all(by.css('[ng-view] p')).first().getText()).

        toMatch(/partial for view 1/);

    });
  });


  describe('view2', function() {
    beforeEach(function() {

      browser.get('index.html#/view2');

    });


    it('should render view2 when user navigates to /view2', function() {

      expect(element.all(by.css('[ng-view] p')).first().getText()).

        toMatch(/partial for view 2/);

    });
  });

});

 
首先上面的语法是jasmine框架支持的写法,不了解它的用法的可以点击这里 

这里只说下上面例子里关于protractor提供的一些常用方法与属性

1.browser,全局对象,代表当前浏览器的一个实例,常用的get方法用来实现浏览器改变地址
2.element,全局对象,提供像jquery里负责查找文档元素的功能,常于by对象联合使用
3.by, 全局对象,提供一个选择器类型,比如可以通过css,model,bind等特性来查找一个元素

关于element与by的方法可以参考上面的protractor api文档

说了这么多,该跑一跑上面的测试用例了,命令比较简单

npm run update-webdriver

这个负责下载相关的浏览器驱动与selenium-server 本地jar包,一般情况下这个都是会失败的,因为这两个资源都在google服务器那,所以可以利用浏览器翻墙单独下载,地址如下:

1.Chrome Driver地址,一般下载chromedriver_2.9.zip这个文件.

2.selenium-server 本地jar包 下载,一般下载selenium-server-standalone-2.40.0.jar这个文件.

然后把selenium-server拷到protractor包里的selenium文件夹里去,假如上面的命令超时之后,这里也会出现文件不过是空的,直接替换就可以;还要把chromedriver_2.9.zip解压之后的文件拷到这里

最后运行下面的命令可以看到测试结果了

npm run protractor

想了解更多关于ng种子项目里的命令行,可以点击这里查看

总结

ng的e2e测试要比单元测试配置要繁琐的多,不过它能做的事情也很多,非常值的你也试一试,有什么问题可以回复到评论里去.

Javascript 相关文章推荐
javascript中的几个运算符
Jun 29 Javascript
基于jsTree的无限级树JSON数据的转换代码
Jul 27 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
基于JavaScript实现一定时间后去执行一个函数
Dec 14 Javascript
AngularJS 指令的交互详解及实例代码
Sep 14 Javascript
用iframe实现不刷新整个页面上传图片的实例
Nov 18 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 Javascript
hammer.js实现图片手势放大效果
Aug 29 Javascript
基于node.js express mvc轻量级框架实践
Sep 14 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
利用vue-i18n实现多语言切换效果的方法
Jun 19 Javascript
微信小程序后台持续定位功能使用详解
Aug 23 Javascript
angularjs中的单元测试实例
Dec 06 #Javascript
angularjs指令中的compile与link函数详解
Dec 06 #Javascript
angularjs的一些优化小技巧
Dec 06 #Javascript
JavaScript开发人员的10个关键习惯小结
Dec 05 #Javascript
node.js中RPC(远程过程调用)的实现原理介绍
Dec 05 #Javascript
node.js中实现同步操作的3种实现方法
Dec 05 #Javascript
node.js实现BigPipe详解
Dec 05 #Javascript
You might like
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
PHP封装的完整分页类示例
2018/08/21 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
JavaScript Date对象使用总结
2009/05/14 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
2015/03/12 Javascript
jQuery插件之jQuery.Form.js用法实例分析(附demo示例源码)
2016/01/04 Javascript
高性能JavaScript循环语句和条件语句
2016/01/20 Javascript
jquery自定义插件——window的实现【示例代码】
2016/05/06 Javascript
JavaScript中获取时间的函数集
2016/08/16 Javascript
详解Angular2 之 结构型指令
2017/06/21 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
Vuejs+vue-router打包+Nginx配置的实例
2018/09/20 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
2020/05/29 jQuery
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
Python实现抓取网页并且解析的实例
2014/09/20 Python
基于python实现百度翻译功能
2019/05/09 Python
深入浅析Python中的迭代器
2019/06/04 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
基于Python中random.sample()的替代方案
2020/05/23 Python
Canvas绘制浮动球效果的示例
2017/12/29 HTML / CSS
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
迟到检讨书500字
2014/02/05 职场文书
企业办公室岗位职责
2014/03/12 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
政风行风建设整改方案
2014/10/27 职场文书
卖房协议书样本
2014/10/30 职场文书
新教师个人工作总结
2015/02/06 职场文书
导游词之吉林吉塔
2019/11/11 职场文书
PHP连接MSSQL数据库案例,PHPWAMP多个PHP版本连接SQL Server数据库
2021/04/16 PHP
解决Vue+SpringBoot+Shiro跨域问题
2021/06/09 Vue.js
CentOS7 minimal 最小化安装网络设置过程
2022/12/24 Servers