メニュー

AngularJSアプリケーションのエンドツーエンドテスト用の分度器テストツール

protractor testing tool

問題を排除するために楽器を試してください

分度器とは何ですか？

分度器は、Webアプリケーションテスト用の自動化テストツールです。 Jasmine、Selenium Webdriver、Node.jsなどの強力なテクノロジーを組み合わせます。

分度器テストツールは、AngularJSアプリケーションを念頭に置いて設計されたエンドツーエンドのビヘイビア駆動テストフレームワークです。 Protractorは角度のないJSアプリケーションでは機能しないように聞こえるかもしれませんが、機能します。

AngularJSアプリケーションと非AngularJSアプリケーションの両方で同等に機能します。

お気軽に AngularJSシリーズのチュートリアル全体 。前のチュートリアルでは、 Angularバージョン間の違い 詳細に説明されました。

分度器テストチュートリアル

学習内容：

分度器とSeleniumWebDriver

分度器が従来のものと異なる点 Selenium WebDriver ？

これらの質問に答えるのに少し時間がかかります：

  • Webページが最終的にロードされる時期を正確に判断するのは困難ですか（すべての非同期要素の準備ができて処理されています）？
  • コードに待機とスリープを追加するのにうんざりしていませんか？
  • 角度のある要素を見つけるための面倒な作業を取り除きたいですか？
  • IDを変更して要素を見つけることに不満がありますか？
  • 独自のロケーターを作成しますか？
  • 最も単純なアサーションでも長いコードを書いていますか？
  • あなたはJavaScriptの愛好家/ファンですか？

これらの質問に「はい」と答えた場合は、 分度器 助けられる。

これはSeleniumWebdriverの上に構築されたラッパーであるため、Seleniumのすべての機能と多くの便利な追加機能を提供します。それは提供します：

特徴

それは提供します：

1）WaitForAngular

.swfファイルを開くにはどうすればよいですか

ドキュメントから：

「」 Angularがレンダリングを終了し、未処理の$ httpまたは$ timeout呼び出しがなくなるまで待ってから、続行するようにWebDriverに指示します。分度器は、すべてのWebDriverアクションの前にこのコマンドを自動的に適用することに注意してください。 「」

つまり、スクリプトに手動で待機を追加する必要はなく、ProtractorはWeb要素が読み込まれるのを自動的に待機してから、次の手順を実行します。

二） グローバル関数をエクスポートする機能があります 素子 、ロケーターを取り、ElementFinderを返します。このElementFinderには、click（）、getText（）、sendKeys（）などの一連のアクションメソッドがあります。これは、要素を操作してそこから情報を取得する方法の中核です。

このグローバル関数は、要素検索構文を減らすのに役立ちます。次のステートメントを見て、SeleniumWebDriverとProtractorの両方で要素を見つけます。

Selenium Webdriver ：

driver.findElement(By.cssSelector('css selector'));

分度器 ：

element(by.css('some-css'));

構文はコンパクトに見えますね。

3） Angular要素の検索に役立つ新しいロケーター戦略と機能は次のとおりです。 By.binding、By.repeater、By.textarea、By.model、WebElement.all、WebElement.evaluate 、など。

分度器はどのように私を助けることができますか？

次の顕著な特徴を見てください。

  • テストケースを書くための簡単な構文
  • SeleniumGridを使用して複数のブラウザーを一度に実行する機能
  • 角度固有のロケーター
  • Jasmine / Mochaなどのビヘイビア駆動開発のサポート
  • スリープ/待機を追加する必要はありません
  • Jenkins / Browser Stack / Gruntなどとの統合をサポートしました。
  • Angular JSWebサイトでの同期の問題への対処を取り除く
  • 複数のブラウザのサポート（Firefox、Chrome、Safari、Internet Explorer）
  • コードを変更することなく、モバイルブラウザで同じスクリプトを実行する機能

どのフレームワークを使用しますか？

箱から出してすぐに2つのビヘイビア駆動開発（BDD）テストフレームワークをサポートします。

  • ジャスミン： ジャスミン 分度器がインストールされている場合のデフォルトのテストフレームワークです。この記事ではジャスミンを使用します。
  • モカ： モカ Node.jsで実行されるJavaScriptテストフレームワークです。テストフレームワークとしてMochaを使用する場合は、分度器を使用して設定する必要があります。また、ビヘイビア駆動開発インターフェイスと、Chaiを約束したChaiアサーションを使用する必要があります（参照 このリンク 詳細については ）。

分度器をダウンロードして設定する方法

node.jsプログラムであるため、実行するにはnode.jsをインストールする必要があります。 Node.jsは、オペレーティングシステムを選択することにより、このURLからダウンロードできます。 Node.jsのダウンロード

node.jsを使用すると、 海抜分度器 パッケージ。これを使用して分度器をインストールできます。

node.jsがマシンにインストールされたので、コマンドプロンプト（cmd）を開き、以下のコマンドを押してグローバルにインストールします。

npm install -g protractor

‘-g’ このツールをグローバルにインストールするために使用されます。グローバルにインストールしたくない場合は削除してください。このコマンドは、デフォルトのセレンサーバーと一緒に分度器APIもインストールします。つまり、スタンドアロンサーバーを起動する必要はありません。

次に、SeleniumサーバーとChromeDriverをインストールする必要があります。 cmdで次のコマンド（分度器にも付属）を使用します。

webdriver-manager update

このフレームワークを使用して最初のテストケースを作成することから始める必要があるのはこれだけです。必要に応じて、IDE /エディターをインストールしてコードを記述できます。 Eclipse IDEは人気のあるものですが、考慮すべきいくつかのクールなエディターもあります。個人的には、分度器のコードを書くのに「Atom」エディターが好きです。

最初のテストケースを作成する準備はできましたか？

実行するには2つのファイルが必要です。

  • 構成ファイル
  • スペックファイル。

ザ・ 構成ファイル これは、Protractorにテストファイル（仕様）の場所/選択するブラウザー/使用するフレームワーク（Jasmine / Mocha）/ Seleniumブラウザーおよびその他の構成と通信する場所を指示するものです。構成ファイルで構成が定義されていない場合は、デフォルトが使用されます。

スペックファイルは、実際のテストコードを記述するファイルです。テスト機能フロー/アサーションはすべて、この特定のファイルに含まれます。テストケースの数に基づいて複数のスペックファイルが存在する場合がありますが、1つのスペックファイルだけで複数のスペックのテストスイート全体を実行できます。

テストケースの例：

次に、URLに移動してページタイトルを確認する簡単なテストケースを作成します。

手順は次のとおりです。

  • テストスイート用の新しいフォルダーを作成します。
  • ‘という名前の新しいファイルを作成します js 」。（任意の名前でかまいません）すべての仕様/構成ファイルの拡張子は「.js」になります。
  • ‘として指定された名前で新しいファイルを作成します js '。
//CheckTitleSpec.js describe('Protractor Demo', function() { it('to check the page title', function() { browser.ignoreSynchronization = true; browser.get('https://www.softwaretestinghelp.com/'); browser.driver.getTitle().then(function(pageTitle) { expect(pageTitle).toEqual('Software Testing Help - A Must Visit Software Testing Portal'); }); }); });

これで、コーディングから始める準備が整いました。以下の「testCaseNameSpec.js」ファイルのコードを参照してください。

構成ファイルは次のようになります。

// conf.js exports.config = { framework: 'jasmine', capabilities: { browserName: 'chrome', }, specs: ('simpleTestSpec.js') };

それでは、これら2つのファイルを分割して、どのように機能するかを見てみましょう。

＃1） Spec.js

  • すべてのブラウザレベルのコマンドは、「 ブラウザ ’、分度器によって作成されたグローバル。
  • Jasmineフレームワークに従っているため、「 説明 ' および「 それ ’はジャスミンの構文です。説明には、テストケースのフロー全体が含まれますが、「それ」には、テストステップ/シナリオなどの一部が含まれる場合があります。複数の「 それ 必要に応じて、プログラム内の ’ブロック。
  • browser.get は、ブラウザで特定のURLをヒットするように分度器に指示する単純なSelenium構文です。
  • ヒットしようとしているWebサイトは角度のないWebサイトであるため、 ignoreSynchronization ‘へのタグ true ’を4行目に表示します。このタグをtrueにしないと、「Angularがページに見つかりませんでした」というエラーでテストが失敗します。この背後にある理由は、Protractorがデフォルトで角度のあるWebサイトで動作することを想定しているためです。また、Protractorを使用して非角度のWebサイトを検証する場合は、これをProtractorに明示的に伝える必要があります。ただし、角度のあるWebサイトで作業している場合、ProtractorはデフォルトでWebページを角度があると見なすため、このステートメントを使用する必要はありません。
  • 「expect」は、Webページのタイトルをいくつかの事前定義されたデータと等しくするために比較しているアサーションに他なりません。より多くのアサーションについて詳しく説明します。

＃二） conf.js

  • 前に説明したように、構成ファイルは分度器にコアの詳細を伝えるファイルです。コードに表示されているように、フレームワークは「ジャスミン」です。
  • 機能セクション内で、ブラウザ構成が設定されます。 Firefox / chromeなどのブラウザ名を定義できます。また、ブラウザの最大インスタンスを設定して、使用可能なさまざまなブラウザウィンドウで一度に複数のテストケースを実行できるようにすることもできます。
  • の中に ' スペック ’セクションでは、仕様ファイルのパス、つまり構成ファイルに対して仕様ファイルが配置されている場所を正確に示します。
  • また、reporting / onPrepare関数/ thresholdtimeoutなど、構成ファイルに添付できる他の多くの優れた機能もあります。このチュートリアルでは、これらのいくつかについて説明します。

テストケースを実行する方法は？

コードを記述しました。必要なのは、コードを実行するための少しのプッシュだけです。 cmdで次のコマンドを押して、プログラムを実行します。

protractor conf.js

このコマンドは、Seleniumサーバーの実行を開始し、続いてテストスクリプトを実行します。ログはcmd自体で表示できます。または、必要に応じて、ログを.txtファイルにキャプチャすることもできます（ 追加>> textFileName.txt 上記のコマンドの後、ログは構成ファイルと同じディレクトリにあるテキストファイルに保存されます）。

クロームウィンドウが開きます。 SoftwareTestingHelp.com ウェブサイトを開く必要があります。コードを実行すると、出力は「1仕様、0失敗」になります。これが意味するのは、1つの「it」ブロックがあり、0回の失敗で実行されたことです。

ここで、AngularJS上に構築されたWebページでいくつかのアクションを実行している以下のスペックファイルを検討してください。これにより、Angular Webサイトのテストに関して分度器がSeleniumを使用することがわかります。

jarファイルをどのように開きますか
// spec.js describe('Code to interact with Angular JS elements', function() { it('should multiply two integers', function() { browser.get('http://juliemr.github.io/protractor-demo/'); element(by.model('first')).sendKeys(5); element(by.model('second')).sendKeys(5); element(by.model('operator')).click(); element(by.xpath('.//option(@value= 'MULTIPLICATION')')).click(); element(by.id('gobutton')).click(); expect(element(by.binding('latest')) .getText()).toEqual('10'); //Incorrect expectation expect(element(by.binding('latest')) .getText()).toEqual('25'); //Correct expectation }); });

この仕様を実行するために同じconf.jsを使用することもできます。必ず仕様ファイル名を更新してください。

さて、このスペックファイルでは、分度器が正確に何ができるかを確認できるように、Angular JSWebサイトで遊んでいます。

以前と同じようにこのファイルを実行すると、2つのテキストボックス、ドロップダウン、ボタン、およびその他のいくつかのWeb要素を含むWebページが開きます。ご想像のとおり、電卓のページです。入力として2つの整数を指定し、乗算演算を実行しています。

すでに説明したように、このツールを使用する最大の利点の1つは、Angular要素を見つける独自の手法です。 「by.model」 要素を見つけるそのような方法の1つです。 ‘.sendKeys（）’ テキストボックスに値を送信するための通常のSelenium構文であり、 '。クリック（）' ボタンをクリックするために使用されます。

前に説明したように、 「期待する」 はアサーションであり、分度器に数値の乗算の結果を取得し、それを「10」および「25」と順番に比較するように要求しています。 Simple Mathematicsによると、出力は「25」である必要があるため、最初のアサーションは失敗し、2番目はパスします。

その結果、「 1仕様、1失敗 コードを実行すると、ログに ’が表示されます。これは予想どおりです。

分度器のいくつかのよりクールな機能

＃1）アサーションとアノテーション

アサーションは自動化スクリプトの重要な部分です。アノテーションは、クラス内の特定のメソッドに特別な意味を持つように効果的にタグ付けする場合にも非常に役立ちます。

さまざまなアサーションとアノテーションを提供し、それに加えて、独自のアサーションを作成する機能も提供します。

以下の例を考えてみましょう。

describe('Code to understand assertions/annotations', function() { beforeEach(function() { browser.get('http://juliemr.github.io/protractor-demo/'); }); afterEach(function() { browser.get('https://www.madewithangular.com/#/'); }); var multiplyNumbers = function(a, b) { element(by.model('first')).sendKeys(a); element(by.model('second')).sendKeys(b); element(by.model('operator')).click(); element(by.id('gobutton')).click(); }; it('should multiply two integers', function() { multiplyNumbers(2, 2); expect(element.all(by.repeater('result in memory')).count()).toEqual(2); multiplyNumbers(3, 3); expect(element.all(by.repeater('result in memory')).count()).toEqual(2); }); });

上記の例では、2つのアノテーションを使用しています。 「beforeEach」 そして 「afterEach」 。これらのアノテーションは、TestNG（従来のSelenium）でも使用できます。これらのアノテーションは、特定のコードが残りのコードの実行の前後にそれぞれ実行されることを保証します。

それで、これがコードの実行がどのように行われるかです、

  1. 分度器は「 beforeEach ’が最初にブロックされ、‘にヒットします http://juliemr.github.io/protractor-demo/ ’ブラウザのURL。
  2. これで、フローは「it」ブロックに移動し、「 multiplyNumbers ’ が呼び出され、その中で指定されたアクションが実行され、関数が呼び出された場所にコントロールが返されます。
  3. 最後に、アサーションがその役割を果たします。これで、複数の要素に同時に取り組む場合は、このツールの「element.all」機能を使用できます。指定されたロケーター（この場合はby.repeater）で使用可能なすべての要素を識別します。識別された要素をどのように処理するかはあなた次第です。この場合、計算履歴を特定の数値と比較しています。
  4. 最初のアサーションでは、計算を1回だけ実行したにもかかわらず、計算履歴カウントを「2」と比較しているため、アサーションは失敗します。ただし、2番目のアサーションは、2番目の計算の後、履歴カウントが「2」になるため合格します。

アサーションには、さらに多くの種類があります。その一部を以下に示します。

a）Web要素からテキストを取得し、それを特定の値と比較します。

element(by.locator('someLocator')).getText(text) .then(function() { expect(text).toEqual('someData'); expect(text).not.toEqual('someData'); expect(text).toContain('someOtherData'); });

b）Web要素がページに表示されているかどうかを確認します。

expect(browser.driver.findElement(by.locator(someLocator)) .isDisplayed()).toBe(true);

＃2）複数のブラウザ/ウィンドウ/タブの処理

ブラウザの取り扱いに関しては、複数の場合があります。これらのケースのいくつかを以下に示します。

a）リンクをクリックすると新しいタブが開きます

リンクをクリックすると、新しいタブが開き、残りのアクションを新しく開いたウィンドウで実行する必要がある場合があります。この場合、新しいタブが開くポイントまでコードを記述するときは、次の方法を使用してウィンドウハンドラーを実装する必要があります。

//Get all of the opened windows and store the count in handles browser.getAllWindowHandles().then(function(handles) { //Now switch the control to the newly opened window browser.switchTo().window(handles(1)).then(function() { //Write the code which needs to be executed in the new tab }); });

最初に使用可能なすべてのウィンドウの数を取得し、次にインデックスを使用してウィンドウ間の制御を切り替えます。新しいウィンドウを開始した元のウィンドウのインデックスは0になりますが、後続のウィンドウのインデックスは増加します。

b）新しいセッションでまったく新しいブラウザを開く

ブラウザでいくつかのアクションを実行する必要があり、ブラウザの別のセッションでさらにアクションを実行する必要がある場合は、 forkNewDriverInstance 。この場合、次の方法で新しいブラウザ名を使用して新しいブラウザインスタンスを作成します。

describe('Code to understand assertions/annotations', function() { //Create a new browser instance var newBrowser = browser.forkNewDriverInstance(); it('should should open multiple browsers instances', function() { //Opens a URL in the 1st browser instance browser.get('http://juliemr.github.io/protractor-demo/'); //Opens a URL in the 2nd browser instance newBrowser.get('https://www.madewithangular.com/#/'); newBrowser.driver.quit(); }); });

c）複数のブラウザでテストケースを実行する：

一度に2つのブラウザーでテストケースを実行することは、構成ファイルで実行できることです。以下のコードを構成ファイルに追加するだけです。

この構成ファイルを実行するとすぐに、FirefoxとChromeの両方で同時に実行されているテストが表示され、実行ログがコマンドプロンプトに個別に表示されます。

// conf.js exports.config = { framework: 'jasmine', specs: ('SomeSpec.js'), multiCapabilities: ({ browserName: 'firefox' }, { browserName: 'chrome' }) }

＃3）ページオブジェクトを使用してフレームワークをさらに改善する

このツールはそれ自体で優れていますが、ページオブジェクトモデル（POM）と組み合わせると無敵になります。その欠点のほとんど（もしあれば）は、ページオブジェクトモデルで克服されます。さらに、POMは、プロジェクトをより構造化された方法で維持するのにも役立ちます。

POMが何であるかわからなくても、心配はいりません。 POMは、ページに基づいてテストケースを分離する方法です。

この例を見てください：

ショッピングサイトがあります。テストケースは、製品を選択し、カートに追加してから購入することです。

現在、このためのテストスクリプトコードを管理する方法は2つあります。

  1. ロジックが記述されているのと同じページにすべてのロケーターを含む単純なテストケースを記述します。
  2. テストケースのすべてのフロー、ロジックをスペックファイルに書き込み、ロケーターとテストデータをさまざまなファイルに分離します。各Webページには、同等の.jsページファイルがあります。このようにして、コードは構造化され、同じロケーターを必要とする他のテストケースがある場合は、これらのロケーターを再度作成する必要はありません。このロケーターファイルをインポートして、必要に応じて使用してください。

テストケースを維持することは、本当に苦痛になる可能性があります。 POMを使用する場合、コードははるかに構造化された方法になります。

0と1の間の乱数ジェネレータ

ページオブジェクトモデルの使用例を次に示します。

ページオブジェクトモデル

これは、上記のスナップショットのフローです。

  1. ラップトップを購入するテストケースがあります。フローとロジックのコードはpurchaseLaptopSpec.jsにあります。
  2. ラップトップを購入するために遭遇するすべてのページには、適切なタイトルの1つの「.js」ファイルがあります。ラップトップの購入に使用する必要のあるすべての要素、それらのロケーターは、それぞれのページファイル内にあります。
  3. このテストケースに必要なデータは、「。json」形式またはExcel形式のいずれかでTestDataフォルダーに保存できます。
  4. ページとロケーターの使用が完了したら、これらのファイルをスペックファイルにインポートして、ロケーター/テストデータを使用するだけで、テストケースの設定が完了します。

＃4）レポート

NPM（Node Package Manager）は、各テストステップのスクリーンショットをキャプチャできるさまざまなレポートパッケージを提供します。また、テストの実行が完了すると、HTMLレポートが生成されます。コマンドプロンプトを開き、以下のコマンドを押して、これらのパッケージをインストールするだけです。

npm install -g protractor-jasmine2-html-reporter npm install protractor-jasmine2-screenshot-reporter --save-dev

これらのパッケージがインストールされると、構成ファイルを実行するたびに、テストケースのすべてのスクリーンショットが保存され、テストケースの合格/不合格の結果を表示するHTMLレポートが生成されます。

＃5）Git / Jenkins / Browserstack / Gruntなどの他の強力なツールと統合する

テストケースをさらに改善するために、市場には複数のツールがあります。 Git / Jenkins / BrowserStack / Gruntは、通常の分度器テストスクリプトに大きな価値を追加するツールです。そして最良の部分は、分度器をこれらのツールのいずれかと統合するためにスペックファイルに触れる必要がないことです。それはあなたの設定ファイルであり、あなたのためにこれらすべてのものを取ります。

行く 非常に強力なバージョン管理ツールです。複数の開発者が関与している場合は、コードをGitに保持することが常にベストプラクティスです。

ジェンキンス は継続的インテグレーションツールであり、テストケースをスケジュールし、必要に応じて実行できます。分度器スクリプトは、Jenkinsで構成することもできます。 Jenkinsでテストケースを実行するのに最適な方法は、非常に高速であり、一度に複数のテストケースを実行できることです。

BrowserStack はクロスブラウザテストツールであり、さまざまなブラウザ間でアプリケーションをテストするためにも使用できます。設定ファイルにbrowserStack資格情報を追加することで、分度器と統合することもできます。

接地 JavaScriptタスクランナーです。それはあなたのためにいくつかのタスクを実行する機能を提供します。その素晴らしさは、4000を超えるタスクがあり、要件に応じてさらに多くのタスクを作成できることです。以下は、Gruntを使用できる重要な日常使用タスクの一部です。

  1. コーディングのベストプラクティスをすべてリストアップし、これらのいずれかに違反した場合はすぐに通知してください。
  2. 実行時に複数のスペックファイルを作成します。 例えば 、複数回実行したいテストケースがある場合（1から任意の数まで）。これは現時点では不要に思えるかもしれませんが、利用可能なすべての国で実行されるショッピングWebサイトのチェックアウトフローを実行することを検討してください。複数の仕様を手動で作成するのは面倒です。だから、Gruntにあなたのためにこれをさせてください。
  3. 時計機能。テストケースを作成し、コードに変更を加えた後、コードを保存するとすぐに、テストケースを実行する必要があります。Gruntはそれを取得しています。
  4. 複数のファイルを連結します。

試してみるだけで、きっと気に入るはずです。

結論

Seleniumを分度器のように機能させることはできますが、なぜ車輪の再発明を行うのでしょうか。グーグルが分度器を魅力のように機能させるために多大な努力を払ったなら、それを最大限に活用しましょう。少なくともAngularJSWebサイトの場合、それはあなたの生活をはるかに楽にします。

また、この記事は分度器だけではありません。そこには分度器の大きな世界があり、単純なテストシナリオに加えて、テストに機能を追加するためにNPMが提供する何百ものパッケージが市場で入手可能です。これらのパッケージを自由に使用して、さらに改善してください。

著者について： これはDeshanshによるゲスト投稿です。彼は、主要な多国籍企業の1つでテストのソフトウェア開発エンジニアとして働いています。彼は、SeleniumおよびProtractorの自動化テストに取り組んだ豊富な経験があります。

今後のチュートリアルでは、AngularJSインタビューを正常にクリアするのに役立ちます。

前のチュートリアル | 次のチュートリアル

推奨読書

^