Skip to main content

 

 

 

 

 
Language:
 
 
 
OutSystems

Seleniumを使用したUIテスト

この記事は、Seleniumを使用したWebアプリケーションのUIテストの概要と、OutSystemsとの関係について説明することを目的としています。

最初の2つのセクションでは、Seleniumが提供する様々なテストオプションと、Seleniumの知識を深める方法について説明します。

残りの記事では、SeleniumをOutSystemsアプリケーションで効率的に使用する方法について重点的に説明し、特にWeb要素ロケータに関するトピックと、このテクノロジーの使用経験に基づくOutSystems独自の推奨事項について詳しく説明します。

Seleniumを使用したアプリのUIテスト

開発者は、自動化されたUIテストが必要な場合にSeleniumを使用することがよくあります。Seleniumは、ブラウザを使用してWebアプリケーションでユーザーが実行する一般的なインタラクションの自動化に非常に適しています。

SeleniumHQのWebサイトで説明されているように、2つの主なサブテクノロジーについて必要に応じて検討する必要があります。

Selenium IDEは、Firefoxのエクステンションとして実装されるSeleniumの統合開発環境です。Webアプリケーションのユーザーインタラクションを再現するHTMLでエンコードされたスクリプトの記録、編集、再生を行うことができます。将来繰り返し行う必要がある一般的なインタラクションをすばやく開発して保存することができます(頻繁に行う管理操作のスクリプト化など)。

Selenium WebDriverは、UIテストを完全に自動化する必要がある場合(自動回帰テストなど)や異なるブラウザで同時にテストを実行する必要がある場合(Selenium Grid)の複雑なシナリオへの対応を可能にします。WebDriver APIを使用することによって、Java、C#、JavaScript(Node)などの一般的なオブジェクト指向プログラミング言語でUIテストを開発することができ、Selenium IDEのスクリプトベースのテストの制約をいくつか克服できるほか、テスト対象ブラウザのより効果的な連携を実現することができます。WebDriverは、Selenium RCの後継として開発されました。これにより、同じ目的でSelenium IDEスタイルのスクリプトを実行できるようになりましたが、現在は推奨されていません。

IDEを使用するかWebDriverを使用するかは自由に判断でき、個別の自動化ニーズに応じて選択できます。これらのテクノロジーについてさらに詳しく知りたい場合は、幅広いSeleniumのドキュメントをご覧ください。また、役に立つリソースをいくつか以下に示します。

Seleniumテストの作成

Seleniumの可能性について検討を始める場合、その最も簡単な方法はIDEを使用することです。そのため、OutSystemsでこのテクノロジーを使用する場合に最適な方法についてIDEを使用して説明します。

画像のaltテキスト 画像のaltテキスト

各ダウンロードページで、Firefox用のSelenium IDEプラグインを入手できます。 こちらのドキュメントに従ってIDEをインストールして構成し、言語の基本事項を確認します。テキストエディタを使用して手動でテストスクリプトを作成することもできますが、記録されたスクリプトに対して調整や追加を行う余地を残すことができるためこの方法が最適です。最も簡単な方法は、通常、以下の手順に従うことです。

1. 記録する

ユーザーとしてWebアプリとのインタラクションを行いながら、Selenium IDEの自動レコーダを使用してスクリプトを生成します。これにより、Selenium IDEウィンドウで表示、編集、再生できる一連のコマンドが生成されます。

2. ロケータを調整する

スクリプトエディタで、IDEによって生成されたロケータを調整します。IDEを使用する場合もWebDriverを使用する場合も、これは非常に重要な手順です。Seleniumの言語は数種類のロケータ(特定のコマンドがどの要素を操作しているかを特定するためのもの)をサポートしていますが、その中には、OutSystemsを使用している場合に他のものよりも適しているものがあります。レコーダによって生成されるものは、アプリケーションの進化に伴って変更される可能性があるため、通常、あまり安定していません。

これには、プラットフォームの仕様が大きな影響を及ぼします。このドキュメントの次の主要セクションでは、SeleniumでWeb要素を特定するようにOutSystemsアプリを設定するための戦略について説明します。

3. 同期を確保する

必要なコマンドを追加し、スクリプトとページ要素が確実に同期されるようにします。

UIインタラクションは、多くの場合、非同期です。Seleniumテストを実行する場合、前のコマンドによってページが更新されたことを確認してからのみ、次のステップに進むことができます。たとえば、ポップアップが画面に描画されるまでは、ポップアップのボタンを押すことができません。

このため、Selenium IDEでは、通常、ページの読み込み完了を待たない「click」イベントを「clickAndWait」イベントに変更します。特定の要素が表示されるまでスクリプトを一時停止する「waitFor」コマンドを含める必要がある場合もあります。ページの読み込みが発生した後にJavaScriptやAjaxアクションによって生成されるオブジェクトにとっては、これが特に重要です。これらの同期関連コマンドの詳細については、Seleniumのドキュメントをご覧ください。

4. 検証を追加する

アプリケーションのインタラクションに応じて移動するときに特定の要素や値がWeb画面に表示されることを確認するため、テストスクリプトでは検証とアサートが不可欠です。ページの状態が想定どおりであることを特定するために何を確認するのかがレコーダではわからないため、これらをスクリプトに含める必要があります。

使用可能なコマンドの詳細については、このトピックに関するSeleniumのドキュメントをご覧ください。

5. WebDriverにエクスポートする

WebDriverテストを作成して自動化することを目指している場合、Selenium IDEのエクスポートオプションを使用して、スクリプトをWebDriverのコードファイル(C#、Java、Ruby)としてエクスポートすることができます。ここからWebDriverクラスの開発を開始します。

要素ロケータの選択

Selenium IDEまたはWeb Driverのどちらを使用する場合も、Seleniumで使用できるロケータ戦略がいくつかあります。詳細については、こちらをご覧ください。

その中には、静的なWebサイトを作成するときなどと比較して、動的なアプリケーションを作成する場合に他のものよりも適しているものがあります。できる限り将来の変化に対応でき、保守の手間がかからないテストを実現できるようにセレクタを使用する必要があります。それには、画面を変更したときに変化する可能性が高いロケータを避けます。

ビジネスルールや画面の条件に基づき、リクエストごとにクライアント/ブラウザに送信されると判断されたコンテンツに応じて、プラットフォームによってHTMLのidアトリビュートが動的に生成されます。idアトリビュートは、アプリケーションを変更したとき、UIをリファクタリング(他の画面で再利用するためにブロックに含めるなど)したとき、プラットフォームによって生成されたコードが変更されたとき(新しいプラットフォームバージョン間で発生することがあります)など、非常に頻繁に変更されます。そのため、Seleniumテストのセレクタとしては適していません。

新しいテストスクリプトを記録するときのSelenium IDEのデフォルトは、idセレクタです。このとき、テストの保守性を高めるため、以下のガイドラインに従ってデフォルトのロケータを変更する必要があります。

  • コマンドがリンクで動作する場合、テキストを使用するリンクが画面に1つのみ含まれているときは、リンクロケータとリンクテキストを使用します。

  • コマンドが入力で動作する場合や、Web画面内のその他の固有のウィジェットで動作する場合は、CSSセレクタとウィジェットのカスタムスタイル名を使用します。

  • 同じページ内に繰り返される要素がある場合は(テーブルやリストレコード内のウィジェットなど)、値に行番号を含むカスタムidを使用して、それをCSSセレクタで特定します。

以下のセクションでは、具体的なシナリオを使用して上記のガイドラインを実際に示します。

シンプルなロケータ

OutSystems ForgeのDirectoryアプリケーションとのインタラクションを行う、Selenium IDEのスクリプトのシンプルな例を示します。

ログインページを表示し、事前定義されたいずれかのユーザーのリンクがクリックされると、そのユーザーがアプリケーションにログインするようにすることを目標とします。

画像のaltテキスト

上記の図に示されているとおり、Selenium IDEは記録セッション中に、「Charlotte Y Anderson」のリンクのidを使用してリンクを特定しています。これに複数のデメリットがあることは、すでに説明しました。この特定のWeb画面内で一意であるため、リンクロケータを代わりに使用してリンクテキストを使用することができます。

画像のaltテキスト

このスクリプトは同じ結果になり、リンクのidの影響はまったく受けません。後でページ内のリンクの場所を変更した場合も、リンクテキストが同じである限り、スクリプトは動作し続けます。

CSSセレクタ

前の例を使用してシナリオを変更します。今度は、ユーザー「admin」の資格情報を挿入して、[Login]ボタンを押します。

画像のaltテキスト

今度も、Selenium IDEは入力と[Login]ボタンのidをロケータとして出力します。この場合、ボタンと入力を処理する際に、前のセクションの「リンク」ロケータを使用することはできません。

このシナリオでは、ページ構造によりふさわしいロケータを使用すると便利です。最もよく使用されるものはXPathとCSSの2つです。どちらが最適であるかについての議論をインターネット上でいくつか見ることができます。

OutSystemsではCSSセレクタを使用することを推奨します。経験上、CSSセレクタは読みやすいだけではなく、異なるブラウザで使用する場合も高速に実行されるためです。標準化されたセレクタの使用方法の詳細については、CSS Selector ReferenceやこちらのSeleniumのサンプル集などのオンラインソースをご覧ください。

これらのセレクタは非常に高性能であり、できないことはほとんどありません。メリットの1つは、体系的な方法でWeb要素を特定できることです。たとえば、最初にWeb画面で特定のテーブルを最初に特定してから、その中の入力を検索します。ブラウザのテストを大量に行う予定がある場合、CSSロケータによく慣れておくことを強く推奨します

元の作業に戻ります。通常、入力やボタンでは特定しやすくするために「ダミー」のCSSスタイルを使用します。Service Studioに移動し、それぞれのボタンと入力にカスタムの「スタイル」を追加できます。

画像のaltテキスト

上記の図に示されているように、「SeleniumUsernameInput」というダミースタイルを追加しました。これはモジュールのCSSスタイルシートで定義されている必要はありません。必要なのは、eSpaceのパブリッシュ後に入力のHTML要素に出力されることです(Firebugなどの検査ツールで確認できます)。

そして、スクリプトでCSSセレクタを使用し、入力やボタンを新しいダミースタイルで特定することができます。"**css=.<ダミースタイルの名前>**":

画像のaltテキスト

このようにして、テストのために特別に作成した(必要がない限り変更されることがない)CSSスタイルを使用してロケータがWeb要素を特定することができます。そして、スクリプトの安定性が向上し、将来の変化に対応できるようになります。

テーブルおよびリスト - カスタマイズされたidの使用

OutSystemsアプリのUIテストでよくある状況の1つとして、たとえばテーブルやリストに含まれていることで、画面全体で繰り返されるWeb要素を特定するということが挙げられます。通常、このような場合はカスタマイズされたidをアプリケーションで使用して対応します。

Directoryアプリの例に戻り、ログイン後、SeleniumスクリプトでAndrea Mccarthyという従業員の詳細を展開させることにします。

画像のaltテキスト

Selenium IDEのレコーダは、Web要素のidに基づいたリンククリックに対するロケータを再び生成します。同じスタイルを共有する複数のリンクがリスト全体にあるため、リンクでダミーのCSSスタイルを使用しても動作しません。

しかし、Service Studioでカスタマイズされたidを従業員名に対して設定することによって、これを解決することができます。

画像のaltテキスト

ページ内のHTML要素内で同じ名前のカスタムタグとして出力されるdata-seleniumidという拡張プロパティを作成します。値は、「Person」というサフィックスとテーブルレコードの行番号を含むExpressionで定義されます。

生成されるWebページで、Firefoxを使用して要素を検査し、Andrea Mccarthyの要素に「seleniumid=’Person3’」というタグが含まれていることを検証できます。同じような要素の値は、すべて異なる数値になります(従業員名など他のものを値として使用することもできます)。

最後に、CSSセレクタでカスタムidを使用するようにSelenium IDEスクリプトを修正します。

画像のaltテキスト

ロケータ「css=span[seleniumid="Person3"]」によって、カスタムselenium idを含むspanが検索されます。このようにして、完全に制御できる識別子を使用してテーブルやリストレコード内の要素を特定することができ、将来の変化に対応できるようになります。

ベストプラクティスとヒント

ここでは、Seleniumのテストを開発する際に、テクノロジーに対するOutSystems独自の取り組みで有用性が認められたヒントとベストプラクティスを厳選してご紹介します。

「一時停止」の回避

ブラウザテストで、何かの発生(ポップアップの表示など)を待つ必要があるステップを作成する場合があります。このような場合、「一時停止」の使用は極力避けるようにします。デフォルトケースでのテストに時間がかかるだけではなく、テストの質も下がってしまいます。サーバーの実行速度が何らかの理由で遅くなったときには、待機時間が不十分になります。

(Selenium IDEスクリプトで)waitForTextPresentやwaitForElementPresentなどの有効な「待機」を代わりに使用します。なお、カスタムCSSスタイルやidを使用すると、待機対象の特定の要素をいつでも簡単に特定することができます。

CSSセレクタの微調整

SeleniumテストでのCSSセレクタの使用経験が増えると、テスト対象のWebページにあるDOM構造の特定部分の要素を検索できる複雑なロケータを使用しようとする可能性が高くなります。

OutSystemsは、CSSセレクタをデバッグして、CSSセレクタが必要なものを参照していることを検証するために最適な方法は、Google ChromeブラウザのDeveloper Toolsを使用することであることを見つけました。F12キーを押してDevToolsを起動し、[Elements]タブを開いてCTRL+Fを押すと、HTMLを検索することができます。CSSセレクタを使用して検索すると、Chromeによって検索内容がページ内で強調表示されます。

ページのソースコードの検索(Selenium IDE)

特定のJavaScriptコードが含まれているかどうかを確認するときなど、生成されたWebページのソースコードを調べるときに便利な場合があります。これを行うには、verifyNotEvalコマンドを使用します。

エラー発生時のアサートを使用したテストの停止(Selenium IDE)

スクリプトを実行していていずれかのコマンドが失敗したときに、スクリプトを完全に停止する必要がある場合があります。これを行うには、「assert」コマンドを使用します。以下に例をいくつか示します。

  • 「waitForTextPresent」を使用している場合、その後ろに「assertTextPresent」を同じ条件で配置します。assertが失敗した場合、スクリプトの処理が停止します。

  • 「verifyTextPresent」の代わりに、同じ検証で「assertTextPresent」を使用し、エラー発生時にスクリプトを停止します。

スクリプトでの変数の使用(Selenium IDE)

Seleniumスクリプト内で変数に値を保存するには、storeコマンドを使用します。変数を取得するには、通常のコマンド引数で「${VariableName}」の形式を使用するか、インラインJavaScriptの引数で「storedVars[‘VariableName’]」オブジェクトを使用します。このトピックの詳細については、こちらのオンライン記事をご覧ください。

コメントの挿入による読みやすさの向上(Selenium IDE)

Selenium IDEスクリプトは、サイズが大きくなると読みにくくなります。後で理解しやすくするために最適な方法は、コメントを挿入して実行内容に関する情報を示しておくことです。

通常のHTMLコメントを使用して、Seleniumスクリプトのソースコードに手動で直接コメントを追加できます。これを行うには、Selenium IDEの[Source]タブを開きます。以下に例を示します。

画像のaltテキスト

画像のaltテキスト

  • Was this article helpful?