UI自動(dòng)化測(cè)試之Protractor

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.

是什么

功能

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

安裝

  • 安裝Node和JDK

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

  • 安裝Protractor: npm install -g protractor

    • 此命令會(huì)同時(shí)安裝protractor和webdriver-manager
    • webdriver-manager：為于管理所有的webdriver

  • 安裝webdriver: webdriver-manager update

    • 此命令會(huì)安裝和更新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

頁(yè)面分析-Page Object

  • 頁(yè)面地址： https://www.angularjs.org/

  • 功能

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

  • 元素分析

    • Name輸入框
      • 元素頁(yè)面源碼：<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è)計(jì): 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;

測(cè)試代碼：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)建一個(gè)Page Object對(duì)象
  • angularHomepage.get();: 打問(wèn)AngularHomepage首頁(yè)，調(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!');: 測(cè)試greeting的值與Hello Julie!是否相等，相等則測(cè)試通過(guò),不相等，則測(cè)試失敗

啟動(dòng)webdriver

  • 啟動(dòng)webdriver: webdriver-manager start

    • 啟動(dòng)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

執(zhí)行Protractor

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

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

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

    [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啟動(dòng)的Selenium Server中也會(huì)記錄本次請(qǐng)求的相關(guān)日志

總結(jié)

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

參考

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容