Question

我正在开发一个AngularJS应用程序，并希望使用Protractor进行终端2端测试。我想从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 Web驱动程序

编辑： @elgalu在评论中指出此步骤不是必需的。显然，BrowserStackLocal隧道（在步骤4中设置）就足够了。

关注Browserstack's instructions for setting up node.js，安装seleniun网络驱动程序：

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'
    }
  ]
};

一些有用的链接：

Code Generator - 帮助您配置在不同的浏览器和操作系统组合（尤其是移动设备）上进行测试的功能。
Protractor-BrowserStack的示例Github project - 这可以帮助您入门。

Answer 3

您好！要仅针对Browserstack运行测试，您可能需要跳过Niko Nyman的第4步以及 conf.js 第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);
      }

  };

Answer 4

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

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

WT-量角器-样板 WT-量角器浇道 WT-量角器-utils的

在Browserstack Automate上运行Protractor测试

4 个答案: