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 示例应用程序的屏幕截图：

WebView Sample

  • 现在，打开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 上下文菜单运行测试用例。

打印页面
上一页
下一页
广告