Espresso 테스트 프레임 워크-WebView

WebView 는 응용 프로그램 내부에 웹 페이지를 표시하기 위해 Android에서 제공하는 특수보기입니다. WebView 는 chrome 및 firefox와 같은 본격적인 브라우저 애플리케이션의 모든 기능을 제공하지 않습니다. 그러나 표시 할 콘텐츠에 대한 완전한 제어를 제공하고 웹 페이지 내에서 호출 할 모든 Android 기능을 노출합니다. WebView를 활성화 하고 HTML 기술과 카메라 및 연락처와 같은 기본 기능을 사용하여 UI를 쉽게 디자인 할 수있는 특수 환경을 제공합니다. 이 기능 세트를 사용하면 WebView 가 하이브리드 애플리케이션 이라는 새로운 종류의 애플리케이션을 제공 할 수 있습니다. 여기서 UI는 HTML로 수행되고 비즈니스 로직은 JavaScript로 수행됩니다. 또는 외부 API 끝점을 통해.

일반적으로 WebView 테스트는 네이티브 사용자 인터페이스 / 뷰가 아닌 사용자 인터페이스 요소에 HTML 기술을 사용하기 때문에 도전이 필요합니다. Espresso는 네이티브 뷰 매처 및 뷰 어설 션과 의도적으로 유사한 웹 매처 및 웹 어설 션에 새로운 세트를 제공함으로써이 영역에서 탁월합니다. 동시에 웹 기술 기반 테스트 환경을 포함하여 균형 잡힌 접근 방식을 제공합니다.

Espresso 웹은 웹 요소를 찾고 조작하는 데 사용되는 WebDriver Atom 프레임 워크를 기반으로 합니다. Atom 은보기 작업과 유사합니다. Atom은 웹 페이지 내에서 모든 상호 작용을 수행합니다. WebDriver 는 findElement () , getElement () 와 같은 사전 정의 된 메소드 세트를 노출하여 웹 요소를 찾고 해당 아톰을 반환합니다 (웹 페이지에서 작업 수행).

표준 웹 테스트 진술은 아래 코드와 같습니다.

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

여기,

onWebView ()-onView () 와 유사하게 WebView를 테스트하기위한 API 세트를 노출합니다.
withElement () − Atom을 사용하여 웹 페이지 내에서 웹 요소를 찾는 데 사용되는 여러 메소드 중 하나이며 ViewInteraction과 유사한 WebInteration 객체를 반환합니다.
perform () -Atom을 사용하여 웹 페이지 내에서 작업을 실행하고 WebInteraction을 반환합니다.
check () -WebAssertion을 사용하여 필요한 주장을 수행합니다.

샘플 웹 테스트 코드는 다음과 같습니다.

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

여기,

findElement () 요소를 찾고 Atom을 반환
webMatches 는 match 메소드와 유사합니다.

샘플 애플리케이션 작성

WebView를 기반으로 간단한 애플리케이션을 작성하고 onWebView () 메서드를 사용하여 테스트 케이스를 작성해 보겠습니다 . 샘플 응용 프로그램을 작성하려면 다음 단계를 따르십시오.

Android 스튜디오를 시작하십시오.
앞에서 설명한대로 새 프로젝트를 만들고 이름을 MyWebViewApp으로 지정 합니다.
Refactor → Migrate to AndroidX 옵션 메뉴 를 사용하여 애플리케이션을 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의 같은에서 부하 링크 행동 방법 웹보기를 ; 그렇지 않으면 응용 프로그램 외부에 새 브라우저 창이 열립니다. 에 배치 MainActivity.java .

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

이제 MainActivity 의 onCreate 메서드에 아래 코드를 추가합니다 . 코드의 목적은 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>

index.html 에서 참조 하는 apple.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 배치
loadUrl 메서드의 URL을 구성된 URL로 바꿉니다.
이제 응용 프로그램을 실행하고 모든 것이 정상인지 수동으로 확인하십시오. 아래의 스크린 샷입니다 웹보기 샘플 응용 프로그램 -

이제 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 와 그 동작 을 테스트합니다 .

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

여기서 테스트는 다음과 같은 순서로 진행되었습니다.

findElement () 메소드와 Locator.ID 열거를 통해 id 속성을 사용하여 링크, apple 을 찾았습니다 .
webMatches () 메서드를 사용하여 링크의 텍스트를 확인합니다.
링크에서 클릭 동작을 수행합니다. apple.html 페이지 가 열립니다 .
findElement () 메서드와 Locator.TAG_NAME 열거를 사용하여 h1 요소를 다시 찾았습니다 .
마지막으로 webMatches () 메서드를 사용하여 h1 태그 의 텍스트를 다시 확인합니다 .
마지막으로 Android 스튜디오 컨텍스트 메뉴를 사용하여 테스트 케이스를 실행합니다.