端到端测试，protractor测试的教程

之前我们介绍了如何测试某段js代码的逻辑是否正确，考虑的情况是否全面，但是在ui界面上我们每次做好的功能都要自己去填写内容，点击按钮等，那么是否存在自动化测试的工具呢，让这些事情可以自动完成，答案是肯定的，今天我们就来讲解如何自动测试我们界面上的功能。

1.安装依赖文件

　　在任意的地方创建新的文件夹，例如test，进入到文件夹里，打开命令行或者gitbash；

　　<1>安装protractor

npm install -g protractor

　　<2>安装karma-jasmine

npm install --save-dev karma-jasmine

　　<3>webdriver-manager 驱动

webdriver-manager update //浏览器的驱动

　　<4>安装javaJDK

　　由于运行的时候需要java环境，所以需要安装javaJDK，http://blog.csdn.net/bingiser/article/details/53375282，这个网址很详细的介绍了如何一步一步安装javaJDK。

2.简单介绍karma-jasmine的语法

　　由于之前的单元测试介绍过karma-jasmine，所以这里简单介绍，如果有人没看过，去这里看 ，http://www.cnblogs.com/zhenfei-jiang/p/7027948.html。

describe("测试加法", function () {//describe就是对这次测试的整体描述，如：加法测试
      it("3+5=8", function () {//it是对个测试的描述，如：3+5应该等于8
        expect(add(3, 5)).toEqual(8);//期待add（3,5）的结果等于8
      });
});

3.介绍几个常用的protractor api　具体的api去网站  http://www.protractortest.org/#/api，需要翻墙。

　　1. browser.get('http://baidu.com')导航到当前页面
　　2. element找到元素
　　3. element.all找到元素集合
　　4. by 查找元素
　　　　* by.binding : ng-bind, {{}}
　　　　* by.model : ng-model       //例子：element(by.model('name')).sendKeys('haha'),就是找到含有ng-model="name"的输入框然后填写haha；
　　　　* by.repeater : ng-repeater
　　　　* by.id : id选择器      //id选择器
　　　　* by.css : css选择器
　　　　* Array.get(2) : 选择第2个      //获取元素的第二个，因为可能某种选择器会得到很多的元素
　　5. click 点击事件     //element(by.cssContainingText("button","OK")).click()，选择button的内容是OK的按钮点击
　　6. sendKeys 书写内容
　　7. 获取信息,判断
　　　　* getText 获取文本
　　　　* getSize 获取尺寸
　　　　* getAttribute 获取属性
　　8. getTitle
　　9. sleep
　　10. brower.wait()等待某元素出现   //这个常用的是跳转页面的时候要等待下一个页面某个元素出来才可以操作

4.编写你的protractor_conf.js

exports.config = {
    directConnect: true,
    capabilities: {
        'browserName': 'chrome',
    },
    specs: ['applications-test.js'],     //运行的测试文件地址
    //framework: 'jasmine2',
    jasmineNodeOpts: {
        showColors: true,
        defaultTimeoutInterval: 30000
    },
    //输出测试报告
    //onPrepare: function(){
    //    jasmine.getEnv().addReporter(
    //        new Jasmine2HtmlReporter({
    //            savePath: 'e2e/',
    //            takeScreenshots: true,  //是否截屏
    //            takeScreenshotsOnlyOnFailures: true //测试用例执行失败时才截屏
    //        })
    //    );
    //}
};

5.编写的测试代码

describe(" checkoutLogin", function() {
    it('进入登入界面',function(){
        browser.get("http://localhost:106/#/login");//首先进入到这个网址
    })

    it('登入',function(){
        browser.wait(function () {//然后等待这个网页出现了ng-model="form.password"这个选择器，再执行其他的操作
　　　　 　　return browser.isElementPresent(by.model("form.password"));//直到这个选择器的元素存在的时候
　　　　 }, 2000); 
　　　　 element(by.model("form.username")).sendKeys("admin")//给ng-model="form.username"填写admin
　　　　 element(by.model("form.password")).sendKeys("admin") //给ng-model="form.password"填写admin
　　　　 element(by.css("input.loginbtn")).click()　 //点击登入这个按钮
　　 })
})

6.启动命令

　　<1>启动浏览器驱动  当前文件夹下打开cmd命令行或者gitbash

webdriver-manager start

　　<2>启动测试代码  当前文件夹下打开另一个cmd命令行或者gitbash

protractpr protractor_conf.js

就可以看到自动会启动一个页面，跳转到你测试代码的地址，进行你一系列的操作。

7.踩过的坑

　　<1>最好在你的protractor_conf.js的 browserName填写“chrome”，因为火狐的浏览器（firefox）可能存在报错的问题，并且你的chrome的版本需要高于58。

　　<2>你的页面假设有透明的地方可能会遮住你的按钮，那么会导致你的按钮点击不到报错