くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > Flutter > FlutterでMaestro入門してみた

FlutterでMaestro入門してみた

Flutter Maestro Testing

FlutterでUIテストしたいなと思い、
Maestroについて、いろいろ調べたときの備忘録(*´ω｀*)

インストール

# インストール
curl -Ls "https://get.maestro.mobile.dev" | bash

# iOS用の追加インストール
$ brew tap facebook/fb
$ brew install facebook/fb/idb-companion

ざっくりとした使い方

テストシナリオはYAMLで書くよう

# flow.yaml

appId: your.app.id
---
# アプリの起動
- launchApp
# 「Text on the screen」の文字があるWidgetをタップ
- tapOn: "Text on the screen"
# スクリーンを撮影し、./MainScreen.pngとして保存
- takeScreenshot: MainScreen

あとは、

  • Android device/emulatorやiOS simulatorを起動して、
  • テストしたいアプリをインストールして、
  • maestro test flow.yamlを実行すればOK
$ maestro test flow.yaml

-cをつけると、Continuous Modeで実行され、
yamlファイルを変更すると自動で再テストされるらしい。
--watch的な感じ

$ maestro test -c flow.yaml

Flutterでのサポート

Flutterの場合、Textの文字(data)や、
TextFieldのhintTextのようなセマンティック情報を使って操作する。

たとえば、Textだと、こんな感じ。

InkWell(
  child: Text('Open Browser'),
  onTap: () => launch('https://mobile.dev'),
)

// YAML
- tapOn: "Open Browser"

FAB/アイコンボタンの場合

FloatingActionButton(
  onPressed: _incrementCounter,
  child: Icon(Icons.add, semanticLabel: 'fabAddIcon'),
)
// YAML
- tapOn: "fabAddIcon"

Containerなどの場合

Containerの場合は、Semanticsウィジェットを使って、
操作できるようにする。

Semantics(
  label: 'funky yellow box',
  child: Container(
    color: Colors.yellow,
    width: 100,
    height: 100,
  ),
)

// YAML
- tapOn: "funky yellow box"

テキスト入力

TextField(
  decoration: InputDecoration(
    border: UnderlineInputBorder(), 
    labelText: 'Enter your username',
  ),
)

// YAML
- tapOn: "Enter your username"
- inputText: "charlie_root"

文字が変わる場合

多言語対応や動的な文字の場合、
Semanticsを使ってIDを指定できる。

Semantics(
  identifier: 'signin_button',
  child: ElevatedButton(
    onPressed: _signIn,
    child: Text('Sign in'),
  ),
)

// YAML
- tapOn:
    id: "signin_button"

実行するデバイスの指定

実機/シミュレーターなどが複数接続されていると、
番号を指定する必要があるが、実行する端末を指定することもできる

# デバイス一覧の表示: Android
$ adb devices

# デバイス一覧の表示: iOS
$ xcrun simctl list devices booted

# デバイスを指定して実行
$ maestro --device 5B6D77EF-2AE9-47D0-9A62-70A1ABBC5FA2 test flow.yaml

利用できるコマンド

用意されているコマンドはこのあたりに。
UI操作やassert系の他に、
addMediaやstartRecording、setLocation、takeScreenshotなど、
便利な機能がいろいろ用意されてる

言語を指定して実行

--device-localeを使うと、言語を指定して実行できるらしい

# sets iOS simulator locale to Italy(Italian)
$ maestro start-device --platform ios --device-locale it_IT

# sets Android emulator locale to France(French)
maestro start-device --platform android --device-locale fr_FR

シナリオ実行時の動画を保存する

デモなどで操作する動画を作成する際に便利な機能
maestro recordで実行すると、mp4として保存してくれる

$ maestro record YourFlow.yaml

デバイスの作成＆起動

エミュレータの起動とかもできるよう。
指定したバージョンが存在しない場合、作成してくれるっぽい

# Android emulator (デフォルト: Pixel 6, Google APIs 30)
$ maestro start-device --platform android

# iOS simulator (デフォルト: iPhone11, iOS 15.5)
$ maestro start-device --platform ios
Usage: maestro start-device [--force-create] [--device-locale=<deviceLocale>] [--os-version=<osVersion>] --platform=<platform>
Starts or creates an iOS Simulator or Android Emulator similar to the ones on Maestro Cloud
Supported device types: iPhone11 (iOS), Pixel 6 (Android)
      --device-locale=<deviceLocale>
                       a combination of lowercase ISO-639-1 code and uppercase ISO-3166-1 code i.e. "de_DE" for Germany
      --force-create   Will override existing device if it already exists
      --os-version=<osVersion>
                       OS version to use:
                       iOS: 15, 16
                       Android: 28, 29, 30, 31, 33
      --platform=<platform>
                       Platforms: android, ios

参考にしたサイトさま