web-dev-qa-db-ja.com

BrowserstackAutomateで分度器テストを実行する

AngularJSアプリを開発していて、Protractorでエンドツーエンドのテストを実行したいと考えています。 Browserstackで利用できる一連のテストブラウザーを利用して、ローカルのSeleniumサーバーではなくBrowserstackAutomateでテストを実行したいと思います。

これらのテストを実行するようにシステムを設定するにはどうすればよいですか？

angularjsseleniumprotractorbrowserstack
21
Niko Nyman

バージョン3.0. 以降の分度器は、BrowserStackに 組み込みサポート を追加しました。

BrowserStackでテストを起動するには、conf.jsに次の2つのパラメーターを追加するだけです。

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

さまざまなブラウザとOSの組み合わせで並列でテストを実行する場合は、以下に示すように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. コードジェネレーター -さまざまなブラウザーとOSの組み合わせ、特にモバイルデバイスでテストする機能を構成するのに役立ちます。

  2. サンプル Githubプロジェクト for Protractor-BrowserStack-これはあなたが始めるのに役立つはずです。

13
Umang Sardesai

注：これらの手順は、v3.0より古いバージョンの分度器にのみ関連します。 Protractor 3.0には、Browserstackのサポートが組み込まれています。

前提条件

node および npm がインストールされている必要があります。ノードのバージョンをnode --versionでチェックして、v0.10.0より大きいことを確認します。

準備はいいですか？

1.分度器をインストールする

Npmを使用して、次の方法で分度器をグローバルにインストールします。

npm install -g protractor

エラーが発生した場合は、上記のコマンドをSudoとして実行する必要がある場合があります。

これがより詳細な Protractorのインストールと使用に関するチュートリアル です。

2. Browserstack SeleniumWebドライバーをインストールします

編集：@ elgaluはコメントでこのステップは必要ないと指摘しました。どうやら、BrowserStackLocalトンネル（手順4で設定）で十分です。

node.jsを設定するためのBrowserstackの指示 に従って、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']
}

ユーザー名と秘密鍵をBrowserstackAutomateページで指定されたものに変更します。 Browserstackにログインしている場合、node.jsの設定手順では、例でユーザーとキーを置き換えており、そこからJavaScriptをコピーして貼り付けることができます。

同じページには、さまざまなテストブラウザ設定のコードを生成するためのツールもあります。

4. BrowserStackLocalをダウンロードして実行します

BrowserStackLocalバイナリを node.js指示ページ からダウンロードします。

以下のコマンドに次の変更を加え、バイナリを実行して、テストに必要なBrowserstackトンネルを開きます。

  • コマンドで秘密鍵を変更します。繰り返しになりますが、Browserstackにログインしている場合、node.jsガイドではyour_secret_keyが自動的に置き換えられます。

  • ローカルホストでAngularJSファイルをホストしているポートと一致するようにポート番号を変更します。この例では、ポート3000を使用しています。

    ./BrowserStackLocal your_secret_key localhost,3000,0

5.テストを実行する

テストの準備がすべて整ったら、テストを実行します。

protractor protractor.conf.js

Browserstack Automate でテストの実行を見ることができ、テストブラウザの更新中のライブスクリーンショットを見ることができます。

44
Niko Nyman

このためのブログ投稿とオープンソースモジュールを作成しました。

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

wt-分度器-ボイラープレートwt-分度器-ランナーwt-分度器-utils

2
Younes

Hello！ 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);
      }

  };
2
Bruno Soko