Protractor是为Angular JS应用量身打造的端到端测试框架。它可以真实的驱动浏览器,自动完成对web应用的测试。Protractor驱动浏览器使用的是WebDriver标准,所以使用起来与其他语言实现的WebDriver库大体相同。当然,我说大体相同那肯定还是有不同的地方。一旦不注意这些不同的地方就会坑到你(我就被成功坑过,所以才有了这篇文章)。
Protractor编写测试的核心是查找DOM元素,与其交互,然后查看交互后的状态与你的期望是否一致。所以查找DOM元素并与之交互显的非常重要。Protractor提供了一个全局函数element,其接受一个Locator对象并返回一个ElementFinder对象。该函数会返回单个元素。如果你想返回多个元素,可以使用element.all函数,其接受一个Locator对象并返回ElementArrayFinder对象。ElementFinder对象有一组方法,用于元素交互,比如click(),getText(),sendKeys等。
Locator对象的创建主要使用全局的by对象,其提供一些API来生成Locator对象以供element或element.all函数使用。
比如:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
//根据class名来查找元素 by.css(‘myclass') //根据id来查找元素 by.id(‘myid') //根据ng-model名来查找元素 by.model(’name') //查找绑定了指定名的元素 by.binding(‘bindingname') //查找指定repeater中的元素 by.repeater(‘myrepeater')
可以看出前两个Locator的创建方法与其他语言实现的WebDriver的用法基本一样,而后几个则专为AngularJS应用设计的,方便在基于AngualrJS框架下写的web应用中查找页面元素。这是第一处不同。
另一处不同其他语言实现的WebDriver库使用Locator找到的元素类型是WebElement,而Protractor则返回的是ElementFinder对象。两者不同之处是在于ElementFinder对象不会立即与浏览器交互,根据指定的Locator来查找到页面上的元素;而只有当你调用了ElementFinder对象的方法时,它才会真正的与浏览器进行交互。一些常用的方法有以下所示。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
//这时不会与浏览器交互获取元素信息 var el = element(by.css(‘mycss’)); //点击元素 el.click(); //给该元素输入内容 el.sendKeys(’text’); //清空元素内内容 el.clear(); //获取指定属性的值 el.getAttribute(‘value’); //获取元素的文本值 el.getText();
请注意这些方法都是异步的。所有的方法返回的是一个promise(我就吃过这个亏,以为返回的是值)。所以比如你想输出一个元素的值,应该这么写:
1 2 3
element(by.css(‘myclass’)).getText().then(function(text) { console.log(text); }):
如果你使用expect方法来验证元素的值时,expect方法会帮你取出promise中值,所以你只用这么写:
1
expect(element(by.css(‘myclass’)).getText()).toEqual('确定’);
还有不同的地方在于Protractor支持对元素查找时进行链式调用。这样的功能相当实用。你可以组合element和element.all两个函数来定位元素。并且Protractor还提供了几个辅助方法来更方便你的使用。
1 2 3
element.all(locator1).first().element(locator2); element(locator1).all(locator2); element.all(locator1).get(index).all(locator2);
element.all函数提供的辅助方法有:
filter: 提供一个过滤器过滤其中的元素。
1 2 3 4 5
element.all(by.css(‘myclass’)).filter(function(ele, index) { return ele.getText().then(function(text) { return text == ‘确定'; }); });
get: 根据索引获取指定元素。如 element.all(by.css(‘myclass’)).get(0);
first: 获取第一个元素。 element.all(by.css(’myclass’)).first();
last: 获取最后一个元素,用法同上。
count:获取元素个数。
此外还提供了each,map,reduce等方法对列表进行各种操作。
element函数提供的辅助方法有:
locator: 返回locator对象。
getWebElement: 返回该ElementFinder包裹的WebElement对象。
all: 查找其一组子元素。
element: 查找其子元素。
isPresent: 元素是否在页面上展示。
总结起来,Protractor与其它的WebDriver语言实现的区别如下:
Protractor专为AngualrJS应用定制,其自身包含了很多wait操作,保证AngularJS脚本执行完毕后才进行下一步操作,保证了测试的稳定性与健壮性。
Protractor设计的By对象针对AngularJS应用提供了很多实用方法,在定义AngularJS应用页面时更加轻松。
element函数返回的是ElementFinder对象,其不会立即与浏览器交互,除非调用ElementFinder对象的方法。
调用ElementFinder对象的方法返回的是一个promise。(这点很重要)
Protractor在定位元素时支持链式调用。
本文转自:
http://www.fwqtg.net/%E4%BD%BF%E7%94%A8protractor%E6%93%8D%E4%BD%9C%E9%A1%B5%E9%9D%A2%E5%85%83%E7%B4%A0.html
分享到:
相关推荐
RF优化常用工具 方便快捷显示方位角相关
Protractor使用Jasmine测试框架来定义测试。Protractor为不同的页面交互提供一套健壮的API。 有其他的端对端工具,不过Protractor有着自己的优势,它知道怎么和AngularJS的代码一起运行,特别是面临$digest循环的...
Protractor 是 Windows Phone 上的 HTML5 应用程序,通过利用屏幕作为尺子/量角器来测试物体的长度/角度。 标签:protractor
Protractor全自动化真实的模拟用户在真正的浏览器中操作、运行并测试开发者的应用程序。下面就来一起看看关于protractor安装与基本使用的相关内容吧。 1、JDK的安装和环境的配置 关于JDK的安装配置这里就不说了,...
非常简单实用的电子罗盘,我自己主要是用在MAPINFO上,可以查看小区方位角
Protractor 建立在 WebDriverJS 之上,它使用本机事件和特定于浏览器的驱动程序像用户一样与您的应用程序交互。 Protractor 支持特定于 Angular 的定位器策略,它允许您测试特定于 Angular 的元素,而无需您进行...
Angular-protractor-cucumber-framework.zip,黄瓜框架插件,Angularjs于2016年发布,是Angularjs的重写版。它专注于良好的移动开发、模块化和改进的依赖注入。angular的设计目的是全面解决开发人员的web应用程序工作...
Protractor是一个建立在WebDriverJS基础上的端到端(E2E)的AngularJS JavaScript Web应用程序测试框架,下面这篇文章主要给大家介绍了angular.js自动化测试之protractor的相关资料,需要的朋友可以参考下。
量角器-Firefox支持这是在Firefox浏览器中使用Protractor框架进行e2e测试的类函数的自定义实现。 如果您使用它, :star: 它。安装您可以使用以下命令将其简单地安装到项目中: npm install protractor-firefox-...
前端开源库-protractor-jasmine2-screenshot-reporter量角器-jasmine2-screenshot-reporter,在每个执行量角器测试用例后使用screenshot reporter捕获截图。
运行npm i -g protractor以安装量角器。 运行protractor --version进行检查。 运行webdriver-manager update来更新浏览器二进制文件。 运行npm i -g allure-commandline以安装量角器。 运行端到端测试 运行...
使用生成的目录 概述这将涵盖使用 Protractor 在 Angular 应用程序中编写页面对象的基础知识。 我将假设您是 Node 堆栈的新手,并会引导您完成设置。 对于那些已经熟悉 Node、Protractor 和页面对象模型的人,您可能...
量角器片 失败之前,重新运行可能的量角器测试。 npm i protractor-flake # or globally for easier cli usage ... 量角器薄片期望protractor默认情况下位于$ PATH上,但是您可以使用--protractor-path参数指向量角器
请在使用cfalguiere / protractor-firefox-headless的任何地方使用cfalguiere / protractor-test,或使用项目根目录中提供的脚本自行构建映像。 运行无业游民的虚拟机的前提条件 流浪汉 virtualbox或其他vm提供程序...
使用量角器进行测试自动化 演示如何使用进行测试自动化。 入门 要运行此演示文稿,请将 repo 克隆到本地目录,然后使用以下命令安装其依赖项 npm install bower install ...grunt protractor 依赖关系
boticcaE2E 使用protractor.js进行e2e
帮助学习如何使用 Protractor 对 AngularJS 应用程序进行端到端测试的分步指南。 大多数内容是通过上的示例获得的。 使用量角器进行 Angular End-2-End 测试 端到端或系统测试涉及从头到尾检查应用程序的流程,以...
量角器-木偶插件此插件的主要目的是允许在Protractor上编写的自动测试中使用两种工具。 另外,此插件可以使用Lighthouse来衡量页面性能。 仅支持Chrome。要求: 量角器-木偶插件量角器木偶戏灯塔节点JS ^ 1.0.0 ^ ...