在 Browserstack Automate 上运行 Protractor 测试

Question

我正在开发一个 AngularJS 应用程序，并希望使用 Protractor 进行端到端测试。我想从 Browserstack 提供的测试浏览器套件中受益，并在 Browserstack Automate 而不是本地 Selenium 服务器上运行测试。

如何设置系统来运行这些测试？

Answer 1

注意：这些说明仅适用于低于 v3.0 的 Protractor 版本。 Protractor 3.0 包含对 Browserstack 的内置支持。

---

先决条件

您需要安装 node 和 npm。使用 node --version 检查您的节点版本，确保它大于 v0.10.0。

准备好了吗？

1。安装量角器

使用 npm 全局安装 Protractor：

npm install -g protractor

如果遇到错误，您可能需要以 sudo 身份运行上述命令。

这里有更详细的tutorial for installing and using Protractor。

2。安装 Browserstack Selenium 网络驱动程序

编辑： @elgalu 在 cmets 中指出这一步是不必要的。显然 BrowserStackLocal 隧道（在步骤 4 中设置）就足够了。

按照Browserstack's instructions for setting up node.js，安装seleniun web驱动：

npm install -g browserstack-webdriver

3。设置量角器配置

创建一个 protractor.conf.js 文件（参见BrowserStack's supported capabilities 的文档）：

exports.config = {
  capabilities: {
    'browserstack.user' : 'my_user_name',
    'browserstack.key' : 'my_secret_key',

    // Needed for testing localhost
    'browserstack.local' : 'true',

    // Settings for the browser you want to test
    // (check docs for difference between `browser` and `browserName`
    'browser' : 'Chrome',
    'browser_version' : '36.0',
    'os' : 'OS X',
    'os_version' : 'Mavericks',
    'resolution' : '1024x768'
  },

  // Browserstack's selenium server address
  seleniumAddress: 'http://hub.browserstack.com/wd/hub',

  // Pattern for finding test spec files
  specs: ['test/**/*.spec.js']
}

将您的用户名和密钥更改为 Browserstack Automate 页面上给出的。如果您登录到 Browserstack，设置 node.js 的说明将在示例中替换您的用户和密钥，您可以从那里复制粘贴 javascript。

同一页面还有一个工具，用于为不同的测试浏览器设置生成代码。

4。下载并运行 BrowserStackLocal

从node.js instructions page 下载BrowserStackLocal 二进制文件。

对以下命令进行以下更改，并运行二进制文件以打开测试所需的 Browserstack 隧道。

• 在命令中更改您的密钥。同样，如果您已登录 Browserstack，your_secret_key 将在 node.js 指南中自动替换。

• 更改端口号以匹配您在 localhost 上托管 AngularJS 文件的端口。该示例使用端口 3000。

  ./BrowserStackLocal your_secret_key localhost,3000,0
  

5。运行测试

一切准备就绪，开始测试：

protractor protractor.conf.js

您可以在Browserstack Automate 上观看测试运行，甚至可以查看测试浏览器的更新实时屏幕截图。

Answer 2

从version 3.0.0 开始的量角器已为 BrowserStack 添加了inbuilt support。

您只需在 conf.js 中添加以下两个参数即可在 BrowserStack 上启动测试：

browserstackUser: '<username>'
browserstackKey: '<automate-key>'

您的用户名和自动密钥可以在您登录帐户后找到here。

因此，假设您希望在 Chrome 50 / OS X Yosemite 上运行测试，您的 conf.js 应该如下所示：

exports.config = {
  specs: ['spec.js'],

  browserstackUser: '<username>',
  browserstackKey: '<automate-key>',

  capabilities: {
    browserName: 'Chrome',
    browser_version: '50.0',
    os: 'OS X',
    os_version: 'Yosemite'
  },    
};

如果您希望在不同的浏览器和操作系统组合上并行运行测试，您可以使用multiCapabilities，如下所示：

exports.config = {
  specs: ['spec.js'],

  browserstackUser: '<username>',
  browserstackKey: '<automate-key>',

  multiCapabilities: [
    {
        browserName: 'Safari',
        browser_version: '8.0',
        os: 'OS X',
        os_version: 'Yosemite'
    },
    {
       browserName: 'Firefox',
       browser_version: '30.0',
       os: 'Windows',
       os_version: '7'
    },
    {
       browserName: 'iPhone',
       platform: 'MAC',
       device: 'iPhone 5S'
    }
  ]
};

一些有用的链接：

1. Code Generator - 帮助您配置功能以在不同的浏览器和操作系统组合（尤其是移动设备）上进行测试。

2. Protractor-BrowserStack 的示例 Github project - 这应该可以帮助您入门。

Answer 3

我们刚刚为此写了一篇博文和开源模块。

http://www.blog.wishtack.com/#!Cross-browser-testing-test-automation-with-Protractor-and-Browserstack/cuhk/554b3b5f0cf27313351f1163

wt-protractor-boilerplate wt-量角器-赛跑者 wt-protractor-utils

Answer 4

您好！要仅针对 Browserstack 运行测试，您可能需要跳过 Niko Nyman 答案中的 Step 4 以及您的 conf.js em> 你应该有类似我用过的东西（+ 报告），然后运行 ​​Step 5：

---

    var HtmlReporter = require('protractor-html-screenshot-reporter');
var reporter=new HtmlReporter({
    baseDirectory: './protractor-result', // a location to store screen shots.
    docTitle: 'Report Test Summary',
    docName:    'protractor-tests-report.html'
});

// An example configuration file.
exports.config = {
  // The address of a running selenium server.
  seleniumAddress: 'http://hub.browserstack.com/wd/hub',

  // Capabilities to be passed to the webdriver instance.
  capabilities: {
    'browserName': 'chrome',
    'version': '22.0',
    'browserstack.user' : 'user_name',
    'browserstack.key' : 'user_key',
    'browserstack.debug' : 'true'

  },

  // Spec patterns are relative to the current working directly when
  // protractor is called.
  specs: ['./specs/home_page_spec.js'],

  // Options to be passed to Jasmine-node.
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000
  },
 onPrepare: function() {
        jasmine.getEnv().addReporter(reporter);
      }

  };