EarlGreyを使った画面操作を伴う自動テスト

こんにちは、技術部品質向上グループの茂呂一子です。

品質向上グループではモバイルアプリにおける自動化されたテストの一環として、画面操作を伴うテストを実施しています。 例えば、古くからAppiumを使い、その結果を判定するという施策を行っています。(参考: iOSアプリデザインリニューアルの舞台裏の舞台裏)

クックパッドではAppiumも利用していますが、より高速に実行できるツールとして、EarlGreyというGoogle製のフレームワークの導入を試みています。

この記事では、EarlGreyの導入と現状についてまとめます。

内容は、iOS Test Night #1 でLT発表した内容からの抜粋です。LT資料はこちら

画面操作を伴うテストの自動化

クックパッドでは、 モバイルアプリの最低限の機能を確認する用途で画面操作を伴うテストを自動化しています。 このテストは、Android/iOSアプリのテストの区分戦略にて定義しているサイズをもとにすると、L/Eサイズに当たるような領域にを対象にしています。 ユーザーに提供する体験を簡易的なシナリオとしてまとめ、 それが完遂されることとレイアウトのくずれが発生しないことをみて、最低限のアプリの価値を確認しています。

画面操作の自動化を支援するツールとして、Appiumを聞くことが増えてきたように思います。

クックパッドでもAppiumは利用していますが、開発ラインに組込むにはよりCIへの組込みが容易で、より高速に実行できるツールが望ましいです。 その候補となるツールには、XCUITest、EarlGreyなどがあります。

Xcode 7が出た頃にXCUITestを試しましたが、テストプロセスの起動に失敗したり、画面上の要素(ボタンなど)の検出に不安定さがあり、実用を目指すには至りませんでした。 その後、EarlGreyが登場し、試用をすすめています。

EarlGreyを使ったテスト

EarlGreyは、Google製のUI Automation Test フレームワークです。 Xcode の提供する XCTest Framework の上で動き、Xcode上でコーディングして実行することができます。

Appiumに比べると、 実装が製品コードに近い場所にあり、実行速度が速く、XCTestの拡張なのでCIへの組込みが容易です。 一方、Swiftコードで記述するために可読性が下がるほか、 テストのライフサイクルが狭いためにシミュレータの初期化できず、前後のテスト実行の成否に影響を受けやすいです。

EarlGreyは、基本的な機能がそろっており、特定の要素が表示されるまでスクロールするなどの便利な機能も提供されています。 しかし、クックパッドアプリで使うにはひとつ足りなくて困ることがあります。

SystemAlertを操作したい

iOSには、カメラの使用やプッシュ通知の許可など、ユーザーに許諾を求めるダイアログがあります。(以下システムアラート) システムアラートは、許可する/しないを選択する必要があり、画面操作をする上で避けて通ることができません。

f:id:ichiko_revjune:20161209203230p:plain

XCUITestでは、システムアラートの操作が可能となっていますが、EarlGreyはXCTest上で動くため、この操作ができません。 EarlGreyのリポジトリにissueがありますが、すぐに解決ができない状態のようです。 このissueの中に、Facebook/WebDriverAgentが使えたというコメントがありました。 これをヒントに、WebDriverAgentLibを使用して実現を試みました。

以下の試みは、EarlGrey v1.3とXcode 7.3.1、Swift 2.2を使用しています。

WebDriverAgentを使ってシステムアラートを操作する

WebDriverAgentLibは、Carthage対応されていますが、試した時点ではコンパイルできないなどの不具合があり、一部のコードをインポートする形で導入しました。

WebDriverAgentLibの導入には手間がかかりましたが、これによってシステムアラートの操作は可能になりました。 以下のようなコードで、システムアラートの項目を選択することができます。 (FBAlertは、WebDriverAgentLibが提供するクラス)

let alert = FBAlert(application: XCUIApplication(privateWithPath: nil, bundleID: "BUNDLE_ID"))
if let alertElement = alert.alertElement() {
    let buttons = alertElement.descendantsMatchingType(XCUIElementType.Button).allElementsBoundByIndex
    let button = buttons.filter { $0.label == label }.first
    if let button = button {
        button.tap()
    } else {
        GREYFailWithDetails("Labled Button '\(label)' on Alert Dialog was not found.", details: "")
    }
} else {
    GREYFailWithDetails("Alert view was not found.", details: "FBAlert.alertElement returned nil.")
}

残念なことに、製品コードの開発が Xcode 8 に移行してからは、FBAlertを使ってシステムアラートを操作することができなくなりました。 WebDriverAgentはPrivate APIを使用するため、Xcodeのバージョンが変わることで整合性がくずれたのでしょう。

しっかり使って育てていきたい

EarlGreyはOSS(オープンソースソフトウェア)として公開されているフレームワークなので、必要な実装は追加していくことが可能です。 今回は、コミットするところまでいけませんでしたが、自分たちが使っていきたいものなので、まだ育てるフェーズと思ってどんどん試していきましょう。 クックパッドでは業務時間中のOSSへの貢献も認められているので、フレームワークへも貢献しつつ、それを活用していきたいですね。

クックパッドではこのような取り組みを共に実施し、より良いサービスを提供し続ける為にエンジニアを募集しています。ご興味のある方は、是非とも覗いてみてください。

青森観光アプリ開発コンテストに参加してきました

こんにちは。研究開発部の山田(@y_am_a_da)です。

11/18(金)〜20(日)の3日間、「観光」をテーマにしたアプリケーションの開発コンテストである「青森観光アプリ開発コンテスト」が星野リゾート 青森屋で開催されましたのでその報告をさせていただきたいと思います。

青森観光アプリ開発コンテストとは

青森県のファンを増やすため、青森屋が県内各地域の魅力を全てお客様に伝えきることの出来るアプリを企画・開発するコンテストです。

今回のコンテストでは、実際に観光客の目線を持てるように、参加者は青森屋に2泊3日の宿泊をしながら企画・開発を行いました。

クックパッドからは、投稿されているレシピのデータを提供するとともに、コンテスト当日もサービス開発やデータの使い方に関するアドバイザーが数名参加しました。

また、アマゾン ウェブ サービス ジャパンからもAmazon Web Serviceのアドバイザーが参加していました。

1チーム最大5名で、下は21歳、上は50歳と非常に幅広い年齢層の人々が集まり、アプリケーションの企画・開発を行いました。 当日に即興で決まったチームもいくつかありましたが、みなさんすぐに打ち解けて積極的にディスカッションを行っていました。

成果発表

コンテスト最終日に行われた発表は、作成したアプリケーションがどう役に立つのかを短時間の劇で表現するという形式のものでした。 いくつか賞がありましたが、その中でも青森屋賞、Amazon Web Service賞、クックパッド賞についてご紹介致します。

青森屋賞

  • チーム名:KBS
  • タイトル:青森屋探検隊 これなにアプリ

青森屋にはさまざまなものが展示されているのですが、それがなんなのかよくわからない!という自身の体験から生まれたアプリケーションです。

アプリケーションの内容は以下のとおりです。

  • 青森屋にある展示物にアプリを起動した状態でスマホのカメラをかざすとそれが何かを教えてくれる
  • アプリ内に青森屋の全体図を入れておき、ゲーム要素を追加して、青森屋を探検したくなる仕組みを作る

特に後者の機能が小学生の夏休みの自由研究のテーマとしても使ってもらえるのでは。ということで受賞となりました。 こちらは青森屋で来年サービス実現にむけて取り組むそうで、実現の際に入賞チームが宿泊御招待という副賞がついていました。

Amazon Web Service賞

  • チーム名:necco
  • タイトル:青森屋Watch

「体験をもう1つ多く」をコンセプトに青森屋で起きている色々なイベントを体験できなかった。いつどこでやるのかわからなかった。ということを防止するアプリケーションです。 青森屋では青森にまつわる様々なイベントが日々行われており、滞在中の満足度向上の他「他にもこういうのがあった、見たい」と知る事で再訪につながるそうです。

アプリケーションの内容は以下のとおりです。

  • 青森屋のどこでいつ何がやっているかがわかるようにタイムラインとかオススメが見れる

こちらのチームはある企業から5人組で参加しており、抜群のチームワークで最も高いデモンストレーションのクオリティを見せていました。

クックパッド賞

  • チーム名:青森フレーバー
  • タイトル:里山の郷土レシピからみつける、私だけの旅レシピ

こちらは独立したアプリケーションではなく、クックパッドに機能を追加するというものでした。内容は以下のとおりです。

  • 各地域の人が位置情報とともにレシピを載せることができる。
  • 「レシピから自分の旅のルートを決める」という項目をクックパッドにつけ、利用者は作ってみたいレシピベースで旅行の経路を決めることができる。

旅行ではその土地の郷土料理を食べることが楽しみの1つとなっているということ、実際に料理教室にその土地に旅行に来た人が来ることが少なくないということから考えられたそうです。

まとめ

私自身もコンテストが始まる前のアイスブレイクとして、頭の体操、ブレインストーミングのようなものに参加したのですが、置かれている環境や、価値観の違った人と意見をぶつけ合い、答えを出す作業というのはとても刺激的で楽しいものでした。

また、こういったコンテストにはメンターの方が来られることも多く、自分の知らない分野の疑問についても専門家の目線からアドバイスを頂けることがあるのでかなりお得感がありました。

クックパッドでは積極的にハッカソンを開催しており、直近では中高生No1を決めるcookpadハッカソンも開催します。今後も積極的にハッカソンなどを開催していきますので、その際にはぜひご参加頂ければと思います。

実例に基づいた大規模 iOS アプリの継続的な開発についての勉強会を開催しました

f:id:nano-041214:20161201191121j:plain

技術部モバイル基盤グループ新卒エンジニアの日高(@natan3)です。

去る11月17日、「Cookpad Tech Kitchen #4 〜Cookpad × MoneyForward〜」と題して、iOS エンジニア向けの技術交流イベントを行いました。

https://cookpad.connpass.com/event/43082/

このイベントでは、 iOS開発の中でも特に大規模アプリの品質を維持するための設計や、複数の言語圏や様々なパートナー企業に合わせたアプリの提供をテーマに、弊社のエンジニアから2つ、マネーフォワードさんから2つの発表がありました。

この記事では、その様子についてお伝えします。

iOSアプリケーションの海外展開

まず、海外事業部の西山(@yuseinishiyama)から、海外事業向けのiOSアプリケーションの開発フローについて紹介がありました。

How to make your app international by Yusei Nishiyama Published November 18, 2016 in Programming

この発表では

  • 言語圏に合わせたコンテンツや UI のローカライズ
  • RTL 対応
  • その他アプリのローカライズに関する Tips

などについて紹介しました。

私個人としては、普段日本向けの開発しかしていなかったので、アラビア語圏への対応などとても興味深かったです。

また、グローバルプラットフォームならではのサービス開発に対する取り組みは以下の記事でも紹介しています。

海外のユーザーを向いたプロダクト開発の工夫 iOSアプリケーションの国際化と地域化

トクバイ新アプリと Swift と

次に、クックパッドの子会社であるトクバイの行川(@hatuyuki4)から、トクバイアプリがどう Swift で開発を進めているかについての発表がありました。

トクバイ新アプリとSwiftと by Hatuyuki4 Published November 21, 2016

この発表では、Swift + RxSwift + MVVM の実装について具体例を交えながら紹介しています。

リアクティブな処理にすることで複雑なコールバックによる辛さから開放されたり、UnitTest が書きやすくなったりと Rx のメリットがわかりやすく示されているので、Rx 導入を考えている方にぜひオススメしたいスライドでした。

Ruby on Rails にはなりますが、react-rails を用いたアプリを開発する際の知見についてはこちらの記事で紹介しておりますので、興味の有る方はぜひこちらも御覧ください。

非SPAなサービスにReactを導入する

iOS Clean Architecture のすすめ

3番目の発表では、マネーフォワードさんの iOS エンジニアである児玉さんから、マネーフォワードではどのような設計で iOS アプリを開発しているのかについての発表がありました。

iOS Clean Architecture のすすめ by koutalou Published November 17, 2016 in Technology

この発表では、Clean Architecture の実装例と導入する際のメリットを紹介しています。

児玉さんの Github アカウントで iOS-CleanArchitecture のサンプル が公開されているので、私も試してみようと思いました。

児玉さんが執筆されたマネーフォワード エンジニアブログの記事はこちらにありますので、tvOS やマネーフォワードの開発体制に興味がある方はぜひこちらも御覧ください。

マネーフォワードのtvOSアプリケーションを開発した話

マネーフォワードの変遷と「パートナー企業版」の展開

最後に、マネーフォワードさんの iOS エンジニアで、取締役の都築さんから、マネーフォワードがどのようにアップデートを重ねてきたかについて発表がありました。

マネーフォワードの変遷と「パートナー企業版」の展開 by Takayuki TSUZUKI

この発表では、マネーフォワードさんがかつては Titanium で開発されていたという意外な事実や、パートナー企業版の開発で起きた問題をどうやって解決したかについて紹介しています。

アプリのリニューアルはとても大変な作業なので、きっと色々な苦労を経て今のマネーフォワードさんのアプリがあるんだなと感じました。

都築さんが執筆されたマネーフォワード エンジニアブログの記事はこちらにありますので、マネーフォワードさんのアプリのリニューアルについてもっと詳しく知りたい方はぜひこちらも御覧ください。

iOS App資産タブリニューアルを終えて

質疑応答

f:id:nano-041214:20161201191148j:plain

質疑応答では、

  • Clean Architectureの導入に伴う初期コストをビジネスサイドにどのように説明したか
  • Rx を実際に取り入れる過程や導入後の開発効率の変化

に関した内容の質問に対して

  • 複雑化してメンテナンス性が下がったコードに対して、開発効率が10倍になる!などで熱意を示してきっかけを作ったこと
  • 全員が理解していればすごく効率が上がるが、移行期には同じ処理を二つのアーキテクチャで書く必要があるなどの問題もあること

といった回答を得られました。質疑応答も大変盛り上がり、とても有意義な時間になったと思います。

懇親会

上記の発表の後、懇親会を行いました。

懇親会では、他の弊社の iOS アプリエンジニアやデザイナも参加しながら、参加者と様々な意見交換や雑談をしました。

多くの皆様にご参加いただけたおかげで、iOS 開発にありがちなことで盛り上がったり、各社の iOS 開発の知見を共有するなど、有意義な時間を過ごすことができました。

今回は合同イベントということで、弊社のロゴとマネーフォワードさんのロゴを用いた押し寿司も振る舞われました。

f:id:nano-041214:20161201191234j:plain

まとめ

いかがでしたでしょうか。

クックパッドでは、今後もエンジニア向けのイベントを行っていきたいと考えています。来る 2017 年 1 月 21 日には、 Cookpad TechConf 2017 を開催する予定です。

また、クックパッドでは、一緒に iOS アプリ開発を行っていくエンジニアを募集しています。ご興味の有る方は是非遊びにいらしてください。