WebViewのテスト

Magic Podの使い方 > WebViewのテスト

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

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

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

目次

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Magic PodがWebView内のHTMLにアクセスできるか確認する方法

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

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

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

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

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

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

2. ChromeDriverのダウンロードページから、お使いのChromeのバージョンとOSに対応するChromeDriverをダウンロードし、適当な場所に解凍します。

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

お使いのMobile ChromeあるいはAndroid System WebViewを更新する場合は、この設定で使用するChromeDriverのバージョンの更新も忘れないようにしてください。