Espresso 測試框架 - WebView

WebView 是 Android 提供的一種特殊檢視，用於在應用程式內部顯示網頁。WebView 並沒有提供像 Chrome 和 Firefox 這樣的完整瀏覽器應用程式的所有功能。但是，它提供了對要顯示的內容的完全控制，並公開了所有可以在網頁內部呼叫的 Android 功能。它啟用 WebView 並提供了一個特殊的環境，可以在其中使用 HTML 技術輕鬆設計 UI，並使用相機和撥打電話等原生功能。此功能集使 WebView 能夠提供一種稱為混合應用程式的新型應用程式，其中 UI 使用 HTML 完成，業務邏輯使用JavaScript 或透過外部 API 端點完成。

通常，測試 WebView 是一項挑戰，因為它使用 HTML 技術而不是原生使用者介面/檢視來構建其使用者介面元素。Espresso 在這方面表現出色，因為它提供了一組新的 Web 匹配器和 Web 斷言，這些匹配器和斷言在設計上與原生檢視匹配器和檢視斷言相似。同時，它還透過包含基於 Web 技術的測試環境提供了一種均衡的方法。

Espresso Web 基於WebDriver Atom 框架構建，該框架用於查詢和操作 Web 元素。Atom 類似於檢視操作。Atom 將執行網頁內部的所有互動。WebDriver 公開了一組預定義的方法，例如findElement()、getElement()，用於查詢 Web 元素並返回相應的 Atom（在網頁中執行操作）。

標準的 Web 測試語句如下所示：

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

這裡：

onWebView() - 類似於 onView()，它公開了一組用於測試 WebView 的 API。
withElement() - 用於使用 Atom 在網頁內部查詢 Web 元素的幾種方法之一，並返回 WebInteration 物件，該物件類似於 ViewInteraction。
perform() - 使用 Atom 在網頁內部執行操作並返回 WebInteraction。
check() - 使用 WebAssertion 進行必要的斷言。

一個 Web 測試程式碼示例如下所示：

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

這裡：

findElement() 查詢元素並返回一個 Atom
webMatches 類似於 matches 方法

編寫示例應用程式

讓我們基於 WebView 編寫一個簡單的應用程式，並使用onWebView() 方法編寫一個測試用例。請按照以下步驟編寫示例應用程式：

啟動 Android Studio。
如前所述建立新專案，並將其命名為MyWebViewApp。
使用重構→遷移到AndroidX選項選單將應用程式遷移到 AndroidX 框架。
在AndroidManifest.xml檔案中新增以下配置選項，以授予訪問 Internet 的許可權。

<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>

建立一個新類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並啟用了WebView的 JavaScript，因為 Espresso 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")));
}

在這裡，測試按以下順序進行：

使用其 id 屬性和Locator.ID列舉透過findElement()方法找到連結apple。
使用webMatches()方法檢查連結的文字。
對連結執行點選操作。它將開啟apple.html頁面。
再次使用 findElement() 方法和Locator.TAG_NAME列舉找到 h1 元素。
最後，再次使用webMatches()方法檢查h1標籤的文字。
最後，使用 Android Studio 上下文選單執行測試用例。

列印頁面