文档章节

使用Protractor进行web功能测试

b
 belllee
发布于 2016/11/29 19:53
字数 1152
阅读 245
收藏 0
点赞 0
评论 0

本文介绍了使用Protractor对AngularJS开发的web应用进行自动化功能测试的方案和详细操作指导。 ###名词解释 Protractor是AngularJS团队发布的一款开源的端到端web测试运行工具。它可以模拟用户的实际交互,帮助验证Angular应用的实际运行状况。Protractor使用Jasmine测试框架来定义测试用例。Protractor为不同的页面交互提供一套健壮的API。相对于其他的端到端的工具,Protractor有着自己的优势,它知道怎么和AngularJS的代码一起运行,特别是应对$digest循环。 ###环境安装

  1. 首先必须安装执行环境nodejs
  2. 安装浏览器,推荐chrome
  3. 安装protractor+webdriver npm install protractor -g webdriver-manager update
  4. 安装完成后执行protractor --version,检查安装是否正常
  5. 在命令行控制台启动Selenium测试服务器。 webdriver-manager start //默认情况下,Selenium测试服务器接入地址为:http://localhost:4444/wd/hub
  6. 输出测试报告需要安装相关插件 //输出html报告 npm install protractor-jasmine2-html-reporter -g //输出junit格式的xml报告 npm install jasmine-reporters -g //由于需要在config文件中加载。一般把这两个插件放在根目录的node_modules 目录下

###工程配置 配置文件举例如下:

var Jasmine2HtmlReporter = require('./node_modules/protractor-jasmine2-html-reporter');
var report = require('./node_modules/jasmine-reporters');
exports.config = {
  // Selenium server 测试服务器接入地址
  SeleniumAddress: 'http://localhost:4444/wd/hub',
  // 测试服务器的配置信息
  multiCapabilities: [{
    browserName: 'firefox'
  },{
    browserName: 'chrome',
    'chromeOptions': {
            'args': ['incognito', 'disable-extensions', 'start-maximized']
        }
  }],
  // 需要运行的测试程序代码文件列表
  suites: {
    scan: 'tc/e2e/scan.js',
    app: 'tc/e2e/app.js',
    hppd: 'tc/e2e/hppd.js'
  },
  // 选择使用 jasmine 作为JavaScript语言的测试框架
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    isVerbose: true,
    includeStackTrace: false
  },
  //输出测试报告
  onPrepare: function(){
    jasmine.getEnv().addReporter(
        new Jasmine2HtmlReporter({
          savePath: 'report/e2e/',
          takeScreenshots: true,  //是否截屏
          takeScreenshotsOnlyOnFailures: true //测试用例执行失败时才截屏
        })
      );
    jasmine.getEnv().addReporter(
      new report.JUnitXmlReporter({
          savePath: 'report/tc/e2e/',
          consolidateAll: false,
          filePrefix:'',
          package:'E2E'
      })
    );
  }
};

###测试用例怎么写 测试用例是基于jasmine框架,关于用例描述和断言比较,请参考上一篇帖子《基于karma+jasmine的web前端自动化测试》,这里不再赘述了 这里举一个简单的例子。

var DOMAIN = '127.0.0.1';
var TARGET_ROOT = 'http://'+DOMAIN;
describe('scan all app', function() {
	beforeAll(function() {
        // 设置cookie
        var cookieObj = {
            "real_name":"放松一下",
            "dept_name":"开发部",
            "avatar":"/images/u15.png",
            "message":"22"
        };
        browser.get(TARGET_ROOT + '/index/about.html');
        browser.manage().deleteAllCookies().then(function () {
               	browser.manage().addCookie("login_user",JSON.stringify(JSON.stringify(cookieObj)), '/', DOMAIN);
        });
	});
    
    it('app.code', function() {
    	browser.get(TARGET_ROOT + '/app/code/');        
    	expect(element.all(by.binding("project['name']")).count()).toBeGreaterThan(1);
    });
   
    it('app.ci', function() {
    	browser.get(TARGET_ROOT + '/app/ci/');        
    	expect(element(by.binding('userInfo.realName')).getText()).toEqual('李忠伟10183089');
    });
});

上述事例主要使用了如下接口:

  1. browser.get(url) 访问url指定的web页面
  2. browser.manage().deleteAllCookies() 删除所有cookie
  3. browser.manage().addCookie(key,value) 添加cookie
  4. element.all(locator) 查找locator描述的所有元素
  5. element(locator) 查找locator描述的单个元素

####浏览器的相关操作 这里举例常用的几个操作,详细的请见参考资料。

browser.get(url)   //访问url指定的web页面
browser.close()   //关闭当前窗口
browser.sleep(ms)   //等待,单位毫秒
browser.pause()  //暂停执行,停止在当前页面,主要用于调试

####如何定位元素 上述示例中提到的by.binding,用于定位元素,被称为定位器locator。Protractor中常用的定位器有如下几种:

by.id('myElement')   //id为myElement的元素
by.css('[class="element"]')   //根据元素的属性定位元素,此例为样式class为element的元素。同时也支持jquery的selector语法来定位元素,例如(by.css('.element'))。
by.binding('list.title')    //绑定了ng-bind="list.title"的元素
by.repeater('modules.content')    //绑定了ng-repeat="module in modules.content"的元素
by.model('person.name')  //绑定了ng-model="person.nam"的元素

更多定位器请见参考资料。

###定位的元素如何操作 Protractor中使用element(locator)和element.all(locator)来定位元素,前者是定位单个元素,后者是定位所有符合条件的元素。定位到元素后能做哪些操作?常用操作举例如下:

element.all(by.binding('list.title')).count()   //返回查找到的元素的个数
element.all(by.css('.element')).get(1)  //返回定查找到的元素中的第二个元素
element(by.css('.myname')).getText()  //返回查找到的元素的text
element(by.id('user_name').sendKeys('user1')    //向查找到的元素输入'user1'
element(by.id('user_desc').sendKeys(protractor.Key.ENTER);    //向查找到的元素输入回车键
element(by.id('user_desc').sendKeys(protractor.Key.TAB);    //向查找到的元素输入TAB键
element(by.id('user_name')).clear();   //清空查找到的元素的内容
element(by.id('submit')).clear();   //点击查找到的元素

###参考资料 Protractor官网,不过被墙了,你懂的。 《Protractor入门》推荐!有可能被墙 示例比较多的指导书 《浏览器r相关接口文档》 《元素操作的相关接口文档》

© 著作权归作者所有

共有 人打赏支持
b
粉丝 0
博文 80
码字总数 14299
作品 0
浦东
程序员
AngularJS 系列教程 :PhoneCat 应用教程

PhoneCat 教程 本教程将构建一个 Angular 应用。 这款应用可以显示 Android 设备列表,你可以筛选你感兴趣的设备,并查看任意设备详情。 Angular 让浏览器更智能,而不依赖于任何本地插件: ...

chengsu
2016/12/13
50
0
AngularJS学习笔记之二:开发、调试和测试工具

一、搭建自动化的前端开发、调试和测试环境 我们先来看一个完整的项目实例,这是AngularJS官方为我们提供的Phonecat项目。在AngularJS的官方网站上有详细的指导,有兴趣的朋友可以去看看,地...

阿振
2016/03/21
179
0
搭建和学习Angularjs官方示例angular-phonecat项目

一、简介 最近需要学习angularjs,可是官方的网站在中国不是很友好,访问不是很方便。 还好找到了下面的一个更齐全点的官方示例angular-phonecat项目的教程网站PhoneCat 入门教程 App 导言 ...

dhb_oschina
2016/04/22
2K
0
给 Web 开发者的 25 款最有用的 AngularJS 工具

AngularJS 是一种新 JavaScript框架,目的是降低要求,加快开发速度。AngularJS 是让 HTML 标记动态,使其对 web开发者更有帮助,同时从大量的分段中给定一个标准结构,使开发速度更快更高效...

oschina
2015/03/05
64.6K
19
WebStorm 2016.3 EAP 更新,集成 Protractor

WebStorm 2016.3 EAP (163.6957) 发布了,如果有安装EAP(163.6512)的,应该很快会在EAP收到一个关于更新的通知。 WebStorm是jetbrains公司旗下一款商业的JavaScript 开发工具。被JS开发者誉...

王练
2016/10/28
2.4K
4
Web 前端框架--Angular

Angular 是一款十分流行且好用的 Web 前端框架,目前由 Google 维护。这个条目收录的是 Angular 2 及其后面的版本。由于官方已将 Angular 2 和之前的版本 Angular.js 分开维护(两者的 GitH...

匿名
2016/12/15
14.8K
6
自动化端对端测试框架-Protractor Plugins

Protractor Plugins Plugins extend Protractor's base features by using hooks during test execution to gather more data and potentially modify the test output. The Protractor API ......

dhb_oschina
2016/04/24
23
0
测试运行工具--Protractor

Protractor 是 AngularJS 团队构建的一个端对端的测试运行工具,模拟用户交互,帮助你验证你的Angular应用的运行状况。” Protractor使用Jasmine测试框架来定义测试。Protractor为不同的页面...

红薯
2014/10/07
8.7K
1
JavaScript的单元测试

karma karma默认自带jasmine断言库,适用于AngularJS的测试 protractor Protractor是一个由AngularJS团队编写的库,可打开浏览器帮助进行操作DOM的测试用例 参考资料:...

前端届的科比
2016/02/14
90
0
5 - Filtering Repeaters

We did a lot of work in laying a foundation for the app in the previous steps, so now we'll do something simple; we will add full-text search (yes, it will be simple!). We will ......

chengsu
2016/12/14
4
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

sklearn学习笔记之简单线性回归

简单线性回归 线性回归是数据挖掘中的基础算法之一,从某种意义上来说,在学习函数的时候已经开始接触线性回归了,只不过那时候并没有涉及到误差项。线性回归的思想其实就是解一组方程,得到...

wangxuwei
7分钟前
0
0
feign之动态interceptor(二)

背景 上文提到了按照不同的feignClient可以根据多个不同的key来进行多个不同的bean的配置 那么我们如何完成多个interceptor的配置呢? 分析 我们刚提到多个配置的玄机就在FeignClientProper...

Mr_Qi
9分钟前
1
0
Linux Kernel 4.16 系列停止维护,用户应升级至 4.17

知名 Linux 内核维护人员兼开发人员 Greg Kroah-Hartman 近日在发布 4.16.18 版本的同时,宣布这是 4.16 系列的最后一个维护版本,强烈建议用户立即升级至 4.17 系列。 Linux 4.16 于 2018 年...

问题终结者
34分钟前
0
0
Apache配置时.htaccess失效不起作用的原因分析

.htaccess 失效的原因 1. 重写规则有问题,检查自己的重写规则 2.Apache配置问题,配置中没有配置启用 rewrite a2enmod rewrite 3.网站配置文件没有启用配置需要配置 000-default.conf <Dire...

TU-DESGIN
54分钟前
1
0
两个求最大公约数C/C++算法实现

#include<stdio.h> #include<time.h> #include <iostream>using namespace std;//求最大公约数 LCD(Largest Common Division)//短除法 //m=8251, n=6105; int LCD_ShortDiv(int m, ......

失落的艺术
今天
1
0
QueryPerformanceCounter

windows的Sleep函数,睡眠线程指定毫秒数,可以用来做毫秒延时。 对于微秒延时,没有一个现成的函数,但是可以通过 QueryPerformanceFrequency QueryPerformanceCounter 来间接实现。原理就是...

开飞色
今天
1
0
log4j2使用AsyncRoot不显示行号问题处理

<AsyncRoot level="info" includeLocation="true"> <AppenderRef ref="File"/></AsyncRoot><!--1.异步logger,还需要在pom.xml中添加disruptor的依赖。2.includeLocation结合异......

小翔
今天
3
0
安卓手机上 K 歌,声音延迟怎么解决?

这篇文章可以为你提供一个解决录音和播放同步问题的思路,而且解决了声音从手机传输到耳机上有延时的问题。 初识音频 在开始之前,我先简单介绍一下音频相关的基础知识,方便下文理解。 我们...

编辑部的故事
今天
2
0
使用token实现在有效期内APP自动登录功能

使用token实现在有效期内APP自动登录功能 http://sevennight.cc/2016/07/19/auto_login_impl.html

风云海滩
今天
3
0
Spring Boot集成RabbitMQ发送接收JSON

默认情况下RabbitMQ发送的消息是转换为字节码,这里介绍一下如何发送JSON数据。 ObjectMapper 最简单发送JSON数据的方式是把对象使用ObjectMapper等JSON工具类把对象转换为JSON格式,然后发送...

小致dad
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部