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的更多相关文章

  1. [Protractor] Locators and Suites in Protractor

    HTML: <ul class="list"> <li ng-repeat="item in itmes" ng-click="se ...

  2. angular 调试 js (分 karms protractor / test e2e unit )

    首页订阅 Protractor端到端的AngularJS测试框架教程 2014年01月18日 分类:教程, JavaScript, AngularJS Protractor是一个建立在WebDrive ...

  3. Protractor AngularJS测试框架教程

    Protractor是一个建立在WebDriverJS基础上的端到端(E2E)的AngularJS JavaScript Web应用程序测试框架.Protractor全自动化真实的模拟用户在真正的浏览 ...

  4. Angular+Grunt+Bower+Karma+Protractor (Atom)

    1. 配置bower 1.安装bower npm install -g bower 2.创建.bowerrc文件 { "directory": "src/bower&qu ...

  5. 使用Nodejs+Protractor搭建测试环境

    Protractor是一个end-to-end的测试框架,从网络上得到的答案是Protractor是作为Angular JS应用程序的测试框架.它的构建基于Selenium WebDriver之上,且 ...

  6. Scala + Play + Sbt + Protractor

    Scala + Play + Sbt + Protractor = One Build 欢迎关注我的新博客地址:http://cuipengfei.me/ 我所在的项目的技术栈选用的是Play fra ...

  7. Scala + Play + Sbt + Protractor = One Build

    欢迎关注我的新博客地址:http://cuipengfei.me/ 我所在的项目的技术栈选用的是Play framework做后端API,前端用Angular JS. 因为用了Scala和Play,构 ...

  8. E2E test protractor selenium

    E2E Test和传统的Unit Test不同的是:(1)不涉及代码层面,不会去测试某段代码是否正确或者某行代码是否被覆盖(2)它是从用户的角度出发,用来测试一个应用的流程是否符合预期. 一 Sele ...

  9. Protractor - 环境设置

    去年出于好奇搭建过一个Protractor+Cucumber的测试框架,当时项目上并没有用到AngularJS,所以框架能运行起来之后没有再深入了.最近新项目引入了AngularJS,想起去年搭的那个 ...

随机推荐

  1. WebSocket协议

    websocket 简介 (2013-04-09 15:39:28) 转载▼   分类: websocket 一 WebSocket是html5新增加的一种通信协议,目前流行的浏览器都支持这个协议,例 ...

  2. Swift - 33 - 返回函数类型和函数嵌套

    //: Playground - noun: a place where people can play import UIKit /*---------------------------返回函数类 ...

  3. ejabberd,erlang,简单看了一下,总结一下,很肤浅

    本来也没打算深入学习erlang,就是看一下他们的大概思路erlang每个自定义函数都能注册成进程,每个节点通过erl -name 'name@ip'.进去后,可以直接做远程调用,节点之间就靠一个连接 ...

  4. SecureCRT上使用公钥登陆Linux服务器

    SecureCRT部分配置 1.首先生成公钥. 打开SecureCRT(我的版本为7.0,估计其他版本基本相同)程序,点击菜单栏的“工具”->“创建公钥”.按照步骤执行.其中一步比较重要就是选择 ...

  5. jquery图片轮播代码

    自己写的轮播代码 来张样式效果图 先贴HTML样式 <body> <div id = "wrap"> <div id="lunbo-img& ...

  6. Thinkphp发布文章获取第一张图片为缩略图实现方法

    正则匹配图片地址获取第一张图片地址 此为函数 在模块或是全局Common文件夹中的function.php中 /** * [getPic description] * 获取文本中首张图片地址 * @p ...

  7. Joomla安装图文教程 (送 Joomla 中文语言包)

    1.首先 下载 Joomla  源程序 首页: http://www.joomla.org/download.html 下载: download 2.为论坛 创建数据库.进入cPanel面板,选择my ...

  8. win10 64bit 安装scrapy-1.1

    0.环境说明 win10 64bit,电脑也是64bit的处理器,电脑装有vs2010 64bit,但是为了保险起见,只试验了32位的安装,等有时间了,再试下64位的安装.如无特殊说明,一切操作都是在 ...

  9. Primary Expression

    Primary expressions are the building blocks of more complex expressions. They are literals, names, a ...

  10. python 深拷贝和浅拷贝浅析

    简单点说 1. copy.copy 浅拷贝 只拷贝父对象,不会拷贝对象的内部的子对象.id会变化2. copy.deepcopy 深拷贝 拷贝对象及其子对象.id会变化 >>> im ...