Framework Pengujian Espresso - WebView

WebView adalah tampilan khusus yang disediakan android untuk menampilkan halaman web di dalam aplikasi. WebView tidak menyediakan semua fitur aplikasi browser lengkap seperti chrome dan firefox. Namun, ini memberikan kontrol penuh atas konten yang akan ditampilkan dan mengekspos semua fitur android yang akan dipanggil di dalam halaman web. Ini memungkinkan WebView dan menyediakan lingkungan khusus di mana UI dapat dengan mudah dirancang menggunakan teknologi HTML dan fitur asli seperti kamera dan menghubungi kontak. Kumpulan fitur ini memungkinkan WebView menyediakan jenis aplikasi baru yang disebut aplikasi Hybrid , di mana UI dilakukan dalam HTML dan logika bisnis dilakukan di JavaScript atau melalui titik akhir API eksternal.

Biasanya, menguji WebView perlu menjadi tantangan karena menggunakan teknologi HTML untuk elemen antarmuka penggunanya daripada tampilan / antarmuka pengguna asli. Espresso unggul dalam bidang ini dengan menyediakan set baru untuk web matcher dan web assertion, yang sengaja mirip dengan native view matcher dan view assertion. Pada saat yang sama, ini memberikan pendekatan yang seimbang dengan menyertakan lingkungan pengujian berbasis teknologi web juga.

Web Espresso dibangun di atas kerangka Atom WebDriver , yang digunakan untuk menemukan dan memanipulasi elemen web. Atom mirip dengan tindakan melihat. Atom akan melakukan semua interaksi di dalam halaman web. WebDriver mengekspos sekumpulan metode yang telah ditentukan, seperti findElement () , getElement () untuk menemukan elemen web dan mengembalikan atom yang sesuai (untuk melakukan tindakan di halaman web).

Pernyataan pengujian web standar terlihat seperti kode di bawah ini,

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

Sini,

onWebView () - Mirip dengan onView (), ini mengekspos satu set API untuk menguji WebView.
withElement () - Salah satu dari beberapa metode yang digunakan untuk menemukan elemen web di dalam halaman web menggunakan Atom dan mengembalikan objek WebInteration, yang mirip dengan ViewInteraction.
perform () - Menjalankan tindakan di dalam halaman web menggunakan Atom dan mengembalikan WebInteraction.
check () - Ini melakukan pernyataan yang diperlukan menggunakan WebAssertion.

Contoh kode pengujian web adalah sebagai berikut,

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

Sini,

findElement () menemukan elemen dan mengembalikan Atom
webMatches mirip dengan metode pencocokan

Tulis Aplikasi Contoh

Mari kita tulis aplikasi sederhana berdasarkan WebView dan tulis kasus uji menggunakan metode onWebView () . Ikuti langkah-langkah berikut untuk menulis contoh aplikasi -

Mulai studio Android.
Buat proyek baru seperti yang dibahas sebelumnya dan beri nama, MyWebViewApp .
Migrasikan aplikasi ke framework AndroidX menggunakan Refactor → Migrate to AndroidX option menu.
Tambahkan opsi konfigurasi di bawah ini di file AndroidManifest.xml untuk memberikan izin untuk mengakses Internet.

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

Web espresso disediakan sebagai plugin terpisah. Jadi, tambahkan dependensi di app / build.gradle dan sinkronkan.

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

Hapus desain default di aktivitas utama dan tambahkan WebView. Isi dari activity_main.xml adalah sebagai berikut,

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

Buat kelas baru, ExtendedWebViewClient yang memperluas WebViewClient dan timpa metode shouldOverrideUrlLoading untuk memuat tindakan tautan di WebView yang sama ; jika tidak, ini akan membuka jendela browser baru di luar aplikasi. Tempatkan di MainActivity.java .

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

Sekarang, tambahkan kode di bawah ini dalam metode onCreate dari MainActivity . Tujuan dari kode ini adalah untuk menemukan WebView , mengkonfigurasinya dengan benar, dan akhirnya memuat url target.

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

Sini,

Isi index.html adalah sebagai berikut -

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

Isi dari file apple.html yang dirujuk di index.html adalah sebagai berikut -

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

Isi file banana.html yang dimaksud dalam banana.html adalah sebagai berikut,

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

Tempatkan index.html, apple.html dan banana.html di server web
Ganti url dalam metode loadUrl dengan url yang Anda konfigurasikan.
Sekarang, jalankan aplikasi dan periksa secara manual apakah semuanya baik-baik saja. Di bawah ini adalah tangkapan layar dari aplikasi contoh WebView -

Sekarang, buka file ExampleInstrumentedTest.java dan tambahkan aturan di bawah ini -

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

Di sini, kami menemukan WebView dan mengaktifkan JavaScript dari WebView karena framework pengujian web espresso bekerja secara eksklusif melalui mesin JavaScript untuk mengidentifikasi dan memanipulasi elemen web.

Sekarang, tambahkan kasus uji untuk menguji WebView kami dan perilakunya.

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

Di sini, pengujian dilakukan dengan urutan sebagai berikut,

menemukan tautannya, apple menggunakan atribut id-nya melalui metode findElement () dan enumerasi Locator.ID .
memeriksa teks tautan menggunakan metode webMatches ()
melakukan tindakan klik pada tautan. Ini membuka halaman apple.html .
menemukan lagi elemen h1 menggunakan metode findElement () dan pencacahan Locator.TAG_NAME .
akhirnya memeriksa kembali teks dari tag h1 menggunakan metode webMatches () .
Terakhir, jalankan kasus uji menggunakan menu konteks android studio.