Webアプリのテストの定番といえば、SeleniumかWatiNなのかな、というレベルのWebアプリテスト初心者ですが、Seleniumの後継にあたる(この辺あいまい)Sauceっていうのを試してみたよ！
まだないけどいつかDimeCastsでビデオが公開されるに違いない。
試すにあたり、何かしらプログラムが必要だろうと、昨日ハンサムスーツを見ながらシンプルブログ(全然ブログじゃないというのは本題じゃないYO！)を作ってみた。
タイトルいれて本文入れるだけね。せっかくだからASP.NET MVC RC2で。話はそれるんだけど、RC2のItem Templateはイマイチかも。TextBoxForなんかは新しいTemplateベースのDisplayForやEditorForに揃えてくれるともうちょっと素敵さが増すんじゃないかな～。せっかくDataAnnotationsでDisplayName属性を指定してもLabelForで展開しないとそこから表示名を取得してくれないじゃないっすか。Listテンプレートは面倒かもしれないけど、そうじゃないところはDataAnnotationsの属性を生かせるヘルパーを使った物に統一してもらいたいデス。せっかくUIHintでカスタムEditorTemplatesを指定しても効いてくれなくてちょっと切なかった。
↑一覧ページ。殺風景ですいません。
↑新規ページ。同じフォーマットで編集ページもあるよ。ここで入力エラーがあると、DataAnnotationsがバシっと効いてくれるのがV2の素敵なところ。
↑新規登録すると一覧に表示されるよ。殺風景ですいません。
↑詳細ページ。コレといって何も無いですね。あ、本文にはHTMLが入るイメージなのでHTMLエディターをEditorTemplatesで作ってもいいね。今ならMarkdownのほうがオシャレかの～。
↑削除ページ。削除すると、一覧ページに戻るだけ。
とりあえずこんなのを作って、これに対してテストを実施させてみようじゃないですか。
実行したいテストは以下の通り。
- 1件も登録されてない状態で新規登録
- 1件以上登録されてる状態で新規登録
- 未入力状態でCreateを押してモデル検証をエラーにする
- 登録されているすべてのエントリを削除する
今回認証は無しで。
そもそもSeleniumすら使った事ないけど、まずはSauce LabsのProductsトップにあるビデオを確認。ふ～ん、ってなもんです。とにかく、Sauce IDEをFirefoxにインストールして、Sauce RCをローカルPCにインストール。まずはこれでいいっぽい？う～ん残念。Selenium RCをダウンロードしておかないとUnit TestをC#で実行できないみたいです。
Sauce IDEがテストレコーダーで、Sauce RCがテスト実行サーバー、Selenium RCがテストを実行させるのに必要なアセンブリ(Sauce RCサーバーとの通信を行う)を提供、って具合の理解でよろしかろうか。Sauce RCはJavaアプリで、Webベースの管理インターフェースもありそこでテスト実行ブラウザやその他設定の変更ができると。
テスト実行する場合、ブラウザを起動してそのブラウザをコントロールすることでテスト実行と結果取得する仕組み？Sauce IDEが表示してくれる、C#のコードはNUnitを基本になってて、そこはMSTestでよしなに動くようにチョチョッと変更。大枠はTestInitializeでDefaultSeleniumを初期化するようにするのと、TestCleanupでDefaultSeleniumの停止処理、あとはひたすらテスト書く。
private ISelenium selenium;
private StringBuilder verificationErrors;
[TestInitialize]
public void Setup()
{
selenium = new DefaultSelenium(
"localhost",
4444,
"*firefox",
"http://localhost:20337/");
selenium.Start();
verificationErrors = new StringBuilder();
}
[TestCleanup]
public void TeardownTest()
{
try
{
selenium.Stop();
}
catch (Exception)
{
// Ignore errors if unable to close the browser
}
Assert.AreEqual("", verificationErrors.ToString());
}
あと、ちゃんとSelenium RCのダウンロードしたアセンブリをテストプロジェクトでは参照設定しとこうね。
DefaultSeleniumの1個目と2個目のパラメータはなんじゃらホイ。3個目はブラウザっぽくて4個目がテスト対象アプリのアドレス。どうもこの1個目と2個目がSauce RCのサーバーらしい。RCの制御用Webインターフェースはhttp://localhost:8421/ でポートが8421。実際のアプリはポートが20337と、いろいろ仕組みを理解しておかないと～。Sauce OnDemandっていうクラウドサービスもあるからね～。
上記初期コードを書いておけば、あとはIDEの出してくれるC#コードをコピペっちょ！なんだけど、それだと思ったようなエレメントを指してくれない。実行結果のHTML全体に文字列が含まれてるかをチェックするIsTextPresentなんかを使うのはテストとして成立しないっすよね。
なので、エレメントの参照はCSS SelectorかID指定かXPath指定がオーソドックスな指定の仕方になるかと思うわけです。でね、Firebugってさ、前バージョンまでは別途Plug inを入れないとXPathの取得ってできなかったけど新しいバージョンになって”XPathをコピー”っていう機能が標準で実装されてるじゃないですか。
↑エレメントのXPathが表示されてるから↓右クリックでコピーだ！
で、対象となるエレメントを特定するためのXPathは何の苦労もなく取得できちゃうので、テストコードのアサーション部分やClick対象のエレメントなんかもこれを使って一意に特定だぜ！
[TestMethod]
public void A_First_Entry()
{
selenium.Open("/");
selenium.Click("link=Create New");
selenium.WaitForPageToLoad("30000");
selenium.Type("Title", "first");
selenium.Type("Body", "最初のエントリ");
selenium.Click("//input[@value='Create']");
selenium.WaitForPageToLoad("30000");
Assert.IsTrue(
selenium.GetText("xpath=/html/body/div/div[2]/table/tbody/tr[2]/td[2]")
==
"first");
// 最初のDetailsをクリック
selenium.Click("xpath=/html/body/div/div[2]/table/tbody/tr[2]/td/a[2]");
selenium.WaitForPageToLoad("30000");
Assert.IsTrue(
selenium.GetText("xpath=/html/body/div/div[2]/fieldset/div[4]")
==
"最初のエントリ");
}
↑こんな感じで入力値と入力結果を比較してちゃんとHTML的に想定通りの結果が生成されてることをテストコードに書けちゃうのが素晴らしい。無知って怖い。これまで自分は一体なにをしてたんだと言いたい。
これらテストを実行する時に、MSTest(かReSharperのテストのどっちがそういう仕様なのかは知らないけど)だとテストメソッド名順に実行されるので、テスト内容が直前の実行結果に依存するような場合は、プレフィックスを決めておく必要があったりしそう。テストクラスそのものを分けてしまうのもありだけどね。
実行すると、ブラウザが起動してあとは勝手に処理してくれるっす。
↑これがFirefoxで実行してるところ。
↑こっちがIEで実行してるところ。
ブラウザの切り替えはTestInitializeの設定じゃなくて、Sauce RCの設定画面が優先、っぽい。何にせよ、初めてのWebアプリのユニットテストとしては好感触。今後も精進していきます。
今回のサンプルアプリとテストコードは↓こちらからどうぞ。
※ちなみにサンプルアプリ自体のテストコードはないのであしからず。
