[Protractor] Test Simple Binding With Protractor
Protractor is built to interact with AngularJS applications. In this lesson, we will take a look at how Protractor interacts with the application using its element and finder functions.
The index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>E2E Testing</title>
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body ng-app="app">
<div ng-controller="AppCtrl as vm">
<div class="row text-center">
<a class="btn btn-primary"
id="button1"
ng-click="vm.updateMessageText('button 1 clicked')">
Button 1
</a>
</div> <div class="row h3 text-center">{{ vm.messageText }}</div>
</div>
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/angular/angular.min.js"></script>
<script src="app.js"></script>
</body>
</html>
app.js:
angular.module('app', [])
.controller('AppCtrl', function (){
var vm = this;
vm.updateMessageText = function (text){
vm.messageText = text;
}
});
index.spec.js:
describe('Simple page test', function() {
it('Should get title of the page', function() {
browser.get('http://127.0.0.1:8080');
expect(browser.getTitle()).toBe('E2E Testing');
});
it('should update the button text when click the button', function(){
var button = element(by.id('button1')),
message = element(by.binding('vm.messageText'));
button.click();
expect(message.getText()).toBe('button 1 clicked');
})
});
RUN:
webdriver-manager start protractor protractor.conf.js
[Protractor] Test Simple Binding With Protractor的更多相关文章
- [Protractor] Locators and Suites in Protractor
HTML: <ul class="list"> <li ng-repeat="item in itmes" ng-click="se ...
- angular 调试 js (分 karms protractor / test e2e unit )
首页订阅 Protractor端到端的AngularJS测试框架教程 2014年01月18日 分类:教程, JavaScript, AngularJS Protractor是一个建立在WebDrive ...
- Protractor AngularJS测试框架教程
Protractor是一个建立在WebDriverJS基础上的端到端(E2E)的AngularJS JavaScript Web应用程序测试框架.Protractor全自动化真实的模拟用户在真正的浏览 ...
- Angular+Grunt+Bower+Karma+Protractor (Atom)
1. 配置bower 1.安装bower npm install -g bower 2.创建.bowerrc文件 { "directory": "src/bower&qu ...
- 使用Nodejs+Protractor搭建测试环境
Protractor是一个end-to-end的测试框架,从网络上得到的答案是Protractor是作为Angular JS应用程序的测试框架.它的构建基于Selenium WebDriver之上,且 ...
- Scala + Play + Sbt + Protractor
Scala + Play + Sbt + Protractor = One Build 欢迎关注我的新博客地址:http://cuipengfei.me/ 我所在的项目的技术栈选用的是Play fra ...
- Scala + Play + Sbt + Protractor = One Build
欢迎关注我的新博客地址:http://cuipengfei.me/ 我所在的项目的技术栈选用的是Play framework做后端API,前端用Angular JS. 因为用了Scala和Play,构 ...
- E2E test protractor selenium
E2E Test和传统的Unit Test不同的是:(1)不涉及代码层面,不会去测试某段代码是否正确或者某行代码是否被覆盖(2)它是从用户的角度出发,用来测试一个应用的流程是否符合预期. 一 Sele ...
- Protractor - 环境设置
去年出于好奇搭建过一个Protractor+Cucumber的测试框架,当时项目上并没有用到AngularJS,所以框架能运行起来之后没有再深入了.最近新项目引入了AngularJS,想起去年搭的那个 ...
随机推荐
- 二、T4模板
上文带大家见识了下T4,这里呢开始介绍T4模板有关的内容.关于T4模板介绍和使用网上一搜一箩筐,想深入研究的可以自行去找些资料,这里只介绍接下来我们需要使用的一些知识,不会面面俱到的讲T4模板所有的知 ...
- How JSP work.
A JSP page exists in three forms: JSP source code: consists of a mix of HTML template code. Java lan ...
- 【USACO 1.5.3】特殊的质数肋骨
[题目描述]农民约翰的母牛总是生产出最好的肋骨.你能通过农民约翰和美国农业部标记在每根肋骨上的数字认出它们. 农民约翰确定他卖给买方的是真正的质数肋骨,是因为从右边开始切下肋骨,每次还剩下的肋骨上的数 ...
- 装饰者模式（Decorator）
首先来看一个例子: 比如,饮料可以分为很多种类,而这里我取一个咖啡,那么这个咖啡呢,有多种形式的, 比如有加糖了的咖啡,有加奶的咖啡,也有加热了的咖啡,也有加了冰块的咖啡. 而各个顾客的选择却是不同的 ...
- 二分查找里的upper bound与lower bound的实现与分析
1. 问题引入 最近参选了学堂在线的课程数据结构(2015秋).课程由清华大学的邓俊辉老师主讲,在完成课后作业时,遇到了这样一个题目范围查询.在这个题目中,我需要解决这样一个子问题:给定了一组已经排好 ...
- 50个jQuery代码段帮你成为更好的JavaScript开发者
1. 如何创建嵌套的过滤器: 允许你减少集合中的匹配元素的过滤器,只剩下那些与给定的选择器匹配的部分.在这种情况下,查询删除了任何没(:not)有(:has)包含class为“selected”(.s ...
- 关于ligerui和其他前端脚本的学习方法（适用于自己）
特别是看别人的源代码(来源于自己看的那个cms系统),比如ligerui,别人用的juery和ligerui结合的很灵活,比如下面一段代码 var itemiframe = "#framec ...
- angularjs现学现记之—$apply()和$digest()
angularjs的双向数据绑定是个重要的特性,它让我们的代码简洁了许多,然而它又是如何知道数据发生了变化并改变页面的呢.最近看了一篇介绍觉得十分有用 首先,在angularjs中是有$watch事件 ...
- memcache锁
锁的使用,一般情况是针对并发或者我们希望程序(crontab的job)串行处理,我们加锁的办法有很多,像文件锁,数据库锁,或者memcache锁,这里关注一下memcache锁,针对memcache锁 ...
- MVC中的HtmlHelper
authour: chenboyi updatetime: 2015-04-27 21:57:17 friendly link: 目录: 1,思维导图 2,CodeSimple 1.思维导图: