protractor分度器の使い方


備考

分度器は、AngularJSアプリケーションのためのエンドツーエンドのテストフレームワークです。

分度器は、Selenium WebDriverの周りにラッパー(上に構築されている)ですので、Selenium WebDriverで使用できるすべての機能が含まれています。さらに、分度器は、AngularJSアプリケーションを自動化するのに非常に役立ついくつかの新しいロケータ戦略と機能を提供します。例としては、waitForAngular、By.binding、By.repeater、By.textarea、By.model、WebElement.all、WebElement.evaluateなどがあります。

バージョン

バージョンリリースデータ
0.0.1 2016-08-01

分度器を使った最初のテスト

分度器は、最初のテスト、スペック(テストコード)ファイル、およびコンフィギュレーションファイルを実行するために2つのファイルしか必要としません。スペックファイルにはテストコードが含まれ、もう1つにはスペックファイルパス、ブラウザの詳細、テストURL、フレームワークパラメータなどの設定詳細が含まれています。最初のテストを書くには、セレンサーバのアドレスとスペックファイルパスのみを提供します。ブラウザ、タイムアウト、フレームワークはデフォルト値に集められます。

分度器のデフォルトのブラウザはChromeです。

conf.js - 設定ファイル

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['spec.js']
};
 

spec.js - 仕様(テストコード)ファイル

describe('first test in protractor', function() {
  it('should verify title', function() {
    browser.get('https://angularjs.org');

    expect(browser.getTitle()).toEqual('AngularJS — Superheroic JavaScript MVW Framework');
  });
});
 

seleniumAddress - webdriverサーバーが実行されているサーバーへのパス。

specs - テストファイルのパスを含む配列要素。複数のパスは、コンマ区切りの値で指定できます。

describe - Jasmineフレームワークからの構文。構文staをdescribe

分度器の設置とセットアップ(Windowsの場合)

要件:分度器は、インストール前に次の依存関係をインストールする必要があります。

  • Java JDK 1.7以上
  • Node.js v4以上

インストール:

Node.jsを次のURLからダウンロードしてインストールします。https : //nodejs.org/ja/

Node.jsのインストールが成功したかどうかを確認するには、環境変数を確認してください。システム変数の「パス」が自動的に更新されます。

Node.jsのインストールを確認するパス変数


コマンドプロンプトでnpm -version コマンドを入力することで同じことを確認することもできます。これにより、インストールされているバージョンが表示されます。

Node.jsのインストールを確認するコマンド


引き出しは、ローカルまたはグローバルの2つの方法でインストールできます。

特定のフォルダまたはプロジェクトのディレクトリに分度器をインストールできます。プロジェクトディレクトリにインストールする場合は、実行するたびにその場所からのみ実行する必要があります。

プロジェクトディレクトリにローカルにインストールするには、プロジェクトフォルダに移動し、コマンドを入力します

npm install protractor


分度器をグローバルにインストールするには、次のコマンドを実行します。

$ npm install -g protractor
 

これにより2つのコマンドラインツール、 protractorwebdriver-manager がインストールされます。
protractor --version を実行して、分度器が正常にインストールされたことを確認します。

webdriver-manager は、ブラウザドライバのバイナリをダウンロードし、セレンサーバを起動するために使用されます。
ブラウザドライバのバイナリをダウンロードするには:

$ webdriver-manager update
 

Seleniumサーバーを次のように起動します。

$ webdriver-manager start
 

Internet Explorerのドライバをダウンロードするには、コマンドプロンプトでwebdriver-manager update --ie コマンドを実行します。これはあなたのseleniumフォルダにIEDriverServer.exeをダウンロードします

保留中のテスト

分度器は、検査を保留として設定することを可能にする。これは分度器がテストを実行しないで、代わりに出力することを意味します:

Pending:
1) Test Name
Temporarily disabled with xit
 

xdescribe()で無効にした場合は、次のようになります。

Pending:
1) Test Name
No reason given
 

組み合わせ

  • xdescribe()内のxit()はxit()応答を出力します。
  • fdescribe()内のxit()は依然として保留中として扱われます。
  • xdescribe()内のfit()は実行され、保留中のテストは何も出力しません。

分度器:エンタープライズ角度アプリケーションのE2Eテスト

分度器の設置とセットアップ

ステップ1 :ここからNodeJSをダウンロードしてインストールします。ノードの最新バージョンがインストールされていることを確認してください。ここでは、ノードv7.8.0を使用しています。セレンを実行するには、Java Development Kit(JDK)がインストールされている必要があります。

ステップ2 :端末を開き、次のコマンドを入力して分度器をグローバルにインストールします。

npm install -g protractor
 

これは分度器とウェブドライバマネージャのような2つのツールをインストールします。 protractor –version. インストールを確認するには、 protractor –version. コマンドを実行しprotractor –version. Protractorが正常にインストールされている場合は、インストールされているバージョン(つまり、バージョン5.1.1)が表示されます。それ以外の場合は、インストールを再確認する必要があります。ステップ3:Webdriverマネージャを更新して、必要なバイナリをダウンロードします。

webdriver-manager update
 

ステップ4:以下のコマンドを実行すると、Selenium Serverが起動します。このステップでは、バックグラウンドでWebドライバマネージャが実行され、分度器を介して実行されるテストが実行されます。

webdriver-manager startサーバーのステータスに関する情報はhttp://localhost:4444/wd/hub/static/resource/hub.html.

分度器を使った最初のテストケースの作成:

テストケースの作成に入る前に、コンフィギュレーションファイルとスペックファイルの2つのファイルを用意する必要があります。

設定ファイル:

//In conf.js
exports.config = {
    baseUrl: ‘http://localhost:8800/adminapp’,
    seleniumAddress: ‘http://localhost:4444/wd/hub',
    specs: [‘product/product_test.js’],
    directConnect : true,
    capabilities :{
        browserName: ‘chrome’
    }
}
 

構成ファイルで使用される用語の基本的な理解:

baseUrl - テスト対象のアプリケーションのベースURL。

seleniumAddress - 既に動作しているSelenium Serverに接続します。

specs - スペックファイルの場所

directConnect :true - ブラウザのドライバに直接接続します。

機能 - 単一のブラウザでテストする場合は、capabilitiesオプションを使用します。複数のブラウザでテストする場合は、multiCapabilities配列を使用します。

ここからより多くの設定オプションを見つけることができます。彼らは、すべての可能な用語をその定義とともに記述してきました。

スペックファイル:

//In product_test.js

    describe(‘Angular Enterprise Boilerplate’, function() {
      it('should have a title', function() {
        browser.get('http://localhost:8800/adminapp’);
        expect(browser.getTitle()).toEqual(‘Angular Enterprise Boilerplate’);
      });
    });
 

specファイルで使用される用語の基本的な理解:

デフォルトでは、Protractorはテストインタフェースとしてジャスミンフレームワークを使用します。 '記述'と 'それ'構文はジャスミンフレームワークからのものです。ここから詳細を知ることができます。最初のテストケースを実行する:

テストケースを実行する前に、Webdriverマネージャとアプリケーションが端末の異なるタブで動作していることを確認してください。

今度は、次のようにテストを実行します。

Protractor app/conf.js
 

クロムブラウザがあなたのアプリケーションのURLで開き、それ自体を閉じるのが見えます。テスト出力は1テスト、1アサーション、0失敗でなければなりません。

ブラボー!あなたは最初のテストケースを正常に実行します。

選択的ランニングテスト

分度器は、describe()の代わりにfdescribe()を使用して、テストのグループを選択的に実行できます。

fdescribe('first group',()=>{
    it('only this test will run',()=>{
        //code that will run
    });
});
describe('second group',()=>{
    it('this code will not run',()=>{
        //code that won't run
    });
});
 

分度器は、it()の代わりにfit()を使用してグループ内のテストを選択的に実行できます。

describe('first group',()=>{
    fit('only this test will run',()=>{
        //code that will run
    });
    it('this code will not run',()=>{
        //code that won't run
    });
});
 

fdescribe()内にfit()がない場合、すべてのit()が実行されます。しかし、fit()は同じdescribe()またはfdescribe()内でit()呼び出しをブロックします。

fdescribe('first group',()=>{
    fit('only this test will run',()=>{
        //code that will run
    });
    it('this code will not run',()=>{
        //code that won't run
    });
});
 

たとえfit()がfdescribe()の代わりにdescribe()にあっても、それは実行されます。また、fit()を含まないfdescribe()内のit()も実行されます。

fdescribe('first group',()=>{
    it('this test will run',()=>{
        //code that will run
    });
    it('this test will also run',()=>{
        //code that will also run
    });
});
describe('second group',()=>{
    it('this code will not run',()=>{
        //code that won't run
    });
    fit('this code will run',(){
        //code that will run
    });
});
 

分度器テストを書く

新しいコマンドラインまたはターミナルウィンドウを開き、テスト用のクリーンフォルダを作成します。

分度器は、実行するには2つのファイル、仕様ファイルと構成ファイルが必要です。

AngularJSウェブサイトのToDoリストのサンプルに移動し、新しいToDo項目をリストに追加する簡単なテストから始めましょう。

次をspec.js コピーする

( 'anglejsホームページtodoリスト'、function(){it( 'todo'を追加するはずです)、function(){browser.get( ' https://angularjs.org ');

element(by.model('todoList.todoText')).sendKeys('write first protractor test');
element(by.css('[value="add"]')).click();

var todoList = element.all(by.repeater('todo in todoList.todos'));
expect(todoList.count()).toEqual(3);
expect(todoList.get(2).getText()).toEqual('write first protractor test');

// You wrote your first test, cross it off the list
todoList.get(2).element(by.css('input')).click();
var completedAmount = element.all(by.css('.done-true'));
expect(completedAmount.count()).toEqual(2);});});