[iPhone] JavaScriptを使ってUIのデバッグを自動化してみた

2010年12月14日

はじめに

そろそろ今年も終わりそうで、絶望してるみなさんこんにちは。「プログラマが知るべきじゃない97のこと」って書籍が出たら読みたいダニーです。
iPhone開発でユーザーインターフェースをテストする時、いちいち手作業でやるのは大変ですね。
今回はUI Automationでユーザーが行う操作を自動的に動かすのを試してみたので紹介したいと思います。

実例

実例としてWall CalendarというiPhoneアプリで以下の操作をJavaScriptで自動化したいと思います。

ユーザー名を入力する。
パスワードを入力する。
カレンダーリストの項目を押す。
カレンダーリストに表示された２番目のカレンダーをオンにする。
カレンダーリストに表示された３番目のカレンダーをオンにする。
カレンダーリストの設定ボタンを押す。
次へボタンを押す。

画面

ユーザー名とアカウントの入力画面がこのようになってます。

カレンダーリストをタップすると、カレンダーリストの画面に遷移します。

UITableViewの取得

[cc lang='js']
var target = UIATarget.localTarget();
var app = target.frontMostApp();
var table = app.mainWindow().tableViews()[0];
[/cc]
app.mainWindow().tableViews()[0]でUITableViewを取得します。

ユーザー名を入力する

[cc lang='js']
table.cells()[1].tap();
[/cc]
ユーザー名はUITableViewのセルの2番目なのでtable.cells()[1]でtap()
することによりフォーカスを合わせます。

[cc lang='js']
table.cells()[1].textFields()[0].setValue('username');
[/cc]
入力フィールドはテキストフィールドなのでtextFields()[0]そこに
ユーザー名を入力するのでsetValue('username')で任意のユーザー名を入力します。

パスワードを入力する

[cc lang='js']
table.cells()[2].tap();
[/cc]
ユーザー名はUITableViewのセルの3番目なのでtable.cells()[2]でtap()
することによりフォーカスを合わせます。

[cc lang='js']
table.cells()[2].secureTextFields()[0].setValue('password');
[/cc]
入力フィールドは入力が見えないテキストフィールドにしてるのでsecureTextFields()[0]で、
そこにパスワードを入力するのでsetValue('password')で任意のパスワードを入力します。

カレンダーリストの項目を押す

[cc lang='js']
table.cells()[3].tap();
[/cc]
カレンダーリストはUITableViewのセルの4番目なのでtable.cells()[3]で、そこをタップすればいいのでtap()。

カレンダーリストに表示された２番目のカレンダーをオンにする

[cc lang='js']
table.cells()[1].switches()[0].setValue(true);
[/cc]
カレンダーリストの画面で2番目のセルはtable.cells()[1]でその中のUISwitchはswitches()[0]で、
そこをオンにすればいいのでsetValue(true)。

カレンダーリストに表示された３番目のカレンダーをオンにする

[cc lang='js']
table.cells()[2].switches()[0].setValue(true);
[/cc]
カレンダーリストの画面で3番目のセルはtable.cells()[2]でその中のUISwitchはswitches()[0]で、
そこをオンにすればいいのでsetValue(true)。

カレンダーリストの設定ボタンを押す

[cc lang='js']
app.mainWindow().navigationBar().buttons()[0].tap();
[/cc]
カレンダーリストの画面で設定のボタンはapp.mainWindow().navigationBar().buttons()[0]で、そこをタップすればいいのでtap()。

次へボタンを押す

[cc lang='js']
app.mainWindow().navigationBar().buttons()[0].tap();
[/cc]
前の操作で設定の画面に戻り、設定の画面の次へのボタンはapp.mainWindow().navigationBar().buttons()[0]で、そこをタップすればいいのでtap()。

まとめ

全体をまとめるとこのようになります。target.delayはUIを操作したときのアニメーションが終わるのを待つために入れてあります。

[cc lang='js']
var target = UIATarget.localTarget();
var app = target.frontMostApp();
var table = app.mainWindow().tableViews()[0];

table.cells()[1].tap();
target.delay(2.0);

table.cells()[1].textFields()[0].setValue('username');
target.delay(2.0);

table.cells()[2].tap();
target.delay(2.0);

table.cells()[2].secureTextFields()[0].setValue('password');
target.delay(2.0);

table.cells()[3].tap();
target.delay(2.0);

table.cells()[1].switches()[0].setValue(true);
target.delay(2.0);

table.cells()[2].switches()[0].setValue(true);
target.delay(2.0);

app.mainWindow().navigationBar().buttons()[0].tap();
target.delay(4.0);

app.mainWindow().navigationBar().buttons()[0].tap();
[/cc]

動かしてみる

Instrumentsを起動して、Automationを選択します。

TargetをWallCalendar.appを選択して、Recordを押します。

Editを押して、まとめで書いたスクリプトをauto.jsという名前にして読み込みます。
auto.jsを選択してStart Scriptを押します。これで実行されます。

最後に

UI Automation を使うと動作確認をしたい動作を一回スクリプトで書いてしまえば、後から動作確認が自動化できるので便利だと思います。
実機の場合はPCとケーブルを繋いでInstrumentsを起動した場合は動作するので、iPhoneアプリのデモ動画を撮る場合にも、指が入らないように撮れるのでいいと思います。
実際に動かしてみたデモを載せておきます。

シミュレーター