一、简介
最近需要学习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。