Marco de prueba de Espresso - WebView

WebView es una vista especial proporcionada por Android para mostrar páginas web dentro de la aplicación. WebView no proporciona todas las funciones de una aplicación de navegador completa como Chrome y Firefox. Sin embargo, proporciona un control completo sobre el contenido que se mostrará y expone todas las funciones de Android para que se invoquen dentro de las páginas web. Permite WebView y proporciona un entorno especial donde la interfaz de usuario se puede diseñar fácilmente utilizando tecnología HTML y características nativas como la cámara y marcar un contacto. Este conjunto de características permite que WebView proporcione un nuevo tipo de aplicación llamada aplicación híbrida , donde la interfaz de usuario se realiza en HTML y la lógica de negocios se realiza en JavaScript oa través de un punto final de API externo.

Normalmente, probar un WebView debe ser un desafío porque utiliza tecnología HTML para sus elementos de interfaz de usuario en lugar de la interfaz de usuario / vistas nativas. Espresso sobresale en esta área al proporcionar un nuevo conjunto de comparadores web y aserciones web, que es intencionalmente similar a los comparadores de vistas nativos y aserciones de vistas. Al mismo tiempo, proporciona un enfoque bien equilibrado al incluir también un entorno de prueba basado en tecnología web.

Espresso web se basa en el marco WebDriver Atom, que se utiliza para buscar y manipular elementos web. Atom es similar a ver acciones. Atom hará toda la interacción dentro de una página web. WebDriver expone un conjunto predefinido de métodos, como findElement () , getElement () para encontrar elementos web y devuelve los átomos correspondientes (para realizar una acción en la página web).

Una declaración de prueba web estándar se parece al código siguiente,

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

Aquí,

onWebView () : similar a onView (), expone un conjunto de API para probar un WebView.
withElement () : uno de los varios métodos utilizados para ubicar elementos web dentro de una página web usando Atom y devuelve el objeto WebInteration, que es similar a ViewInteraction.
perform () : ejecuta la acción dentro de una página web usando Atom y devuelve WebInteraction.
check () : esto hace la aserción necesaria usando WebAssertion.

Un código de prueba web de muestra es el siguiente:

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

Aquí,

findElement () localiza un elemento y devuelve un átomo
webMatches es similar al método de coincidencias

Escribir una aplicación de muestra

Escribamos una aplicación simple basada en WebView y escribamos un caso de prueba usando el método onWebView () . Siga estos pasos para escribir una aplicación de muestra:

Inicie Android Studio.
Cree un nuevo proyecto como se discutió anteriormente y asígnele el nombre MyWebViewApp .
Migre la aplicación al marco de AndroidX usando Refactor → Migrar al menú de opciones de AndroidX .
Agregue la siguiente opción de configuración en el archivo AndroidManifest.xml para otorgar permiso para acceder a Internet.

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

Espresso web se proporciona como un complemento independiente. Entonces, agregue la dependencia en la aplicación / build.gradle y sincronícela.

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

Elimine el diseño predeterminado en la actividad principal y agregue WebView. El contenido de activity_main.xml es el siguiente,

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

Cree una nueva clase, ExtendedWebViewClient que amplíe WebViewClient y anule el método shouldOverrideUrlLoading para cargar la acción de enlace en el mismo WebView ; de lo contrario, abrirá una nueva ventana del navegador fuera de la aplicación. Colóquelo en MainActivity.java .

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

Ahora, agregue el siguiente código en el método onCreate de MainActivity . El propósito del código es encontrar WebView , configurarlo correctamente y finalmente cargar la URL de destino.

// 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");

Aquí,

El contenido de index.html es el siguiente:

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

El contenido del archivo apple.html al que se hace referencia en index.html es el siguiente:

<html>
   <head>
      <title>Android Web View Sample</title>
   </head>
   
   <body>
      <h1>Apple</h1>
   </body>
</html>

El contenido del archivo banana.html al que se hace referencia en banana.html es el siguiente:

<html>
   <head>
      <title>Android Web View Sample</title>
   </head>
   
   <body>
      <h1>Banana</h1>
   </body>
</html>

Coloque index.html, apple.html y banana.html en un servidor web
Reemplace la URL en el método loadUrl con su URL configurada.
Ahora, ejecute la aplicación y verifique manualmente si todo está bien. A continuación se muestra la captura de pantalla de la aplicación de muestra WebView :

Ahora, abra el archivo ExampleInstrumentedTest.java y agregue la siguiente regla:

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

Aquí, encontramos WebView y habilitamos JavaScript de WebView porque el marco de prueba web de espresso funciona exclusivamente a través del motor JavaScript para identificar y manipular elementos web.

Ahora, agregue el caso de prueba para probar nuestro WebView y su comportamiento.

@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")));
}

Aquí, la prueba se realizó en el siguiente orden,

encontró el enlace, apple usando su atributo id a través del método findElement () y la enumeración Locator.ID .
comprueba el texto del enlace utilizando el método webMatches ()
realiza una acción de clic en el enlace. Abre la página apple.html .
nuevamente encontré el elemento h1 usando métodos findElement () y la enumeración Locator.TAG_NAME .
finalmente vuelve a comprobar el texto de la etiqueta h1 utilizando el método webMatches () .
Finalmente, ejecute el caso de prueba usando el menú contextual de Android Studio.

↰ Previous page Next page ↱