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. Cocos2dx 3.2 节点之间相互通信与设置触摸吞噬的方法

    实际开发中,我们经常会遇到这样的情况.我们有一个层layer1,这个层包含一个menu层,menu1层里又包含了一个节点按钮button1.现在需要实现一个效果:点击button1弹出一个对话框,这个 ...

  2. 如何遍历json属性和动态添加属性

    var person= { name: 'zhangsan', pass: '123' , 'sni.ni' : 'sss', hello:function (){ for(var i=0;i< ...

  3. [HTML5 Canvas学习]绘制矩形

    1.使用strokeRect和fillRect方法绘制矩形 a.strokeRect是绘制一个不填充的矩形 b.fillRect是绘制一个填充的矩形 代码: <script> var ca ...

  4. jQuery放大镜插件jqzoom使用

    源码下载,使用指导地址:http://www.mind-projects.it/projects/jqzoom/ 使用教程: 1.导入库文件 <script src="../js/jq ...

  5. php转化输入日期为Unix 纪元到当前时间的秒数 日期筛选

    多条件筛选时 日期筛选 部分 demo   http://pan.baidu.com/s/1hqGF5Ik 时间输入控件http://www.jq22.com/jquery-info332 输入控件 ...

  6. js 联系电话验证实现

         var str=$('#tele').val();                                       var regPartton=/1[3-8]+\d{9}/;  ...

  7. 查看memcached中最大生存时间

    如果想看一下线上服务器上存储时间最久的key是多长时间,又没有memcached-tool工具可用的话,可以使用这个命令 stats items 执行结果如下: stats items :number ...

  8. 【转】Windows平台下Git服务器搭建

    Windows平台下Git服务器搭建 Posted on 2015-05-18 21:29 阿祥当码农 阅读(7637) 评论(0) 编辑 收藏 该文章转自:http://www.codeceo.co ...

  9. block 高级

    //从后往前传值 声明block属性 //copy 目的是 将栈区的block拷贝一份到堆区 @property(nonatomic,copy)void (^sendValueBlock)(id); ...

  10. java开发规范

    hbh 开发规范文档 一:目的 使本组织能以标准的,规范的方式设计和编码.通过建立编码规范,以使每个开发人员 养成良好的编码风格和习惯:并以此形成开发小组编码约定,提高程序的可靠性,可读性, 可修改性 ...