[Flutter×BrowserStack]：E2Eテストで実現する高品質アプリ開発
BrowserStack
BrowserStackは、クラウド上でテスト環境や自動化環境を提供する有料サービスで、開発者から高い人気を誇るツールです。
このサービスを利用することで、様々なブラウザやオペレーティングシステム、さらに実際のデバイスでの操作やテストを簡単に行うことができます！
特に、実機テストやE2Eテストを効率化したいFlutter開発者にとって、BrowserStackは理想的なソリューションです。
今回は、このBrowserStackを使ったFlutterのE2EテストやUIテストでの活用事例を一緒に見ていきましょう！
デバイスの種類
以下より、使用可能なデバイスやブラウザの一覧を見ることができます。
どんなことができるのか？
今回は、モバイルアプリ開発者は、以下のような機能を利用することが可能です！
表でリンクとともに、まとめてみました！
本記事では、App LiveとApp Automateを紹介したいと思います。
| カテゴリー | ツール名 | 主な使い道 |
|---|---|---|
| 手動テスト | App Live | 実際のデバイスでアプリの動作を手動確認する |
| App Accessibility Testing | アクセシビリティ基準に準拠しているかを確認 | |
| テスト自動化 | App Automate | FlutterアプリなどのUI自動テストを実行 |
| App Percy | UI変更の視覚的な回帰テストを行う | |
| 管理と最適化 | Test Management | 複数のテストケースを効率よく管理する |
| Test Observability | テスト結果を分析し、不具合やパフォーマンスの課題を特定 |
App Live （手動テスト)
テストの概要
Galaxyのデバイスを立ち上げ、Webのダッシュボード上で操作を行っている様子です。シミュレータではなく、実機デバイスをブラウザ上から操作できます。
BrowserStackにホストされている様々なデバイスを利用し、マニュアルテストを実行することが可能です。
Simulater と 書かれて Real Deviceを強調してるのは面白いですね(笑)
インストール
アプリのインストールには以下のような選択肢があります
- .apkや.ipaを直接アップロード
- Firebaseとの連携
- TestFlightやGoogle Playストア経由のインストール
App Automate (自動テスト)
- 自動テストコードをBrowserStackのデバイスで実行
- スクリーンショットキャプチャ、動画、ネットワークログ、デバイスログなど実行結果を取得可能
- 社内開発環境でのテストも可能
こちらは、github ActionでE2Eテストを実行し、BrowserStackにアップロードした後に
指定したデバイス(google pixel 7-13.0)での実行結果を確認している様子です。
以下のように、実行結果がまとめられています。
テスト結果は、各グループに分かれて表示されるため、細かくテストケースをグルーピングしていくことも大切です！
社内ネットワークでのアプリテスト
プライベートネットワーク上でホストされているアプリも、App Automate を利用すれば安全にテストが可能です。ローカルバイナリを用いて暗号化されたトンネルを構築し、データのセキュリティとプライバシーを確保しながらテストを実行します。このトンネルは 安全な WebSocket (WSS) を使用し、社内のセキュリティポリシーに適合したテスト環境を提供します。
これにより、社内のセキュリティポリシーを遵守しつつ、開発環境にあるアプリのテストが実施可能です。
料金プラン
料金プランの柔軟性
- Device Cloud：基本的な自動化テストに最適
- Device Cloud Pro：高度なデバイステスト機能を追加
- Observability Pro：ダッシュボードや詳細なエラーレポート
- Enterprise：大規模チーム向けのカスタムソリューション
機能の幅広さ
すべてのプランで20,000以上の実機が利用可能で、AppiumやFlutterといった主要なテストフレームワークにも対応。
高度なプランでは2FAテストやファイルアップロード、iOS設定テストなど、詳細なシナリオに対応できる。
コストパフォーマンス
$199/月から始まる料金は高いようにも見えますが、無制限のテスト時間と多くのデバイスを利用できる。
大規模チーム向けの配慮
Observability ProやEnterpriseプランでは、組織全体でのガバナンスやカスタマイズ可能なダッシュボードなど、より詳細な運用管理が可能。
詳しくはこちらのようですね。
最初のテスト実行時間100分は無料で使える
以下のように、表示されるはずです。
ぜひ、初めての方は一度利用してみましょう！
Patrolでの使用例
私のプロジェクトではPatrolを用いてE2Eテストを実施しております。
wifiやblootoothの制御、NativeSelectorを用いたNative画面操作など、E2Eテストで大活躍しますので検討されている方は、こちらもぜひご覧ください！
必要ツールのインストール
brew tap leancodepl/tools
brew install mobile-tools
Runnerの変更（Androidの場合）
android/app/build.gradle
android {
// ...
defaultConfig {
//...
testInstrumentationRunner "pl.leancode.patrol.BrowserstackPatrolJUnitRunner"
}
// ...
}
環境変数の準備
.envrcファイルなどを作成し、環境変数を適応します。
BS_ANDROID_DEVICESは、古すぎる端末を指定してしまうと、テストコードが動かなかったりするため注意。
YOUR_USERNAMEとYOUR_ACCESS_KEYは
こちら より取得可能。
export BS_CREDENTIALS="YOUR_USERNAME:YOUR_ACCESS_KEY"
export BS_PROJECT="YOUR_PROJECT_NAME"
export BS_ANDROID_DEVICES="[\"Google Pixel 7-13.0\"]"
App Automate (自動テスト)を実行する
以下のシェルスクリプトを実行します。
bs_android \
--target integration_test/runner_test.dart \
--dart-define-from-file=dart_defines/prod.env \
--verbose
Patrol 公式
最後に
BrowserStackを利用することで、実機デバイスでのテストやE2Eテストが効率的かつ安全に行えるだけでなく、開発チーム全体のテストプロセスを改善できます。また、Patrolのようなツールを活用することで、さらに多機能なE2Eテストを実現できます。ぜひ一度、BrowserStackを試してみてください！
Discussion