Protractor小结

一、简介

         Protractor是一个Node.js程序，需要安装Node.js才可运行。Protractor默认使用Jasmine测试框架。Protractor是基于WebDriverJS作了封装。

·Selenium Server

         SeleniumServer介于测试脚本(用WebDriver API所写)和浏览器Driver(由WebDriver协议控制)之间，充当代理角色。

         Server端转发来自测试脚本的命令给driver，并返回来自driver端的应答给测试脚本。Server端可处理不同语言的测试脚本，也可启动并管理不同版本的多个浏览器。

         示意图如下：

         [Test Scripts] < ------------> [Selenium Server] < ------------ > [Browser Drivers]

         注：当测试Chrome浏览器时，SeleniumServer是可选的，通过配置chromeOnly:true or false来实现。

·浏览器支持

Protractor支持Chrome、FireFox、Safari和IE的最近两个版本，下表是其浏览器支持情况和已知BUG。

Driver	Support	Known Issues
ChromeDriver	Yes
FirefoxDriver	Yes	#480 clicking options doesn't update the model
SafariDriver	Yes	#481 minus key doesn't work, SafariDriver does not support modals, #1051 We see occasional page loading timeouts
IEDriver	Yes	#778, can be slow, #1052 often times out waiting for page load
OperaDriver	No
ios-Driver	No
Appium- iOS/Safari	Yes*	drag and drop not supported (session/:sessionid/buttondown unimplemented)
Appium- Android/Chrome	Yes*
Selendroid	Yes*

*These driversare not yet in the Protractor smoke tests.

·测试框架支持

         Protractor支持三种行为驱动开发(BDD)测试框架：Jasmine、Mocha和Cucumber。这些框架基于JavaScript和Node.js，提供语法、脚手架和报告工具便于你编写和管理你的测试脚本。Protractor默认使用Jasmine框架。

二、工作原理

         Protractor结合Selenium提供了一个自动化测试基础设施，用以模拟在浏览器或移动设备上运行的Angular应用中的用户交互。

         当使用Protractor时，注意这几点：

l  Protractor基于WebDriverJS作了封装，其中WebDriverJS是Selenium WebDriver API的JavaScript语言实现；

l  WebDriver命令是异步的。他们被安排在一个控制流中，返回promises，而非原始值；

l  测试脚本发送命令给SeleniumServer，按次序跟浏览器Driver通信。

         一个使用SeleniumWebDriver的测试涉及三块：测试脚本、Server端和浏览器，三者之间的通信过程如下图：

        

         SeleniumServer关注来自测试脚本的解释命令，将其转发给一个或多个浏览器。Server端和浏览器之间使用WebDriver Wire Protocol，一种JSON协议。转发命令再被浏览器Driver解释。

         对于Protractor，测试脚本使用Node.js运行。为确保被测的应用已经稳定，Protractor在浏览器响应操作之前会执行一个额外的命令。举例如下：

         element(by.css('button.myclass')).click();

         这句测试脚本将会产生三个命令，发送给浏览器Driver：

l  /session/:sessionId/execute_async：首先，Protractor告诉浏览器将执行一段JavaScript代码。这是个定制的命令，当应用处理完延时和异步请求，可继续执行测试时，该命令用于要求Angular对此作出应答。

l  /session/:sessionId/element：然后，发送定位元素的命令

l  /session/:sessionId/element/:id/click：最后发送执行点击操作的命令

 

三、特性简介

       ·测试脚本

         Protractor运行需要两个文件，测试脚本文件 (spec file)和配置文件

         简单的测试文件如下，其中describe函数和it函数是Jasmine框架中的语法，describe定义一个测试案例集，it为单个测试案例。

// spec.js

describe('angularjs homepage', function() {

  it('should add one and two', function() {

    browser.get('http://juliemr.github.io/protractor-demo/');

    element(by.model('first')).sendKeys(1);

    element(by.model('second')).sendKeys(2);

    element(by.id('gobutton')).click();

    expect(element(by.binding('latest')).getText()).

        toEqual('5');// This is wrong!

  });

});

         配置文件如下

// conf.js

exports.config = {

  seleniumAddress: 'http://localhost:4444/wd/hub',

  specs: ['spec.js'],

  multiCapabilities: [{

    browserName: 'firefox'

  }, {

    browserName: 'chrome'

  }]

}

 

       ·元素定位

         Protractor提供一个全局函数element，使用一个Locator作为参数，返回一个ElementFinder。通过element.all函数可以操作多个元素。其中，ElementFinder有一组action方法，例如click()，getText()和sendKeys()。在Protractor中，所有的action操作都是异步的。

         ·Locators

         一个定位器(locator)告诉Protractor如何找到一个特定的DOM元素，Protractor通过全局对象by来定位。例子如下：

// find an element using a css selector

by.css('.myclass')

 

// find an element with the given id

by.id('myid')

 

// find an element with a certain ng-model

by.model('name')

 

// find an element bound to the given variable

by.binding('bindingname')

locator再作为参数传给element函数，如下：

element(by.css('some-css'));

element(by.model('item.name'));

element(by.binding('item.name'));

·actions

         element()函数返回一个ElementFinder对象。ElementFinder对象知道如何使用locator定位DOM元素，但实际还未执行定位。只有等定位元素涉及action方法调用时才会执行。

注：WebElement上任何在WebDriverJS中可执行的action方法在ElementFinder上也可执行。

常用的action方法如下：

var el = element(locator);

// Click on the element

el.click();

// Send keys to the element (usually an input)

el.sendKeys('my text');

// Clear the text in an element (usually an input)

el.clear();

// Get the value of an attribute, for example, get the value of an input

el.getAttribute('value');

         既然所有的actions是异步的，所有action方法会返回一个promise。所以，如果要获取一个元素的文本并记录，可以这样实现：

var el = element(locator);

el.getText().then(function(text) {

  console.log(text);

});

·定位多个元素

处理多个DOM元素时，使用element.all函数。示例如下：

// Number of elements.

element.all(locator).count();

// Get my index (starting at 0).

element.all(locator).get(index);

// First and last.

element.all(locator).first();

element.all(locator).last();

 

 

 

 

 

reference：

l  https://github.com/angular/protractor/blob/master/docs/toc.md

l  http://ramonvictor.github.io/protractor/slides/#/

l  Protractor API：https://github.com/angular/protractor/blob/master/docs/api.md