分度器-オブジェクト

この章では、分度器のオブジェクトについて詳しく説明します。

ページオブジェクトとは

ページオブジェクトは、テストメンテナンスを強化し、コードの重複を減らすために、e2eテストを記述するために一般的になったデザインパターンです。 AUT（テスト対象のアプリケーション）のページへのインターフェイスとして機能するオブジェクト指向クラスとして定義できます。ただし、ページオブジェクトを深く掘り下げる前に、自動UIテストの課題とその処理方法を理解する必要があります。

自動UIテストの課題

以下は、UIテストの自動化に関する一般的な課題です。

UIの変更

UIテストでの作業中に非常に一般的な問題は、UIで変更が発生することです。たとえば、ほとんどの場合、ボタンやテキストボックスなどが発生します。通常は変更され、UIテストの問題が発生します。

DSL（ドメイン固有言語）サポートの欠如

UIテストの別の問題は、DSLサポートの欠如です。この問題により、テスト対象を理解することが非常に難しくなります。

多くの繰り返し/コードの重複

UIテストの次の一般的な問題は、繰り返しまたはコードの重複が多いことです。それは次のコード行の助けを借りて理解することができます-

element(by.model(‘event.name’)).sendKeys(‘An Event’);
element(by.model(‘event.name’)).sendKeys(‘Module 3’);
element(by.model(‘event.name’));

厳しいメンテナンス

上記の課題により、メンテナンスの頭痛の種になります。すべてのインスタンスを見つけて、新しい名前、セレクター、および他のコードに置き換える必要があるためです。また、テストをリファクタリングと一致させるために多くの時間を費やす必要があります。

壊れたテスト

UIテストのもう1つの課題は、テストで多くの失敗が発生することです。

課題に対処する方法

UIテストのいくつかの一般的な課題を見てきました。このような課題に対処する方法のいくつかは次のとおりです-

参照を手動で更新する

上記の課題を処理する最初のオプションは、参照を手動で更新することです。このオプションの問題は、テストと同様にコードを手動で変更する必要があることです。これは、1つまたは2つのテストファイルがある場合に実行できますが、プロジェクトに何百ものテストファイルがある場合はどうでしょうか。

ページオブジェクトの使用

上記の課題を処理する別のオプションは、ページオブジェクトを使用することです。ページオブジェクトは基本的に、Angularテンプレートのプロパティをカプセル化する単純なJavaScriptです。たとえば、次の仕様ファイルは、違いを理解するためにページオブジェクトなしとページオブジェクトを使用して記述されています-

ページオブジェクトなし

describe('angularjs homepage', function() {
   it('should greet the named user', function() {
      browser.get('http://www.angularjs.org');
      element(by.model('yourName')).sendKeys('Julie');
      var greeting = element(by.binding('yourName'));
      expect(greeting.getText()).toEqual('Hello Julie!');
   });
});

ページオブジェクト付き

ページオブジェクトを使用してコードを記述する場合、最初に行う必要があるのは、ページオブジェクトを作成することです。したがって、上記の例のページオブジェクトは次のようになります-

var AngularHomepage = function() {
   var nameInput = element(by.model('yourName'));
   var greeting = element(by.binding('yourName'));

   this.get = function() {
      browser.get('http://www.angularjs.org');
   };

   this.setName = function(name) {
      nameInput.sendKeys(name);
   };

   this.getGreetingText = function() {
      return greeting.getText();
   };
};
module.exports = new AngularHomepage();

ページオブジェクトを使用してテストを整理する

上記の例では、UIテストの課題を処理するためにページオブジェクトを使用することを見てきました。次に、それらを使用してテストを整理する方法について説明します。そのためには、テストスクリプトの機能を変更せずにテストスクリプトを変更する必要があります。

例

この概念を理解するために、ページオブジェクトで上記の構成ファイルを使用します。次のようにテストスクリプトを変更する必要があります-

var angularHomepage = require('./AngularHomepage');
describe('angularjs homepage', function() {
   it('should greet the named user', function() {
      angularHomepage.get();

      angularHomepage.setName('Julie');

      expect(angularHomepage.getGreetingText()).toEqual
      ('Hello Julie!');
   });
});

ここで、ページオブジェクトへのパスは仕様に関連することに注意してください。

同様に、テストスイートをさまざまなテストスイートに分離することもできます。設定ファイルは次のように変更できます

exports.config = {
  //The address of a running selenium server.
   seleniumAddress: 'http://localhost:4444/wd/hub',

  //Capabilities to be passed to the webdriver instance.
   capabilities: {
      'browserName': 'chrome'
   },
  //Spec patterns are relative to the location of the spec file. They may
  //include glob patterns.
   suites: {
      homepage: 'tests/e2e/homepage/**/*Spec.js',
      search: ['tests/e2e/contact_search/**/*Spec.js',
         'tests/e2e/venue_search/**/*Spec.js']
   },

  //Options to be passed to Jasmine-node.
   jasmineNodeOpts: {
      showColors: true,//Use colors in the command line report.
   }
};

これで、実行中のテストスイートを簡単に切り替えることができます。次のコマンドは、テストのホームページセクションのみを実行します-

protractor protractor.conf.js --suite homepage

同様に、次のコマンドを使用して特定のテストスイートを実行できます-

protractor protractor.conf.js --suite homepage,search

Protractor-objects

目次