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语言实现的区别如下:

  1. Protractor专为AngualrJS应用定制,其自身包含了很多wait操作,保证AngularJS脚本执行完毕后才进行下一步操作,保证了测试的稳定性与健壮性。

  2. Protractor设计的By对象针对AngularJS应用提供了很多实用方法,在定义AngularJS应用页面时更加轻松。

  3. element函数返回的是ElementFinder对象,其不会立即与浏览器交互,除非调用ElementFinder对象的方法。

  4. 调用ElementFinder对象的方法返回的是一个promise。(这点很重要)

  5. Protractor在定位元素时支持链式调用。

使用protractor操作页面元素的更多相关文章

  1. 使用javaScript操作页面元素

    from selenium import webdriver import time import unittest from selenium.common.exceptions import We ...

  2. selenium常用命令--操作页面元素及获取元素内容整理

    selenium常用命令之操作页面元素及获取元素内容的事件整理 例子:  /**id <input type="text" id="phone" name ...

  3. Selenium with Python 005 - 调用js操作页面元素

    WebDriver提供了execute_script()方法来执行JavaScript方法,格式如 driver.execute_script(script,*args) 执行js一般有两种场景,一是 ...

  4. [Selenium] 操作页面元素等待时间

    WebDriver 在操作页面元素等待时间时,提供2种等待方式:一个为显式等待,一个为隐式等待,其区别在于: 1)显式等待:明确地告诉 WebDriver 按照特定的条件进行等待,条件未达到就一直等待 ...

  5. F12修改html进行本地js操作页面元素

    F12修改html进行本地js操作页面元素

  6. Java&Selenium调用JS实现高亮被操作页面元素高亮

    Java&Selenium调用JS实现高亮被操作页面元素高亮 /* * the method of invoking js to do something * * @author daviey ...

  7. 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变

    查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...

  8. 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片

    查看本章节 查看作业目录 需求说明: 使用 jQuery 操作页面元素的方法,实现浏览大图片的效果,在页面上插入一幅小图片,当鼠标悬停到小图片上时,在小图片的右侧出现与之相对应的大图片 实现思路: 在 ...

  9. juery学习总结(二)——juery操作页面元素

    所有的操作都可以分为增.删.改.查四种,juery选择器代表查看的功能,那么剩下的操作就是对页面元素增.删.改.页面元素有3部分构成:标签,属性和内容,juery对元素的操作可以从这3方面入手. 一. ...

随机推荐

  1. [13]APUE:KQUEUE / FreeBSD

    [a] 概述 kqueue API 由两个函数(kqueue.kevent).一个辅助宏(EV_SET).一个结构体(struct kevent)构成,可以应用于 socket.FIFO.pipe.a ...

  2. 推荐有料哥:HR社保公积金状况大揭底

    昨天下午有料哥和几位三茅运营成员一起和大家进行三个小时的面对面,如潮的问题让几位三茅团队成员都措手不及了,有料哥也融入了大家紧张好奇问题的好奇,无奈水平有限不能很好回复,请大家谅解,有问题还可以在有料 ...

  3. node学习笔记(二)

    process.stdout(); //标准输出流 process.stdout.write() //提供了比console.log更底层的接口 process.stdin(); //标准输入流 // ...

  4. noip2012-day2-t2

    [问题描述] 在大学期间,经常需要租借教室.大到院系举办活动,小到学习小组自习讨论,都需要向学校申请借教室.教室的大小功能不同,借教室人的身份不同,借教室的手续也不一样. 面对海量租借教室的信息,我们 ...

  5. Object 转化为String时的一个问题 null->"null"

    近日在工作出了一个较大的问题,导致被客户投诉. 事情大致是,某个功能里新增对用户手机的修改,在平台数据同步过程中,出现了将用户以前的要同步的数据,那时还没有手机号码所以是null,新功能上线后,将手机 ...

  6. Java 第7章 数组

    第七章 (数组) 为什么需要数组 java 考试结束后,老师给张浩分配了一项任务,让他计算全班(30人)的平均分 int stu1=95; int stu2=95; int stu3=95; int ...

  7. CodeForces 742B Arpa’s obvious problem and Mehrdad’s terrible solution (暴力枚举)

    题意:求定 n 个数,求有多少对数满足,ai^bi = x. 析:暴力枚举就行,n的复杂度. 代码如下: #pragma comment(linker, "/STACK:1024000000 ...

  8. Mini projects #7 ---- Spaceship

    课程全名:An Introduction to Interactive Programming in Python,来自 Rice University 授课教授:Joe Warren, Scott ...

  9. 联想Phab2 Pro Tango手机测评

    评分:8分 优点:创新的AR应用手机,可以当成一个游戏机了 缺点:还没找到 评语:打开新世界的大门,现实与虚拟结合,枯燥的生活添加一点幻想,走进童话般的梦幻王国,丰富多彩 包装 外形 打开主界面 最主 ...

  10. Bootstrap 栅格系统

    1.简介 Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义classe,还有强大的m ...