WebViewのテストについて

MagicPodのテストでは、WebView内の要素は通常ネイティブアプリの要素と同じように扱われます。これでもテストは可能ですが、「WebViewをスキャン」のオプションを使うとWebView内の要素をHTMLとして扱うことができ、以下のようにテストがもっと扱いやすくなります。

• HTMLの情報をロケータに使用できるので、よりメンテナンス性の高いテストが作成できます。
• CordovaのようなWebViewだけでiOS・Android両方のアプリが作成できるプラットフォームの場合、1つのテストケースでiOS・Android両方で動作させることができます。
• ネイティブアプリ要素として取得できないWebView内の要素も、HTMLとしてなら取得できることがあります。

ここでは、「WebViewをスキャン」について説明します。

目次

1. WebViewをHTMLとしてスキャンする
2. スキャンエラーが出る場合の設定(iOS)
3. スキャンエラーが出る場合の設定(Andorid)
4. スキャンエラーが出る場合の設定(Android Cordovaアプリ)
5. MagicPodがWebView内のHTMLにアクセスできるか確認する方法
6. Android WebViewのスキャンで特定のChromeDriverを使用する方法

1. WebViewをHTMLとしてスキャンする

WebViewをHTMLとして扱うには、UIをアップロードする際に「WebViewをスキャン」にチェックをつけた状態でUIをアップロードします。これで、そのUIのWebView内の要素はHTMLとして認識されます。

UI要素のロケータを確認すると、HTML情報を元にしたロケータ情報が取得されたことが分かります。

なお、要素をHTMLとして扱うかは、スキャンした際に決まります。HTMLとしてスキャンした要素は、テスト実行時には「WebViewをスキャン」のチェック状態によらず常にHTMLとして扱われます。

2. スキャンエラーが出る場合の設定(iOS)

iOSで「WebViewをスキャン」を利用するには、以下の条件が満たされている必要があります。エラーが出る場合は、これらの条件が満たされているかを確認してください。

1. (実機の場合) IPAファイルは「Development deployment」で生成されている必要があります。
2. (実機の場合) Webインスペクタを有効にしておく必要があります。有効化する方法はこちらを参考にしてください
3. WebViewはWkWebViewコンポーネントまたはUIWebViewコンポーネントを使って実装されている必要があります。SafariWebViewControllerコンポーネントを使っているとうまく動作しません。(不明な場合はアプリ開発者にご確認ください)
4. iOS/iPadOS 16.4 以降の場合、WKWebViewコンポーネントの「isInspectable」プロパティを「true」に設定する必要があります。詳細はこちらを参考にしてください。

3. スキャンエラーが出る場合の設定(Android)

Androidで「WebViewをスキャン」を利用するには、アプリのプログラム中で、問題のWebViewがアプリ上で表示されるまでにsetWebContentsDebuggingEnabled(true)という静的メソッドが呼ばれる必要があります。

具体的な実装方法は、下記のいずれかの記事を参考にしてください。不明な場合はアプリ開発者にご確認ください。

• WebViewのリモートデバッグ
• Chromeを使ったAndroid WebViewページのデバッグ

また、実装の際には以下の点にご注意ください。

• setWebContentsDebuggingEnabled(true)を呼び出すと、WebView内のHTMLがMagicPod以外の外部のデバッグツールからも参照可能になります。これが問題になる場合は、リリース版のアプリでは setWebContentsDebuggingEnabled(true) を呼びださないようにしてください。
• setWebContentsDebuggingEnabled(true)は呼んでいたが、一部のWebViewの起動前には呼ばれないロジックになっていた、というトラブルがよくあるのでご注意ください。

Android WebViewのスキャンに関する既知の問題

ChromeDriver115以降でテスト対象のアプリのWebViewに空のページがある場合、ChromeDriverの問題によりWebView要素を取得できない問題が報告されています。この問題はアプリ側でWebViewに空のページを作らないようにすることで回避できます。複数のWebView要素がある場合、どれか一つでも空のページがあるとこの問題が発生します。(ChromeDriverのイシュー)

4. スキャンエラーが出る場合の設定(Android Cordovaアプリ)

Cordovaアプリの場合、通常のビルドコマンドで生成されたAPKファイルであればWebView要素のHTMLスキャンが可能です。

cordova build --release 

のようなコマンドで生成されたAPKファイルでは、setWebContentsDebuggingEnabled(true)処理が呼ばれず、WebViewのHTMLスキャンはエラーになるのでご注意ください。

5. MagicPodがWebView内のHTMLにアクセスできるか確認する方法

こちらのトラブルシューティングをご確認ください。

6. Android WebViewのスキャン/テストで特定のChromeDriverを使用する方法

Android WebViewのスキャン/テスト時に、裏側ではChromeDriverを使用しています (これはAndroid WebViewの実体がChromeであるからです)。MagicPodDesktopアプリは必要に応じて対応するバージョンのChromeDriverを自動でダウンロードするようになっていますが、これだと次のように不便な場合があります。

1. MagicPodDesktopアプリをダウンロードして、Android WebViewスキャン/テストをする度に、ChromeDriverの自動ダウンロードが走る (通常1-2分ほど待ち時間が発生する)
2. ネットワーク等の問題で自動ダウンロードに失敗する

そこで、MagicPodDesktopアプリのv0.65.0から使用するChromeDriverを指定することが可能になりました。手順としては次の通りです。

1. お使いのWebView Chromeのバージョンを調べます。
   1. Android 7-9をお使いの場合は、Mobile Chromeのバージョンを確認してください。Mobile Chromeを立ち上げ、「設定」 -> 「Chrome について」の順に辿ると確認できます
   2. Android 6および10-11 をお使いの場合は、Android System WebViewのバージョンを確認してください。設定アプリを立ち上げ、「システム」-> 「詳細設定」 -> 「開発者向けオプション」 -> 「WebViewの実装」の順に辿ると確認できます。Android 10 と 11ではそれぞれ「74.0.3729.185」と「83.0.4103.106」がデフォルトでインストールされています。

2. ChromeDriverのダウンロードページから、お使いのChromeのバージョンとOSに対応するChromeDriverをダウンロードし、適当な場所に解凍します。なおMacをお使いの場合、権限の関係、解凍したファイル(chromedriver)をダブルクリックなどで起動する必要があります (一度起動したら、閉じて大丈夫です)。

3. MagicPodDesktopを起動している場合は、一度閉じます。(閉じないと次の手順内容が正しく反映されない)

4. MagicPodの設定ファイル(「/Users/<ユーザー名>/Library/Application Support/magic_pod_desktop/magic_pod_config.json」)を開き、以下のように記述します。

{
  ...
  "driverExecutablePath": {
    "androidchromedriver": "ChromeDriverの実行ファイルのフルパス"
  },
  ...
}