Espressoテストフレームワーク-WebView

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

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

Espresso Webは、Web要素の検索と操作に使用されるWebDriverAtomフレームワークに基づいて構築されています。Atomはビューアクションに似ています。Atomは、Webページ内のすべての対話を行います。WebDriverは、findElement()getElement()などの事前定義されたメソッドのセットを公開して、Web要素を検索し、対応するアトムを返します(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()は要素を見つけて、アトムを返します

  • webMatchesはmatchesメソッドに似ています

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

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

  • AndroidStudioを起動します。

  • 前に説明したように新しいプロジェクトを作成し、MyWebViewAppという名前を付けます。

  • リファクタリングAndroidXへの移行オプションメニューを使用して、アプリケーションをAndroidXフレームワークに移行します。

  • 以下の構成オプションをAndroidManifest.xmlファイルに追加して、インターネットへのアクセスを許可します。

<uses-permission android:name = "android.permission.INTERNET" />
  • EspressoWebは別のプラグインとして提供されます。そのため、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>
  • 新しいクラスを作成し、ExtendedWebViewClientが拡張WebViewClientとオーバーライド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>/index.html");

ここに、

  • index.htmlの内容は次のとおりです-

<html>
   <head>
      <title>Android Web View Sample</title>
   </head>
   <body>
      <h1>Fruits</h1>
      <ol>
         <li><a href = "apple.html" id = "apple">Apple</a></li>
         <li><a href = "banana.html" id = "banana">Banana</a></li>
         </ol>
   </body>
</html>
  • index.htmlで参照されているapple.htmlファイルの内容は次のとおりです。

<html>
   <head>
      <title>Android Web View Sample</title>
   </head>
   
   <body>
      <h1>Apple</h1>
   </body>
</html>
  • コンテンツbanana.htmlのファイルはに言及banana.html次のように、あります

<html>
   <head>
      <title>Android Web View Sample</title>
   </head>
   
   <body>
      <h1>Banana</h1>
   </body>
</html>
  • index.html、apple.html、banana.htmlをWebサーバーに配置します

  • loadUrlメソッドのURLを構成済みのURLに置き換えます。

  • 次に、アプリケーションを実行し、すべてが正常かどうかを手動で確認します。以下は、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のをとのJavaScriptを有効にWebViewのエスプレッソのウェブテストフレームワークを特定し、ウェブ要素を操作するために、JavaScriptエンジンが独占的に動作しますので。

  • 次に、テストケースを追加して、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属性を使用して、リンク、appleを見つけました。

  • webMatches()メソッドを使用してリンクのテキストをチェックします

  • リンクに対してクリックアクションを実行します。apple.htmlページを開きます。

  • findElement()メソッドとLocator.TAG_NAME列挙を使用して、h1要素を再度見つけました。

  • 最後に、webMatches()メソッドを使用してh1タグのテキストを再度チェックします。

  • 最後に、AndroidStudioのコンテキストメニューを使用してテストケースを実行します。