Protractor-and-selenium-server
分度器-分度器とSeleniumサーバー
前述のように、Protractorは、AngularおよびAngularJSアプリケーション向けのオープンソースのエンドツーエンドのテストフレームワークです。 Node.jsプログラムです。 一方、Seleniumは、Selenium Server、WebDriver API、およびWebDriverブラウザードライバーを含むブラウザー自動化フレームワークです。
セレンと分度器
ProtractorとSeleniumの組み合わせについて話す場合、ProtractorはSeleniumサーバーと連携して、自動化されたテストインフラストラクチャを提供できます。 インフラストラクチャは、ブラウザまたはモバイルデバイスで実行されている角度のあるアプリケーションとユーザーの対話をシミュレートできます。 次の図に示すように、ProtractorとSeleniumの組み合わせは、テスト、サーバー、ブラウザーの3つのパーティションに分割できます-
Selenium WebDriverプロセス
上記の図で見たように、Selenium WebDriverを使用したテストには、次の3つのプロセスが含まれます-
- テストスクリプト
- サーバー
- ブラウザ
このセクションでは、これら3つのプロセス間の通信について説明します。
テストスクリプトとサーバー間の通信
最初の2つのプロセス-テストスクリプトとサーバー間の通信は、Selenium Serverの動作に依存します。 つまり、Seleniumサーバーの実行方法は、テストスクリプトとサーバー間の通信プロセスに形を与えると言えます。
Seleniumサーバーは、スタンドアロンのSeleniumサーバー(selenium-server-standalone.jar)としてマシン上でローカルに実行することも、サービス(Sauce Labs)を介してリモートで実行することもできます。 スタンドアロンのSeleniumサーバーの場合、Node.jsとseleniumサーバーの間でhttp通信が行われます。
サーバーとブラウザー間の通信
サーバーがテストスクリプトから同じものを解釈した後、ブラウザーにコマンドを転送する責任があることはわかっています。 そのため、サーバーとブラウザにも通信メディアが必要であり、ここでは JSON WebDriver Wire Protocol を使用して通信を行います。 コマンドを解釈するために使用されるブラウザードライバーで拡張されたブラウザー。
Selenium WebDriverプロセスとその通信に関する上記の概念は、次の図の助けを借りて理解することができます-
Protractorでの作業中、最初のプロセスであるテストスクリプトはNode.jsを使用して実行されますが、ブラウザーでアクションを実行する前に、テスト対象のアプリケーションが安定していることを確認するための追加コマンドを送信します。
Selenium Serverのセットアップ
Selenium Serverは、テストスクリプトとブラウザードライバーの間ではプロキシサーバーのように動作します。 基本的に、コマンドをテストスクリプトからWebDriverに転送し、WebDriverからの応答をテストスクリプトに返します。 テストスクリプトの conf.js ファイルに含まれているSeleniumサーバーのセットアップには、次のオプションがあります-
スタンドアロンSeleniumサーバー
ローカルマシンでサーバーを実行する場合は、スタンドアロンのSeleniumサーバーをインストールする必要があります。 スタンドアロンのSeleniumサーバーをインストールするための前提条件は、JDK(Java Development Kit)です。 ローカルマシンにJDKをインストールする必要があります。 コマンドラインから次のコマンドを実行することで確認できます-
java -version
現在、手動で、またはテストスクリプトからSelenium Serverをインストールして起動するオプションがあります。
Seleniumサーバーを手動でインストールして起動する
Seleniumサーバーを手動でインストールして起動するには、Protractorに付属のWebDriver-Managerコマンドラインツールを使用する必要があります。 Seleniumサーバーをインストールして起動する手順は次のとおりです-
- ステップ1 *-最初のステップは、SeleniumサーバーとChromeDriverをインストールすることです。 それは次のコマンドを実行する助けを借りて行うことができます-
webdriver-manager update
- ステップ2 *-次に、サーバーを起動する必要があります。 それは次のコマンドを実行する助けを借りて行うことができます-
webdriver-manager start
ステップ3 *-最後に、設定ファイルのseleniumAddressを実行中のサーバーのアドレスに設定する必要があります。 デフォルトのアドレスは *http://localhost:4444/wd/hub です。
テストスクリプトからのSeleniumサーバーの起動
テストスクリプトからSeleniumサーバーを起動するには、設定ファイルで次のオプションを設定する必要があります-
- * jarファイルの場所*-seleniumServerJarを設定して、構成ファイルでスタンドアロンSeleniumサーバーのjarファイルの場所を設定する必要があります。
- ポートの指定-スタンドアロンのSelenium Serverの起動に使用するポートも指定する必要があります。 seleniumPortを設定することにより、構成ファイルで指定できます。 デフォルトのポートは4444です。
- コマンドラインオプションの配列-サーバーに渡すコマンドラインオプションの配列も設定する必要があります。 seleniumArgsを設定することにより、構成ファイルで指定できます。 コマンドの配列の完全なリストが必要な場合は、*-help *フラグを使用してサーバーを起動します。
リモートSelenium Serverの使用
テストを実行する別のオプションは、Seleniumサーバーをリモートで使用することです。 サーバーをリモートで使用するための前提条件は、サーバーをホストするサービスを持つアカウントが必要であることです。 分度器での作業中に、サーバーをホストする次のサービスの組み込みサポートがあります-
TestObject
TestObjectをリモートSelenium Serverとして使用するには、TestObjectUser(TestObjectアカウントのユーザー名)およびtestobjectKey(TestObjectアカウントのAPIキー)を設定する必要があります。
BrowserStack
BrowserStackをリモートSelenium Serverとして使用するには、BrowserStackUser、BrowserStackアカウントのユーザー名、およびbrowserstackKey、BrowserStackアカウントのAPIキーを設定する必要があります。
ソースラボ
Sauce LabsをリモートSelenium Serverとして使用するには、sauce Labsアカウントのユーザー名であるsauceUserと、Sauce LabsアカウントのAPIキーであるSauceKeyを設定する必要があります。
コビトン
KobitonをリモートSelenium Serverとして使用するには、Kobitonアカウントのユーザー名であるkobitonUserと、KobitonアカウントのAPIキーであるkobitonKeyを設定する必要があります。
Selenium Serverを使用せずにブラウザードライバーに直接接続する
テストを実行するためのもう1つのオプションは、Seleniumサーバーを使用せずにブラウザードライバーに直接接続することです。 分度器は、Selenium Serverを使用せずに、設定ファイルでdirectConnect:trueを設定することにより、ChromeおよびFirefoxに対して直接テストできます。
ブラウザーのセットアップ
ブラウザーを構成およびセットアップする前に、どのブラウザーがProtractorでサポートされているかを知る必要があります。 以下は、分度器でサポートされているブラウザのリストです-
- ChromeDriver
- FirefoxDriver
- SafariDriver
- IEDriver
- Appium-iOS/Safari
- Appium-Android/Chrome
- セレンドロイド
- PhantomJS
ブラウザーの設定と構成については、ブラウザーのセットアップは構成ファイルの機能オブジェクト内で行われるため、Protractorの構成ファイルに移動する必要があります。
Chromeをセットアップする
Chromeブラウザを設定するには、機能オブジェクトを次のように設定する必要があります
capabilities: {
'browserName': 'chrome'
}
chromeOptionsにネストされているChrome固有のオプションを追加することもできます。その完全なリストはhttps://sites.google.com/a/chromium.org/chromedriver/capabilitiesで確認できます。
たとえば、右上にFPS-counterを追加する場合は、構成ファイルで次のように実行できます-
capabilities: {
'browserName': 'chrome',
'chromeOptions': {
'args': ['show-fps-counter=true']
}
},
Firefoxのセットアップ
Firefoxブラウザを設定するには、次のように機能オブジェクトを設定する必要があります-
capabilities: {
'browserName': 'firefox'
}
moz:firefoxOptionsオブジェクトにネストされているFirefox固有のオプションを追加することもできます。その完全なリストはhttps://github.com/mozilla/geckodriver#firefox-capabilitiesで確認できます。
たとえば、Firefoxでテストをセーフモードで実行する場合は、設定ファイルで次のように実行できます-
capabilities: {
'browserName': 'firefox',
'moz:firefoxOptions': {
'args': ['—safe-mode']
}
},
他のブラウザを設定する
ChromeまたはFirefox以外のブラウザをセットアップするには、https://docs.seleniumhq.org/download/から個別のバイナリをインストールする必要があります。
PhantonJSのセットアップ
実際、PhantomJSはクラッシュの問題があるためサポートされていません。 その代わりに、ヘッドレスChromeまたはヘッドレスFirefoxを使用することをお勧めします。 彼らは次のように設定することができます-
ヘッドレスChromeをセットアップするには、次のように-headlessフラグを指定してChromeを起動する必要があります-
capabilities: {
'browserName': 'chrome',
'chromeOptions': {
'args': [“--headless”, “--disable-gpu”, “--window-size=800,600”]
}
},
ヘッドレスFirefoxをセットアップするには、次のように –headless フラグを指定してFirefoxを起動する必要があります-
capabilities: {
'browserName': 'firefox',
'moz:firefoxOptions': {
'args': [“--headless”]
}
},
テスト用に複数のブラウザーをセットアップする
複数のブラウザに対してテストすることもできます。 このために、次のようにmultiCapabilities構成オプションを使用する必要があります-
multiCapabilities: [{
'browserName': 'chrome'
},{
'browserName': 'firefox'
}]
どのフレームワーク?
2つのBDD(動作駆動型開発)テストフレームワーク、JasmineとMochaがProtractorでサポートされています。 どちらのフレームワークもJavaScriptとNode.jsに基づいています。 テストの作成と管理に必要な構文、レポート、および足場は、これらのフレームワークによって提供されます。
次に、さまざまなフレームワークをインストールする方法を確認します-
ジャスミンフレームワーク
これは、分度器のデフォルトのテストフレームワークです。 Protractorをインストールすると、Jasmine 2.xバージョンがインストールされます。 個別にインストールする必要はありません。
Mochaフレームワーク
Mochaは、基本的にNode.jsで実行される別のJavaScriptテストフレームワークです。 テストフレームワークとしてMochaを使用するには、BDD(Behavior Driven Development)インターフェースとChaiアサーションをChai As Promiseedで使用する必要があります。 インストールは、次のコマンドの助けを借りて行うことができます-
npm install -g mocha
npm install chai
npm install chai-as-promised
ご覧のとおり、mochaのインストール中に-gオプションが使用されます。これは、-gオプションを使用してProtractorをグローバルにインストールしたためです。 インストール後、テストファイル内でChaiを要求して設定する必要があります。 それは次のように行うことができます-
var chai = require('chai');
var chaiAsPromised = require('chai-as-promised');
chai.use(chaiAsPromised);
var expect = chai.expect;
この後、私たちはそのように約束としてチャイを使用することができます-
expect(myElement.getText()).to.eventually.equal('some text');
ここで、フレームワーク「mocha」を追加して、フレームワークプロパティを設定ファイルのmochaに設定する必要があります。 モカの「レポーター」や「遅い」などのオプションは、次のように設定ファイルに追加できます-
mochaOpts: {
reporter: "spec", slow: 3000
}
キュウリフレームワーク
テストフレームワークとしてCucumberを使用するには、フレームワークオプション custom でProcutorと統合する必要があります。 インストールは、次のコマンドの助けを借りて行うことができます
npm install -g cucumber
npm install --save-dev protractor-cucumber-framework
ご覧のとおり、Cucumberのインストール中に-gオプションが使用されています。これは、Protractorをグローバルにインストールしたためです。 -gオプション付き。 次に、フレームワーク「custom」およびframeworkPath:「Protractor-cucumber-framework」をcucumberConf.jsという名前の構成ファイルに追加して、フレームワークプロパティを構成ファイルの custom に設定する必要があります。
以下に示すサンプルコードは、Protractorでキュウリ機能ファイルを実行するために使用できる基本的なcucumberConf.jsファイルです-
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
baseUrl: 'https://angularjs.org/',
capabilities: {
browserName:'Firefox'
},
framework: 'custom',
frameworkPath: require.resolve('protractor-cucumber-framework'),
specs: [
'./cucumber/*.feature'
],
//cucumber command line options
cucumberOpts: {
require: ['./cucumber/*.js'],
tags: [],
strict: true,
format: ["pretty"],
'dry-run': false,
compiler: []
},
onPrepare: function () {
browser.manage().window().maximize();
}
};