Espresso Test Çerçevesi - Web Görünümü

WebView , uygulama içindeki web sayfalarını görüntülemek için android tarafından sağlanan özel bir görünümdür. WebView , chrome ve firefox gibi tam teşekküllü bir tarayıcı uygulamasının tüm özelliklerini sağlamaz. Ancak, gösterilecek içerik üzerinde tam kontrol sağlar ve web sayfalarında çağrılacak tüm android özelliklerini ortaya çıkarır. Web Görünümü'nü etkinleştirir ve kullanıcı arayüzünün HTML teknolojisi ve kamera ve bir kişiyi arama gibi yerel özellikler kullanılarak kolayca tasarlanabileceği özel bir ortam sağlar. Bu özellik seti, bir Web Görünümü'nün , UI'nin HTML'de yapıldığı ve iş mantığının her iki JavaScript'te de yapıldığı, Hibrit uygulama adı verilen yeni bir uygulama türü sağlamasına olanak tanır. veya harici bir API uç noktası aracılığıyla.

Normalde, bir Web Görünümü'nü test etmek zor olmalıdır çünkü yerel kullanıcı arabirimi / görünümleri yerine kullanıcı arabirimi öğeleri için HTML teknolojisini kullanır. Espresso, kasıtlı olarak yerel görüntü eşleştiricilere ve görüş iddialarına benzeyen, web eşleştiriciler ve web iddialarına yeni bir set sağlayarak bu alanda mükemmeldir. Aynı zamanda web teknolojisi tabanlı bir test ortamı da dahil ederek dengeli bir yaklaşım sağlar.

Espresso web, web öğelerini bulmak ve işlemek için kullanılan WebDriver Atom çerçevesi üzerine inşa edilmiştir . Atom , görüntüleme işlemlerine benzer. Atom, bir web sayfasındaki tüm etkileşimi gerçekleştirecektir. WebDriver , web öğelerini bulmak için findElement () , getElement () gibi önceden tanımlanmış bir dizi yöntemi ortaya çıkarır ve karşılık gelen atomları döndürür (web sayfasında eylem yapmak için).

Standart bir web testi ifadesi aşağıdaki koda benzer,

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

Buraya,

onWebView () - onView () 'a benzer şekilde, bir Web Görünümünü test etmek için bir dizi API sunar.
withElement () - Atom kullanarak bir web sayfasındaki web öğelerini bulmak için kullanılan birkaç yöntemden biri ve ViewInteraction'a benzer bir WebInteration nesnesi döndürüyor.
perform () - Atom kullanarak bir web sayfasındaki eylemi yürütür ve WebInteraction'ı döndürür.
check () - Bu, WebAssertion kullanarak gerekli iddiayı yapar.

Örnek bir web test kodu aşağıdaki gibidir:

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

Buraya,

findElement () bir öğeyi bulur ve bir Atom döndürür
webMatches , match yöntemine benzer

Örnek Bir Uygulama Yazın

WebView'a dayalı basit bir uygulama yazalım ve onWebView () yöntemini kullanarak bir test durumu yazalım . Örnek bir uygulama yazmak için şu adımları izleyin -

Android stüdyosunu başlatın.
Daha önce tartışıldığı gibi yeni proje oluşturun ve MyWebViewApp olarak adlandırın .
Refactor → Migrate to AndroidX seçenek menüsünü kullanarak uygulamayı AndroidX çerçevesine taşıyın .
İnternete erişim izni vermek için AndroidManifest.xml dosyasına aşağıdaki yapılandırma seçeneğini ekleyin .

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

Espresso web ayrı bir eklenti olarak sağlanır. Bu nedenle, bağımlılığı app / build.gradle'a ekleyin ve senkronize edin.

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

Ana etkinlikteki varsayılan tasarımı kaldırın ve Web Görünümü ekleyin. Activity_main.xml dosyasının içeriği aşağıdaki gibidir,

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

Yeni bir sınıf oluşturmak ExtendedWebViewClient uzanan WebViewClient ve geçersiz kılma shouldOverrideUrlLoading aynı yük bağlantısını harekete yöntem WebView'da ; aksi takdirde, uygulamanın dışında yeni bir tarayıcı penceresi açacaktır. MainActivity.java içine yerleştirin .

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

Şimdi, MainActivity'nin onCreate yöntemine aşağıdaki kodu ekleyin . Kodun amacı, Web Görünümü'nü bulmak , doğru şekilde yapılandırmak ve ardından hedef url'yi yüklemektir.

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

Buraya,

İndex.html'nin içeriği aşağıdaki gibidir -

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

İçeriği apple.html dosyanın anılan index.html olarak takip edilmektedir -

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

İçeriği banana.html dosya değinilen banana.html olarak takip edilir,

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

İndex.html, apple.html ve banana.html'yi bir web sunucusuna yerleştirin
LoadUrl yöntemindeki url'yi yapılandırdığınız url ile değiştirin.
Şimdi uygulamayı çalıştırın ve her şeyin yolunda olup olmadığını manuel olarak kontrol edin. WebView örnek uygulamasının ekran görüntüsü aşağıdadır -

Şimdi, ExampleInstrumentedTest.java dosyasını açın ve aşağıdaki kuralı ekleyin -

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

Burada, bulduğumuz WebView'ı ve JavaScript etkinleştirilmiş WebView'da espresso web test çerçevesi belirlemek ve web öğesini işlemek için JavaScript motoru sayesinde sadece çalıştığı için.

Şimdi, Web Görünümümüzü ve davranışını test etmek için test durumunu ekleyin .

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

Burada test şu sırayla yapıldı,

findElement () yöntemi ve Locator.ID numaralandırması aracılığıyla id niteliğini kullanan elma bağlantısını buldu .
webMatches () yöntemini kullanarak bağlantının metnini kontrol eder
bağlantı üzerinde tıklama eylemi gerçekleştirir. Apple.html sayfasını açar .
findElement () yöntemlerini ve Locator.TAG_NAME numaralandırmasını kullanarak h1 öğesini yeniden buldu .
son olarak, webMatches () yöntemini kullanarak h1 etiketinin metnini tekrar kontrol eder .
Son olarak, android stüdyo içerik menüsünü kullanarak test senaryosunu çalıştırın.