WebViewでのテスト

モバイルアプリケーションの開発者は、ネイティブモバイルアプリケーションにHTML Webコンテンツを埋め込むためにWebViewを使用します。mablには、WebViewのエレメントをトレーニングするための2つのオプションがあります。

• デフォルト設定でのWebViewのトレーニング
• 高度なWebViewサポートの有効化

この記事では、mablトレーナーでWebViewをテストする方法について説明します。

デフォルト設定

WebViewの多くは、追加設定がなくてもテストできます。デフォルトでは、ユーザーがエレメントの操作やアサーションを行うと、Trainerが大半のWebViewエレメントをネイティブモバイルエレメントに自動的に変換します。

ただし、正しいWebViewエレメントをターゲットにすることが難しい場合は、高度なWebViewサポートの有効化を検討してください。高度なWebViewサポートを使用すると、mablのブラウザーテストと同様にWebViewを操作できます。

高度なWebViewサポート

高度なWebViewサポートの有効化は、次のような場合に便利です。

• デフォルト設定ではTrainerが正しいWebViewエレメントを特定できない。
• 特定のブラウザー属性をアサートしたい。

高度なWebViewサポートを使用してモバイルビルドをトレーニングするには、次の手順を実行します。

1. モバイルビルドファイルがデバッグ可能なWebViewを持つことの確認
2. 高度なWebViewサポートの有効化
3. テストのトレーニング

注: 主にWebテクノロジーで構築されているハイブリッドアプリケーションを使用する場合は、トレーニングを最適な状態で進めるために、高度なWebViewサポートの使用をお勧めします。   

モバイルビルドファイルがデバッグ可能なWebViewを持つことの確認

高度なWebViewサポートを有効化する前に、次のように、モバイルビルドファイルのWebViewがデバッグ可能で、JavaScriptを実行できることを確認します。

• iOS: 各WebViewがinspectableとマークされている必要があります。例: #available(iOS 16.4, *) {webView.isInspectable = true}。詳細はこちら。
• Android: WebViewクラスでsetWebContentDebuggingEnabled(true)メソッドを呼び出して、WebViewデバッグモードを有効化します。詳細はこちら。各WebViewの javaScriptEnabled フラグが true に設定されている必要があります。詳細はこちら。

デバッグ可能なモバイルビルドがない場合は、コードに必要な変更を加え、ビルドファイルの新しいバージョンをエクスポートし、トレーニング用としてmablにアップロードしてください。

高度なWebViewサポートの有効化

ビルドファイルをmablにアップロードした後、次の手順で高度なWebViewサポートを有効化します。

1. [mabl] > [Settings] > [Preferences] に移動します。

2. [Mobile] タブをクリックします。

3. [Enable advanced webview support] ボックスをチェックします。

テストのトレーニング

新しくアップロードしたデバッグ可能なビルドファイルを使用して、新しいモバイルテストを作成します。WebViewのエレメントをタップすると、TrainerはエレメントがWebView内にあることを自動的に検出し、ステップに [WebView] タグを追加します。

[WebView] タグのあるステップ

内部のWebViewをテストするために必要なコード変更を行わない場合、mablトレーナーがWebViewの操作を試みて時間切れとなり、"Unable to test webview" というメッセージが表示される可能性があります。

WebViewに存在するエレメントをアサートするとき、次の2つのオプションがあります。

ネイティブエレメントのアサートは通常、WebViewエレメントのアサートより速く行われます。ただし、ネイティブエレメントのアサートで正しいエレメントを特定できない場合、または特定のブラウザー属性に対してアサートする場合は、WebViewエレメントをアサートしてください。

WebViewエレメントのアサーション

ネイティブエレメントのアサートとWebViewエレメントのアサートの違いがわかるように、同じエレメントに対する2つのアサーションを次のスクリーンショットに示します。ステップ5がネイティブエレメント "continuous testing" をアサートするのに対して、ステップ6はWebViewエレメント "continuous testing" をアサートし、リンクの詳細を取得します。

ネイティブエレメントのアサートとWebViewエレメントのアサート