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 相关文章推荐
JsDom 编程小结
Aug 09 Javascript
js中apply方法的使用详细解析
Nov 04 Javascript
JavaScript中的分号插入机制详细介绍
Feb 11 Javascript
jQuery常用数据处理方法小结
Feb 20 Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 Javascript
JavaScript仿静态分页实现方法
Aug 04 Javascript
JavaScript中Form表单技术汇总(推荐)
Jun 26 Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 Javascript
bootstrap modal弹出框的垂直居中
Dec 14 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
Jan 09 jQuery
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
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
PHP符合PSR编程规范的实例分享
2016/12/21 PHP
PHP获取当前系统时间的方法小结
2018/10/03 PHP
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
JS冒泡事件的快速解决方法
2013/12/16 Javascript
js 数值转换为3位逗号分隔的示例代码
2014/02/19 Javascript
jQuery学习笔记之jQuery原型属性和方法
2014/06/09 Javascript
jQuery的观察者模式详解
2014/12/22 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
使用vue-router在Vue页面之间传递数据的方法
2019/07/15 Javascript
jquery实现烟花效果(面向对象)
2020/03/10 jQuery
vue从零实现一个消息通知组件的方法详解
2020/03/16 Javascript
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
[02:44]完美大师赛主赛事淘汰赛第二日观众采访
2017/11/24 DOTA
Python KMeans聚类问题分析
2018/02/23 Python
python按照多个条件排序的方法
2019/02/08 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
2014年会演讲稿范文
2014/01/06 职场文书
医院实习介绍信
2014/01/12 职场文书
建筑项目策划书
2014/01/13 职场文书
九年级化学教学反思
2014/01/28 职场文书
求职信范文怎么写
2014/01/29 职场文书
财务科科长岗位职责
2014/03/10 职场文书
战略合作意向书范本
2014/04/01 职场文书
员工廉洁自律承诺书
2014/05/26 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
拉歌口号大全
2014/06/13 职场文书
博士论文答辩开场白
2015/06/01 职场文书
乡镇干部学习心得体会
2016/01/23 职场文书
php实例化对象的实例方法
2021/11/17 PHP
用Python可视化新冠疫情数据
2022/01/18 Python