使用protractor操作页面元素
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在定位元素时支持链式调用。
本文转自: [url]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[/url]
使用protractor操作页面元素相关推荐
- 操作页面元素WebElement—Selenium自动化测试指南(4)
5.5.7 XPath(xPathToFind) 如果以上查找方法都无法定位到指定对象,那么可以按XPath进行查找.例如,百度首页有文本框,如图5-35所示. 图5-35 百度搜索文本框 其HT ...
- 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变
查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...
- jQuery操作页面元素属性和内容
操作页面元素的属性 A $("#bu1").click(function(){ //获得元素对象 var tex=$("#inp1"); //获得元素对象的属性 ...
- selenium拖动元素java_【自动化测试】Java+Selenium操作页面元素(合集)
本文基于Java语言,依托于Eclipse工具,使用Selenium框架,主要介绍在Selenium中,如何操作Web页面中的各种元素. Eclipse 搭建 1.1.Eclipse 配置 1.2.引 ...
- Selenium操作页面元素
转自:http://blog.sina.com.cn/s/blog_6966650401012a7q.html 一.输入框(text field or textarea) //找到输入框元素: Web ...
- juery学习总结(二)——juery操作页面元素
所有的操作都可以分为增.删.改.查四种,juery选择器代表查看的功能,那么剩下的操作就是对页面元素增.删.改.页面元素有3部分构成:标签,属性和内容,juery对元素的操作可以从这3方面入手. 一. ...
- selenium常用命令之操作页面元素及获取元素内容的事件整理
/**id <input type="text" id="phone" name="phone" class="LoginT ...
- selenium课程笔记3-使用selenium中的webdriver对浏览器操作-页面元素定位及操作
1.打开浏览器,打开网页 1 from selenium import webdriver 2 dr=webdriver.Chrome() 3 dr.get('http://www.baidu.com ...
- cypress之实现文件上传下载以及操作iframe下页面元素
前面讲解了使用cypress框架如何定位.操作页面元素以及校验测试结果,此次课程将介绍如何实现文件上传.操作iframe下面的页面原因以及操作shadow dom下的页面元素.为了完成此次课程目标,拆 ...
最新文章
- 一起谈.NET技术,ASP.NET MVC2实现分页和右键菜单
- isInfoEnabled究竟多有用?
- JSON.parse和JSON.stringify方法
- 从软件交付看软件验收管理
- 自定义控件---重写Listbox实现item图标变换和item点击事件
- app软件测试是否强制升级_这些测试方法对于任何软件都必须是强制性的
- DBCC CHECKDB 数据库或表修复
- PAT备考经验相关信息
- android 高德地图之poi搜索功能的实现
- CF Round 192
- GPU渲染管线与可编程着色器
- vi 撤销上一步操作
- python数字转大写字母_python变量名称如何转化为大写字母?
- 我的洛谷冬日绘板计划
- 最强卸载神器,使你的Windows绝对干净
- Win10系统出现edge主页被劫持篡改的问题
- freemind快捷键
- 迪赛智慧数——柱状图(折柱混合图):2021年毕业季租房价格和房租收入比
- ISO三体系认证多少钱?
- 物联网综合实训平台-物联网实训系统-物联网实训室设备