Firebaseと連携してAndroid Studioに👁を追加する方法

この記事は[Android #2 Advent Calendar 2019](https://qiita.com/advent-calendar/2019/android-2)の12/9の記事です。
前日は @tak-wisteria さんの「[Android × TDD](https://qiita.com/tak-wisteria/items/b09e208415ac317e425b)」でした。

# はじめに

<img width="323" alt="スクリーンショット 2019-12-05 20.16.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19692/77f356f3-9aeb-d172-dd1a-ba9f825c55f6.png">

Android Studioを普段使用している方で上記のアイコンがあるのをご存知でしょうか。
上記の👁の画像はゲーム画面などではなくAndroid Studioの一部を拡大したものです。

👁は若干不気味ですがAndroid開発をとても便利にしてくれます。
Android Studioでの👁のセットアップ方法と👁の使い方を説明します。

本記事ではMac OS 10.15, Android Studio 3.5を使用しています。

# 前編: 👁を追加する
### 1. 新規にプロジェクトを作成する

File > New Project からプロジェクトを作成します。
サンプルではEmpty Activityを選択しました。

<img width="640" alt="スクリーンショット 2019-12-07 1.11.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19692/a0bd9ddb-3ad2-55b4-5c7b-dd41fc9f7699.png">

作成するとアプリ本体のほか、androidTestやtestが実行できます。
以下はandroidTestを実行したところです。👁はまだありません。

<img width="640" alt="スクリーンショット 2019-12-07 1.10.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19692/0c670c24-42e7-0215-c2b5-9ddbad3e2303.png">


### 2. Firebaseプロジェクトを作成する

Firebaseのドキュメント[Android プロジェクトに Firebase を追加する](https://firebase.google.com/docs/android/setup?authuser=0)を参考にFirebaseプロジェクトを作成してください。完了すると以下のようにTest Labを含む各機能が使用できるようになります。

<img width="640" alt="スクリーンショット 2019-12-07 1.20.49.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19692/48825d41-e721-4949-eb59-973ba58c4230.png">

### 3. Firebase Test Labと連携する

AndroidプロジェクトとFirebase Test Labを連携します。

1. `Run > Edit Configuration` を選択します。
2. 左のペインからAndroid Instrumented Testsの子項目を選択します。
3. Targetを `Use the Device..` から `Firebase Test Lab Device Matrix` に変更します。
4. Cloud Project で作成したFirebaseプロジェクトを選択します。

Matrix Configuration はいったん数字が少ない方を選択してください。
Firebase有料プラン契約中の場合は課金額が増加する場合があります。

<img width="640" alt="スクリーンショット 2019-12-07 1.45.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19692/86dbfcaf-361c-50c8-ccf8-a3135f5a2be2.png">

Configurationsが設定できたらandroidTestを実行します。
すると..Test Resultsの上部にまぶたのようなアイコンが見えます..

<img width="640" alt="スクリーンショット 2019-12-07 1.57.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19692/5d1ab5e6-47dd-c219-2d85-ae3f96d1d58e.png">

チェックマークを選択すると
なんと目が開きました！
しかし👁を選択すると `Screenshot are not available..` と注意文が表示されます。
現在はまだ未設定の状態です。

<img width="640" alt="スクリーンショット 2019-12-07 1.57.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19692/9204a91e-b34f-2e13-a3b3-b00f46fe7ec3.png">

# 後編: 👁を使用する
前編で気づいたと思いますが👁はFirebase Test Labのスクリーンショット関連の機能です。
前編完了時では機能の使用ができていないので👁をきちんと使える状態にします。

### 4. ScreenShotterをセットアップする

[Firebase Test Lab インストゥルメンテーション テストのスクリーンショットを作成する](https://firebase.google.com/docs/test-lab/android/test-screenshots) を参考に以下を行います。

1. [cloudtestingscreenshotter_lib.aar](https://dl.google.com/firebase/testlab/cloudtestingscreenshotter_lib.aar)のファイル追加
2. aarを有効化 (projectの `build.gradle` とappの `build.gradle` 変更)
3. `AndroidManifest.xml` のパーミッション追加。製品アプリのパーミッションを汚したくない場合はBuildVariantを分け `debug/AndroidManifest.xml` を別に作成するなどしてください。

```AndroidManifest.xml
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.INTERNET"/>
```

### 5. Activityのテストができる状態にする

`app/build.gradle` のJUnit, Runner, Tules, cloudtestingscreenshotter_lib の設定を確認します。

```build.gradle
dependencies {
:
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:runner:1.2.0'
    androidTestImplementation 'androidx.test:rules:1.2.0'
    androidTestImplementation 'androidx.test.ext:junit:1.1.1'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0'
    androidTestCompile (name:'cloudtestingscreenshotter_lib', ext:'aar')
}
```

ActivityTestでスクリーンショットを取得できるようにします。
`ExampleInstrumentedTest.kt`を以下のように変更してください。

```ExampleInstrumentedTest.kt
@RunWith(AndroidJUnit4::class)
class ExampleInstrumentedTest {

    // テスト開始時にMainActivityを起動するRuleです
    @get:Rule
    val activityTestRule = ActivityTestRule(
            MainActivity::class.java, true, true)

    // テスト開始時に指定のパーミッションを許可するRuleです
    @get:Rule
    var grantPermissionRule: GrantPermissionRule = GrantPermissionRule.grant(
            "android.permission.WRITE_EXTERNAL_STORAGE"
    )

    @Test
    fun takeScreenshot() {
        // スクリーンショットを"main_screen_1"という名前で取得します
        ScreenShotter.takeScreenshot("main_screen_1", activityTestRule.activity)
    }
}

```

コードを変更したら再度androidTestを実行してください！

### 6. 👁をクリックする

数分経つとandroidTestがオールグリーンで完了します。
チェックマークがついた行を選択し、👁をクリックしましょう。

<img width="640" alt="スクリーンショット 2019-12-08 3.10.23.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19692/eb5fab2e-e413-3bbe-028e-6526db1020c7.png">

すると以下のようにScreenshot Viewer画面になります。
テストで `ScreenShotter.takeScreenshot` を行った箇所のスクリーンショットが確認できます。
また、Compareをクリックすると端末やOSでの実行結果の違いが確認できます。

<img width="640" alt="スクリーンショット 2019-12-08 3.09.12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19692/2d1af705-869c-bfeb-4baf-e7783b07e74c.png">

くわしいつかいかたは[スクリーンショットを表示する](https://firebase.google.com/docs/test-lab/android/test-screenshots#view_screenshots)で確認できます。

また、以下のようにFirebase Test Labコンソール上でもスクリーンショットを確認可能です。

<img width="640" alt="スクリーンショット 2019-12-08 3.17.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/19692/95eba928-c0c5-c1b7-ca27-f3c7a83c45bc.png">

# まとめ
👁の正体はFirebase Test LabのScreenshot Viewerの機能でした。

というわけで
Android Studioで👁のアイコンで表示されるScreenshot Viewer機能の追加方法・使用方法を紹介しました。

注意点その1として、本機能はとても便利ですが、クラウド上でテストを実行するためFirebaseの無料プランだと1日のテスト回数に制限があります。

> 料金プラン
> https://firebase.google.com/pricing?hl=ja

注意点その2として、この機能は`ActivityScenarioRule`より旧式の`ActivityTestRule` を使用したほうが良いです。
スクリーンショットのファイル名にクラス名・メソッド名を使用しているのですが`ActivityScenarioRule`だとクロージャを使用するためメソッド名がUnknown扱いになるためです。

# さいごに
https://droidkaigi.jp/2020/accepted

DroidKaigi 2020にでることになりました！
この記事のようなテストとスクリーンショットの話を40分くらいします。
Qiita 10回分以上の量の資料をせっせと作成中です。

リアルイベントは数年ぶりなので興味のある方はぜひ..!
:bow::bow_tone1::bow_tone2::bow_tone3::bow_tone4::bow_tone5:

あしたの[Android #2 Advent Calendar 2019](https://qiita.com/advent-calendar/2019/android-2)は
 @yamacraft さんの「今年痛い目にあった学びを何か書きます」です！