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，接下来关闭了它自己。

七、常见错误

Failed: unknown error: angular is not defined

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

throw er; // Unhandled ‘error’ event

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