Cadre de test Espresso - WebView

WebView est une vue spéciale fournie par Android pour afficher des pages Web à l'intérieur de l'application. WebView ne fournit pas toutes les fonctionnalités d'une application de navigateur à part entière comme Chrome et Firefox. Cependant, il offre un contrôle complet sur le contenu à afficher et expose toutes les fonctionnalités Android à invoquer dans les pages Web. Il active WebView et fournit un environnement spécial dans lequel l'interface utilisateur peut être facilement conçue à l'aide de la technologie HTML et de fonctionnalités natives telles que la caméra et la composition d'un contact. Cet ensemble de fonctionnalités permet à une WebView de fournir un nouveau type d'application appelé application hybride , où l'interface utilisateur est réalisée en HTML et la logique métier est réalisée en JavaScript. ou via un point de terminaison d'API externe.

Normalement, tester une WebView doit être un défi car il utilise la technologie HTML pour ses éléments d'interface utilisateur plutôt que l'interface utilisateur / les vues natives. Espresso excelle dans ce domaine en fournissant un nouvel ensemble aux correspondants Web et aux assertions Web, qui est intentionnellement similaire aux correspondants de vue natifs et aux assertions de vue. Dans le même temps, il fournit une approche bien équilibrée en incluant également un environnement de test basé sur la technologie Web.

Espresso Web est basé sur le framework WebDriver Atom, qui est utilisé pour rechercher et manipuler des éléments Web. Atom est similaire aux actions d'affichage. Atom effectuera toutes les interactions à l'intérieur d'une page Web. WebDriver expose un ensemble prédéfini de méthodes, comme findElement () , getElement () pour rechercher des éléments Web et retourne les atomes correspondants (pour effectuer une action dans la page Web).

Une déclaration de test Web standard ressemble au code ci-dessous,

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

Ici,

onWebView () - Semblable à onView (), il expose un ensemble d'API pour tester une WebView.
withElement () - L'une des nombreuses méthodes utilisées pour localiser des éléments Web dans une page Web à l'aide d'Atom et retourne l'objet WebInteration, qui est similaire à ViewInteraction.
perform () - Exécute l'action dans une page Web à l'aide d'Atom et retourne WebInteraction.
check () - Ceci effectue l'assertion nécessaire à l'aide de WebAssertion.

Un exemple de code de test Web est le suivant,

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

Ici,

findElement () localise un élément et renvoie un Atom
webMatches est similaire à la méthode matches

Rédiger un exemple d'application

Écrivons une application simple basée sur WebView et écrivons un cas de test en utilisant la méthode onWebView () . Suivez ces étapes pour écrire un exemple d'application -

Démarrez le studio Android.
Créez un nouveau projet comme indiqué précédemment et nommez-le MyWebViewApp .
Migrez l'application vers le framework AndroidX à l'aide de Refactor → Migrer vers le menu d'options AndroidX .
Ajoutez l'option de configuration ci-dessous dans le fichier AndroidManifest.xml pour autoriser l'accès à Internet.

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

Espresso Web est fourni sous forme de plugin séparé. Alors, ajoutez la dépendance dans l'app / build.gradle et synchronisez-la.

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

Supprimez la conception par défaut dans l'activité principale et ajoutez WebView. Le contenu de activity_main.xml est le suivant,

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

Créez une nouvelle classe, ExtendedWebViewClient étendant WebViewClient et remplacez la méthode shouldOverrideUrlLoading pour charger l'action de lien dans la même WebView ; sinon, il ouvrira une nouvelle fenêtre de navigateur en dehors de l'application. Placez-le dans MainActivity.java .

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

Maintenant, ajoutez le code ci-dessous dans la méthode onCreate de MainActivity . Le but du code est de trouver la WebView , de la configurer correctement et enfin de charger l'url cible.

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

Ici,

Le contenu de index.html est le suivant -

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

Le contenu du fichier apple.html référencé dans index.html est le suivant -

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

Le contenu du fichier banana.html référencé dans banana.html est le suivant,

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

Placez index.html, apple.html et banana.html dans un serveur Web
Remplacez l'url dans la méthode loadUrl par votre URL configurée.
Maintenant, exécutez l'application et vérifiez manuellement si tout va bien. Ci-dessous, la capture d'écran de l' exemple d'application WebView -

Maintenant, ouvrez le fichier ExampleInstrumentedTest.java et ajoutez la règle ci-dessous -

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

Ici, nous avons trouvé le WebView et activé JavaScript de WebView car le framework de test Web espresso fonctionne exclusivement via le moteur JavaScript pour identifier et manipuler l'élément Web.

Maintenant, ajoutez le cas de test pour tester notre WebView et son comportement.

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

Ici, les tests ont été effectués dans l'ordre suivant,

trouvé le lien, apple en utilisant son attribut id via la méthode findElement () et l' énumération Locator.ID .
vérifie le texte du lien en utilisant webMatches () méthode
effectue une action de clic sur le lien. Il ouvre la page apple.html .
à nouveau trouvé l'élément h1 en utilisant les méthodes findElement () et l' énumération Locator.TAG_NAME .
enfin vérifie à nouveau le texte de la balise h1 en utilisant la méthode webMatches () .
Enfin, exécutez le scénario de test à l'aide du menu contextuel d'Android Studio.

↰ Previous page Next page ↱

Cadre de test Espresso - WebView

Rédiger un exemple d'application

Tutoriel sur le framework de test Espresso