Protractor

Protractor is an end-to-end test framework for AngularJS applications. 
Protractor runs tests against your application running in a real browser, interacting with it as a user would.

是什么

• 基于Node.js的程序
• 使用Jasmine測試框架測試接口,針對AngularJS的應(yīng)用程序
• 官網(wǎng)： http://angular.github.io/protractor/#/
• Github: https://github.com/angular/protractor

功能

• 模擬真實的用戶操作行為
• 針對AngularJS中的Element不需要做特殊的處理，普通HTML元素也同樣支持
• 智能等待，不需要為頁面中的加載和同步顯示做特殊的等待時間處理

安裝

• 安裝Node和JDK

  • Protractor 3支持NodeJS v4以上
  • 使用NodeJS v0.12,需要使用Protractor 2

• 安裝Protractor: npm install -g protractor

  • 此命令會同時安裝protractor和webdriver-manager
  • webdriver-manager：為于管理所有的webdriver

• 安裝webdriver: webdriver-manager update

  • 此命令會安裝和更新webdriver,其它命令及用法

  Usage: webdriver-manager <command>
  Commands:
    update: install or update selected binaries
    start: start up the selenium server
    status: list the current available drivers
    clean: removes all downloaded driver files from the out_dir
  

End To End Testing

頁面分析-Page Object

• 頁面地址： https://www.angularjs.org/

• 功能

  頁面中的"The Basics"部分，在右側(cè)的`Name`輸入框中輸入`Julie`后，下方原有的`Hello !`會變更為`Hello Julie!`
  

• 元素分析

  • Name輸入框
    • 元素頁面源碼：<input type="text" ng-model="yourName" placeholder="Enter a name here" class="ng-valid ng-touched ng-dirty ng-valid-parse ng-empty">，元素ng-model可直接使用Protractor的元素定位方法：element(by.model('yourName')),
  • 文本顯示
    • 元素源碼：<h1 class="ng-binding">Hello !</h1> ,元素class="ng-binding"可直接使用Protractor的元素定位方法：element(by.binding('yourName'))

• Page Object設(shè)計: AngularHomepage.js

    var AngularHomepage = function() {
        var nameInput = element(by.model('yourName'));
        var greeting = element(by.binding('yourName'));
      
        this.get = function() {
          browser.get('http://www.angularjs.org');
        };
      
        this.setName = function(name) {
          nameInput.sendKeys(name);
        };
      
        this.getGreeting = function() {
          return greeting.getText();
        };
    };
    module.exports = AngularHomepage;
  

測試代碼：spec.js

var pageObject = require('../pageObject/AngularHomepage.js');
    
describe('angularjs homepage', function() {
  it('should greet the named user', function() {
    var angularHomepage = new pageObject();
    angularHomepage.get();
    
    angularHomepage.setName('Julie');
    
    expect(angularHomepage.getGreeting()).toEqual('Hello Julie!');
  });
});

• pageObject: 加載Page Object
• var angularHomepage = new pageObject();: 創(chuàng)建一個Page Object對象
• angularHomepage.get();: 打問AngularHomepage首頁，調(diào)用browser.get('http://www.angularjs.org');
• angularHomepage.setName('Julie');: 設(shè)置nameInput值為Julie，調(diào)用nameInput.sendKeys(name);
• expect(angularHomepage.getGreeting()).toEqual('Hello Julie!');: 測試greeting的值與Hello Julie!是否相等，相等則測試通過,不相等，則測試失敗

啟動webdriver

• 啟動webdriver: webdriver-manager start

  • 啟動Selenium Server

  seleniumProcess.pid: 49863
  11:24:51.400 INFO - Launching a standalone Selenium Server
  Setting system property webdriver.chrome.driver to /usr/local/lib/node_modules/protractor/selenium/chromedriver_2.21
  11:24:51.452 INFO - Java: Oracle Corporation 25.60-b23
  11:24:51.452 INFO - OS: Mac OS X 10.11.2 x86_64
  11:24:51.467 INFO - v2.52.0, with Core v2.52.0. Built from revision 4c2593c
  11:24:51.549 INFO - Driver provider org.openqa.selenium.ie.InternetExplorerDriver registration is skipped:
  registration capabilities Capabilities [{ensureCleanSession=true, browserName=internet explorer, version=, platform=WINDOWS}] does not match the current platform MAC
  11:24:51.550 INFO - Driver provider org.openqa.selenium.edge.EdgeDriver registration is skipped:
  registration capabilities Capabilities [{browserName=MicrosoftEdge, version=, platform=WINDOWS}] does not match the current platform MAC
  11:24:51.550 INFO - Driver class not found: com.opera.core.systems.OperaDriver
  11:24:51.550 INFO - Driver provider com.opera.core.systems.OperaDriver is not registered
  11:24:51.656 INFO - RemoteWebDriver instances should connect to: http://127.0.0.1:4444/wd/hub
  11:24:51.656 INFO - Selenium Server is up and running
  

  • 訪問：http://127.0.0.1:4444/wd/hub，本地查看是否啟動成功

執(zhí)行Protractor

• 執(zhí)行Protractor: protractor conf.js

  • 執(zhí)行過程中，會真實的把瀏覽器掛起，并顯示真實的頁面信息
  • 執(zhí)行結(jié)束時，會自動把瀏覽器關(guān)閉,且webdriver日志會記錄本次執(zhí)行過程中的日志信息

• Protractoc執(zhí)行過程日志

  [11:32:19] I/hosted - Using the selenium server at http://localhost:4444/wd/hub
  [11:32:19] I/launcher - Running 1 instances of WebDriver
  Started
  .
  1 spec, 0 failures
  Finished in 5.401 seconds
  [11:32:27] I/launcher - 0 instance(s) of WebDriver still running
  [11:32:27] I/launcher - firefox #01 passed
  

• webdriver啟動的Selenium Server中也會記錄本次請求的相關(guān)日志

總結(jié)

• 涉及的源碼已提交到Git,便于查閱
  https://github.com/aimer1124/protractorWithPageObject.git
• Protractor支持E2E測試，特別是針對AngularJS的項目
• Protractor的webdriver-manager將webdriver統(tǒng)一管理，減少測試人員在使用過程中針對webdriver的管理操作，將主要精力集中于ETE的測試

參考

• Protractor Tutorial
  http://angular.github.io/protractor/#/tutorial
• Page Object
  http://martinfowler.com/bliki/PageObject.html
• Protractor元素定位
  http://angular.github.io/protractor/#/locators
• Protractor conf.js配制
  https://github.com/angular/protractor/blob/master/docs/referenceConf.js
• Protractor API參考
  http://angular.github.io/protractor/#/api?view=ElementArrayFinder