在Browserstack Automate上运行Protractor测试

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身份运行上述命令.

这是一个更详细的安装和使用Protractor的教程.

2.安装Browserstack Selenium Web驱动程序

编辑: @elgalu在评论中指出这一步没有必要.显然,BrowserStackLocal隧道(在步骤4中设置)就足够了.

按照Browserstack关于设置node.js的说明,安装seleniun Web驱动程序:

npm install -g browserstack-webdriver

3.设置Protractor配置

创建一个protractor.conf.js文件(请参阅BrowserStack支持的功能文档):

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说明页面下载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

3.0.0版本的量角器为BrowserStack 增加了内置支持.

您只需在您的conf.jsBrowserStack上添加以下两个参数即可启动测试:

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

登录到您的帐户后,可以在此处找到您的用户名和自动密钥.

因此,假设您希望在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. 代码生成器 - 帮助您配置在不同的浏览器和操作系统组合(尤其是移动设备)上进行测试的功能.

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