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

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

分度器に必要なファイル

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

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

分度器を実行するための重要なファイルの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.tutorialspoint.com/tutorialslibrary.htm');
      browser.driver.getTitle().then(function(pageTitle) {
         expect(pageTitle).toEqual('Free Online Tutorials and Courses');
      });
   });
});

コードの説明

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

ブラウザ

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

describe そして it−どちらもJasmineテストフレームワークの構文です。ザ・’Describe’ テストケースのエンドツーエンドのフローを含めるために使用されますが、 ‘it’いくつかのテストシナリオが含まれています。私たちは複数を持つことができます‘it’ テストケースプログラムのブロック。
Expect −これは、Webページのタイトルをいくつかの事前定義されたデータと比較しているアサーションです。
ignoreSynchronization−角度のないWebサイトをテストするときに使用されるブラウザのタグです。分度器は角度のあるWebサイトのみを操作することを想定していますが、角度のないWebサイトを操作する場合は、このタグを次のように設定する必要があります。“true”。

構成ファイル

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

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

例

以下は、テストを行う単純なスクリプト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。

コードの実行

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

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

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

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

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

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

レポートの生成

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

ただし、その前に、次のコマンドを使用してJasmineレポーターをインストールする必要があります-

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

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

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