名词解释
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' }) ); } }; |
测试用例怎么写
这里举一个简单的例子。
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'); }); }); |
上述事例主要使用了如下接口：
browser.get(url) 访问url指定的web页面
browser.manage().deleteAllCookies() 删除所有cookie
browser.manage().addCookie(key,value) 添加cookie
element.all(locator) 查找locator描述的所有元素
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(); //点击查找到的元素 |
