分类
Javascript

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