一、简介
最近需要学习angularjs，可是官方的网站在中国不是很友好，访问不是很方便。
还好找到了下面的一个更齐全点的官方示例angular-phonecat项目的教程网站PhoneCat 入门教程 App 导言
不过在真正进行这个示例项目之前，可以参考下Angular-Phonecat项目初探 ，对这个学习项目的构成初步了解以及了解一些环境搭建的问题，然后在正式开始入门教程学习。
这个示例是基于AngularJS1.3.0的，且还需要安装chrome和Firefox浏览器。
二、环境搭建
虽然示例中有详细的搭建步骤，不过在实际机器(win7)上搭建时还是有很多问题，简要说明下需要安装的环境
git
nodejs(内置npm工具)
jdk
然后如果需要设置代理的话（在公司中经常需要代理才能联网）还需要配置代理见windows环境下设置命令行CMD、Git和NPM代理
angular-phonecat学习项目
官方angular-phonecat学习项目在github上有step-0~step12个项目checkout点，分别对应着学习步骤0~步骤12。
也可以在github的该学习项目的托管地址在线查看两个学习步骤之间的详细修改https://github.com/angular/angular-phonecat/compare/step-1...step-2 。效果如下：
同时，也可以通过如下地址在线查看每个步骤(将地址的step-2换成任意的step-*)的运行效果：http://angular.github.io/angular-phonecat/step-2/app/
git下载源码
找一个目录下载angular-phonecat项目的step-0：
git clone --depth=14 https://github.com/angular/angular-phonecat.git
运行示例项目注意事项
注意事项一：
运行这个测试项目过程中，有一点需要注意，项目默认的http-server是0.6.1版本的，在最新的chrome浏览器上运行会出出现问题（不合法的字符），在按照导言的步骤，从官网clone了项目后，需要修改目录下的package.json文件，将 原来的
"http-server": "^0.6.1" 修改成更加新的"http-server": "^0.9.0", 然后在运行命令npm install
注意事项二：
运行项目进行karma单元测试时，会出现在新版本的Firefox上闪退，并在命令行中出现"fix: invalid characters in the headers on Node"的提示信息。这是karma的一个bug，参考fix: invalid characters in the headers on Node 5.6.0
解决方法是，更新karma到0.13.0和karma-firefox-launcher到0.1.7。
以下是我修改后package.json文件
"devDependencies": {
"karma": "^0.13.0",
"karma-chrome-launcher": "^0.2.3",
"karma-firefox-launcher": "^0.1.7",
"karma-jasmine": "~0.3.0",
"protractor": "^3.2.0",
"http-server": "^0.9.0",
"tmp": "0.0.23",
"bower": "^1.7.1",
"shelljs": "^0.6.0"
}注意事项三：
运行protractor端对端自动测试时，需要使用本地的Selenium服务器来控制浏览器，而Selenium服务器是通过Java虚拟机运行的，因此在运行之前需要检查Java Development Kit (JDK) 是否已经安装。检查命令是通过命令行界面输入：
java -version
如果没有安装JDK，在运行protractor时会提示Error: listen EACCES 0.0.0.0:63386 at Object.exports._errnoException
注意事项四：
会提示一个gyp的Err，类似如下：
c:\Users\dhb\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\src\win
_delay_load_hook.c(16): fatal error C1083: 无法打开括文件:“windows.h”: No such file or directory [F:\work\evcp-html\node_modules\utf-8-validate\build\binding.sln]
gyp ERR! build error
gyp ERR! stack Error: `C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe` failed with exit code: 1
gyp ERR! stack at ChildProcess.onExit (C:\Users\dhb\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\build.js:276:23)出现这个通常需要安装python并且配置python环境变量，以及安装.net framwork sdk。
好像可以直接在当前项目的目录下安装node-gyp来规避。
npm install node-gyp --save-dev--save-dev参数可以将node-gyp软件写进package.json依赖配置文件中。
三、单元测试套件karma-jasmine
Karma 是Google 开源的一个基于Node.js 的 JavaScript 测试执行过程管理工具。Karma 项目主页 http://karma-runner.github.io/0.13/index.html。Karma免去了构建测试测试配置方面的负担，这样可以让开发者将主要精力放在构建核心应用逻辑上面。
Karma支持多种测试框架，默认是Jasmine，Jasmine是一个用于测试JavaScript代码的行为驱动开发框架。
Jasmine的官方文档参考：Jasmine Behavior-Driven JavaScript Documentation 上面有很一个很详细的测试示例。
一个简单的karma-Jasmine安装教程可以参考自动化测试之karma和jasmine
四、自动化端对端测试框架protractor
单元测试工具Karma和jasmine可以测试控制器和其他由JavaScript写的组件, 但不能方便测试DOM操作和我们的程序进行功能测试。此时，就需要使用protractor端对端测试套件。protractor是自动化集成测试框架，基本信息见 Protractor入门介绍
官方网站地址：http://www.protractortest.org/ 和github https://github.com/angular/protractor
注：不知道是不是protrator官网是Google的原因，官网打不开，因此相应的文档可以参考Github上的Doc文档：https://github.com/angular/protractor/tree/master/docs
Protractor是一个又AngularJS团队编写的端对端测试工具，它是一个对 webdriverJS的封装，同时Jasmine在这里被指定用来测试。
什么是WebDriverJS？首先就要说到webDriver，或者是selenium，它会自动操作你的浏览器，因此是用于自动化测试的绝佳工具。无论你在测试你的应用时做了些什么，如导航到一个页面，点击了一个按钮，在一个输入框中写了一些文字，提交了一个表单等等，Selenium都可以替你自动完成这些事。
之所以叫做端对端e2e，因为含有浏览器客户端和Selenium server的服务器端，两者之间通过JSON wire protocol进行交流。对于不同语言如ruby，Python等对这个JSON wire protocol进行封装就叫做对该语言的绑定，其中对于JavaScript的绑定的项目就叫做 WebDriverJS。
来源：oschina
链接：https://my.oschina.net/u/658505/blog/664264