官网地址:http://www.protractortest.org/

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.

4. 参考资料

原文地址:http://www.protractortest.org/#/tutorial

摘自:http://www.cnblogs.com/haogj/p/4815673.html

AngularJS Protractor的更多相关文章

  1. angular 调试 js (分 karms protractor / test e2e unit )

    首页订阅 Protractor端到端的AngularJS测试框架教程 2014年01月18日 分类:教程, JavaScript, AngularJS Protractor是一个建立在WebDrive ...

  2. Protractor AngularJS测试框架教程

    Protractor是一个建立在WebDriverJS基础上的端到端(E2E)的AngularJS JavaScript Web应用程序测试框架.Protractor全自动化真实的模拟用户在真正的浏览 ...

  3. 使用Protractor进行AngularJS e2e测试案例

    环境: y@y:karma-t01$ protractor --version Version y@y:karma-t01$ node -v v4.2.2 y@y:karma-t01$ y@y:kar ...

  4. Angularjs学习---官方phonecat实例学习angularjs step0 step1

    接下来一系列的文章都是学习https://docs.angularjs.org/tutorial的笔记,主要学习的angular-phonecat项目的实现,来介绍angularjs的使用. 1.下载 ...

  5. AngularJS 配置和运行phonecat错误

    安装node.js 就按照入门上的步骤来就行了 第一步:下载安装node.js,并将程序路径添加到环境变量中PATH中 第二步:下载git版本控制软件 第三步:在git目录下点击git-bash.ex ...

  6. AngularJS介绍

    AngularJS介绍–AngularJS的前世今生 AngularJS是什么 在Web开发领域,我们一般使用HTML作为前端页面元素的声明式语言,使用CSS技术作为展示样式的描述语言,JavaScr ...

  7. AngularJs开发环境搭建

    1. 安装Sublime Text3 常用插件安装:AngularJs, Autoprefixer, BracketHighlighter,ConvertToUTF8,CSScomb,DocBlock ...

  8. 在Grunt task中集成Protractor

    Protractor是专为AngularJS应用程序编写的UI自动化测试框架.前端构建有很多构建工具,比如Grunt.Gulp等.一般我们会把这些构建工具作为集成集成的脚本执行工具.所以如果把Prot ...

  9. 使用protractor操作页面元素

    Protractor是为Angular JS应用量身打造的端到端测试框架.它可以真实的驱动浏览器,自动完成对web应用的测试.Protractor驱动浏览器使用的是WebDriver标准,所以使用起来 ...

随机推荐

  1. MySQL OnlineDDL

    参考资料: http://dev.mysql.com/doc/refman/5.6/en/innodb-create-index-overview.html http://www.mysqlperfo ...

  2. python logging 替代print 输出内容到控制台和重定向到文件

    转自:http://blog.csdn.net/z_johnny/article/details/50740528

  3. Window驱动开发

    驱动开发 参考文章: Windbg+Vmware驱动调试 http://blog.csdn.net/xuepiaosong/article/details/8236702 驱动调试攻略(WinDbg) ...

  4. ci中简单实用的权限管理

    实用的权限管理 对多数网站来说,使用完整的rbac权限管理杀鸡用牛刀绝对的吃力不讨好,因为我们只是简单分角色然后对角色进行管理行使其相对于的角色赋予的权限; 在实际的开发中用位运算来对权限进行验证是十 ...

  5. 7.进度条(ProgressBar)

    默认为圆形,类似加载的样子,如果想要设置为下载的样式,可以选择它的样式为横向. style="?android:attr/progressBarStyleHorizontal" 顺 ...

  6. 八大排序算法之六--交换排序—快速排序(Quick Sort)

    基本思想: 1)选择一个基准元素,通常选择第一个元素或者最后一个元素, 2)通过一趟排序讲待排序的记录分割成独立的两部分,其中一部分记录的元素值均比基准元素值小.另一部分记录的 元素值比基准值大. 3 ...

  7. PHP获取手机相关信息

    该PHP操作类实现获取手机号手机头信息,取UA,取得手机类型,判断是否是opera,判断是否是m3gate,取得HA,取得手机IP 代码如下: <?php /** * @desc 手机操作类 获 ...

  8. Linux文件描述符与打开文件之间的区别(转载)

    转载请说明出处:http://blog.csdn.net/cywosp/article/details/38965239   1. 概述     在Linux系统中一切皆可以看成是文件,文件又可分为: ...

  9. nginx配置SSL证书(使用startSSL申请到的免费证书)

    1. 在startSSL注册申请免费证书,此处不赘述,参考 http://www.freehao123.com/startssl-ssl/ 申请过程中会生成Private Key,将Private K ...

  10. ubuntu截屏

    按下键盘上的 PrintScreen 键保存全屏截图 按下 Alt+PrintScreen 快捷键截取当前窗口 按下 Shift+PrintScreen 快捷键截取任意矩形内容