Protractor E2E 测试入门

Protractor 是一个为 Angular 和 AngularJS 应用程序而生的端对端的测试框架，Protractor 让用户就像在真实的浏览器中一样去交互并运行测试程序。

一、为什么选用 Protractor？

它有如下几个特点：

• 就像一个用户一样测试：

Protractor 是基于 WebDriverJS 的，WebDriverJs 让用户就像能使用原生事件和特定的浏览器驱动一样去跟应用交互。

• 为了测试 Angular 应用

Protractor 支持 Angular 特定的定位器策略，允许你测试 Angular 的专门的元素而不需要在你的测试部分进行任何安装。

• 自动等待
  你不需要为你的测试添加等待和休眠，一旦网页完成了待定任务，Protractor 就能自动执行下一步测试，所以你不必担心去等待你的测试和网页同步。

二、安装

• 安装 Node.JS 及 NPM
• 安装Java JDK （> = SE8）， 需要运行 selenium 服务器
• 安装 npm install -g protractor

这句命令会安装两个命令行工具，protractor 和 webdriver-manager，安装完后可以尝试运行 protractor --version 这条命令确保 protractor 是否安装成功。webdriver-manager 是一个辅助工具，能很轻松地获得 Selenium 服务器运行实例。

三、运行

• webdriver-manager update：通过该命令下载必要的二进制文件，要翻墙
• webdriver-manager start：通过该命令开启服务器
• 安装npm install -g protractor

这句命令会安装两个命令行工具，protractor 和 webdriver-manager，安装完后可以尝试运行protractor --version命令确保 protractor 是否安装成功。webdriver-manager 是一个辅助工具，能很轻松地获得 Selenium 服务器运行实例。

输完这句命令将会启动 Selenium 服务器，并且会输出一串信息日志，这个命令行窗口不要关闭，它专门给来启动服务器的，重新运行其他命令要重新打开一个命令行窗口，也可以通过按 ctrl + c 关闭服务器。你的 Protractor 会发送请求给你本地的浏览器。可以通过输入 http://localhost:4444/wd/hub 查看服务器的信息和状态

四、编写测试用例

// spec.js
describe('Protractor Demo App', function() {
  it('should have a title', function() {
    browser.waitForAngularEnabled(false);
    browser.get('http://riafan.com//');
    expect(browser.getTitle()).toContain('RIA 爱好者');
  });
});

describe 和 it 语法是来自 Jasmine 框架，browser 是通过 Protractor 全局创建的，用于浏览器级别的命令，例如用 browser.get 来导航某一网页。

五、配置

新建一个 conf.js 配置文件，并将下面代码复制到 conf.js 中：

// conf.js
exports.config = {
  framework: 'jasmine',
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['spec.js']
}

这个配置会告诉 Protractor 你的测试文件(specs)在哪里，哪儿去跟你的 Selenium 服务器(seleniumAddress)通信，它会使用所有默认配置，谷歌浏览器是默认浏览器。

要想设置多个浏览器，请使用 multiCapabilities。

// conf.js
exports.config = {
  framework: 'jasmine',
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['spec.js']，
  multiCapabilities: [{
    browserName: 'firefox'
  }, {
    browserName: 'chrome'
  }]
}

六、运行测试

新开一个命令行程序，现在通过这句命令运行测试：

protractor conf.js

你应该会看到谷歌浏览器被打开了，页面导航到了我的 Blog，接下来关闭了它自己。

七、常见错误

如果测试代码不是针对 Angular 应用，请加上browser.waitForAngularEnabled(false);

下载 protractor 运行所需的谷歌歌浏览器驱动失败，请翻墙。