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. JTree用法及JTree使用经验总结

    import  java.awt.Dimension; import  java.awt.Color; import  javax.swing.JFrame; import  javax.swing. ...

  2. java_annotation_01

    一,Annotation简介 J2SE5.0提供了很多新的我,其中一个很重要的我就是对元数据的支持,在J2SE5.0中,这种元数据被称为注释,通过使用注释,程序开发人员可以在不改变原有逻辑的情况下,在 ...

  3. ubuntu下apache与php配置

    实验环境 uname -a Linux tomato 4.4.0-34-generic #53-Ubuntu SMP Wed Jul 27 16:06:39 UTC 2016 x86_64 x86_6 ...

  4. 对于IEnumerable的一点理解

    IEnumerable和IEnumerable<T>接口在.NET中是非常重要的接口,它允许开发人员定义foreach语句功能的实现并支持非泛型方法的简单的迭代,IEnumerable和I ...

  5. JQuery相关的网络资源

    jquery插件列表 国外网站:http://plugins.jquery.com/ 国内网站:http://www.oschina.net/project/tag/273/jquery

  6. thinkphp整合系列之支付宝RSA加密方式

    thinkphp整合系列之支付宝RSA加密方式上篇博客写的是MD5加密方式:thinkphp整合系列之支付宝MD5加密方式扫码支付http://baijunyao.com/article/75 但是呢 ...

  7. 超级易使用的jquery视频背景插件Vide

    http://www.jqcool.net/demo/201410/jquery-vide/ 官网: http://vodkabears.github.io/vide/

  8. 随机数是骗人的，.Net、Java、C为我作证(转载)

      几乎所有编程语言中都提供了"生成一个随机数"的方法,也就是调用这个方法会生成一个数,我们事先也不知道它生成什么数.比如在.Net中编写下面的代码: Random rand = ...

  9. css（）和 attr（）的区别

  10. UE标签排列方式

        UE是一款很顺手的文件编辑软件.打开文本,都会有个标签.根据个人喜好,我喜欢标签都展开,方便快速选取指定文本. 设置如下: 高级>配置>应用程序布局>可停靠窗口>类型 ...