Espresso Testing Framework - WebView

WebView è una vista speciale fornita da Android per visualizzare le pagine web all'interno dell'applicazione. WebView non fornisce tutte le funzionalità di un'applicazione browser a tutti gli effetti come Chrome e Firefox. Tuttavia, fornisce il controllo completo sul contenuto da mostrare ed espone tutte le funzionalità di Android da richiamare all'interno delle pagine web. Abilita WebView e fornisce un ambiente speciale in cui l'interfaccia utente può essere facilmente progettata utilizzando la tecnologia HTML e funzionalità native come fotocamera e composizione di un contatto. Questo set di funzionalità consente a una visualizzazione Web di fornire un nuovo tipo di applicazione chiamata applicazione ibrida , in cui l'interfaccia utente viene eseguita in HTML e la logica aziendale viene eseguita in JavaScript o tramite un endpoint API esterno.

Normalmente, testare una WebView deve essere una sfida perché utilizza la tecnologia HTML per i suoi elementi dell'interfaccia utente piuttosto che l'interfaccia utente / le visualizzazioni native. Espresso eccelle in quest'area fornendo un nuovo set di web matcher e web assertions, che è intenzionalmente simile a view matcher nativi e view assertions. Allo stesso tempo, fornisce un approccio ben bilanciato includendo anche un ambiente di test basato sulla tecnologia web.

Espresso web è basato sul framework WebDriver Atom, che viene utilizzato per trovare e manipolare elementi web. Atom è simile alle azioni di visualizzazione. Atom eseguirà tutte le interazioni all'interno di una pagina web. WebDriver espone un insieme predefinito di metodi, come findElement () , getElement () per trovare elementi web e restituisce gli atomi corrispondenti (per eseguire azioni nella pagina web).

Una dichiarazione di test web standard è simile al codice seguente,

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

Qui,

  • onWebView () - Simile a onView (), espone un set di API per testare un WebView.

  • withElement () - Uno dei diversi metodi utilizzati per individuare gli elementi Web all'interno di una pagina Web utilizzando Atom e restituisce l'oggetto WebInteration, che è simile a ViewInteraction.

  • perform () - Esegue l'azione all'interno di una pagina web usando Atom e restituisce WebInteraction.

  • check () - Questo esegue l'asserzione necessaria utilizzando WebAssertion.

Un codice di test web di esempio è il seguente,

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

Qui,

  • findElement () individua un elemento e restituisce un Atom

  • webMatches è simile al metodo match

Scrivi un'applicazione di esempio

Scriviamo una semplice applicazione basata su WebView e scriviamo un test case utilizzando il metodo onWebView () . Segui questi passaggi per scrivere un'applicazione di esempio:

  • Avvia Android Studio.

  • Crea un nuovo progetto come discusso in precedenza e chiamalo MyWebViewApp .

  • Migrare l'applicazione al framework AndroidX utilizzando Refactor → Migrate to AndroidX option menu.

  • Aggiungere la seguente opzione di configurazione nel file AndroidManifest.xml per concedere l'autorizzazione ad accedere a Internet.

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

  • Espresso web è fornito come plugin separato. Quindi, aggiungi la dipendenza nell'app / build.gradle e sincronizzala.

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

  • Rimuovi il design predefinito nell'attività principale e aggiungi WebView. Il contenuto di activity_main.xml è il seguente,

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

  • Creare una nuova classe, ExtendedWebViewClient che estende WebViewClient ed eseguire l' override del metodo shouldOverrideUrlLoading per caricare l'azione di collegamento nella stessa WebView ; in caso contrario, aprirà una nuova finestra del browser all'esterno dell'applicazione. Inseriscilo in MainActivity.java .

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

  • Ora aggiungi il codice seguente nel metodo onCreate di MainActivity . Lo scopo del codice è trovare la WebView , configurarla correttamente e infine caricare l'URL di destinazione.

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

Qui,

  • Il contenuto di index.html è il seguente:

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

  • Il contenuto del file apple.html indicato in index.html è il seguente:

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

  • Il contenuto del file banana.html indicato in banana.html è il seguente,

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

  • Posiziona index.html, apple.html e banana.html in un server web

  • Sostituisci l'URL nel metodo loadUrl con l'URL configurato.

  • Ora, esegui l'applicazione e controlla manualmente se tutto va bene. Di seguito è riportato lo screenshot dell'applicazione di esempio WebView :

  • Ora apri il file ExampleInstrumentedTest.java e aggiungi la regola seguente:

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

Qui, abbiamo trovato la WebView e abilitato JavaScript della WebView perché il framework di test web espresso funziona esclusivamente tramite il motore JavaScript per identificare e manipolare l'elemento web.

  • Ora aggiungi il test case per testare la nostra WebView e il suo comportamento.

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

Qui, il test è stato eseguito nel seguente ordine,

  • trovato il collegamento, apple utilizzando il suo attributo id tramite il metodo findElement () e l' enumerazione Locator.ID .

  • controlla il testo del collegamento utilizzando il metodo webMatches ()

  • esegue un'azione di clic sul collegamento. Apre la pagina apple.html .

  • trovato di nuovo l'elemento h1 utilizzando i metodi findElement () e l' enumerazione Locator.TAG_NAME .

  • infine controlla di nuovo il testo del tag h1 usando il metodo webMatches () .

  • Infine, esegui il test case utilizzando il menu contestuale di Android Studio.