UIテストコード化 はじめの一歩

UI テストの自動化は、システム開発をしている方であれば、1度は考えてみたことある問題ではないでしょうか。今回は 1行もコーディングをすることなく、Visual Studio の Coded UI Test を用いて UIテストの実装・実行してみたいと思います。

最近、UIテストの自動化を調査しています。今まで手動でテストしてきた部分を単に置き換えるだけでなく、もう少し攻めの使い方が出来ないかとか思案中です。ITエンジニアとしては開発現場が少しでも楽に品質よくモノを作れるように改善の努力は必須ですね。テストの効率化や品質向上はその1つだと考えています。ソフトウェアの製造コストの半分はテストのコストですからね。

Coded UI Test

Microsoft的には、日本語で言うと “コード化されたUIテスト” と言うらしい。

UI オートメーションを使用してコードをテストする | Microsoft Docs

ちょっとイケてないし長いので、Coded UI Test もしくは CUIT と書くことにします。あまり日本語での情報も豊富ではないので、Webで情報収集する場合も “CUIT” とかで検索すると良いと思います。

Coded UI Test は、Visual Studio 2010 ぐらいから存在しています。私も存在は知っていましたが、なかなか使用する機会がありませんでした。Visual Studio はそれなりの値段がするから、使い倒さないと本当にもったいないと思い、色々調べたり試したりするようになりました。

昨今、自動テスト化が進む中で、Webサイトのテストでは、Selenium が言わずもがな有名ですが、Coded UI Test も Webサイトのテスト が出来ます。MS系言語限定、Windwos FormsとかWPFとかのみサポートなのかなと思い込んでいましたが、Webアプリケーションのテストでも使えることを最近知りました。バックグラウンドの実装方法は関係なくです。(知るの遅すぎますね・・・)

準備

Coded UI Test を実施するにあたって、もちろんVisual Studio が必要です。しかも、Enterprise エディションが必要です。こればっかりは仕方ない、プロジェクトの開発費で購入するしかないです。今回はまだ正式版でない、Visual studio 2017 rc (vs2017)を使いたいと思います。

ダウンロードサイトはここです。

Visual Studio 2017 RC - Visual Studio

3/7に正式版が出ました

www.visualstudio.com

VS2017では、インストールする際に特定の機能だけで構成することができるようになっていますので、[個別のコンポーネント] から [デバッグとテスト]、[コード化されたUIテスト]の機能を有効にして、インストールしましょう。VS2017はかなりインストール時間が短縮されてる印象ですので、サクッと入れることができます。余計なものが入らなくなっているので容量的にもいい感じですね。

サンプルサイト

実際に試してみるために、日本Seleniumユーザーコミュニティのテスト用サイトを使って行こうと思います。Selenium を試すわけじゃないけど、まぁよいでしょう。UIテストのコード化という目的は同じですから(無理やりなこじつけです)

このテスト用サイトは、単純な宿泊予約システムとして提供されています。

http://example.selenium.jp/reserveApp

すごーく、シンプルな画面です。サンプルとする分にはいいですが、皆さんの作成するアプリケーションはこんなに単純ではないですよね。

テストケース設計

単純なサンプルサイトなので、テストケースの設計をするまでもないのですが、一応、どのようなテストを行っていくのか、簡単に考えて置きたいと思います。

1. IEの起動
2. URLを入力しテスト用サイトを表示
3. “宿泊日"の入力(例：2017年1月19日 2泊)
4. “人数"の入力(例：4人)
5. “朝食バイキング"の選択(例：あり)
6. “名前"の入力(例：自動化 太郎)
7. “次ぐ"へ押下
8. 遷移先"予約内容"画面の表示
9. “確定"ボタン押下
10. 遷移先"予約完了しました"画面の表示

シンプルな正常系のテストケースのみを考えていくことにします。

プロジェクトの作成

新規でプロジェクトを作成していきます。[テンプレート]/[Visual C#]/[テスト] で [コード化されたUIテストプロジェクト]のテンプレートを元にしてプロジェクトを新規で作成します。

■ 画像 : プロジェクトの追加

Code UI Test Editor でのオペレーションの記録

さっそく自動UIテストのコードを作成していきます。自動UIテストのコードを作成するには、CUITで提供されている Coded UI Test Builder というものを使います。Record and Playback を提供するためのツールといったところでしょうか。このツールによって、テストスクリプトを1から実装することなく、テストオペレーションを記録することで、コード化も行ってくれる便利なものです。ただし、Webアプリケーションでは IEでのオペレーション記録のみ対応 です。

作成したプロジェクトでデフォルトで作成されるテストクラス(おそらく、CodedUITest1.cs)を開き、テストメソッドを探します。テストメソッド(おそらく、CodedUITestMethod1)で、コンテキストメニュー → [コード化されたUIテストコードの生成] → [コード化されたUIテストビルダーの使用]でテストオペレーションを記録するためのツールが起動できます。ctrl+￥ctrl+cでも起動できます。

[TestMethod]
public void CodedUITestMethod1()
{
    // このテストのコードを生成するには、ショートカット メニューの [コード化された UI テストのコードの生成] をクリックし、メニュー項目の 1 つをクリックします。
    ←←←ここにカーソルを合わせて、テストオペレーションの記録をしていきます。
}

■ 画像 : コード化された UI テスト ビルダー(左から、記録ボタン、ステップの編集ボタン、アサーション追加ボタン、コードの生成ボタン)

UI Test Builder の記録を開始して、ブラウザの起動から順番にオペレーションします。Windows上での操作をすべて記録していってしますので、余計な操作(たとえばメモ帳を開くとか)を行ってしまうとそれも記録されてしまうので、多少注意が必要です。とは言いつつ、あとから余計な操作は削除することは可能なので、それほど神経質になる必要はないです。

■ 画像 : 記録したテスト内容の一例

テストオペレーションが一通り終われば、記録の停止をして記録内容を確認します。ここで内容がOKであれば、そのままコード化を行います。余計な操作がある場合は、削除をしてもらって、もしやり直したい場合は、コード化せずにビルダーを閉じて、再度ビルダーを立ち上げ、記録のやり直しをしてもらえればOKです。メソッド名は、デフォルトでもいいし、自分の好きな名前で構いませんよ。

コード化されると、上記のように1行追加されます。操作を記録した実態は、UIMapクラスというところに格納されます。

[TestMethod]
public void CodedUITestMethod1()
{
    // このテストのコードを生成するには、ショートカット メニューの [コード化された UI テストのコードの生成] をクリックし、メニュー項目の 1 つをクリックします。
    this.UIMap.seleniumTestPage_form_input_01();
}

コードの中身の細かい説明は、長くなるので別の機会にしたいと思います。

テストの実行

では、作成したテストを実行してみましょう。実行は、Visual Studio のテストエクスプローラを使用してもいいですし、テストクラスでコンテキストメニューから [テストの実行] のどちらでも実行可能です。テストエクスプローラの場合、未実行のテストにCodedUITestMethod1が存在しているはずですので実行するだけです。実行するとビルドが走った後に、ブラウザが自動的に起動して、記録したテストオペレーションが次々に実行されていくと思います。

■ 画像 : テスト実行結果

Visual Studio を使用していますが、1行もコードを書くことなく、テストコードの追加から、実行まで実施することができました。自動テストの導入では、テストコードを1からコーディングするとなると拒否反応を示すプロジェクトも多いかと思います。その時に突破口として、こんなに簡単にできるよって示してあげてもいいかもしれません。