文档章节

使用Protractor进行web功能测试

b
 belllee
发布于 2016/11/29 19:53
字数 1152
阅读 284
收藏 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
给 Web 开发者的 25 款最有用的 AngularJS 工具

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

oschina
2015/03/05
64.6K
19
搭建和学习Angularjs官方示例angular-phonecat项目

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

dhb_oschina
2016/04/22
2K
0
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

没有更多内容

加载失败,请刷新页面

加载更多

wait()被notify()后,接着执行wait()后面的语句

wait()被notify()后,接着执行wait()后面的语句

noteman
26分钟前
1
0
Ubuntu集群-使用MAAS开始裸机安装

Ubuntu使用MAAS装机的七个步骤。 1、Setup your hardware You need one small server for MAAS and at least one server which can be managed with a BMC. It is recommended to have the M......

openthings
39分钟前
3
0
OSX | SafariBookmarksSyncAgent意外退出解决方法

1. 启动系统, 按住⌘-R不松手2. 在实用工具(Utilities)下打开终端,输入csrutil disable, 然后回车; 你就看到提示系统完整性保护(SIP: System Integrity Protection)已禁用3. 输入reboot回车...

云迹
今天
4
0
面向对象类之间的关系

面向对象类之间的关系:is-a、has-a、use-a is-a关系也叫继承或泛化,比如大雁和鸟类之间的关系就是继承。 has-a关系称为关联关系,例如企鹅在气候寒冷的地方生活,“企鹅”和“气候”就是关...

gackey
今天
4
0
读书(附电子书)|小狗钱钱之白色的拉布拉多

关注公众号,在公众号中回复“小狗钱钱”可免费获得电子书。 一、背景 之前写了一篇文章 《小狗钱钱》 理财小白应该读的一本书,那时候我才看那本书,现在看了一大半了,发现这本书确实不错,...

tiankonguse
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部