読者です 読者をやめる 読者になる 読者になる

Xamarin 日本語情報

Xamarin(ザマリン) の代理店だったエクセルソフト田淵のブログです。主に Xamarin に関するエントリーをアップしていきます。(なるべく正しい有益な情報を掲載していきたいと考えていますが、このブログのエントリーは所属組織の公式見解ではありませんのでご注意ください)

Xamarin Test Cloud/Xamarin.UITestを使ってみよう

Xamarin Xamarin Test Cloud

こんにちは。エクセルソフトの田淵です。

3年目になりました、Xamarin Advent Calendar!今年も2日目を担当します!

Xamarin Test Cloudとは?

Xamarin Test Cloud(XTC)は2,000台以上の実機でUIテストが出来るクラウド上のテスト環境です。Xamarinのユーザーさんは(多分)1月60分無料で使えますので、是非試してみてください。

ローカルのXamarin Android Player(XAP)やiOS Simulatorで実行する場合は完全にタダです。

このエントリーでは、ローカルでのテストXamarin.UITestの作り方、動かし方を紹介します。もう一度言いますが、タダですので是非使ってみてください♪

ローカルでテストを作ってみよう

XTCのテストはC#またはRuby(Calabash)で記述します。Calabashでのテスト環境の作り方、テストコードの書き方は私のブログに纏めてありますのでそちらをご参照ください。

今回はXamarin.FormsのアプリのテストをC#書いてみます。

2015/11/22の最新版、Xamarin Studio 5. 10、Xamarin.Forms 2.0.6482、NUnit 2.6.3(NUnit 3系だとエラー出たので2系の最新で)、Xamarin.UITest 1.2.0 を使用しています。Visual StudioでもAndroidのREPLは可能ですが、iOSが出来ないのでMacでやってしまうのがお手軽です。

前準備・アカウント

Xamarin.UITestの実行にもXTCのアカウントがアクティベートされている必要があります。XamarinのアカウントとXTCのアカウントは(多分)別に管理されているので、XTCのページにアクセスし、以下の画面が出ると思うので右下の[Accept Term Of Use]をクリックしてログインします。

f:id:ytabuchi:20151122113530p:plain:w450

準備完了です。

ソリューションにテストプロジェクトを追加

Xamarin.Formsのソリューションを右クリックして[追加>新しいプロジェクトを追加]を選択しプロジェクト作成ダイアログで[Cross-platform]ー[Tests]ー[UI Test App]をクリックします。

f:id:ytabuchi:20151122113720p:plain:w450

f:id:ytabuchi:20151122113750p:plain:w450

名前を付けて[作成]をクリックするとプロジェクトが作成されます。

ファイルが2つ出来ています。AppInitializer.csTest.csです。

AppInitializer.csはテストを初期化するコードです。プロジェクトがなくても、ここでappapkをパスで追加できます。

Test.csがOSを判別して上記初期化コードを呼び出し、テストを実行するコードです。

[Test]
public void AppLaunches()
{
    app.Screenshot("First screen.");
}

ここにテストコードを書いていきます(私はまだ書けないですがw)。普通に書いても良いのですし、次に紹介するREPL機能を使ってテストを記録してコードに落とすことも出来ます。

テストを自動記録

単体テスト]パネルでテストプロジェクトを右クリックして、Add App Projectをクリックします。

f:id:ytabuchi:20151122113827p:plain:w300

Xamarin.Formsのプロジェクトを指定します。

f:id:ytabuchi:20151122113843p:plain:w300

追加したプロジェクトを右クリックすると、Simulator、Emulatorで実行するイメージを選択できます。(Android Emulatorは現在はXAPのみがサポートされています。)

f:id:ytabuchi:20151122113934p:plain:w300

f:id:ytabuchi:20151122113944p:plain:w300

AppInitializer.cs[Setup]app.Repl();を追加します。

[SetUp]
public void BeforeEachTest()
{
    app = AppInitializer.StartApp(platform);
    app.Repl(); // 追加
}

テストを実行しましょう。

f:id:ytabuchi:20151122114120p:plain:w300

コンソールが開いて、待受状態になります。

f:id:ytabuchi:20151122114140p:plain:w450

コントールを一覧表示するtreeを入力すると、今回の例では以下のように表示されます。黄色の文字が各コントールのidです。

f:id:ytabuchi:20151122114222p:plain:w450

f:id:ytabuchi:20151122114811p:plain:w450

今回はXamarin.Formsのアプリなのでidが同じですが、Xamarin.iOS、Xamarin.Androidのアプリでは、idを同じに指定することが同じコードのテストを動作させるキモになります。

app.Flash("UserText")を入力してみます。("UserText"の部分はコントールのidに置き換えてください。)入力時にコード補完が効くことが確認できます。

f:id:ytabuchi:20151122114939p:plain:w450

app.Flash("UserText")を実行すると、上のユーザー入力欄がビカビカとフラッシュして、その後コンソールに情報が表示されます。

f:id:ytabuchi:20151122115002p:plain:w450

このようにコンソールで直接Simulatorを操作することが出来ます。試しに以下を実行してみます。「ユーザー名、パスワードを入力して、一度エラーが出ることを確認して画面写真をとり、正しいパスワード(このサンプルアプリではUserTextの最初の2文字が大文字だとOK)を入力して画面遷移することを確認して画面写真を取る。」というテストシナリオです。

app.Flash("UserText")
app.EnterText(c=>c.Marked("UserText"), "test")
app.ClearText("UserText")
app.EnterText(c=>c.Marked("UserText"), new string('9', 10))
app.Tap(c=>c.Marked("LoginButton"))
app.Screenshot("Login Error")
app.Tap("OK")
app.ClearText("PassText")
app.EnterText(c=>c.Marked("PassText"), "TEst")
app.Tap("LoginButton")
app.WaitForElement("WelcomeLabel", "Welcome test !!")
app.Screenshot("Login Success")

この流れをYoutubeにアップしてありますので動きをご覧ください。

なお、スクリーンショットAndroidでは以下のようにユーザーのディレクトリに作成されます。iOSは出来なかったような… 興味のある方は調べてみてください。

>>> app.Screenshot("Error")                                                   
Took screenshot. { Path: "/Users/ytabuchi/screenshot-1.png", Title: "Success" } {                                                                                   OriginalPath => "/Users/ytabuchi/screenshot-1.png",                             FullPath => "/Users/ytabuchi/screenshot-1.png"                              }

最後にCopyを入力するとREPLで操作した内容がクリックボードにコピーされますので、AppLaunches()メソッドに貼り付け、BeforeEachTest()メソッドapp.Repl()コメントアウトし、[単体テスト]パネルから[テストを実行]をクリックしましょう。

実行してみたのもYoutubeにアップしてありますので、ご覧ください。

という感じで、Xamarin.UITestを使うと簡単にテストを作成することができます。ローカルの実機でも試すことができますので、今まで開発者の皆さんでポチポチテストしていた退屈な時間はこれで解消できますね。

Xamarin 4/Xamarin Test Recorder

Xamarin 4と同時に Xamarin Test Recorder が発表になりました。Xamarin Test Recorderはなんとコマンド打ったりも必要なくて、UIを操作するだけでテストを記録出来るステキツールです。リンク先にビデオがありますので、是非見てみてください。

インストールして起動すると、次のダイアログが表示され、APIキーを求められます。ダイアログのリンクにアクセスし、APIキーを取得してください。

f:id:ytabuchi:20151122115050p:plain:w300

で、動かしてみようと思ったんですが、実行すると

f:id:ytabuchi:20151122115111p:plain:w300

とエラーになって試せませんでした。ドキュメントがありますので、どなたか試してやり方を教えて下さい><

Xamarin気になった方は

是非 ダウンロード(直接) / ダウンロード(弊社経由) して触ってみてください。 学習用リソースJXUG リンクページ に参考資料を纏めてますので併せてどうぞ。

Xamarin の情報が欲しい方はこのブログも購読いただいたりすると嬉しいです。

明日は

明日は"Macの人"こと、@ailen0ada さんです。よろしくお願いします!

以上です。