EspressoではじめるAndroid UIテスト / Android UI Testing Starting with Espresso

ⓒ 2020 DeNA Co., Ltd. 2020/02/20 システム本部品質統括部品質管理部 SWETグループ
DeNA Co., Ltd. 1 DroidKaigi 2020ハンズオン  EspressoではじめるAndroid UIテスト

ⓒ 2019 DeNA Co., Ltd. ⓒ 2019 DeNA Co., Ltd.
ⓒ 2020 DeNA Co., Ltd. 講師紹介 2 • 氏名: 田熊希羽 (Nozomi Takuma) @fgfgtkm (Twitter) / @tkmnzm (GitHub) • 所属: DeNA SWETグループ (Software Engineer in Test) • Androidアプリ開発のテスタビリティ改善・テスト自動化支援 • 本日13:00~「自動生成でさくさく実装するユニットテスト」というタイトルで発表しました

ⓒ 2020 DeNA Co., Ltd. 講師紹介 • 氏名: 外山純生 (TOYAMA Sumio) @sumio_tym (Twitter) / @sumio (GitHub) • 所属: DeNA SWETグループ (Software Engineer in Test) • 業務内容: − Androidアプリ開発テスト自動化支援 • その他: − 「Androidテスト全書」執筆 − 明日17:00~「Robolectricの限界を理解してUIテストを高速に実行しよう」＠Pickersで登壇します！ 3

ⓒ 2020 DeNA Co., Ltd. 1. UIテストの自動化を始める前に 7 1. UIテストの特徴
2. 目的を整理する 3. 自動化する範囲を決める 4. テストツールを選択する 5. スケジュール・予算・体制を決める

ⓒ 2020 DeNA Co., Ltd. 1-1. UIテストの特徴① ユニットテスト vs UIテスト 9 This image is reproduced from work created and shared by the Android Open Source Project and used according to terms described in the Creative Commons 2.5 Attribution License.

ⓒ 2020 DeNA Co., Ltd. 1-1. UIテストの特徴① ユニットテスト vs UIテスト 10 This image is reproduced from work created and shared by the Android Open Source Project and used according to terms described in the Creative Commons 2.5 Attribution License. UIテストはユニットテストに比べて・・ • より実環境に近い（Fidelityが高い） • 実行時間が長い • メンテナンスコストが高い • デバッグコストが高い

13 せっかく自動化したUIテストの運用を諦めてしまわないために・・・きちんと計画をたてましょう。 • 目的を整理する • 自動化する範囲を決める • テストツールを選択する
• スケジュール・予算・体制を決める

ⓒ 2020 DeNA Co., Ltd. 1-4. テストツール(*)を選択する① 次の観点でテストツールを選ぶ • 自動化したい内容が簡単に実現できるか − トラブル無く、安定してテスト実行できるか • 低コストで学習できるか − 担当者にとって書きやすいか − 近くに質問できる人がいるか • 開発コミュニティは活発か − 今後も開発が続きそうか? − 情報が充実しているか? 23 (*) ここではUIテスト自動化を実現するツールのことを指す

ⓒ 2020 DeNA Co., Ltd. ここまでのまとめ • 関係者でUIテストの目的を決めましょう − 検証コスト削減以外の目的もあり • 目的を達成できるように以下を決めていく − 自動化する範囲 − 目的の範囲内で容易に実現できるものを優先 − 採用するテストツール − スケジュール・予算・体制 − スモールスタートで早く運用に入る − ROIを意識する − 自動化のための時間を確保できる体制にする 40

ⓒ 2020 DeNA Co., Ltd. 2. テストツール選択のポイント 41 1. EspressoとAppiumの概要
2. EspressoとAppiumの比較

ⓒ 2020 DeNA Co., Ltd. 2-1. EspressoとAppiumの概要② Appium • 3rd party OSS（開発: JS Foundation） • リリース版apkをそのままテストできる（E2E Testに向いている） • Selenium WebDriverと同様なAPIで Androidアプリをテストする • クライアント／サーバアーキテクチャ • 内部はEspressoやUI Automatorを使って実現 44

ⓒ 2020 DeNA Co., Ltd. 2-2. EspressoとAppiumの比較② 48 Espresso Appium テスト実行速度速い遅いプログラミング言語 Java・Kotlinのみ Ruby・JavaScript・Ja va・Kotlinなどテストランナーの実行場所 Android端末内部(*) 通常のPC 環境構築簡単難しい対応DeviceFarm 多い少ない (*)Robolectricを使うことでlocal JVMでも実行可能

ⓒ 2020 DeNA Co., Ltd. 2-2. EspressoとAppiumの比較③ UIテストは実行速度が命！以下の事情がなければEspressoを選ぶと良い • 既にAppiumによる自動化ノウハウがある • テスト自動化担当者がAndroidエンジニアではない • Androidアプリ以外の操作を含むテストシナリオを自動化したい「PCブラウザで会員登録してからアプリでログインする」など 49

ⓒ 2020 DeNA Co., Ltd. 2-2. EspressoとAppiumの比較④ （参考) Appiumを選択する場合パフォーマンス向上策の参考記事 • Appium Pro #50 （Android向け） Special Capabilities for Speeding up Android Test Initialization https://appiumpro.com/editions/50 • Appium Pro #77 (iOS向け） Optimizing WebDriverAgent Startup Performance https://appiumpro.com/editions/77 50

ⓒ 2020 DeNA Co., Ltd. 3. 長くテストコードを利用し続けるには 51 1.
Page Objectデザインパターンを適用する 2. CI環境でテストコードを動かし続ける 3. 検証結果をわかりやすく共有する 4. 不安定なテストを対策する 5. 実行時間を短縮させる 6. 開発・リリースフローに組み込む

Page Objectデザインパターンを適用する 2. CI環境でテストコードを動かし続ける 3. テスト結果をわかりやすく共有する 4. 不安定なテストを対策する 5. 実行時間を短縮させる 6. 開発・リリースフローに組み込む

ⓒ 2020 DeNA Co., Ltd. 3-1. Page Objectデザインパターンを適用する • 画面を1つのオブジェクトとして定義するデザインパターン • テストコードを共通化する指針 • 対象アプリのUI が変更されたときのテストコード修正コストを小さくすることを目的としている DeNA Codelabs ( https://dena.github.io/codelabs/ ): 「Espressoの知識ゼロでも書ける！Android UIテストはじめの一歩」 53

ⓒ 2020 DeNA Co., Ltd. 55 @Test fun login_success() { //ユーザー名とパスワードを入力してログイン onView(withHint("ユーザーID")).perform(replaceText("valid_user")) onView(withHint("パスワード")).perform(replaceText("valid_password")) onView(withText("ログイン")).perform(click()) //ログインが成功して「ようこそ」と表示されている onView(withId(R.id.welcomeMessage)).check(matches(withText("ようこそ! "))) } @Test fun login_error() { // 不正なユーザー名とパスワードを入力してログインボタンをクリック onView(withHint("ユーザーID")).perform(replaceText("invalid_user")) onView(withHint("パスワード")).perform(replaceText("invalid_password")) onView(withText("ログイン")).perform(click()) // ログインエラーのメッセージが表示されている onView(withId(R.id.errorMessage)).check(matches(withText("ログインできません"))) } テストコードの共通化: 共通化前

ⓒ 2020 DeNA Co., Ltd. テストコードの共通化: 共通化前 56 @Test fun login_success() { //ユーザー名とパスワードを入力してログイン onView(withHint("ユーザーID")).perform(replaceText("valid_user")) onView(withHint("パスワード")).perform(replaceText("valid_password")) onView(withText("ログイン")).perform(click()) //ログインが成功して「ようこそ」と表示されている onView(withId(R.id.welcomeMessage)).check(matches(withText("ようこそ! "))) } @Test fun login_error() { // 不正なユーザー名とパスワードを入力してログインボタンをクリック onView(withHint("ユーザーID")).perform(replaceText("invalid_user")) onView(withHint("パスワード")).perform(replaceText("invalid_password")) onView(withText("ログイン")).perform(click()) // ログインエラーのメッセージが表示されている onView(withId(R.id.errorMessage)).check(matches(withText("ログインできません"))) } 重複が多い

ⓒ 2020 DeNA Co., Ltd. テストコードの共通化: 共通化前 57 @Test fun login_success() { //ユーザー名とパスワードを入力してログイン onView(withHint("ユーザーID")).perform(replaceText("valid_user")) onView(withHint("パスワード")).perform(replaceText("valid_password")) onView(withText("ログイン")).perform(click()) //ログインが成功して「ようこそ」と表示されている onView(withId(R.id.welcomeMessage)).check(matches(withText("ようこそ! "))) } @Test fun login_error() { // 不正なユーザー名とパスワードを入力してログインボタンをクリック onView(withHint("ユーザーID")).perform(replaceText("invalid_user")) onView(withHint("パスワード")).perform(replaceText("invalid_password")) onView(withText("ログイン")).perform(click()) // ログインエラーのメッセージが表示されている onView(withId(R.id.errorMessage)).check(matches(withText("ログインできません"))) } ボタン名が「ログインする」に変更されたとき、2箇所修正が必要

ⓒ 2020 DeNA Co., Ltd. テストコードの共通化: ログイン操作を共通化 58 @Test fun login_success() { onView(withHint("ユーザーID")).perform(replaceText("valid_user")) onView(withHint("パスワード")).perform(replaceText("valid_password")) onView(withText("ログイン")).perform(click()) onView(withId(R.id.welcomeMessage)).check(matches(withText("ようこそ! "))) } fun login(id: String, password: String) { onView(withHint("ユーザーID")).perform(replaceText(id)) onView(withHint("パスワード")).perform(replaceText(password)) onView(withText("ログイン")).perform(click()) } ログイン操作を抽出

ⓒ 2020 DeNA Co., Ltd. 59 @Test fun login_success() { login("valid_user", "valid_password") onView(withId(R.id.welcomeMessage)).check(matches(withText("ようこそ! "))) } @Test fun login_error() { login("invalid_user", "invalid_password") onView(withId(R.id.errorMessage)).check(matches(withText("ログインできません"))) } private fun login(id: String, password: String) { onView(withHint("ユーザーID")).perform(replaceText(id)) onView(withHint("パスワード")).perform(replaceText(password)) onView(withText("ログイン")).perform(click()) } テストコードの共通化: 共通化後

ⓒ 2020 DeNA Co., Ltd. 60 @Test fun login_success() { login("valid_user", "valid_password") onView(withId(R.id.welcomeMessage)).check(matches(withText("ようこそ! "))) } @Test fun login_error() { login("invalid_user", "invalid_password") onView(withId(R.id.errorMessage)).check(matches(withText("ログインできません"))) } private fun login(id: String, password: String) { onView(withHint("ユーザーID")).perform(replaceText(id)) onView(withHint("パスワード")).perform(replaceText(password)) onView(withText("ログイン")).perform(click()) } テストコードの共通化: 共通化後ボタン名が「ログインする」に変更されたときの修正はここのみ

ⓒ 2020 DeNA Co., Ltd. Page Objectデザインパターンの考え方 1. テスト対象の画面ごとにクラス（Page クラス）を定義する 2. Page クラスにその画面が提供するサービスをメソッドとして定義する a. アクションを実行するメソッド・ページ情報を取得するメソッドなど 3. アクションを実行するメソッドは戻り値として、遷移先の画面に対応するPageオブジェクトを返す 4. テストコードではPageクラスのメソッドのみを使う 61

ⓒ 2020 DeNA Co., Ltd. Page Objectのサービス 62 • 画面が提供するサービスとは何か？に着目し、メソッドとして定義する − 画面の詳細や構造はPage Objectの中に隠蔽 • 例: ログイン画面 fun login(id, password) LoginPage fun inputID(id) fun inputPass(password) fun clickLogin() LoginPage

ⓒ 2020 DeNA Co., Ltd. ログイン画面のテストにあてはめる 1. loginメソッドをLoginPageクラスに移動する 2. 画面に表示されるメッセージを検証するコードもそれぞれの Pageクラスに移動する a. ログイン成功時のメッセージ検証: MainPage b. ログイン失敗時のメッセージ検証: LoginPage 3. 各テストメソッドではPageクラスに定義されたメソッドのみ利用する 63

ⓒ 2020 DeNA Co., Ltd. ログイン画面のテストにあてはめる 64 test_login_success() test_login_failure() LoginTest login_success(id, password): MainPage login_failure(id, password): LoginPage assertErrorMessage(message): LoginPage LoginPage assertWelcomeMessage(message): MainPage MainPage 利用する

ⓒ 2020 DeNA Co., Ltd. ログイン画面のテストにあてはめる 65 test_login_success() test_login_failure() LoginTest login_success(id, password): MainPage login_failure(id, password): LoginPage assertErrorMessage(message): LoginPage LoginPage assertWelcomeMessage(message): MainPage MainPage 利用する画面ごとにPageクラスを定義する

ⓒ 2020 DeNA Co., Ltd. test_login_success() test_login_failure() LoginTest ログイン画面のテストにあてはめる 66 login_success(id, password): MainPage login_failure(id, password): LoginPage assertErrorMessage(message): LoginPage LoginPage assertWelcomeMessage(message): MainPage MainPage 利用する戻り値は遷移先の画面の Pageクラスにする

ⓒ 2020 DeNA Co., Ltd. ログイン画面のテストにあてはめる 67 test_login_success() test_login_failure() LoginTest login_success(id, password): MainPage login_failure(id, password): LoginPage assertErrorMessage(message): LoginPage LoginPage assertWelcomeMessage(message): MainPage MainPage 利用するテストコードはPageクラスのメソッドのみ用いて実装する

ⓒ 2020 DeNA Co., Ltd. 68 class LoginPage { fun loginSuccess(id: String, password: String): MainPage { login(id, password) return MainPage() } fun loginFailure(id: String, password: String): LoginPage { login(id, password) return this } private fun login(id: String, password: String) { onView(withHint("ユーザーID")).perform(replaceText(id)) onView(withHint("パスワード")).perform(replaceText(password)) onView(withText("ログイン")).perform(click()) } .. ログインページクラスの実装: アクション

ⓒ 2020 DeNA Co., Ltd. ログインページクラスの実装: アクション 69 class LoginPage { fun loginSuccess(id: String, password: String): MainPage{ login(id, password) return MainPage() } fun loginFailure(id: String, password: String): LoginPage { login(id, password) return this } fun login(id: String, password: String) { onView(withHint("ユーザーID")).perform(replaceText(id)) onView(withHint("パスワード")).perform(replaceText(password)) onView(withText("ログイン")).perform(click()) } .. 　画面のアクションをメソッドとして実装

ⓒ 2020 DeNA Co., Ltd. class LoginPage { fun loginSuccess(id: String, password: String): MainPage { login(id, password) return MainPage() } fun loginFailure(id: String, password: String): LoginPage { login(id, password) return this } .. 遷移をせず画面にとどまる場合は thisを返すログインページクラスの実装: アクション 70 戻り値はアクションをした後の遷移先画面のPageクラス

ⓒ 2020 DeNA Co., Ltd. ログインページクラスの実装: アクション 71 class LoginPage { fun loginSuccess(id: String, password: String): MainPage{ login(id, password) return MainPage() } fun loginFailure(id: String, password: String): LoginPage { login(id, password) return this } private fun login(id: String, password: String) { onView(withHint("ユーザーID")).perform(replaceText(id)) onView(withHint("パスワード")).perform(replaceText(password)) onView(withText("ログイン")).perform(click()) } .. 　各アクションで使われるログイン処理の共通メソッド

ⓒ 2020 DeNA Co., Ltd. 72 class LoginPage { .. fun assertErrorMessage(message: String): LoginPage { onView(withId(R.id.errorMessage)) .check(matches(withText(message))) return this } .. } ログインページクラスの実装: アサーションログイン失敗時のエラーメッセージ検証メソッド

ⓒ 2020 DeNA Co., Ltd. Pageクラスを用いたログインのテストコード 73 class LoginTest { @Test fun login_error() { LoginPage() .loginFailure("invalid_user", "invalid_password") .assertErrorMessage("ログインできません") } .. } テストコードはPageクラスのメソッドのみ用いて実装する

ⓒ 2020 DeNA Co., Ltd. Page Object参考リンク 75 • SeleniumのPage Object解説 − https://github.com/SeleniumHQ/selenium/wiki/PageObjects − assertをテストケースで実装するなど、 Espressoを使っている場合は実現できない原則もある • Martinfowler.com − https://martinfowler.com/bliki/PageObject.html

Page Objectデザインパターンを適用する 2. CI環境でテストコードを動かし続ける 3. 検証結果をわかりやすく共有する 4. 不安定なテストを対策する 5. 実行時間を短縮させる 6. 開発・リリースフローに組み込む

ⓒ 2020 DeNA Co., Ltd. 3-2. CI環境でテストコードを動かし続ける • CI 環境でUIテストを継続的に実行する − 自身以外の環境でもテストコードが動くことを確認する − 定期的な実行により、テストコードの安定性を確かめる − CI環境で実行することで運用に乗せやすくする • UIテストはユニットテストと比較すると、実行環境や外部要因の影響をうけやすく壊れやすい • CI環境で継続して動かすことで安定性を確かめる 78

ⓒ 2020 DeNA Co., Ltd. 3-3. テスト結果をわかりやすく共有する 80 • レポート形式でテスト結果を出力する • Slackにテストの成功と失敗を通知する • テスト失敗の原因がわかりやすいようにする − 失敗時のスクリーンショット・各種ログ・動画を保存する − 理由がわかりやすくなっていないと調査コストがかかる • 直近の結果だけでなく今までの履歴も保存する − どのテストケースが不安定になっているかを確認できる

ⓒ 2020 DeNA Co., Ltd. 3-3. テスト結果をわかりやすく共有する 81 • Allure: 多機能なテストレポート表示ツール − http://allure.qatools.ru/ − JUnit互換のテスト結果XMLがあれば表示できる − Android向けadapterもあり（発展途上） https://github.com/TinkoffCreditSystems/allure-android # インストール $ brew install allure # テスト実行 $ ./gradlew connectedAndroidTest # テスト結果レポートをAllureで表示 $ allure serve \ app/build/outputs/androidTest-results/connected/

ⓒ 2020 DeNA Co., Ltd. 3-5. 実行時間を短縮させる 86 • UIテストは実行時間が課題 − 自動テストが落ちたときの対応が面倒になる − 自動テストの完了が待てない − 実行に1時間以上かかるケースもある − その結果失敗しても放置される、使われなくなる... • 不必要なテストケースを作らない − テストピラミッドで推奨されるUIテストの割合は10% − UIテストとして追加が必要かを考える • テストを並列実行する

ⓒ 2020 DeNA Co., Ltd. 3-6. 開発やリリースフローに組み込む 88 • 実装したUIテストは実際に運用され、開発フローで利用されることで意味のあるものになる • 開発・リリース時のフローに組み込むことで、定期的にUIテストが実行される環境を作る − PR時に実行される − テストがパスしていないとPRのマージができない − 自動テストがすべてパスしていることがリリースの条件 etc...

ⓒ 2020 DeNA Co., Ltd. 90 DeNA Codelabsで説明します！ https://dena.github.io/codelabs/android-ui-tests-espresso 4.
Espresso APIを使いこなして UIテストを書いてみよう

ⓒ 2020 DeNA Co., Ltd. (付録) ショートカット一覧 Mac版 91 Action名ショートカット意味 Move Line Down Opt+Shift+↓ 選択範囲を下に移動する Change Signature Cmd+F6 メソッドシグネチャを変更する Move F6 (メソッドなどを) 別クラスや別ファイルに移動する Extract Function To Scope Opt+Shift+Cmd+M 選択範囲をメソッドとして抽出する Extract Parameter Opt+Cmd+P 選択箇所をメソッド引数にする Show Intention Actions Opt+Enter (空気を読んで) 必要なアクションを提案する Help＞Find Action…　で入力する名前ショートカットを忘れたときに便利！

ⓒ 2020 DeNA Co., Ltd. (付録) ショートカット一覧 Windows版 92 Action名ショートカット意味 Move Line Down Alt+Shift+↓ 選択範囲を下に移動する Change Signature Ctrl+F6 メソッドシグネチャを変更する Move F6 (メソッドなどを) 別クラスや別ファイルに移動する Extract Function To Scope Ctrl+Alt+Shift+M 選択範囲をメソッドとして抽出する Extract Parameter Ctrl+Alt+P 選択箇所をメソッド引数にする Show Intention Actions Alt+Enter (空気を読んで) 必要なアクションを提案する Help＞Find Action…　で入力する名前ショートカットを忘れたときに便利！

EspressoではじめるAndroid UIテスト / Android UI Testing...

EspressoではじめるAndroid UIテスト / Android UI Testing Starting with Espresso

More Decks by TOYAMA Sumio

Other Decks in Programming

Featured

Transcript