Protractor-writing-the-first-test

分度器-最初のテストを書く

この章では、分度器で最初のテストを書く方法を理解しましょう。

分度器に必要なファイル

分度器を実行するには、次の2つのファイルが必要です-

仕様またはテストファイル

Protractorを実行するための重要なファイルの1つです。 このファイルには、実際のテストコードを記述します。 テストコードは、テストフレームワークの構文を使用して作成されます。

たとえば、 Jasmine フレームワークを使用している場合、 Jasmine の構文を使用してテストコードが記述されます。 このファイルには、テストのすべての機能フローとアサーションが含まれます。

簡単に言えば、このファイルには、アプリケーションと対話するためのロジックとロケーターが含まれていると言えます。

例

以下は、URLにナビゲートしてページタイトルを確認するテストケースを持つ単純なスクリプトTestSpecification.jsです-

//TestSpecification.js
describe('Protractor Demo', function() {
   it('to check the page title', function() {
      browser.ignoreSynchronization = true;
      browser.get('https://www.finddevguides.com/tutorialslibrary');
      browser.driver.getTitle().then(function(pageTitle) {
         expect(pageTitle).toEqual('Free Online Tutorials and Courses');
      });
   });
});

コードの説明

上記の仕様ファイルのコードは次のように説明することができます-

ブラウザ

これは、すべてのブラウザーレベルのコマンドを処理するために分度器によって作成されたグローバル変数です。 基本的に、WebDriverのインスタンスのラッパーです。 browser.get（）は、特定のページを読み込むように分度器に指示する単純なSeleniumメソッドです。

• describe および it -両方ともJasmineテストフレームワークの構文です。 '説明' は、テストケースのエンドツーエンドのフローを含めるために使用され、 'it' はテストシナリオの一部を含みます。 テストケースプログラムでは、複数の「it」ブロックを使用できます。
• 期待-これは、Webページのタイトルをいくつかの事前定義されたデータと比較するアサーションです。
• ignoreSynchronization -角度のないWebサイトをテストするときに使用されるブラウザーのタグです。 分度器は角度のあるWebサイトでのみ動作することを想定していますが、非角度のWebサイトで動作する場合は、このタグを*“ true” *に設定する必要があります。

構成ファイル

名前が示すように、このファイルはすべての分度器設定オプションの説明を提供します。 それは基本的に分度器に次のことを伝えます-

• テストまたは仕様ファイルの場所
• 選択するブラウザ
• 使用するテストフレームワーク
• Selenium Serverと話す場所

例

以下は、テストを行う単純なスクリプトconfig.jsです。

//config.js
exports.config = {
   directConnect: true,

  //Capabilities to be passed to the webdriver instance.
   capabilities: {
      'browserName': 'chrome'
   },

  //Framework to use. Jasmine is recommended.
   framework: 'jasmine',

  //Spec patterns are relative to the current working directory when
  //protractor is called.
   specs: ['TestSpecification.js'],

コードの説明

3つの基本的なパラメータを持つ上記の構成ファイルのコードは、次のように説明することができます-

機能パラメータ

このパラメーターは、ブラウザーの名前を指定するために使用されます。 それはconf.jsファイルの次のコードブロックで見ることができます-

exports.config = {
   directConnect: true,

  //Capabilities to be passed to the webdriver instance.
   capabilities: {
      'browserName': 'chrome'
},

上記のように、ここで指定されているブラウザの名前は「chrome」で、デフォルトでは分度器のブラウザです。 ブラウザの名前を変更することもできます。

フレームワークパラメーター

このパラメーターは、テストフレームワークの名前を指定するために使用されます。 それはconfig.jsファイルの次のコードブロックで見ることができます-

exports.config = {
   directConnect: true,

  //Framework to use. Jasmine is recommended.
   framework: 'jasmine',

ここでは、「ジャスミン」テストフレームワークを使用しています。

ソースファイル宣言パラメーター

このパラメーターは、ソースファイル宣言の名前を指定するために使用されます。 それはconf.jsファイルの次のコードブロックで見ることができます-

exports.config = {
   directConnect: true,
  //Spec patterns are relative to the current working
   directory when protractor is called.
   specs: ['TsetSpecification.js'],

上記のように、ここで指定されたソースファイル宣言の名前は 'TestSpecification.js' です。 この例では、 TestSpecification.js という名前の仕様ファイルを作成したためです。

コードの実行

Protractorを実行するために必要なファイルとそのコーディングについて基本的な理解を得たので、例を実行してみましょう。 この例を実行するには、次の手順に従います-

• *ステップ1 *-まず、コマンドプロンプトを開きます。
• ステップ2 *-次に、ファイルを保存したディレクトリ、つまりconfig.jsと *TestSpecification.js に移動する必要があります。
• *ステップ3 *-ここで、コマンドProtrcator config.jsを実行してconfig.jsファイルを実行します。

以下に示すスクリーンショットは、例を実行するための上記の手順を説明します-

コードの実行

スクリーンショットでは、テストに合格したことがわかります。

ここで、非角形のWebサイトをテストしており、ignoreSynchronizationタグをtrueに設定していない場合、コードを実行した後、「ページ上にAngularが見つかりません」というエラーが表示されます。

それは次のスクリーンショットで見ることができます-

同期を無視

レポート生成

ここまで、テストケースを実行するために必要なファイルとそのコーディングについて説明しました。 分度器は、テストケースのレポートを生成することもできます。 この目的のために、Jasmineをサポートしています。 JunitXMLReporterを使用して、テスト実行レポートを自動的に生成できます。

しかし、その前に、次のコマンドの助けを借りてジャスミンレポーターをインストールする必要があります-

npm install -g jasmine-reporters

ご覧のとおり、Jasmine Reportersのインストール中に-gオプションが使用されています。これは、-gオプションを使用してProtractorをグローバルにインストールしたためです。

jasmine-reportersを正常にインストールした後、以前に使用したconfig.jsファイルに次のコードを追加する必要があります-

onPrepare: function(){//configure junit xml report

   var jasmineReporters = require('jasmine-reporters');
   jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter({
      consolidateAll: true,
      filePrefix: 'guitest-xmloutput',
      savePath: 'test/reports'
   }));

今、私たちの新しいconfig.jsファイルは次のようになります-

//An example configuration file.
exports.config = {
   directConnect: true,

  //Capabilities to be passed to the webdriver instance.
   capabilities: {
      'browserName': 'chrome'
   },

  //Framework to use. Jasmine is recommended.
   framework: 'jasmine',

  //Spec patterns are relative to the current working directory when
  //protractor is called.
   specs: ['TestSpecification.js'],
  //framework: "jasmine2",//must set it if you use JUnitXmlReporter

   onPrepare: function(){//configure junit xml report

      var jasmineReporters = require('jasmine-reporters');
      jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter({
         consolidateAll: true,
         filePrefix: 'guitest-xmloutput',
         savePath: 'reports'
      }));
   },
};

上記の設定ファイルを同じ方法で実行した後、以前に実行しました。 reports フォルダーのルートディレクトリの下にレポートを含むXMLファイルを生成します。 テストが成功した場合、レポートは次のようになります-

レポート生成

しかし、テストが失敗した場合、レポートは次のようになります-

レポート生成に失敗しました