Protractor E2E测试入门

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

一、为什么选用Protractor？

它有如下几个特点：

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

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

• 为了测试Angular应用

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

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

二、安装

• 安装NodeJS及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运行所需的谷歌歌浏览器驱动失败，请翻墙。