分度器-オブジェクト

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

ページオブジェクトとは何ですか?

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

自動UIテストの課題

以下は、UIテストの自動化に関するいくつかの一般的な課題です-

UIの変更

UIテストでの作業中によくある問題は、UIで変更が発生することです。たとえば、ボタンやテキストボックスなどが通常変更され、UIテストの問題が発生することがほとんどです。

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

UIテストのもう1つの問題は、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です。たとえば、次の仕様ファイルは、違いを理解するためにページオブジェクトなしとページオブジェクトありで記述されています。

Without Page Objects

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

With Page Objects

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

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