FlutterアプリのUIテスト自動化を取り組んでみた話

この記事は、テスト自動化の成功事例を語ろう by T-DASH Advent Calendar 2023
の8日目です。

はじめに

Flutterアプリを趣味で作っていて、UIやLintなどのテストを自動化するCI/CDを一度やってみたくて、この度取り組んでみました。
今回は様々あるテストの中でも、UIのビジュアルテストに取り組んでいきます。

毎度デグレしていないかアプリのUIを見て触って確認するのも大変ですしねぇ。
ではやっていきましょう。

今回実施するテスト

Golden Test

FlutterのGolden TestはFlutterフレームワークで使用されるUIコンポーネントやWidgetのビジュアル外観をテストするためのアプローチの一つです。
Golden Testにより、UIが期待通りに変更やレンダリングされていることを確認することができます。

Golden TestはGolden Fileと呼ばれる正しいUIの画像ファイルと、スクリーンショットのキャプチャを比較して正しくレンダリングされているかどうかをテストします。

手順概要

1. Flutterプロジェクトの作成
2. golden_toolkit導入
3. Golden Testの記述
4. 画像ストレージの設定
5. Github Actionsワークフローの設定
6. reg-suitの結果表示

手順詳細

1. Flutterプロジェクトの作成

Flutterのインストール

• Flutterがまだインストールされていない場合は、Flutterの公式サイトからインストールします

新しいFlutterプロジェクトの作成

• コマンドラインで下記のコマンドを実行し、新規プロジェクトを作成します。
• my_flutter_appはプロジェクト名で、必要に応じて変更してください。

flutter create my_flutter_app

2. golden_toolkitの設定

依存関係の追加

• プロジェクトのpubspec.yamlにgolden_toolkitを依存関係として追加します。

dev_dependencies:
  flutter_test:
    sdk: flutter
  golden_toolkit:

パッケージの取得

• コマンドラインで下記のコマンドを実行して、新しい依存関係を取得します。

flutter pub get

3. Golden Testの記述

テストファイルの作成

• testディレクトリ内にGolden Test用のファイルを作成します。
  • 例：widget_test.dart

import 'package:flutter_test/flutter_test.dart';
import 'package:golden_toolkit/golden_toolkit.dart';

void main() {
  testGoldens('MyWidget golden test', (WidgetTester tester) async {
    await tester.pumpWidgetBuilder(MyWidget());
    await screenMatchesGolden(tester, 'my_widget_golden');
  });
}

4. 画像ストレージの設定

• AWS S3やGoogle Cloud Storageなどの画像の保存先を設定します。

5. Github Actionsの設定

GitHub リポジトリの設定

• FlutterプロジェクトをGitHubリポジトリにpushします。

GitHub Actionsワークフローの作成

• リポジトリの.github/workflowディレクトリにワークフローファイル (例：flutter_ci.yml)を作成します。

name: Flutter CI

on:
  pull_request:
    branches: [ main ]

jobs:
  flutter_test:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2

    - uses: subosito/flutter-action@v1
      with:
        flutter-version: '2.x'

    - name: Set up AWS credentials
      uses: aws-actions/configure-aws-credentials@v1
      with:
        aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
        aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        aws-region: [リージョン]
    <<<<省略>>>>
    - name: Install dependencies
      run: flutter pub get

    - name: Install reg-suit
      run: npm install -g reg-suit

    - name: Run golden tests
      run: flutter test --update-goldens

    - name: Run reg-suit
      run: reg-suit run

実行結果

reg-suitから出力されるurlをクリックすると、このようなビジュアルリグレッションテストの結果が表示されます。

また、GitHubのPR画面においても同様のreg-suitの結果が確認することが可能です。

おわりに

いかがでしたでしょうか。色々なテスト作業を自動化していって、少しでも正味時間を増やしていきたいですね！

では、これからも素敵なテスト自動化ライフを送っていきましょう！