protractor的安装与基本使用教程


Posted in Javascript onJuly 07, 2017

前言

Protractor是一个建立在WebDriverJS基础上的端到端(E2E)的AngularJS JavaScript Web应用程序测试框架。Protractor全自动化真实的模拟用户在真正的浏览器中操作、运行并测试开发者的应用程序。下面就来一起看看关于protractor安装与基本使用的相关内容吧。

1、JDK的安装和环境的配置

     关于JDK的安装配置这里就不说了,需要的朋友们可以参考这篇文章

2、npm protractor

npm install -g protractor

3、npm install protractor的依赖项

基于第二步下载到的文件,在命令行里面进入到nodejs ->protractor的目录

npm install

4、test工程

包括一个简单的angular的页面,一个配置文件和一个测试文件

protractor的安装与基本使用教程

配置文件protractor_conf.js代码:

/**

 * Created by Administrator on 2015/4/24.

 */

exports.config = {

 directConnect: true,

 

 // Capabilities to be passed to the webdriver instance.

 capabilities: {

  'browserName': 'chrome'

 },

 

 // Spec patterns are relative to the current working directly when

 // protractor is called.

 specs: ['test.js'],

 

 // Options to be passed to Jasmine-node.

 jasmineNodeOpts: {

  showColors: true,

  defaultTimeoutInterval: 30000

 }

};

test.js文件代码

/**

 * Created by Administrator on 2015/4/24.

 */

describe('angularjs homepage', function () {

 it('should greet the named user', function () {

  browser.get('http://localhost:63342/protractor/Index.html');

  element(by.id('userName')).sendKeys(' Sparrow');

  browser.sleep(4000);

 });

});

Index.html的代码

<!DOCTYPE html>

<html data-ng-app="protractor">

<head lang="en">

 <meta charset="UTF-8">

 <title></title>

</head>

<body>

<div data-ng-controller="myAppController">

 {{userName}}

 <input id="userName" data-ng-model="userName" />

</div>

</body>

<script src="lib/angular.min.js"></script>

<script>

 var app = angular.module('protractor',[]);

 app.controller('myAppController',['$scope',function($scope){

  $scope.userName = 'Jackey';

 }]);

</script>

 

</html>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JS效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
ExtJs3.0中Store添加 baseParams 的Bug
Mar 10 Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
vue返回上一页面时回到原先滚动的位置的方法
Dec 20 Javascript
JavaScript实现shuffle数组洗牌操作示例
Jan 03 Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 Javascript
React传值 组件传值 之间的关系详解
Aug 26 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 Javascript
uni-app微信小程序登录授权的实现
May 22 Javascript
vue.js实例todoList项目
Jul 07 #Javascript
微信JSAPI Ticket接口签名详解
Jun 28 #Javascript
Angular.js自动化测试之protractor详解
Jul 07 #Javascript
vue.js全局API之nextTick全面解析
Jul 07 #Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 #Javascript
解决AjaxFileupload 上传时会出现连接重置的问题
Jul 07 #Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 #Javascript
You might like
正则表达式语法
2006/10/09 Javascript
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
php实现QQ空间获取当前用户的用户名并生成图片
2015/07/25 PHP
在CentOS上搭建LAMP+vsftpd环境的简单指南
2015/08/01 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
PHP实现的曲线统计图表示例
2016/11/10 PHP
Laravel框架实现的批量删除功能示例
2019/01/16 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
js模拟点击事件实现代码
2012/11/06 Javascript
js onload处理html页面加载之后的事件
2013/10/30 Javascript
javaScript中with函数用法实例分析
2015/06/08 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
vue-cli构建项目下使用微信分享功能
2018/05/28 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
小程序页面动态配置实现方法
2019/02/05 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
2020/10/12 Javascript
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
python正则表达式面试题解答
2020/04/28 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
2021/01/20 HTML / CSS
RentCars.com巴西:汽车租赁网站
2016/08/22 全球购物
澳大利亚的奢侈品牌:Oroton
2016/08/26 全球购物
Boom手表官网:瑞典手表品牌,设计你的手表
2019/03/11 全球购物
银行简历自我评价
2014/02/11 职场文书
网络技术专业求职信
2014/05/02 职场文书
中国梦团日活动总结
2014/07/07 职场文书
农村党建工作汇报材料
2014/10/27 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
导游词之山西-五老峰
2019/10/07 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers
详解Oracle块修改跟踪功能
2021/11/07 Oracle