株式会社GENZが運営する技術ブログです。

  1. Appium
  2. 39 view

Appium Inspectorを使ってみよう

目次

Appium Inspectorとは

Appium Inspectorは、Appiumを使用してモバイルアプリのUI要素を調査・デバッグするためのツールです。

アプリの画面をキャプチャし、各UI要素の属性(ID、クラス、アクセシビリティ識別子など)を視覚的に確認できるため、テストスクリプトの作成やデバッグが容易になります。

Appiumについてはゼロから始める!Appium + Python環境構築ガイド(Windows対応)を参照ください。

なぜAppium Inspectorを使うのか

モバイルアプリのテストでは、エミュレーターと実機でUI要素の識別子(セレクタ)が異なることがあり得ます。

例えば、エミュレーターではresource-idを適切に取得できるのに対し、実機ではaccessibility idやXPathしか使えない場合があります。

実例としては、Android > 設定 > バッテリーを選択したい場合のセレクタが大きく異なっています。

  • エミュレーター:‘//*[@text=”Battery”]’
  • 実機:‘//androidx.recyclerview.widget.RecyclerView[@resource-id=”com.android.settings:id/recycler_view”]/android.widget.LinearLayout[6]/android.widget.RelativeLayout’

このような違いを事前に確認し、適切なセレクタを選定するためにAppium Inspectorが役立ちます。

また、テストスクリプトの作成時に、UI要素が期待通りに取得できているかを確認し、XPathの取得などを試行錯誤する際にも有用です。

導入方法(Windows)

  1. Appium Inspectorの公式サイトにアクセスし、Windows用のインストーラーをダウンロードします。
    GitHub – appium/appium-inspector: Appium GUI for visual inspection, and interaction with the app
  2. ダウンロードしたインストーラーを実行し、画面の指示に従ってインストールを完了させます。
  3. インストール後、Appium Inspectorを起動します。
  4. 必要に応じて、Remote HostやPortを設定し、Appium Serverに接続します。
    • Appium側でHostやPortを指定していないなら、エミュレーター、実機ともに未入力で問題ありません。

導入方法(MacOS)

  1. Appium Inspectorの公式サイトからMacOS用の.dmgファイルをダウンロードします。
    GitHub – appium/appium-inspector: Appium GUI for visual inspection, and interaction with the app
 ※MacOSのCPUの種類によって、ダウンロードすべき.dmgファイルは分岐します。

 ・Apple Siliconの場合:arm64
 ・Intelの場合:x64

  1. ダウンロードした.dmgファイルを開き、Appium Inspectorをアプリケーションフォルダにドラッグ&ドロップしてインストールします。
  2. Appium Inspectorを起動し、必要に応じてRemote HostやPortを設定してAppium Serverに接続します。

使い方

Appiumサーバーとの接続

    1. Appiumと、エミュレーター または PCに接続した実機端末を起動しておきます。
      • Appiumサーバーは、appium –relaxed-security と、デフォルトではブロックされているコマンドを許可して起動します。
      • サーバーログ取得、画面キャプチャ、録画、shell操作などが有効になります。
      • ブロックコマンド全許可なので、テスト環境でのみ使うことが推奨されています。
    2. Appium Inspectorを開き、Capability Builderを設定します(例: platformName, deviceName, appPackage, appActivityなど)。
      • appium:automationName →appiumのWebDriver。AndroidならUIAutomator2、iOSならXCUITestと入力します
      • appium:platformName →端末OSの種類。Android または iOS

  1. Start Sessionボタンをクリックし、デバイスと接続します。

※接続できなかった場合

  • Remote Hostのアドレスが合っているか(デフォルトはHost 127.0.0.1, Port 4723, Path /)
  • 不足している情報は無いか(実機のUUIDなど)
  • プロキシ接続での実行かどうか(上部 > Advanced SettingsでプロキシサーバーHostを入力できる)

接続後の画面操作

    1. 画面が表示されたら、調査したいUI要素をクリックすると、その要素の詳細情報が表示されます。

    • 左側にエミュレーターまたは実機の画面が表示されます。
    1. 中央ヘッダーのボタン
      • < :Backボタン
      • 〇 :ホームボタン
      • ☐ :App Switchボタン
      • ⭮ :リロードボタン
      • 🔍: セレクタ名から検索
      • 📹: 操作レコーダー
    2. タブ
      • Source :端末のソースコードの構造を表示する
      • Commands :スクリプト実行、アプリケーションインストールなど、様々なコマンドを端末に送信する
      • Gestures :カスタムジェスチャーを作成、保存、実行できる
      • Recorder: レコーダーで記録した操作のテストコードを参照する
    • 端末画面上のトグルボタンをONにすると、選択可能なセレクタが赤□で表示されます。
    • クリックすると、Selected Elementの情報が右側に表示されます。(画像はPlay Storeをクリックした時の挙動)
  1. 必要に応じて、XPathを生成したり、適切なセレクタを選定したりします。
    • 選定する際の優先度は、accessibility id ≒ id > class name > -android uiautomator > xpath
  2. Click(Tap)Send Keysなどのアクションを試して、スクリプトに必要な操作を検証します。
  • テストコード(Chrome検索)

    Appium Inspectorで調べたIDを用いたテストコードを以下に記載します。

    import pytest
    import time
    from appium import webdriver
    from appium.options.android import UiAutomator2Options
    from appium.webdriver.common.appiumby import AppiumBy
    from selenium.common.exceptions import NoSuchElementException
    from selenium.webdriver.support.ui import WebDriverWait
    from selenium.webdriver.support import expected_conditions as EC
    
    # Desired Capabilitiesの設定
    # CapabilitiesをUiAutomator2Optionsで設定
    @pytest.fixture(scope="module")
    def driver():
        options = UiAutomator2Options()
        options.platform_name = 'Android'
        options.automation_name = 'UiAutomator2'
        options.device_name = 'emulator-5554' # エミュレーター
        # options.device_name = 'XXXXXXXXXXX'  # 実機の端末名
        # options.udid= 'XXXXXXXXXXX'  # adb devicesで検索
    
        # Appiumサーバーに接続
        driver = webdriver.Remote("http://localhost:4723", options=options)
        yield driver
    
        # テスト終了後にドライバーを閉じる
        driver.quit()
    
    def test_google_serach(driver):
        # Androidのホームボタンを押して、ホーム画面に戻る
        driver.press_keycode(3)  # 3はホームボタンに対応
        time.sleep(2)  # ページロード待機
        # Google検索
        # Chromeがあるか確認する
        try:
            chrome = driver.find_element(by=AppiumBy.ACCESSIBILITY_ID, value="Chrome")
            assert chrome.is_displayed()
            chrome.click()
            time.sleep(2)
        except NoSuchElementException:
            pytest.fail("Chrome not found")
    
        # 検索ボックスが存在するか確認する
        if (driver.find_elements(by=AppiumBy.ID, value="com.android.chrome:id/search_provider_logo")):
            search_box = driver.find_element(by=AppiumBy.ID, value="com.android.chrome:id/search_box_text")
        else:
            search_box = driver.find_element(by=AppiumBy.ID, value="com.android.chrome:id/url_bar")
        search_box.send_keys("Appium")
        driver.press_keycode(66)  # 66はEnterキーに対応
    
        # 検索結果が表示されるまで待機
        WebDriverWait(driver, 10).until(
            EC.presence_of_element_located((AppiumBy.ID, "com.android.chrome:id/url_bar"))
        )
    
        # 検索結果が"Appium"を含むことを確認
        assert "Appium" in driver.find_element(by=AppiumBy.ID, value="com.android.chrome:id/url_bar").text
    
        driver.find_element(by=AppiumBy.ANDROID_UIAUTOMATOR, value="new UiSelector().text(\"Welcome - Appium Documentation\")").click()
        time.sleep(5)
    
        # URLにappium.ioが含まれているか確認
        page_source = driver.page_source
        assert "appium.io" in page_source, f"Expected page source to contain 'appium.io', but got {page_source}"
    
        # Chromeのタブを閉じる
        chrome_tab = driver.find_element(by=AppiumBy.ID, value="com.android.chrome:id/tab_switcher_button")
        chrome_tab.click()
        time.sleep(2)
        try:
            while(driver.find_element(by=AppiumBy.ANDROID_UIAUTOMATOR, value="new UiSelector().resourceId(\"com.android.chrome:id/tab_title\").instance(0)").is_displayed()):
                driver.find_element(by=AppiumBy.ANDROID_UIAUTOMATOR, value="new UiSelector().resourceId(\"com.android.chrome:id/action_button\").instance(0)").click()
                time.sleep(2)
        except NoSuchElementException:
            driver.find_element(by=AppiumBy.ACCESSIBILITY_ID, value="New tab").click()
            time.sleep(2)
            pass
    
        driver.press_keycode(3)  # 3はホームボタンに対応
    

    以上の手順で、Appium Inspectorを活用して効率的にUIテストを実装することができます。

    まとめ

    応用として、企業ネットワークや VPN 環境でプロキシ接続を利用したり、クラウド端末(BrowserStack、 Sauce Labs など) を利用したりすることも可能です。

    本記事が、モバイル端末テスト自動化の一助になれば幸いです。

    参考記事

     

Appiumの最近記事

  1. Appium Inspectorを使ってみよう

  2. ゼロから始める!Appium + Python環境構築ガイド(Windows対応)

関連記事