我正在开发一个 AngularJS 应用程序，并希望使用 Protractor 进行端到端测试。我想从 Browserstack 提供的测试浏览器套件中受益，并在 Browserstack Automate 而不是本地 Selenium 服务器上运行测试。
如何设置系统来运行这些测试？
问问题
12582 次
4 回答
44
注意：这些说明仅适用于低于 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 网络驱动
编辑： @elgalu 在评论中指出这一步是不必要的。显然 BrowserStackLocal 隧道（在步骤 4 中设置）就足够了。
按照Browserstack 设置 node.js 的说明，安装 seleniun Web 驱动程序：
npm install -g browserstack-webdriver
3.设置量角器配置
创建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上观看测试运行，甚至可以查看测试浏览器的更新实时屏幕截图。
于 2014-08-27T22:52:52.853 回答
15
Protractor 从3.0.0 版开始添加了对 BrowserStack 的内置支持。
您只需在您的文件中添加以下两个参数conf.js即可在 BrowserStack 上启动测试：
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'
}
]
};
一些有用的链接：
于 2016-07-03T07:38:35.117 回答
2
你好！要仅针对 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);
}
};
于 2015-04-27T15:38:04.173 回答
2
我们刚刚为此写了一篇博文和开源模块。
wt-protractor-boilerplate wt-protractor-runner wt-protractor-utils
于 2015-05-09T11:05:29.733 回答