分度器-分度器のスタイルガイド

この章では、分度器のスタイルガイドについて詳しく説明します。

前書き

スタイルガイドは、INGのフロントエンドエンジニア Carmen Popoviciu とGoogleのソフトウェアエンジニア Andres Dominguez という2人のソフトウェアエンジニアによって作成されました。したがって、このスタイルガイドはCarmen PopoviciuおよびGoogleの分度器用スタイルガイドとも呼ばれます。

このスタイルガイドは、次の5つのキーポイントに分けることができます-

一般的なルール
プロジェクト構造
ロケーター戦略
ページオブジェクト *テストスイート

一般的なルール

以下は、テストのために分度器を使用する際に注意する必要があるいくつかの一般的なルールです-

既にユニットテストされているものをエンドツーエンドでテストしないでください

これは、カルメンとアンドレスによって与えられた最初の一般的な規則です。彼らは、すでにユニットテストされているコードに対してe2eテストを実行してはならないと提案しました。その背後にある主な理由は、単体テストがe2eテストよりもはるかに高速であることです。もう1つの理由は、時間を節約するために、テストの重複（ユニットテストとe2eテストの両方を実行しない）を避ける必要があることです。

1つの構成ファイルのみを使用する

推奨されるもう1つの重要な点は、1つの構成ファイルのみを使用する必要があることです。テストする環境ごとに構成ファイルを作成しないでください。* grunt-protractor-coverage *を使用して、さまざまな環境をセットアップできます。

テストにロジックを使用しない

テストケースでIFステートメントまたはFORループを使用しないようにする必要があります。使用しない場合、テストは何もテストせずにパスするか、非常に遅く実行される可能性があります。

ファイルレベルでテストを独立させる

分度器は、共有が有効になっている場合、テストを並行して実行できます。これらのファイルは、利用可能になると、さまざまなブラウザで実行されます。 CarmenとAndresは、分度器によって実行される順序が不明確であり、さらに単独でテストを実行するのが非常に簡単であるため、少なくともファイルレベルでテストを独立させることを推奨しました。

プロジェクト構造

分度器のスタイルガイドに関するもう1つの重要なポイントは、プロジェクトの構造です。以下は、プロジェクト構造に関する推奨事項です-

賢明な構造でのe2eテストの模索

CarmenとAndresは、プロジェクトの構造に合った構造でe2eテストをグループ化することを推奨しました。この推奨事項の背後にある理由は、ファイルの検索が容易になり、フォルダ構造がより読みやすくなることです。このステップでは、e2eテストとユニットテストを分離します。彼らは、次のような構造を避けることを推奨しました-

|-- project-folder
   |-- app
      |-- css
      |-- img
      |-- partials
         homel
         profilel
         contactsl
      |-- js
         |-- controllers
         |-- directives
         |-- services
         app.js
         ...
      indexl
   |-- test
      |-- unit
      |-- e2e
         home-page.js
         home-spec.js
         profile-page.js
         profile-spec.js
         contacts-page.js
         contacts-spec.js

一方、彼らは次のような構造を推奨しました-

|-- project-folder
   |-- app
      |-- css
      |-- img
      |-- partials
         homel
         profilel
         contactsl
      |-- js
         |-- controllers
         |-- directives
         |-- services
         app.js
         ...
      indexl
   |-- test
      |-- unit
      |-- e2e
         |-- page-objects
            home-page.js
            profile-page.js
            contacts-page.js
         home-spec.js
         profile-spec.js
         contacts-spec.js

ロケーター戦略

以下は、分度器をテストに使用する際に注意する必要のあるいくつかのロケーター戦略です-

XPATHを使用しない

これは、分度器スタイルガイドで推奨される最初のロケーター戦略です。同じ理由は、マークアップが非常に簡単に変更される可能性があるため、XPathには多くのメンテナンスが必要だからです。さらに、XPath式は最も遅く、デバッグが非常に困難です。

by.modelやby.bindingなどの分度器固有のロケーターを常に優先する

by.modelやby.bindingなどの分度器固有のロケーターは短く、具体的で読みやすいです。それらの助けを借りて、ロケーターを書くことも非常に簡単です。

例

見ます

<ul class = "red">
   <li>{{color.name}}</li>
   <li>{{color.shade}}</li>
   <li>{{color.code}}</li>
</ul>

<div class = "details">
   <div class = "personal">
      <input ng-model = "person.name">
   </div>
</div>

上記のコードでは、次のことを避けることをお勧めします-

var nameElement = element.all(by.css('.red li')).get(0);
var personName = element(by.css('.details .personal input'));

一方、次を使用することをお勧めします-

var nameElement = element.all(by.css('.red li')).get(0);
var personName = element(by.css('.details .personal input'));

var nameElement = element(by.binding('color.name'));
var personName = element(by.model('person.name'));

分度器ロケーターを使用できない場合は、by.idおよびby.cssを使用することをお勧めします。

頻繁に変更されるテキストには、常にテキストロケーターを使用しないでください

ボタン、リンク、ラベルのテキストは時間とともに頻繁に変化するため、by.linkText、by.buttonText、by.cssContaningTextなどのテキストベースのロケーターを避ける必要があります。

ページオブジェクト

前に説明したように、ページオブジェクトはアプリケーションページの要素に関する情報をカプセル化するため、よりクリーンなテストケースを作成するのに役立ちます。ページオブジェクトの非常に便利な利点は、複数のテストで再利用できることです。アプリケーションのテンプレートが変更された場合、ページオブジェクトを更新するだけで済みます。以下は、テスト用の分度器を使用する際に注意する必要があるページオブジェクトの推奨事項です。

テスト対象のページと対話するには、ページオブジェクトを使用します

ページオブジェクトを使用してテスト中のページとやり取りすることをお勧めします。テスト中のページ上の要素に関する情報をカプセル化でき、また再利用できるためです。

ファイルごとに常に1ページのオブジェクトを宣言する

各ページオブジェクトを独自のファイルで定義する必要があります。これにより、コードがクリーンに保たれ、物の発見が容易になります。

ページの最後で、オブジェクトファイルは常に単一のmodule.exportsを使用します

1つのクラスのみをエクスポートする必要があるように、各ページオブジェクトで単一のクラスを宣言することをお勧めします。たとえば、オブジェクトファイルの次の使用は避ける必要があります-

var UserProfilePage = function() {};
var UserSettingsPage = function() {};
module.exports = UserPropertiesPage;
module.exports = UserSettingsPage;

しかし、一方で、以下を使用することをお勧めします-

/* *@constructor*/
var UserPropertiesPage = function() {};

module.exports = UserPropertiesPage;

必要なすべてのモジュールを上部で宣言します

モジュールの依存関係を明確かつ見つけやすくするため、必要なすべてのモジュールをページオブジェクトの上部で宣言する必要があります。

テストスイートの開始時にすべてのページオブジェクトをインスタンス化する

テストスイートの最初にすべてのページオブジェクトをインスタンス化することをお勧めします。これにより、テストコードから依存関係が分離され、スイートのすべての仕様で依存関係が利用可能になります。

ページオブジェクトでexpect（）を使用しないでください

ページオブジェクトでexpect（）を使用しないでください。すべてのアサーションはテストケースで行う必要があるため、ページオブジェクトでアサーションを作成しないでください。

もう1つの理由は、テストの読者がテストケースのみを読むことでアプリケーションの動作を理解できる必要があることです。

Protractor-style-guide

目次