AngularJS自动化测试之Protractor端到端测试

端到端测试

• 也可称之为黑盒测试。
• 测试的视角是：作为最终用户，对系统的底层实现一无所知。
• 适合测试页面上的用户交互，无需手动刷新页面，适合测试大型应用的功能。

 

测试框架

• Protractoris an end-to-end test framework for Angular andAngularJS applications.

• Protractor runs tests against your application running in a real browser, interacting withit as a user would.

 

Protractor

 

 

• It will start up a Selenium Server and will output a bunch of info logs.
• Your Protractor test will send requeststo this server to control a local browser. 
• Protractor tests are written using the syntax of your test framework, for example Jasmine, and the Protractor API.

 

 

环境搭建

 

• 安装NodeJS（JavaScript运行环境）
• 安装npm（JavaScript包管理工具）
• 安装Java    JDK （>= SE8）
• 安装Protractor（Anend to end test runner）

 

官网参考：

 

• http://www.protractortest.org/#/tutorial
• https://docs.angularjs.org/guide/e2e-testing

 

 

安装NodeJS，安装npm见此处。

安装Java JDK:

 

• 官网下载安装JDK（>=SE8）
• 环境变量设置，分别配置如下三个系统变量（如果变量已存在，直接编辑；否则，新建该变量）

 

 

1. JAVA_HOME设置变量值为  C:\Program Files\Java\jdk1.8.0（以实际安装目录为准）
2. PATH添加变量值  %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin
3. CLASSPATH设置变量值为    .;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar

 

环境验证：

 

安装Protractor：

 

• Usenpm toinstall Protractor globally with:  (npm install –g  protractor)

 

更新Protractor插件：

 

执行命令：webdriver-manager   update 

 

        可能需要翻墙代理： webdriver-manager  update  --proxy=http://127.0.0.1:64678

        

 

 

Now start up a server with: webdriver-manager   start

 

 

开始Protractor测试

 

• 下载测试项目Protractor   Demo：https://github.com/juliemr/protractor-demo

• 安装依赖包，在项目目录：npm  install

• 启动测试server： node   app/expressserver.js 

• 运行protractor测试：protractor   test/conf.js

至此，Protractor 测试完成。

 

 

Protractor-jasmine2-screenshot-reporter

 

此外还可以加载使用第三方插件protractor-jasmine2-screenshot-reporter 

 

修改test/conf.js文件：

 

// Tests for the calculator.

var HtmlScreenshotReporter = require('protractor-jasmine2-screenshot-reporter');

var reporter = new HtmlScreenshotReporter({
  dest: 'test/screenshots',
  filename: 'my-report.html'
});

exports.config = {
  directConnect: true,

  framework: 'jasmine2',

  specs: [
    'spec.js'
  ],

  capabilities: {
    'browserName': 'chrome'
  },
  
  // Setup the report before any tests start
  beforeLaunch: function() {
    return new Promise(function(resolve){
      reporter.beforeLaunch(resolve);
    });
  },

  // Assign the test reporter to each running instance
  onPrepare: function() {
    jasmine.getEnv().addReporter(reporter);
  },

  // Close the report after all tests finish
  afterLaunch: function(exitCode) {
    return new Promise(function(resolve){
      reporter.afterLaunch(resolve.bind(this, exitCode));
    });
  }
  
};

 

再次运行protractor：  protractor    test/conf.js

 

运行完毕，会在上面配置文件中配置的路径test/screentshots下生成my-report.html文件，如下：