1. 预备环境

protractor 是一个 Node.js 程序，为了运行 protractor ，你首先需要 Node 环境。你还应该检查一下 Node 的版本，它应该在 v0.10.0 以上。

node --version

Node 中附带了 npm 包管理工具，通过 npm 可以下载和安装 protractor。

默认情况下，protractor 使用 Jasmine 作为测试框架。下面的内容将使用 Jasmine 进行， Jasmine 的当前版本是 2.3，我们将使用这个版本。

我们还将使用本地的独立 Selenium 服务器来控制浏览器，你需要安装 Java Development Kit (JDK) 来运行它，通过执行下面的命令来检查 java 是否正确安装。

java -version

2. 安装 protractor

使用 NPM 进行全局安装。

npm install -g protractor

这将会安装两个工具：protractor 和 webdriver-manager， 先运行一下 protractor --version 确认可以正常工作。

webdriver-manager 用来帮助我们获取 Selenium Server，但是，你可能会遇到网络错误。

webdriver-manager update

我这里执行的结果是这样的。

PS C:\study\demo> webdriver-manager update
Updating selenium standalone
downloading https://selenium-release.storage.googleapis.com/2.45/selenium-server-standalone-2.45.0.jar...
Updating chromedriver
downloading https://chromedriver.storage.googleapis.com/2.15/chromedriver_win32.zip... Error: Got error Error: connect ETIMEDOUT 74.125.23.128:443 from https://selenium-release.storage.googleapis.com/2.45/selenium-server-standalone-2.45.0.jar Error: Got error Error: connect ETIMEDOUT 74.125.23.128:443 from https://chromedriver.storage.googleapis.com/2.15/chrome driver_win32.zip

可以看到，实际上需要下载两个文件：selenium-server-standalone-2.45.0.jar 和 chromedriver_win32.zip ，这两个文件分别是 selenium 独立服务器和 chrome 的驱动。

淘宝提供了镜像地址，我们可以修改一下 webdriver-manager，通过淘宝来下载。

http://npm.taobao.org/mirrors/selenium/

https://npm.taobao.org/mirrors/chromedriver/2.2/

首先找到你的 webdriver-manager 文件，它应该在 C:\Users\your_account\AppData\Roaming\npm\node_modules\protractor\bin 中，找到第 34 行，修改为淘宝的 selenium 地址。

    cdn: 'http://npm.taobao.org/mirrors/selenium/',
    // cdn: 'https://selenium-release.storage.googleapis.com/',

再找到第 46 行，修改为

    cdn: 'https://npm.taobao.org/mirrors/chromedriver/',
    // cdn: 'https://chromedriver.storage.googleapis.com/',

重新执行 webdriver-manager update 就可以下载了。

下载之后，保存到哪里呢？直接执行一下 webdriver-manager，可以看到如下的输出。

PS C:\study\demo> webdriver-manager
Usage: webdriver-manager <command>
Commands:
  update: install or update selected binaries
  start: start up the selenium server
  status: list the current available drivers

Options:
  --out_dir        Location to output/expect                         [default: "C:\\Users\\xxx\\AppData\\Roaming\\npm\\node_modules\\protractor\\selenium"] --seleniumPort Optional port for the selenium standalone server --ignore_ssl Ignore SSL certificates [default: false] --proxy Proxy to use for the install or update command --alternate_cdn Alternate CDN to the binaries --standalone Install or update selenium standalone [default: true] --chrome Install or update chromedriver [default: true] --ie Install or update IEDriver [default: false] Please specify one command

这里给出了默认的保存地址。

成功下载之后，启动服务器检查一下。

webdriver-manager start

这将会启动 Selenium 服务器，控制台也会输出一些日志信息.

PS C:\study\demo> webdriver-manager start
seleniumProcess.pid: 4856
15:16:07.179 INFO - Launching a standalone server Setting system property webdriver.chrome.driver to C:\Users\Whao\AppData\Roaming\npm\node_modules\protractor\selenium\chromedriver.exe 15:16:07.238 INFO - Java: Oracle Corporation 23.6-b04 15:16:07.238 INFO - OS: Windows 7 6.1 amd64 15:16:07.245 INFO - v2.45.0, with Core v2.45.0. Built from revision 5017cb8 15:16:07.317 INFO - RemoteWebDriver instances should connect to: http://127.0.0.1:4444/wd/hub 15:16:07.318 INFO - Version Jetty/5.1.x 15:16:07.318 INFO - Started HttpContext[/selenium-server/driver,/selenium-server/driver] 15:16:07.319 INFO - Started HttpContext[/selenium-server,/selenium-server] 15:16:07.319 INFO - Started HttpContext[/,/] 15:16:07.364 INFO - Started org.openqa.jetty.jetty.servlet.ServletHandler@601edf33 15:16:07.364 INFO - Started HttpContext[/wd,/wd] 15:16:07.367 INFO - Started SocketListener on 0.0.0.0:4444 15:16:07.367 INFO - Started org.openqa.jetty.jetty.Server@792bf755

我们的 Protractor 测试将会把测试请求发送到这个服务器，通过它来控制本地的浏览器进行测试，在我们的整个教程中，保持这个服务器的运行，在下面的地址，你可以看到关于服务器状态的信息。

http://localhost:4444/wd/hub

3. 演练

Step 0 write a test

保持上面的命令行窗口运行，重新打开另外一个命令行窗口，创建一个用于测试的干净文件夹。

Protractor 需要两个文件来运行测试，一个测试规范文件，一个配置文件。

让我们从示例的 AngularJS 应用开始写一个简单的测试，我们使用位于 http://juliemr.github.io/protractor-demo/ 的超级计算器应用，测试将检查页面的 title 是否符合我们的预期。

复制下面的代码到 spec.js 文件中。

// spec.js
describe('Protractor Demo App', function() {
  it('should have a title', function() { browser.get('http://juliemr.github.io/protractor-demo/'); expect(browser.getTitle()).toEqual('Super Calculator'); }); });

describe 和 it 是 Jasmine 测试框架的语法格式。browser 是通过 protractor 创建的全局变量。它用于浏览器范围的命令控制，比如通过 browser.get 进行导航。

现在，我们创建配置文件，复制一下代码到 conf.js 中。

// conf.js
exports.config = {
  framework: 'jasmine2',
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['spec.js'] }

配置文件中描述了到何处定位测试规范文件 (specs )，Selenium 服务器的地址 (seleniumAddress)，还说明了我们将会使用 Jasmine 版本 2 作为测试框架。其它配置这里使用默认的配置，Chrome 是默认的浏览器。

现在执行测试。

protractor conf.js

你应该看到自动打开了一个 chrome 浏览器，然后导航到超级计算器应用地址，然后，浏览器自动关闭 (这应该非常快 )。测试的输出应该是

祝贺你，我们已经运行了第一个 protractor 测试。

Setp 1 - interacting with elements

这一次，我们修改一下测试来与页面中的元素进行交互，将 spec.js 修改为如下内容。

// spec.js
describe('Protractor Demo App', 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!  }); });

这里，我们使用全局的 element 函数和 by 对象，它们也是 protractor 创建的函数，element 函数用来在页面中定位 HTML 元素，函数返回一个 ElementFinder 对象。可以通过这个对象与页面元素进行交互或者获取信息。在这个测试中，我们使用了 sendKeys 在 input 元素中输入内容，click 函数来模拟点击按钮，getText 获取元素的内容。

element 需要一个参数，一个选择器参数，用来描述如何找到元素，by 对象用来创建选择器，这里我们使用了三种类型的选择器。

by.model('first') 通过 ng-model='first' 来定位元素。如果你查看 Calculator 页面的源码，你会看到 <input type=text ng-model="first">.
by.id('gobutton') 通过指定的 id 来定位元素，比如 <button id="gobutton"> .
by.binding('latest') 定位绑定的变量 latest，比如这里的 {{latest}}

执行这个测试。

protractor conf.js

你应该看到页面中输入了两个数字，等待结果显示出来。由于结果是 3 ，而不是 5，我们的测试失败。修复这个测试，然后重新运行它。

Step 2 - writeing multiple scenarios

我们将两个测试放在一起，如下修改 spec.js

// spec.js
describe('Protractor Demo App', function() {
  var firstNumber = element(by.model('first')); var secondNumber = element(by.model('second')); var goButton = element(by.id('gobutton')); var latestResult = element(by.binding('latest')); beforeEach(function() { browser.get('http://juliemr.github.io/protractor-demo/'); }); it('should have a title', function() { expect(browser.getTitle()).toEqual('Super Calculator'); }); it('should add one and two', function() { firstNumber.sendKeys(1); secondNumber.sendKeys(2); goButton.click(); expect(latestResult.getText()).toEqual('3'); }); it('should add four and six', function() { // Fill this in. expect(latestResult.getText()).toEqual('10'); }); });

这里，我们把导航移到了 beforeEach 中，这个函数会在每一个 it 块之前执行。我们还把 ElementFinder 保存在变量中进行共享使用。

Step 3 - changing the configuration

我们已经写了一些测试，现在来看看配置文件。在配置文件中，我们可以配置使用什么浏览器，如何连接到 Selenium 服务器等等，先改变一下我们使用的服务器。

// conf.js
exports.config = {
  framework: 'jasmine2',
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['spec.js'], capabilities: { browserName: 'firefox' } }

重新运行测试，你会看到测试运行在 firefox 中而不是原来的 chrome。capabilities 对象描述了测试使用的浏览器。各种配置参数，参见：the reference config file.

还可以同时在多个浏览器上运行测试，例如。

// conf.js
exports.config = {
  framework: 'jasmine2',
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['spec.js'], multiCapabilities: [{ browserName: 'firefox' }, { browserName: 'chrome' }] }

重新运行，你会看到测试运行在 chrome 和 firefox 浏览器中。

Step 4 - lists of elements

我们回到测试，把配置文件也调整为仅使用一个浏览器。

有的时候，我们需要处理一组元素，可以使用 element.all，它会返回 ElementArrayFinder。在 Calculator 中，任何操作都被记录在 log 中。这是使用 ng-repeat 生成的表格实现的。

我们先进行一系列操作，然后测试它们出现在 log 历史记录中，修改 spec.js 如下。

// spec.js
describe('Protractor Demo App', function() {
  var firstNumber = element(by.model('first')); var secondNumber = element(by.model('second')); var goButton = element(by.id('gobutton')); var latestResult = element(by.binding('latest')); var history = element.all(by.repeater('result in memory')); function add(a, b) { firstNumber.sendKeys(a); secondNumber.sendKeys(b); goButton.click(); } beforeEach(function() { browser.get('http://juliemr.github.io/protractor-demo/'); }); it('should have a history', function() { add(1, 2); add(3, 4); expect(history.count()).toEqual(2); add(5, 6); expect(history.count()).toEqual(0); // This is wrong!  }); });

我们做了许多事，首先，创建了一个 helper 函数 add。还有一个变量 history。我们通过 by.repeater 使用 element.all 来得到 ElementArrayFinder。在我们的测试中，我们使用 count 方法来断言期望的长度。修改测试以便通过第二个测试。

除了 count 之外，ElementArrayFinder 还提供了许多方法，让我们使用 last 来获得最后一个元素的 ElementFinder ，修改测试。

it('should have a history', function() {
    add(1, 2);
    add(3, 4);

    expect(history.last().getText()).toContain('1 + 2');
    expect(history.first().getText()).toContain('foo'); // This is wrong! });

由于 Calculator 在最后报告最早的结果，最早的计算 (1 + 2) 会出现在最后。我们使用 Jasmine 的 toContain 断言来检查 "1 + 2" ，元素的文本内容中还包含了时间戳和计算结果。

修复这个测试，正确地期望在第一个历史记录中包含了 "3 + 4"。

ElementArrayFinder 还提供了方法 each, map, filter 和 reduce 等等模拟 JavaScript 的数组方法，详见： Read the API for more details.

本文转自念槐聚博客园博客，原文链接：http://www.cnblogs.com/haochuang/p/5817642.html，如需转载请自行联系原作者

AngularJS Protractor

1. 预备环境

2. 安装 protractor

3. 演练

Step 0 write a test

Setp 1 - interacting with elements

Step 2 - writeing multiple scenarios

Step 3 - changing the configuration

Step 4 - lists of elements

热门文章

最新文章

相关课程

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

AngularJS Protractor

1. 预备环境

2. 安装 protractor

3. 演练

Step 0 write a test

Setp 1 - interacting with elements

Step 2 - writeing multiple scenarios

Step 3 - changing the configuration

Step 4 - lists of elements

热门文章

最新文章

相关课程

相关电子书