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

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

  • 更新

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

目次

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

1. ブラウザ側

ロケータのチェック

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

AppiumLocatorPopup-300x253.png

図1 ロケータの確認

 

失敗時のUIツリーの確認

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

Screenshot_2022-11-15_at_5.12.21_PM.png

図2 失敗時のUIツリー

 

詳細なログの出力

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

Screen-Shot-2019-12-16-at-10.42.40.png

図3 ログレベルの指定

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

 

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

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をインストールしてください。

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. の手順でシミュレータ内の要素情報が取得できない場合は、有効化/無効化を何度か繰り返すと取得できるようになる場合があります。

関連記事