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. RAC检查各资源

  2. jdbc中的Statement对象和Preparedstatement对象的区别,以及通过jdbc操作调用存储过程

    一. java.sql.*   和  javax.sql.*的包的类结构 |- Driver接口: 表示java驱动程序接口.所有的具体的数据库厂商要来实现此接口. |- connect(url, p ...

  3. cas sso单点登录系列6_cas单点登录防止登出退出后刷新后退ticket失效报500错

    转(http://blog.csdn.net/ae6623/article/details/9494601) 问题: 我登录了client2,又登录了client3,现在我把client2退出了,在c ...

  4. 你好，C++（40）7.1 一切指针都是纸老虎：彻底理解指针

    第7章 C++世界的奇人异事 在武侠小说中,初入武林的毛头小子总是要遇到几位奇人,发生几件异事,经过高人的指点,经历一番磨炼,方能武功精进,从新手成长为高手.在C++世界,同样有诸多的奇人异事.在C+ ...

  5. 跟我学android-Notification

    Notification 可以理解为通知的意思,会出现在通知栏,比如来了一条短信 使用 Notification 有以下3个步骤: 1. 创建 NotificationManager的对象 2.为No ...

  6. JavaScript 目标装配式编程(Target Assemble Programming)

    TAP概述 脚本中一切皆对象,若还以传统模式思考编程模式,那简直是对不起脚本解释器的强大支持:我们应该以最接近人类操作方式的来表达人的意图. 更接近工作实践的方式,比如游戏中,一个人物一个角色,人物的 ...

  7. ggts下载地址

    地址:http://spring.io/tools/ggts See All Versions可以下载更多版本,里面包含安装版和解压版

  8. MySQL 5.6.22 win32 zip版安装

    mysql 5.6.22 32位下载地址:http://cdn.mysql.com//archives/mysql-5.6/mysql-5.6.22-win32.zip 1 从http://dev.m ...

  9. Quartz2D使用

    使用Quartz2D前  先导入QuartzCore.framework //划线 //1.获取图形上下文 CGContextRef ctx=UIGraphicsGetCurrentContext() ...

  10. spring mvc标准项目结构

    src com.xxx.inews.dao com.xxx.inews.dao.impl com.xxx.inews.data.entity com.xxx.inews.data.vo com.xxx ...