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更改class和id的方法
Oct 10 Javascript
Grid得到选择行数据的方法总结
Jan 17 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
Jan 13 Javascript
vue.js指令和组件详细介绍及实例
Apr 06 Javascript
vue环境搭建简单教程
Nov 07 Javascript
记一次vue-webpack项目优化实践详解
Feb 17 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
Feb 14 Javascript
Vue两个版本的区别和使用方法(更深层次了解)
Feb 16 Javascript
Node.js API详解之 util模块用法实例分析
May 09 Javascript
JavaScript onclick事件使用方法详解
May 15 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
Aug 18 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
PHP.MVC的模板标签系统(一)
2006/09/05 PHP
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
PHP setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
PHP数据库调用类调用实例(详细注释)
2012/07/12 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
关于JavaScript中string 的replace
2013/04/12 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
2016/03/07 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
2018/01/11 Javascript
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
Python实现统计代码行的方法分析
2017/07/12 Python
使用Python向DataFrame中指定位置添加一列或多列的方法
2019/01/29 Python
详解python校验SQL脚本命名规则
2019/03/22 Python
python3获取当前目录的实现方法
2019/07/29 Python
css3如何绘制一个圆圆的loading转圈动画
2018/01/09 HTML / CSS
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
青蓝工程实施方案
2014/03/27 职场文书
超市仓管员岗位职责
2014/04/07 职场文书
老员工辞职信范文
2015/05/12 职场文书
大学生就业指导课心得体会
2016/01/15 职场文书
干部理论学习心得体会
2016/01/21 职场文书
安全责任协议书范本
2016/03/23 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL
SqlServer常用函数及时间处理小结
2023/05/08 SQL Server