กรอบการทดสอบ Espresso - WebView

WebViewเป็นมุมมองพิเศษที่จัดเตรียมโดย Android เพื่อแสดงหน้าเว็บภายในแอปพลิเคชัน WebViewไม่มีคุณสมบัติทั้งหมดของแอปพลิเคชันเบราว์เซอร์ที่มีคุณสมบัติครบถ้วนเช่น chrome และ firefox อย่างไรก็ตามมันให้การควบคุมอย่างสมบูรณ์สำหรับเนื้อหาที่จะแสดงและเปิดเผยคุณสมบัติทั้งหมดของ Android ที่จะเรียกใช้ในหน้าเว็บ เปิดใช้งานWebViewและจัดเตรียมสภาพแวดล้อมพิเศษที่สามารถออกแบบ UI ได้อย่างง่ายดายโดยใช้เทคโนโลยี HTML และคุณสมบัติดั้งเดิมเช่นกล้องถ่ายรูปและหมุนผู้ติดต่อ ชุดคุณลักษณะนี้ช่วยให้WebViewสามารถจัดหาแอปพลิเคชันชนิดใหม่ที่เรียกว่าแอปพลิเคชันแบบไฮบริดโดยที่ UI จะทำใน HTML และตรรกะทางธุรกิจจะทำในJavaScript หรือผ่านปลายทาง API ภายนอก

โดยปกติการทดสอบWebViewจะต้องเป็นเรื่องท้าทายเนื่องจากใช้เทคโนโลยี HTML สำหรับองค์ประกอบอินเทอร์เฟซผู้ใช้แทนที่จะใช้อินเทอร์เฟซ / มุมมองผู้ใช้แบบเนทีฟ เอสเปรสโซมีความสามารถในด้านนี้ด้วยการมอบชุดใหม่ให้กับนักจับคู่เว็บและการยืนยันเว็บซึ่งมีเจตนาคล้ายกับผู้จับคู่การดูพื้นเมืองและการยืนยันการดู ในขณะเดียวกันก็ให้แนวทางที่สมดุลโดยรวมสภาพแวดล้อมการทดสอบตามเทคโนโลยีเว็บด้วยเช่นกัน

เว็บ Espresso สร้างขึ้นจากเฟรมเวิร์กWebDriver Atom ซึ่งใช้ในการค้นหาและจัดการองค์ประกอบของเว็บ Atomคล้ายกับการดูการกระทำ Atom จะทำการโต้ตอบทั้งหมดภายในเว็บเพจ WebDriverแสดงชุดวิธีการที่กำหนดไว้ล่วงหน้าเช่นfindElement () , getElement ()เพื่อค้นหาองค์ประกอบของเว็บและส่งคืนอะตอมที่เกี่ยวข้อง (เพื่อดำเนินการในหน้าเว็บ)

คำสั่งทดสอบเว็บมาตรฐานดูเหมือนโค้ดด้านล่าง

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

ที่นี่

  • onWebView () - คล้ายกับ onView () ซึ่งจะแสดงชุดของ API เพื่อทดสอบ WebView

  • withElement () - หนึ่งในหลายวิธีที่ใช้ในการค้นหาองค์ประกอบของเว็บภายในเว็บเพจโดยใช้ Atom และส่งคืนออบเจ็กต์ WebInteration ซึ่งคล้ายกับ ViewInteraction

  • ดำเนินการ () - ดำเนินการดำเนินการภายในเว็บเพจโดยใช้ Atom และส่งคืน WebInteraction

  • check () - นี่เป็นการยืนยันที่จำเป็นโดยใช้ WebAssertion

ตัวอย่างโค้ดทดสอบเว็บมีดังนี้

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

ที่นี่

  • findElement ()ค้นหาองค์ประกอบและส่งคืน Atom

  • webMatchesคล้ายกับวิธีการจับคู่

เขียนใบสมัครตัวอย่าง

ขอให้เราเขียนโปรแกรมที่ง่ายซึ่งเป็นไปตาม WebView และเขียนกรณีทดสอบโดยใช้onWebView ()วิธีการ ทำตามขั้นตอนเหล่านี้เพื่อเขียนแอปพลิเคชันตัวอย่าง -

  • เริ่ม Android studio

  • สร้างโครงการใหม่ตามที่กล่าวไว้ก่อนหน้านี้และชื่อมันMyWebViewApp

  • ย้ายแอปพลิเคชันไปยังเฟรมเวิร์ก AndroidX โดยใช้Refactorย้ายไปที่เมนูตัวเลือกAndroidX

  • เพิ่มตัวเลือกการกำหนดค่าด้านล่างในไฟล์AndroidManifest.xmlเพื่อให้สิทธิ์ในการเข้าถึงอินเทอร์เน็ต

<uses-permission android:name = "android.permission.INTERNET" />
  • เว็บ Espresso มีให้เป็นปลั๊กอินแยกต่างหาก ดังนั้นเพิ่มการอ้างอิงใน app / build.gradle และซิงค์

dependencies {
   androidTestImplementation 'androidx.test:rules:1.1.1'
   androidTestImplementation 'androidx.test.espresso:espresso-web:3.1.1'
}
  • ลบการออกแบบเริ่มต้นในกิจกรรมหลักและเพิ่ม WebView เนื้อหาของ activity_main.xml มีดังนี้

<?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>
  • สร้างคลาสใหม่ExtendedWebViewClientขยายWebViewClientและแทนที่shouldOverrideUrlLoadingวิธีการในการดำเนินการเชื่อมโยงในการโหลดเดียวกันWebView ; มิฉะนั้นจะเปิดหน้าต่างเบราว์เซอร์ใหม่นอกแอปพลิเคชัน วางไว้ในMainActivity.java

private class ExtendedWebViewClient extends WebViewClient {
   @Override
   public boolean shouldOverrideUrlLoading(WebView view, String url) {
      view.loadUrl(url);
      return true;
   }
}
  • ตอนนี้เพิ่มด้านล่างรหัสในวิธี onCreate ของMainActivity วัตถุประสงค์ของรหัสคือการค้นหาWebViewกำหนดค่าอย่างถูกต้องจากนั้นโหลด 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");

ที่นี่

  • เนื้อหาของindex.htmlมีดังนี้ -

<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>
  • เนื้อหาของไฟล์apple.html ที่อ้างถึงในindex.htmlมีดังนี้ -

<html>
   <head>
      <title>Android Web View Sample</title>
   </head>
   
   <body>
      <h1>Apple</h1>
   </body>
</html>
  • เนื้อหาของไฟล์banana.html ที่อ้างถึงในbanana.htmlมีดังนี้

<html>
   <head>
      <title>Android Web View Sample</title>
   </head>
   
   <body>
      <h1>Banana</h1>
   </body>
</html>
  • วาง index.html, apple.html และ banana.html ในเว็บเซิร์ฟเวอร์

  • แทนที่ url ในเมธอด loadUrl ด้วย url ที่คุณกำหนดค่าไว้

  • ตอนนี้เรียกใช้แอปพลิเคชันและตรวจสอบด้วยตนเองว่าทุกอย่างเรียบร้อยหรือไม่ ด้านล่างนี้คือภาพหน้าจอของแอปพลิเคชันตัวอย่าง WebView -

  • ตอนนี้เปิดไฟล์ExampleInstrumentedTest.javaและเพิ่มกฎด้านล่าง -

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

ที่นี่เราพบWebViewและเปิดใช้งาน JavaScript ของWebViewเนื่องจากเฟรมเวิร์กการทดสอบเว็บเอสเปรสโซทำงานผ่านเอ็นจิ้น JavaScript เพื่อระบุและจัดการองค์ประกอบของเว็บโดยเฉพาะ

  • ตอนนี้เพิ่มกรณีทดสอบเพื่อทดสอบWebViewและพฤติกรรมของเรา

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

ที่นี่การทดสอบเสร็จสิ้นตามลำดับต่อไปนี้

  • พบลิงค์แอปเปิ้ลใช้แอตทริบิวต์ id ผ่านfindElement () method และLocator.ID enumeration

  • ตรวจสอบข้อความของการเชื่อมโยงโดยใช้ที่webMatches ()วิธีการ

  • ดำเนินการคลิกที่ลิงค์ จะเปิดหน้าapple.html

  • พบองค์ประกอบ h1 อีกครั้งโดยใช้เมธอด findElement () และLocator.TAG_NAME enumeration

  • ในที่สุดอีกครั้งตรวจสอบข้อความของh1แท็กใช้webMatches ()วิธีการ

  • สุดท้ายเรียกใช้กรณีทดสอบโดยใช้เมนูบริบทของสตูดิโอ Android