Framework do testowania espresso - WebView

WebView to specjalny widok udostępniany przez system Android do wyświetlania stron internetowych w aplikacji. WebView nie zapewnia wszystkich funkcji pełnoprawnej aplikacji przeglądarkowej, takiej jak Chrome i Firefox. Zapewnia jednak pełną kontrolę nad wyświetlaną zawartością i udostępnia wszystkie funkcje Androida, które mają być wywoływane na stronach internetowych. Umożliwia WebView i zapewnia specjalne środowisko, w którym interfejs użytkownika można łatwo zaprojektować przy użyciu technologii HTML i natywnych funkcji, takich jak aparat i wybieranie kontaktu. Ten zestaw funkcji umożliwia WebView udostępnianie nowego rodzaju aplikacji o nazwie aplikacja hybrydowa , w której interfejs użytkownika jest wykonywany w języku HTML, a logika biznesowa jest wykonywana w języku JavaScript lub przez zewnętrzny punkt końcowy interfejsu API.

Zwykle testowanie WebView musi być wyzwaniem, ponieważ wykorzystuje technologię HTML do elementów interfejsu użytkownika, a nie natywny interfejs / widoki użytkownika. Espresso przoduje w tym obszarze, zapewniając nowy zestaw dopasowań internetowych i potwierdzeń internetowych, który jest celowo podobny do natywnych dopasowań widoku i potwierdzeń widoku. Jednocześnie zapewnia wyważone podejście, włączając w to środowisko testowe oparte na technologii internetowej.

Sieć Espresso jest zbudowana na frameworku WebDriver Atom, który służy do wyszukiwania i manipulowania elementami sieci. Atom jest podobny do wyświetlania działań. Atom wykona całą interakcję wewnątrz strony internetowej. WebDriver udostępnia predefiniowany zestaw metod, takich jak findElement () , getElement () do znajdowania elementów sieci i zwraca odpowiednie atomy (w celu wykonania akcji na stronie internetowej).

Standardowa instrukcja testowania sieci wygląda jak poniższy kod,

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

Tutaj,

  • onWebView () - podobnie jak onView (), udostępnia zestaw API do testowania WebView.

  • withElement () - Jedna z kilku metod używanych do lokalizowania elementów internetowych na stronie internetowej za pomocą Atom i zwraca obiekt WebInteration, który jest podobny do ViewInteraction.

  • perform () - wykonuje akcję wewnątrz strony internetowej przy użyciu Atom i zwraca WebInteraction.

  • check () - wykonuje niezbędne potwierdzenie przy użyciu funkcji WebAssertion.

Przykładowy kod do testów internetowych jest następujący:

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

Tutaj,

  • findElement () lokalizuje element i zwraca Atom

  • webMatches jest podobna do metody dopasowań

Napisz przykładową aplikację

Napiszmy prostą aplikację opartą na WebView i napiszmy przypadek testowy za pomocą metody onWebView () . Wykonaj poniższe czynności, aby napisać przykładową aplikację -

  • Uruchom studio Android.

  • Utwórz nowy projekt, jak omówiono wcześniej, i nadaj mu nazwę MyWebViewApp .

  • Przeprowadź migrację aplikacji do platformy AndroidX za pomocą menu opcji RefactorMigrate to AndroidX .

  • Dodaj poniższą opcję konfiguracji w pliku AndroidManifest.xml , aby zezwolić na dostęp do Internetu.

<uses-permission android:name = "android.permission.INTERNET" />
  • Sieć espresso jest dostarczana jako oddzielna wtyczka. Dodaj więc zależność w pliku app / build.gradle i zsynchronizuj ją.

dependencies {
   androidTestImplementation 'androidx.test:rules:1.1.1'
   androidTestImplementation 'androidx.test.espresso:espresso-web:3.1.1'
}
  • Usuń domyślny projekt w głównym działaniu i dodaj WebView. Zawartość pliku activity_main.xml jest następująca:

<?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>
  • Utwórz nową klasę, ExtendedWebViewClient rozszerzającą WebViewClient i nadpisz metodę shouldOverrideUrlLoading , aby załadować akcję łącza w tym samym WebView ; w przeciwnym razie otworzy nowe okno przeglądarki poza aplikacją. Umieść go w MainActivity.java .

private class ExtendedWebViewClient extends WebViewClient {
   @Override
   public boolean shouldOverrideUrlLoading(WebView view, String url) {
      view.loadUrl(url);
      return true;
   }
}
  • Teraz dodaj poniższy kod w metodzie onCreate MainActivity . Celem kodu jest znalezienie WebView , poprawne skonfigurowanie go, a następnie załadowanie docelowego adresu 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");

Tutaj,

  • Zawartość pliku index.html jest następująca -

<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>
  • Zawartość pliku apple.html , o którym mowa w index.html, jest następująca -

<html>
   <head>
      <title>Android Web View Sample</title>
   </head>
   
   <body>
      <h1>Apple</h1>
   </body>
</html>
  • Zawartość pliku banana.html , o którym mowa w banana.html, jest następująca:

<html>
   <head>
      <title>Android Web View Sample</title>
   </head>
   
   <body>
      <h1>Banana</h1>
   </body>
</html>
  • Umieść index.html, apple.html i banana.html na serwerze internetowym

  • Zastąp adres URL w metodzie loadUrl skonfigurowanym adresem URL.

  • Teraz uruchom aplikację i ręcznie sprawdź, czy wszystko jest w porządku. Poniżej znajduje się zrzut ekranu przykładowej aplikacji WebView -

  • Teraz otwórz plik ExampleInstrumentedTest.java i dodaj poniższą regułę -

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

Tutaj znaleźliśmy WebView i włączoną obsługę JavaScript w WebView, ponieważ framework do testowania sieci espresso działa wyłącznie za pośrednictwem silnika JavaScript w celu identyfikacji i manipulowania elementem sieciowym.

  • Teraz dodaj przypadek testowy, aby przetestować nasz WebView i jego zachowanie.

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

Tutaj testy przeprowadzono w następującej kolejności,

  • odnalazł link, Apple użył swojego atrybutu id poprzez metodę findElement () i wyliczenie Locator.ID .

  • sprawdza tekst odsyłacza za pomocą metody webMatches ()

  • wykonuje kliknięcie w link. Otwiera stronę apple.html .

  • ponownie odnalazłem element h1 za pomocą metod findElement () i wyliczenia Locator.TAG_NAME .

  • na koniec ponownie sprawdza tekst tagu h1 za pomocą metody webMatches () .

  • Na koniec uruchom przypadek testowy za pomocą menu kontekstowego Android Studio.