基于angularJS的前端自动化测试工具Protractor快速入门
2017-09-26 16:06
531 查看
1.官网
http://www.protractortest.org/#/
2.简介
Protractor是一个为Angular和AngularJS应用程序而生的端对端的测试框架,Protractor就像用户一样在真实的浏览器中去交互并运行你的测试程序。
(1)就像一个用户一样测试:
Protractor是基于WebDriverJS的,WebDriverJs就像一个用户一样能使用原生事件和特定的浏览器驱动去跟你的应用交互。
(2)为了测试Angular应用
Protractor支持Angular特定的定位器策略,允许你测试Angular的专门的元素而不需要在你的测试部分进行任何安装。
(3)自动等待
你不需要为你的测试添加等待和休眠,一旦网页完成了待定任务Protractor就能自动执行下一步测试,所以你不必担心去等待你的测试和网页同步。
3安装
准备环境:nodeJs和jdk
Protractor 5 is compatible withnodejs v6 and
newer.
Protractor works with AngularJS versions greater than1.0.6/1.1.4
文档:https://github.com/angular/protractor#compatibility
查看protractor的版本命令:protractor --version
查看node.js的版本命令:node --version
查看是否装java的命令:java -version(注意只有一个“-”)
通过nodeJS的npm来全局安装protractor:
npm install -g protractor
![](http://img.blog.csdn.net/20170926162001477?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYW5uMjk1MjU4MjMy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
这句命令会安装两个命令行工具,protractor和webdriver-manager,安装完后可以尝试运行protractor --version这条命令确保protractor是否安装成功。webdriver-manager是一个辅助工具,能很轻松地获得Selenium 服务器运行实例。
![](http://img.blog.csdn.net/20170926162109850?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYW5uMjk1MjU4MjMy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
通过这句命令下载必要的二进制文件:
webdriver-manager update
![](http://img.blog.csdn.net/20170926162249636?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYW5uMjk1MjU4MjMy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
通过这句命令开启服务器:
webdriver-manager start
![](http://img.blog.csdn.net/20170926162924948?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYW5uMjk1MjU4MjMy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
输完这句命令将会启动Selenium服务器,并且会输出一串信息日志,这个命令行窗口不要关闭,专门给来启服务器的,重新运行其他命令要重新打开一个命令行窗口,因为关闭之后服务器也会跟着关闭,也可以通过按ctrl+c关闭服务器。你的Protractor会发送请求给你本地的浏览器。你可以通过输入http://localhost:4444/wd/hub查看服务器的信息和状态。
![](http://img.blog.csdn.net/20170926162959544?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYW5uMjk1MjU4MjMy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
4.写一个测试案例
打开命令行工具或者终端窗口,并且创建一个测试的文件。
Protractor需要两个文件去执行,一个spec文件和一个配置文件。
让我们用一个简单的例子开始,在AngularJS官网去导航todo list,并新增一一个的todo项在列表中。
新增todo-spec.js文件,并复制下面的代码保存:
![](http://img.blog.csdn.net/20170926163517224?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYW5uMjk1MjU4MjMy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
describe和it语法是来自Jasmine框架,browser是通过Protractor全局创建的,用于浏览器级别的命令,例如用browser.get来导航某一网页。
5.配置
新建一个conf.js配置文件,并将下面代码复制到conf.js中:
![](http://img.blog.csdn.net/20170926163606078?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYW5uMjk1MjU4MjMy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
这个配置会告诉Protractor你的测试文件(specs)在哪里,哪儿去跟你的Selenium服务器(seleniumAddress)交流,它会使用所有其他的默认配置,谷歌浏览器是默认浏览器。
6.运行测试
新打开一个命令行程序现在通过这句命令运行测试:
protractor conf.js
你应该会看到谷歌浏览器被打开了,而且在AngularJS页面中导航到了todo列表,接下来关闭了它自己(这应该运行得非常快!)。
这个测试应该输出:1 test,3 assertions,0 failures.恭喜,你已经运行了你第一个Protractor测试!
![](http://img.blog.csdn.net/20170926185036213?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYW5uMjk1MjU4MjMy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![](http://img.blog.csdn.net/20170926185132888?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYW5uMjk1MjU4MjMy/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
7.学习更多
通过教程学习更多:
http://www.protractortest.org/#/tutorial
http://www.protractortest.org/#/
2.简介
Protractor是一个为Angular和AngularJS应用程序而生的端对端的测试框架,Protractor就像用户一样在真实的浏览器中去交互并运行你的测试程序。
(1)就像一个用户一样测试:
Protractor是基于WebDriverJS的,WebDriverJs就像一个用户一样能使用原生事件和特定的浏览器驱动去跟你的应用交互。
(2)为了测试Angular应用
Protractor支持Angular特定的定位器策略,允许你测试Angular的专门的元素而不需要在你的测试部分进行任何安装。
(3)自动等待
你不需要为你的测试添加等待和休眠,一旦网页完成了待定任务Protractor就能自动执行下一步测试,所以你不必担心去等待你的测试和网页同步。
3安装
准备环境:nodeJs和jdk
Protractor 5 is compatible withnodejs v6 and
newer.
Protractor works with AngularJS versions greater than1.0.6/1.1.4
文档:https://github.com/angular/protractor#compatibility
查看protractor的版本命令:protractor --version
查看node.js的版本命令:node --version
查看是否装java的命令:java -version(注意只有一个“-”)
通过nodeJS的npm来全局安装protractor:
npm install -g protractor
这句命令会安装两个命令行工具,protractor和webdriver-manager,安装完后可以尝试运行protractor --version这条命令确保protractor是否安装成功。webdriver-manager是一个辅助工具,能很轻松地获得Selenium 服务器运行实例。
通过这句命令下载必要的二进制文件:
webdriver-manager update
通过这句命令开启服务器:
webdriver-manager start
输完这句命令将会启动Selenium服务器,并且会输出一串信息日志,这个命令行窗口不要关闭,专门给来启服务器的,重新运行其他命令要重新打开一个命令行窗口,因为关闭之后服务器也会跟着关闭,也可以通过按ctrl+c关闭服务器。你的Protractor会发送请求给你本地的浏览器。你可以通过输入http://localhost:4444/wd/hub查看服务器的信息和状态。
4.写一个测试案例
打开命令行工具或者终端窗口,并且创建一个测试的文件。
Protractor需要两个文件去执行,一个spec文件和一个配置文件。
让我们用一个简单的例子开始,在AngularJS官网去导航todo list,并新增一一个的todo项在列表中。
新增todo-spec.js文件,并复制下面的代码保存:
describe('angularjs homepage todo list', function() { it('should add a todo', function() { browser.get('https://angularjs.org'); element(by.model('todoList.todoText')).sendKeys('write first protractor test'); element(by.css('[value="add"]')).click(); var todoList = element.all(by.repeater('todo in todoList.todos')); expect(todoList.count()).toEqual(3); expect(todoList.get(2).getText()).toEqual('write first protractor test'); // You wrote your first test, cross it off the list todoList.get(2).element(by.css('input')).click(); var completedAmount = element.all(by.css('.done-true')); expect(completedAmount.count()).toEqual(2); }); });
describe和it语法是来自Jasmine框架,browser是通过Protractor全局创建的,用于浏览器级别的命令,例如用browser.get来导航某一网页。
5.配置
新建一个conf.js配置文件,并将下面代码复制到conf.js中:
exports.config = { seleniumAddress: 'http://localhost:4444/wd/hub', specs: ['todo-spec.js'] };
这个配置会告诉Protractor你的测试文件(specs)在哪里,哪儿去跟你的Selenium服务器(seleniumAddress)交流,它会使用所有其他的默认配置,谷歌浏览器是默认浏览器。
6.运行测试
新打开一个命令行程序现在通过这句命令运行测试:
protractor conf.js
你应该会看到谷歌浏览器被打开了,而且在AngularJS页面中导航到了todo列表,接下来关闭了它自己(这应该运行得非常快!)。
这个测试应该输出:1 test,3 assertions,0 failures.恭喜,你已经运行了你第一个Protractor测试!
7.学习更多
通过教程学习更多:
http://www.protractortest.org/#/tutorial
相关文章推荐
- 【自动化测试工具】QTP11.5/UFT快速入门
- AngularJs专用测试工具Protractor 搭建PhoneCat项目的开发与测试环境
- Gulp前端自动化构建工具介绍及入门
- Android压力测试快速入门教程(图解)——Monkey工具
- 前端打包构建工具grunt快速入门(大篇幅完整版)
- MVC5开发前端框架AngularJS快速入门之Service
- 前端自动化测试工具——SlimerJS
- [前端]前端测试自动化工具 + 页面性能分析工具 BerserkJS 试用小记
- 前端自动化构建工具Webpack开发模式入门指南 (网上看到的,写得很详细)
- 开源性能测试工具JMeter快速入门(一)
- 基于《Selenium 2自动化测试实战》的学习笔记(3)—— selenium 工具介绍
- 工欲善其事,必先利其器 软件工具开发关键词 protractor自动化测试工具 RegexBuddy正则 CodeSmith,LightSwitch:代码生成 CheatEngine:玩游戏修改内存值必备神器 ApkIDE:Android反编译工具 Reflector:反编译dll动态链接库
- 自动化工具 C/S 架构系统自动化测试入门 ---AutoIT
- 【已上架】tsung开源性能测试工具快速入门
- Android自动化测试从入门到精通(Robotium自动化测试工具、架构设计、云测试应用)
- 前端自动化测试工具doh学习总结(一)
- 自动化工具 C/S 架构系统自动化测试入门 ---AutoIT
- H5前端性能测试快速入门
- 基于WPF的UI自动化测试[1] 自动化测试工具