[iPhone] JavaScriptを使ってUIのデバッグを自動化してみた
[iPhoneプログラミング]iPhone SDK 4からの新機能UI Automationの使い方
などで、Instruments Automationを使用して、XcodeのiOS用プロジェクトをUIテストする例が述べられています。
また、
titanium/UIをテストする（iPhone編）
で、Instruments Automationを使用して、Titanium MobileのプロジェクトをUIテストする例が述べられています。
Instruments Automationは、InterfaceBuilderを使ったプロジェクトを前提としているらしく、シンプルなnon IBのプロジェクトでは、アプリケーションに含まれるUI 要素の名前を使った参照ができないようです。
試しにUI要素の階層構造を取得するために
UIATarget.localTarget().logElementTree();で、Titanium Mobileプロジェクトの情報を取得してみると、
--logElementTree()
2) UIAApplication [name:Sample value:(null) rect:{{x:0, y:20}, {width:320, height:460}}]
3) UIAWindow [name:(null) value:(null) rect:{{x:0, y:0}, {width:320, height:480}}]
4) UIAStaticText [name:capability value:(null) rect:{{x:20, y:70}, {width:100, height:50}}]
4) UIAStaticText [name:1 value:(null) rect:{{x:135, y:70}, {width:50, height:50}}]
4) UIAStaticText [name:state value:(null) rect:{{x:20, y:170}, {width:100, height:50}}]
4) UIAStaticText [name:0 value:(null) rect:{{x:135, y:170}, {width:50, height:50}}]
4) UIASwitch [name:(null) value:0 rect:{{x:113, y:270}, {width:94, height:27}}]
のように、nameの値が(null)になっているものがあります。
多くの場合、UI要素にtitleプロパティがないもので、nameの値が(null)になるようです。
例えば、Ti.UI.windowならば、titleプロパティを設定すれば、nameによって参照できるようになります。それに対して、Ti.UI.Switchにはtitleプロパティがないようです。そもそもTi.UI.Switchの実体であるUISwitchに該当するプロパティが存在していません。
勢い、nameによる参照をあきらめて、
var switchs = view.switches();
switchs[0].setValue(true);
のように、インデックスによる参照に向かってしまいますが、おそらくこの方式では、Titanium Mobileプロジェクトのコード内で、UI要素をaddする順番を変えたりすると、テストがテストにならない結果になってしまいます。
ではどうすればよいのか？
Instruments AutomationはIBで設定されるAccessibility Labelをnameとして使用しています。non IBのプロジェクトをInstruments Automationでテストするには、テストしたいUI要素に対して、自前でsetAccessibilityLabelを使ってラベルを設定してやる必要がある訳です。
（ここから先は、Titanium Mobile SDKにある元のObjective-Cのソースファイルに手を加える形になりますので、On Your Riskでお願いします）
Ti.UI.Switchを例にとると、Titanium Mobile SDKディレクトリ（/Library/Application Support/Titanium/ か ~/Library/Application Support/Titanium/）以下のmobilesdk/osx/<sdk version>/iphone/Classes内のTiUISwitch.mが対応するソースファイルになります。
これで、Ti.UI.Switchに対して設定可能なtitleプロパティが追加されたことになります。
Titanium側のJavascriptでは、
UI Automation Reference Collection（ここから先は、Titanium Mobile SDKにある元のObjective-Cのソースファイルに手を加える形になりますので、On Your Riskでお願いします）
Ti.UI.Switchを例にとると、Titanium Mobile SDKディレクトリ（/Library/Application Support/Titanium/ か ~/Library/Application Support/Titanium/）以下のmobilesdk/osx/<sdk version>/iphone/Classes内のTiUISwitch.mが対応するソースファイルになります。
@implementation TiUISwitchの実装部分に以下のメソッドを追加します。
@end
-(void)setTitle_:(id)value
{
UISwitch * ourSwitch = [self switchView];
[ourSwitch setIsAccessibilityElement:YES];
[ourSwitch setAccessibilityLabel:[TiUtils stringValue:value]];
}
これで、Ti.UI.Switchに対して設定可能なtitleプロパティが追加されたことになります。
Titanium側のJavascriptでは、
var sw1 = Ti.UI.createSwitch({
value:false,
title:'testSwitch',
height:'60dp',
width:'150dp',
top:'250dp'
});
のように、titleプロパティの値を追加してcreateするようにします。
これによって、Ti.UI.Switchにもnameをつけることができました。
Ti.UI.Switch以外のUI要素についても同様の追加が可能と思われますので、必要な部分に適宜追加するのがいいと思います。
（TiStudioで既に作成中のプロジェクトについて、上の結果を反映させるには、TiStudioで[project > clean...]でクリーンした上で、プロジェクトパスにあるbuild/iphone/Classes以下のファイルを削除しておくのがよいかもしれません）
