エスプレッソテストフレームワーク-WebView

_WebView_は、アプリケーション内にWebページを表示するためにAndroidが提供する特別なビューです。 _WebView_は、chromeやfirefoxなどの本格的なブラウザアプリケーションのすべての機能を提供するわけではありません。ただし、表示されるコンテンツを完全に制御し、Webページ内で呼び出されるすべてのAndroid機能を公開します。 _WebView_を有効にし、HTMLテクノロジーとカメラや連絡先のダイヤルなどのネイティブ機能を使用してUIを簡単に設計できる特別な環境を提供します。この機能セットにより、_WebView_は_Hybrid application_と呼ばれる新しい種類のアプリケーションを提供できます。UIはHTMLで実行され、ビジネスロジックは_JavaScript_または外部APIエンドポイントを介して実行されます。

通常、_WebView_のテストは、ネイティブユーザーインターフェース/ビューではなくユーザーインターフェース要素にHTMLテクノロジーを使用するため、挑戦する必要があります。 Espressoは、WebマッチャーとWebアサーションに新しいセットを提供することで、この分野で優れています。これは、ネイティブビューマッチャーとビューアサーションに意図的に似ています。同時に、Webテクノロジーベースのテスト環境も含めることにより、バランスの取れたアプローチを提供します。

Espresso Webは、Web要素の検索と操作に使用される_WebDriver_ Atomフレームワークに基づいて構築されています。 Atom_はビューアクションに似ています。 AtomはWebページ内ですべての対話を行います。 _WebDriver_は、_findElement（）、_ getElement（）_などの事前定義されたメソッドのセットを公開して、Web要素を検索し、対応するアトムを返します（Webページでアクションを実行します）。

標準のウェブテストステートメントは次のコードのようになります。

onWebView()
   .withElement(Atom)
   .perform(Atom)
   .check(WebAssertion)

ここに、

onWebView（）-onView（）と同様に、WebViewをテストするためのAPIセットを公開します。
withElement（）-Atomを使用してWebページ内のWeb要素を特定し、ViewInteractionに似たWebInterationオブジェクトを返すために使用されるいくつかのメソッドの1つ。
perform（）-Atomを使用してWebページ内でアクションを実行し、WebInteractionを返します。
check（）-これはWebAssertionを使用して必要なアサーションを行います。

サンプルのWebテストコードは次のとおりです。

onWebView()
   .withElement(findElement(Locator.ID, "apple"))
   .check(webMatches(getText(), containsString("Apple")))

ここに、

_findElement（）_要素を特定し、Atomを返します
_webMatches_はmatchesメソッドに似ています

サンプルアプリケーションを作成する

WebViewに基づいた簡単なアプリケーションを作成し、_onWebView（）_メソッドを使用してテストケースを作成しましょう。次の手順に従って、サンプルアプリケーションを作成します-

Androidスタジオを起動します。
前述のように新しいプロジェクトを作成し、_MyWebViewApp_という名前を付けます。
Refactor→Migrate to _AndroidX_オプションメニューを使用して、アプリケーションをAndroidXフレームワークに移行します。
_AndroidManifest.xml_ファイルに以下の構成オプションを追加して、インターネットへのアクセス許可を付与します。

<uses-permission android:name = "android.permission.INTERNET"/>

Espresso Webは、個別のプラグインとして提供されます。そのため、app/build.gradleに依存関係を追加して同期します。

dependencies {
   androidTestImplementation 'androidx.test:rules:1.1.1'
   androidTestImplementation 'androidx.test.espresso:espresso-web:3.1.1'
}

メインアクティビティのデフォルトデザインを削除し、WebViewを追加します。 activity_main.xmlの内容は次のとおりです。

<?xml version = "1.0" encoding = "utf-8"?>
<RelativeLayout xmlns:android = "http://schemas.android.com/apk/res/android"
   xmlns:app = "http://schemas.android.com/apk/res-auto"
   xmlns:tools = "http://schemas.android.com/tools"
   android:layout_width = "match_parent"
   android:layout_height = "match_parent"
   tools:context = ".MainActivity">
   <WebView
      android:id = "@+id/web_view_test"
      android:layout_width = "fill_parent"
      android:layout_height = "fill_parent"/>
</RelativeLayout>

_WebViewClient_を拡張する新しいクラス_ExtendedWebViewClient_を作成し、_shouldOverrideUrlLoading_メソッドをオーバーライドして、同じ_WebView_にリンクアクションをロードします。そうでない場合は、アプリケーションの外部で新しいブラウザウィンドウが開きます。 _MainActivity.java_に配置します。

private class ExtendedWebViewClient extends WebViewClient {
   @Override
   public boolean shouldOverrideUrlLoading(WebView view, String url) {
      view.loadUrl(url);
      return true;
   }
}

次に、_MainActivity_のonCreateメソッドに以下のコードを追加します。コードの目的は、_WebView_を見つけて適切に構成し、最後にターゲットURLをロードすることです。

//Find web view
WebView webView = (WebView) findViewById(R.id.web_view_test);

//set web view client
webView.setWebViewClient(new ExtendedWebViewClient());

//Clear cache
webView.clearCache(true);

//load Url
webView.loadUrl("http://<your domain or IP>/indexl");

ここに、

_indexl_の内容は次のとおりです-

<html>
   <head>
      <title>Android Web View Sample</title>
   </head>
   <body>
      <h1>Fruits</h1>
      <ol>
         <li><a href = "applel" id = "apple">Apple</a></li>
         <li><a href = "bananal" id = "banana">Banana</a></li>
         </ol>
   </body>
</html>

_indexl_で参照される_applel_ファイルの内容は次のとおりです-

<html>
   <head>
      <title>Android Web View Sample</title>
   </head>

   <body>
      <h1>Apple</h1>
   </body>
</html>

_bananal_で参照される_bananal_ファイルの内容は次のとおりです。

<html>
   <head>
      <title>Android Web View Sample</title>
   </head>

   <body>
      <h1>Banana</h1>
   </body>
</html>

indexl、applel、およびbananalをWebサーバーに配置する
loadUrlメソッドのURLを構成済みのURLに置き換えます。
次に、アプリケーションを実行し、すべてが正常かどうかを手動で確認します。以下は、_WebViewサンプルアプリケーションのスクリーンショットです-

WebViewサンプル

今、_ExampleInstrumentedTest.java_ファイルを開き、以下のルールを追加します-

@Rule
public ActivityTestRule<MainActivity> mActivityRule =
   new ActivityTestRule<MainActivity>(MainActivity.class, false, true) {
   @Override
   protected void afterActivityLaunched() {
      onWebView(withId(R.id.web_view_test)).forceJavascriptEnabled();
   }
};

ここでは、_WebView_を見つけ、_WebView_のJavaScriptを有効にしました。これは、エスプレッソWebテストフレームワークがJavaScriptエンジンを介して排他的に動作し、Web要素を識別および操作するためです。

次に、テストケースを追加して、_WebView_とその動作をテストします。

@Test
public void webViewTest(){
   onWebView()
      .withElement(findElement(Locator.ID, "apple"))
      .check(webMatches(getText(), containsString("Apple")))
      .perform(webClick())
      .withElement(findElement(Locator.TAG_NAME, "h1"))
      .check(webMatches(getText(), containsString("Apple")));
}

ここでは、テストは次の順序で行われました。

_findElement（）_メソッドと_Locator.ID_列挙を介してid属性を使用して、リンクを見つけました。
_webMatches（）_メソッドを使用してリンクのテキストをチェックします
リンクに対してクリックアクションを実行します。 _applel_ページを開きます。
findElement（）メソッドと_Locator.TAG_NAME_列挙を使用して、再びh1要素を見つけました。
最後に、_webMatches（）_メソッドを使用して_h1_タグのテキストを再度チェックします。
最後に、Android Studioのコンテキストメニューを使用してテストケースを実行します。

Espresso-testing-webview

エスプレッソテストフレームワーク-WebView

サンプルアプリケーションを作成する