メインコンテンツへスキップ

MagicPodのトラブル調査方法（開発者向け）

  • 更新

このページでは、主に開発者の方のために、より高度なMagicPodのトラブル調査方法を説明します。

目次

  1. ブラウザ/アプリ側
  2. MagicPodDesktop側
  3. Appium関連の調査

1. ブラウザ/モバイルアプリ側

ロケータのチェック

テスト編集画面の画面キャプチャ上でUI要素をクリックし、要素情報を編集するポップアップを表示します。すると、図1のようにUI要素に対応するロケータ情報を確認できます (画面キャプチャを直接ブラウザにドラッグ&ドロップしてスキャンした画像の場合は、ロケータ情報は確認できません。) 。また、このページで、利用するロケータを他の候補に変更することも可能です。

Screenshot 2023-11-27 at 8.00.36 PM.png

図1 ロケータの確認

 

失敗時のUIツリーの確認

テストが失敗すると、テスト結果画面に「失敗時のUIツリーを表示」というリンクが表示されるので、これをクリックしてテスト失敗時のUIツリーを確認できます。(図2)

Screenshot_2022-11-15_at_5.12.21_PM.png

図2 失敗時のUIツリー

 

詳細なログの出力

ログレベル

テスト対象指定パネルの「詳細」>「ログレベル」を「エキスパート」にすると、ログの出力が詳細になります。(図3-1)

Screenshot 2023-11-27 at 8.01.04 PM.png

図3-1 ログレベルの指定

「MagicPodバグ調査」にするとさらに詳細になりますが、かなり動作が遅くなり、大量のログが出るようになります。これはMagicPodサポートチームに依頼された時以外には使用せず、ログ取得が終わったらすぐにレベルを「ビギナー」か「エキスパート」に戻しておいてください。

 

端末ログレベル（モバイルアプリのみ）

モバイルアプリでは「ログレベル」設定の下に「端末ログレベル」の設定があります。(図3-2)

「アプリログのみ」を選択すると、テスト対象アプリの端末ログが取得できます。「すべて」を選択するとテスト対象アプリだけでなく取得可能なすべての端末ログが取得されます。トラブル調査の際はまず「アプリログのみ」を選択し確認することを推奨します。

ログレベルで「MagicPodバグ調査」を選択すると自動的にすべての端末ログが取得されるようになるため、端末ログレベルの設定は無効となります。

 

Screenshot 2024-08-15 at 10.52.24.png

図3-2 端末ログレベルの指定

 

開発者ツールのコンソール

MagicPodのページが予期しない動作(テストが保存されない等)をした場合は、Chromeのメニューの「その他のツール」>「デベロッパーツール」から開発者ツールを開き、「Console」タブを選択してログの内容を確認してみてください。図4のようにMagicPodのエラーが出ている場合があります。(図4)

ChromeDevConsole.png

図4 MagicPodのWebページのエラー

 

2. MagicPodDesktop側

コンソールのエラー確認

MagicPodDesktopの「Console」タブで、各種エラー情報を確認できます(図5)。また、「Appium Console」や「Selenium Console」では、AppiumサーバーやSeleniumのログ情報を確認できます。

DesktopConsole.png

図5 MagicPodDesktopのコンソール

 

設定ファイル

MagicPodDesktopの画面は、「magic_pod_desktop.json」という設定ファイルを利用しています。ファイルの場所などは、こちらの記事を参考にしてください。

 

作業ディレクトリのファイル

MagicPodDesktopは、デスクトップ直下の「magicPod」ディレクトリに以下のようなファイルを作成します。

  • testディレクトリ：テスト実行時に、Node.jsのAppium/Seleniumスクリプトが作成されます。
  • capture_temp.pngおよびcapture_temp.xml：前回画面キャプチャのアップロードを行った際の画面キャプチャとUIツリーXMLです。
  • driver_gui.log：MagicPodDesktopのAppium ConsoleまたはSelenium Consoleの表示内容が保存されています。
  • driver_run.log：MagicPodのテストをコマンドラインから実行した場合の、Appium ConsoleまたはSelenium Consoleの内容に相当する情報が保存されています。

 

認証情報ファイル

MagicPodの認証情報は、「/Users/<ユーザー名>/.magic_pod_token」というファイルに保存されています。このファイルを削除すると、MagicPodDesktopで再度ログインが必要になります。(macで表示する場合「command」＋「shift」＋「.」)

 

開発者ツールのコンソール

MagicPodDesktopの左上メニューの「Tool」>「Toggle Developer Tools」を選ぶと、Chromeと同じような開発者ツールの画面が表示され、「Console」タブでエラー情報を確認できます(図6)。MagicPodDesktopの挙動がおかしいがコンソールには何も表示されていない場合、こちらのログの内容も確認してみてください。

DesktopDevConsole.png

図6 MagicPodDesktopの開発者ツール

 

3. Appium関連の調査

uiautomatorviewerによるUIツリーの確認

MagicPodで取得したAndroidの画面UIツリーが不正な場合、同じ画面のUIツリーをuiautomatorviewerで見ることで、Appiumの問題なのかUIAutomatorの問題なのかを切り分けることができます。

  • Android端末をUSBケーブルでPCにつなぎ、問題が起きているアプリの画面を端末上で開きます。
  • Macのターミナル上で、「JAVA_HOME=$(/usr/libexec/java_home -v 1.8) ~/Library/Android/sdk/tools/bin/uiautomatorviewer」というコマンドを実行して、uiautomatorviewerのウィンドウを開きます。
  • 図7のようなウィンドウが開くので、①のボタンを押すと②に現在のUIツリーの内容が表示されます。
uiautomatorviewerWindow.png

図7 uiautomatorviewer

なお、PCにJava8がインストールされていないと、uiautomatorviewerの起動時にエラーが発生します。エラーが出た時は、Macのターミナル上で「/usr/libexec/java_home -v 1.8」を実行してみて、JVMのバージョン1.8がインストールされていないというエラーが出た場合は、Java8をインストールしてください。

また、uiautomatorviewerの画面は立ち上がるがボタン等が反応しない場合、次の手順を試してください (参考)

  1. https://archive.eclipse.org/eclipse/downloads/drops4/R-4.19-202103031800/download.php?dropFile=swt-4.19-cocoa-macosx-x86_64.zip から.zipファイルをダウンロードする
  2. ダウンロードした.zipファイルを解凍し、中にswt.jarファイルがあることを確認する
  3. 以下を参考にMacのターミナルでコマンドを叩く 
    cp <path/to/swt.jar> to $ANDROID_HOME/tools/lib/x86/swt2.jar
    cp <path/to/swt.jar> to $ANDROID_HOME/tools/lib/x86_64/swt2.jar

Appium InspectorによるUIツリーの確認

MagicPodで取得した画面UIツリーが不正な場合、同じ画面のUIツリーをAppium Inspectorで見ることで、Appiumの問題なのかMagicPodの問題なのかを切り分けることができます。その手順を説明します。

Appiumサーバーの起動

  • iOSの場合はこちらを参考にXcodeを、Androidの場合はこちらを参考にJavaとAndroid Studioをインストールしておいてください。
  • ターミナルアプリを開き、以下の手順でAppiumサーバーをインストールします。なお、以下の説明にはappium 2.0.0-beta.71 を使用しています。 
    • $ npm i -g appium@next
      $ appium driver install xcuitest
      $ appium driver install uiautomator2
  • Appiumサーバーを起動します 
    • $ appium --allow-cors

UIツリーの確認が完了したら必ずAppiumサーバーは停止させてください。起動したままにすると、悪意のあるインターネット上のサイトを訪問した際に攻撃を受けるおそれがあります。

Appium Inspectorで端末に接続

こちらからAppium Inspectorを開いてください。開いたら、Desired Capabilities (接続する端末の条件等を設定するパラメーター) を次のように設定します。

iOS シミュレーターの場合

appium:deviceName や appium:automationName の値は使用したい端末やiOSバージョンに置き換えてください

iOS_simulator.png

図8 iOSシミュレーターの場合のDesired Capabilities

iOS 実機の場合

  • 使用するiOS端末はUSBケーブルでPCに繋いでおいてください
  • appium:xcodeOrgId の値には、お使いのApple DeveloperアカウントのTeam IDを入れてください

iOS_real_device.png

図9 iOS実機の場合のDesired Capabilities

Androidの場合

使用するAndroid端末はUSBケーブルでPCに繋いでおいてください

Android.png

図10 Androidの場合のDesired Capabilities

次に問題が起きているアプリの画面を端末上で開きます。それからAppium Inspectorの右下にあるStart Session を押します。すると、以下のようにUIツリーを確認できます。

appium_inspector.png

図11 Appium Inspector

左側のUI画像の任意の場所をクリックすると、対応するUI要素がUIツリー上のどこに存在するかを真ん中のApp Source で確認することができます。同時に、右側のSelected Element 欄で選んだUI要素がどのような属性値を持つか等を確認することができます。別の画面のUIツリーを確認したい場合は、端末の画面を操作し、別の画面を表示させ、Appium InspectorのRefresh Source & Screenshot を使います。

RefreshSource_Screenshot.png

図12 Refresh Source & Screenshot

Appium Inspectorを終了する場合は、Appium Inspectorの Quit Session & Close Inspectorを選んでください。

QuitSession.png

図13 Quit Session & Close Inspector

ターミナルアプリで立ち上げた、Appiumサーバーも終了するのを忘れないようにしてください。

Accessibility inspectorによる要素情報の確認

1. シミュレータを起動し、対象の要素が存在するページまで移動します。

2. Accessibility inspectorを起動します。(起動方法はこちらをご参照ください)

3. 以下の画像のようにAccessibility inspector側 / シミュレータ側を操作し、対象の要素の情報を確認します。

Accessibility inspector.png

画像内2. の手順を行っても3. の手順でシミュレータ内の要素情報が取得できない場合は、有効化/無効化を何度か繰り返すと取得できるようになる場合があります。

関連記事