• トップ
  • ブログ一覧
  • [Flutter] integration test でiOS/Androidアプリのテストを自動化!(導入編)
  • [Flutter] integration test でiOS/Androidアプリのテストを自動化!(導入編)

    加納(エンジニア)加納(エンジニア)
    2023.07.27

    IT技術

    はじめに

    皆さん、テスト、書いてますか。

    ユニットテストならぼちぼち、E2Eテストは全く未経験!な自分が
    Flutter integration testでFlutterアプリのE2Eテストを自動化してみました。
    ・どうやって導入する?
    ・実際どんな感じ?
    を纏めて見たので、結合テストの自動化に興味がある方はぜひ参考にしてみてください!

    初めてでも”理解る”E2Eテスト

    ユニットテストでは機能単位でテストを行いますが、
    E2Eテストは、全システムを結合した状態で入力を行うことで、システム全体のテストを行います

    Flutter integration testでは、E2Eテスト(もちろん結合テストでも)の入力にあたるFlutterアプリのユーザー操作部分を自動化することができます!

    Flutter integration test とは

    FlutterSDKに含まれている、Flutter標準のテスト機能(flutter公式ドキュメント)です。
    以下は、他にもいくつか自動テストツールを試した上での感触です。

    メリット案外Flutterに正式対応している自動テストツールは少ない(2023年7月現在)ので、公式なのは保守を考えても嬉しい…!
    同じテストコードでiOS/android両方のテストが可能。UI要素の取得も容易です!
    デメリットDartで記述を行うため、非技術者がテストを書くのはかなり難しい
    integration_testから、Flutterアプリ以外の他アプリやOS機能を触れないため、色々と回避策が必要

    導入方法

    今回は、Flutter公式のサンプルアプリに導入して、iOS/Androidエミュレータでテストを成功させることを目標にします。
    もちろん既存のアプリにも導入可能ですが、色んな機能が実装されているアプリでテストを通すためにはなかなか大変なので…ぜひ一度、サンプルアプリでどんな風に動くのか見てみてください!

    ※flutter driverパッケージを利用する方法もありますが、flutter driverはintegration_testパッケージができる前に使われていたもので、基本的にはintegration_testに置き換わっています

    flutterプロジェクトを準備

    好きなディレクトリで以下コマンドを実行して、プロジェクトを準備します

    1$ flutter create <project name>

    上で作ったFlutterプロジェクトのpubspec.yamlファイルを開き、
    dev_dependenciesの項目にintegration_testパッケージを追加します。

    1dev_dependencies:
    2    flutter_test:
    3        sdk: flutter
    4    integration_test: #この二行を追加
    5        sdk: flutter  #

    ※integration_testパッケージは元々FlutterSDKに含まれているので、追加でインストールなどは不要です
    ここで依存関係を追加しておくだけで使用できます!

    テストファイルの追加

    flutter integration testは「integration_testフォルダ内の、<test name>_test.dartという命名のファイル」をテストファイルとして認識します

    ですので、プロジェクトフォルダの直下にintegration_testフォルダを作成し、その中にテストファイルを作成します。

    1sample_project
    2├── android
    3├── build
    4├── integration_test <- make dir
    5│ └── app_test.dart <- make file
    6├── ios
    7├── lib
    8

    テストコードを書く

    サンプルアプリに対応したテストコードもサンプルとして用意されているので、こちらを利用します。
    テストシナリオとしては、「最初0と表示されていたカウンターが、インクリメントボタンを押したあと1になっているか」を確認します。

    3行目のimport 'package:introduction/main.dart';は自分のプロジェクトのmain.dartを指定するように修正します

    1import 'package:flutter_test/flutter_test.dart';
    2import 'package:integration_test/integration_test.dart';
    3import 'package:introduction/main.dart';
    4
    5void main() {
    6  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
    7
    8  group('end-to-end test', () {
    9    testWidgets('tap on the floating action button, verify counter',
    10        (tester) async {
    11      // Load app widget.
    12      await tester.pumpWidget(const MyApp());
    13
    14      // Verify the counter starts at 0.
    15      expect(find.text('0'), findsOneWidget);
    16
    17      // Finds the floating action button to tap on.
    18      final Finder fab = find.byTooltip('Increment');
    19
    20      // Emulate a tap on the floating action button.
    21      await tester.tap(fab);
    22
    23      // Trigger a frame.
    24      await tester.pumpAndSettle();
    25
    26      // Verify the counter increments by 1.
    27      expect(find.text('1'), findsOneWidget);
    28    });
    29  });
    30}

    テスト実行

    iOSシュミレータ、Androidエミュレータを起動した状態で下記コマンドを実行すると、
    アプリのビルド、エミュレータへのインストール、テストの実行まですべて自動で行われます

    1flutter test integration_test

    ターミナル上でAll tests passed! が表示されれば成功です!

    まとめ

    導入自体は思った以上にシンプルに終わりました。
    ですが、実際のケース作成や保守が大変なのがテスト…次回は、integration testのテスト作成のポイントをまとめます!

    ライトコードでは、エンジニアを積極採用中!

    ライトコードでは、エンジニアを積極採用しています!社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。

    採用情報へ

    加納(エンジニア)

    加納(エンジニア)

    おすすめ記事

    エンジニア大募集中!

    ライトコードでは、エンジニアを積極採用中です。

    特に、WEBエンジニアとモバイルエンジニアは是非ご応募お待ちしております!

    また、フリーランスエンジニア様も大募集中です。

    background