[アーカイブ] クロスブラウザでの自動UIテスト～Visual Studio 2012 Update 1
<オリジナル投稿 2012年11月28日 本ポストの情報はオリジナル投稿時点のものです。マイクロソフトの正式な見解や製品の仕様を保証するものではないことをご了承ください。>
Visual Studio 2012 の 「コード化されたテスト (Coded UI Test: CUIT)」では、Web アプリケーションのテストも操作を記録し、C#や VB.NET のコードとして自動生成でき、単体テストフレームワーク上でいつでも実行できるようにしてくれます。
単体テストのフレームワーク (MSTest) で実行し、成功/失敗を収集できるため、Visual Studio からの実行はもちろん、コマンドラインからの実行も、継続的インテグレーション (CI: Continuous Integration) での実行も行えます。
今までの CUIT は、Web アプリケーションの場合は、IE で操作を記録し、IE で実行でした。Visual Studio 2010 の Feature Pack 2 から IE で記録し、Firefox で実行もサポートしていました。
今回登場の、Visual Studio 2012 Update 1 では、「IE で操作を記録し、Firefox, Chrome で実行」を行えるようになっています。
それでは、基本中の基本の CUIT の方法から順を追ってみていきましょう。
まずは、おぜん立てを！
クロスブラウザでの CUIT を行うためには、テストを実行するマシンにランタイムをインストールする必要があります。
それは、Microsoft Visual Studio 2012 Cross Browser Testing Setup for Selenium Components です。
こちらは、https://go.microsoft.com/fwlink/?LinkID=267598 から入手いただけます。
自動 UI テストの記録
さて、記録です。Visual Studio 2012 から CUIT 用のプロジェクトテンプレートが登場しました。
新規にプロジェクトを作成します。
作成すると、ダイアログがポップアップします。
「既存の操作の記録を使用」 というのは、Microsoft Test Manager で行った手動テストで、一回行ったテストは二回目以降自動化できるため、それを使って自動化したものを C# や VB.NET のコードに自動生成してくれることを示します。こちらはこちらでものすごく便利です！何せ、システムテストレベルの操作を記録して、単体テストとして実行できるので、開発者は気軽に動作確認できますし、CI で動かせば、回帰テストを手動テストレベルにまで引き上げることにもつながります。
「操作の記録、UI マップの編集、またはアサーションの追加」 は、今から行う操作です。Visual Studio からキャプチャ＆リプレイを行うことができ、それを即座に C# や VB.NET のコードとして生成してくれます。
操作を記録する際は、Visual Studio が最小化され、代わりにこの 「コード化された UI テスト ビルダー」が起動します。
をクリックすることで、いわゆる「記録」を取り始めることができます。
コード生成するには、
をクリックします。
メソッド名とコメントを入れて [追加と生成] ボタンを押下するだけです。
続けて、アサーション (検証ポイント) を設定します。
をクリックして、検証するオブジェクトへドラッグ＆ドロップします。
プロパティと値が一覧にでてきますので、アサーションとして検証したい項目をクリックし、 をクリックします。
Assert の内容をインプットして、 [OK] ボタンをクリックします。再度、
コード化された UI テスト ビルダーを閉じると Visual Studio に戻ってきます。
this.UIMap.RecordedMethod1(); が 操作の実行メソッドです。this.UIMap.AssertMethod1(); がアサーションのメソッドです。これらの詳細ももちろん、(この場合は) C# のコードになっていますので見ることができます。
自動 UI テストの実行
実行は、単体テストですので、テストメソッドを右クリックして、「テストの実行」でもいいですし、テスト エクスプローラーから実行してもいいです。
実行すると、IE が起動され、実施した操作を自動で行いながら、アサーションの部分の検証を行ってくれます。
テスト結果は、以下のように。
余談ですが、このテストエクスプローラーから、コードカバレッジを取るようにすることもできますし、この UI テストのプロファイラ（動的コード分析）を行うこともクリック一つできます。
以下は、プロファイラをかけた結果です。
Google Chrome で UI テストを実行
さて、ブラウザを変更するには、テストメソッドの一番初めに一行コードを追加するだけです。
追加したのは、「BrowserWindow.CurrentBrowser = “chrome”」だけです。
さて、これでもう一度、テストを実行してみましょう！
Chrome でテストが実行されました。
「BrowserWindow.CurrentBrowser = “firefox”」 とすると
Firefox でテストが実行されました。