Espresso Testing Framework - WebView

WebView ist eine spezielle Ansicht von Android zum Anzeigen von Webseiten in der Anwendung. WebView bietet nicht alle Funktionen einer vollwertigen Browseranwendung wie Chrome und Firefox. Es bietet jedoch die vollständige Kontrolle über den anzuzeigenden Inhalt und macht alle Android-Funktionen verfügbar, die auf den Webseiten aufgerufen werden sollen. Es aktiviert WebView und bietet eine spezielle Umgebung, in der die Benutzeroberfläche mithilfe der HTML-Technologie und nativer Funktionen wie Kamera und Wählen eines Kontakts einfach gestaltet werden kann. Mit diesem Funktionsumfang kann ein WebView eine neue Art von Anwendung namens Hybridanwendung bereitstellen , bei der die Benutzeroberfläche in HTML und die Geschäftslogik in JavaScript ausgeführt wird oder über einen externen API-Endpunkt.

Normalerweise muss das Testen einer WebView eine Herausforderung sein, da sie HTML-Technologie für ihre Benutzeroberflächenelemente anstelle nativer Benutzeroberflächen / Ansichten verwendet. Espresso zeichnet sich in diesem Bereich durch die Bereitstellung eines neuen Satzes für Web-Matcher und Web-Assertions aus, der absichtlich nativen View-Matchern und View-Assertions ähnelt. Gleichzeitig bietet es einen ausgewogenen Ansatz, indem es auch eine auf Webtechnologie basierende Testumgebung einbezieht.

Espresso Web basiert auf dem WebDriver Atom-Framework, mit dem Webelemente gefunden und bearbeitet werden. Atom ähnelt dem Anzeigen von Aktionen. Atom übernimmt die gesamte Interaktion innerhalb einer Webseite. WebDriver stellt eine vordefinierte Reihe von Methoden wie findElement () und getElement () zur Verfügung, um Webelemente zu finden, und gibt die entsprechenden Atome zurück (um Aktionen auf der Webseite auszuführen).

Eine Standard-Webtestanweisung sieht wie folgt aus:

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

Hier,

onWebView () - Ähnlich wie bei onView () wird eine Reihe von APIs zum Testen einer WebView verfügbar gemacht.
withElement () - Eine der verschiedenen Methoden zum Suchen von Webelementen innerhalb einer Webseite mithilfe von Atom und zum Zurückgeben des WebInteration-Objekts, das ViewInteraction ähnelt.
perform () - Führt die Aktion innerhalb einer Webseite mit Atom aus und gibt WebInteraction zurück.
check () - Dies führt die erforderliche Zusicherung mit WebAssertion durch.

Ein Beispiel für einen Web-Testcode lautet wie folgt:

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

Hier,

findElement () sucht ein Element und gibt ein Atom zurück
webMatches ähnelt der Matches-Methode

Schreiben Sie eine Beispielanwendung

Lassen Sie uns eine einfache Anwendung auf Basis von WebView schreiben und einen Testfall mit der Methode onWebView () schreiben . Befolgen Sie diese Schritte, um eine Beispielanwendung zu schreiben -

Starten Sie Android Studio.
Erstellen Sie ein neues Projekt wie zuvor beschrieben und nennen Sie es MyWebViewApp .
Migrieren Sie die Anwendung auf AndroidX Framework Umgestalten → Migrate zu AndroidX Optionsmenü.
Fügen Sie die folgende Konfigurationsoption in die Datei AndroidManifest.xml ein , um die Berechtigung zum Zugriff auf das Internet zu erteilen.

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

Espresso Web wird als separates Plugin bereitgestellt. Fügen Sie also die Abhängigkeit in der app / build.gradle hinzu und synchronisieren Sie sie.

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

Entfernen Sie das Standarddesign in der Hauptaktivität und fügen Sie WebView hinzu. Der Inhalt der Datei activity_main.xml lautet wie folgt:

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

Erstellen Sie eine neue Klasse, ExtendedWebViewClient , die WebViewClient erweitert , und überschreiben Sie die Methode shouldOverrideUrlLoading , um die Verknüpfungsaktion in dieselbe WebView zu laden . Andernfalls wird ein neues Browserfenster außerhalb der Anwendung geöffnet. Platzieren Sie es in MainActivity.java .

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

Fügen Sie nun den folgenden Code in die onCreate-Methode von MainActivity ein . Der Zweck des Codes besteht darin, das WebView zu finden , es ordnungsgemäß zu konfigurieren und schließlich die Ziel-URL zu laden.

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

Hier,

Der Inhalt von index.html lautet wie folgt:

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

Der Inhalt der Datei " apple.html" , auf die in " index.html" verwiesen wird, lautet wie folgt:

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

Der Inhalt der Datei banana.html , auf die in banana.html verwiesen wird, lautet wie folgt:

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

Platzieren Sie index.html, apple.html und banana.html auf einem Webserver
Ersetzen Sie die URL in der loadUrl-Methode durch Ihre konfigurierte URL.
Führen Sie nun die Anwendung aus und überprüfen Sie manuell, ob alles in Ordnung ist. Unten sehen Sie den Screenshot der WebView-Beispielanwendung -

Öffnen Sie nun die Datei ExampleInstrumentedTest.java und fügen Sie die folgende Regel hinzu:

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

Hier haben wir das WebView gefunden und JavaScript des WebView aktiviert, da das Espresso- Webtest- Framework ausschließlich über die JavaScript-Engine zum Identifizieren und Bearbeiten von Webelementen funktioniert.

Fügen Sie nun den Testfall hinzu, um unser WebView und sein Verhalten zu testen .

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

Hier wurde der Test in der folgenden Reihenfolge durchgeführt:

hat den Link gefunden, Apple hat sein ID-Attribut über die findElement () -Methode und die Locator.ID- Enumeration verwendet.
Überprüft den Text des Links mit der webMatches () -Methode
führt eine Klickaktion für den Link aus. Es öffnet sich die Seite apple.html .
Das Element h1 wurde erneut mit den Methoden findElement () und der Aufzählung Locator.TAG_NAME gefunden .
Schließlich wird der Text des h1- Tags erneut mit der webMatches () -Methode überprüft .
Führen Sie den Testfall schließlich über das Android Studio-Kontextmenü aus.