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

时间：2017-06-27 20:09:17 阅读：917 评论：0 收藏：0 [点我收藏+]

标签：frame desc round model font gets screens getenv mode

之前我们介绍了如何测试某段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，需要FQ。

　　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()　 //点击登入这个按钮
　　 })
})