Protractor

1
2
Protractor is an end-to-end test framework for AngularJS applications.
Protractor runs tests against your application running in a real browser, interacting with it as a user would.

是什么

功能

  • 模拟真实的用户操作行为
  • 针对AngularJS中的Element不需要做特殊的处理,普通HTML元素也同样支持
  • 智能等待,不需要为页面中的加载和同步显示做特殊的等待时间处理

安装

  • 安装NodeJDK
    • Protractor 3支持NodeJS v4以上
    • 使用NodeJS v0.12,需要使用Protractor 2
  • 安装Protractor: npm install -g protractor
    • 此命令会同时安装protractorwebdriver-manager
    • webdriver-manager:为于管理所有的webdriver
  • 安装webdriver: webdriver-manager update

    • 此命令会安装和更新webdriver,其它命令及用法

      1
      2
      3
      4
      5
      6
      Usage: webdriver-manager <command>
      Commands:
      update: install or update selected binaries
      start: start up the selenium server
      status: list the current available drivers
      clean: removes all downloaded driver files from the out_dir

End To End Testing

页面分析-Page Object

  • 页面地址: https://www.angularjs.org/
  • 功能

    1
    页面中的"The Basics"部分,在右侧的`Name`输入框中输入`Julie`后,下方原有的`Hello !`会变更为`Hello Julie!`
  • 元素分析

    • Name输入框
      • 元素页面源码:<input type="text" ng-model="yourName" placeholder="Enter a name here" class="ng-valid ng-touched ng-dirty ng-valid-parse ng-empty">,元素ng-model可直接使用Protractor的元素定位方法:element(by.model('yourName')),
    • 文本显示
      • 元素源码:<h1 class="ng-binding">Hello !</h1> ,元素class="ng-binding"可直接使用Protractor的元素定位方法:element(by.binding('yourName'))
  • Page Object设计: AngularHomepage.js

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    var AngularHomepage = function() {
    var nameInput = element(by.model('yourName'));
    var greeting = element(by.binding('yourName'));

    this.get = function() {
    browser.get('http://www.angularjs.org');
    };

    this.setName = function(name) {
    nameInput.sendKeys(name);
    };

    this.getGreeting = function() {
    return greeting.getText();
    };
    };
    module.exports = AngularHomepage;

测试代码:spec.js

1
2
3
4
5
6
7
8
9
10
11
12
var pageObject = require('../pageObject/AngularHomepage.js');

describe('angularjs homepage', function() {
it('should greet the named user', function() {
var angularHomepage = new pageObject();
angularHomepage.get();

angularHomepage.setName('Julie');

expect(angularHomepage.getGreeting()).toEqual('Hello Julie!');
});
});
  • pageObject: 加载Page Object
  • var angularHomepage = new pageObject();: 创建一个Page Object对象
  • angularHomepage.get();: 打问AngularHomepage首页,调用browser.get('http://www.angularjs.org');
  • angularHomepage.setName('Julie');: 设置nameInput值为Julie,调用nameInput.sendKeys(name);
  • expect(angularHomepage.getGreeting()).toEqual('Hello Julie!');: 测试greeting的值与Hello Julie!是否相等,相等则测试通过,不相等,则测试失败

启动webdriver

  • 启动webdriver: webdriver-manager start

    • 启动Selenium Server

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      seleniumProcess.pid: 49863
      11:24:51.400 INFO - Launching a standalone Selenium Server
      Setting system property webdriver.chrome.driver to /usr/local/lib/node_modules/protractor/selenium/chromedriver_2.21
      11:24:51.452 INFO - Java: Oracle Corporation 25.60-b23
      11:24:51.452 INFO - OS: Mac OS X 10.11.2 x86_64
      11:24:51.467 INFO - v2.52.0, with Core v2.52.0. Built from revision 4c2593c
      11:24:51.549 INFO - Driver provider org.openqa.selenium.ie.InternetExplorerDriver registration is skipped:
      registration capabilities Capabilities [{ensureCleanSession=true, browserName=internet explorer, version=, platform=WINDOWS}] does not match the current platform MAC
      11:24:51.550 INFO - Driver provider org.openqa.selenium.edge.EdgeDriver registration is skipped:
      registration capabilities Capabilities [{browserName=MicrosoftEdge, version=, platform=WINDOWS}] does not match the current platform MAC
      11:24:51.550 INFO - Driver class not found: com.opera.core.systems.OperaDriver
      11:24:51.550 INFO - Driver provider com.opera.core.systems.OperaDriver is not registered
      11:24:51.656 INFO - RemoteWebDriver instances should connect to: http://127.0.0.1:4444/wd/hub
      11:24:51.656 INFO - Selenium Server is up and running
    • 访问:http://127.0.0.1:4444/wd/hub,本地查看是否启动成功

执行Protractor

  • 执行Protractor: protractor conf.js
    • 执行过程中,会真实的把浏览器挂起,并显示真实的页面信息
    • 执行结束时,会自动把浏览器关闭,且webdriver日志会记录本次执行过程中的日志信息
  • Protractoc执行过程日志

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    [11:32:19] I/hosted - Using the selenium server at http://localhost:4444/wd/hub
    [11:32:19] I/launcher - Running 1 instances of WebDriver
    Started
    .


    1 spec, 0 failures
    Finished in 5.401 seconds
    [11:32:27] I/launcher - 0 instance(s) of WebDriver still running
    [11:32:27] I/launcher - firefox #01 passed
  • webdriver启动的Selenium Server中也会记录本次请求的相关日志

总结

  • 以上涉及的源码已提交到Git: https://github.com/aimer1124/protractorWithPageObject.git,便于查阅
  • Protractor支持ETE测试,特别是针对AngularJS的项目
  • Protractor的webdriver-managerwebdriver统一管理,减少测试人员在使用过程中针对webdriver的管理操作,将主要精力集中于ETE的测试

参考