Android การใช้ Espresso เพื่อ Testing UI

Android การใช้ Espresso เพื่อ Testing UI

Espresso เป็น Testing Framework อีกตัวหนึ่งที่ทางทีมงาน Android ได้พัฒนาขึ้นเพื่อเป็นเครื่องมือให้เหล่านักพัฒนา จะได้ทดสอบ Application ที่ตัวเองพัฒนาได้ง่ายขึ้น เพราะในการ Test UI การทำงานของ App นั้นแต่ก่อนต้องมานั่งกดตาม step ว่าแต่ละการทำงานของ UI ส่วนต่างๆทำงานถูกต้องหรือไม่ แต่เจ้า Espresso นี้จะเป็น Testing UI ที่ทำให้นักพัฒนาสามารถกำหนด step การกดปุ่ม key ค่าต่างๆแล้วเป็นไปตาม step หรือไม่ ซึ่งทำให้ลดเวลาในการ test ui ไปได้มากเลยทีเดียว

ขั้นตอนแรกผมจะทำการสร้าง project เพื่อขึ้นมาทดสอบโดยมีรายละเอียด layout กับโค้ดในการทำงานดังนี้

code layout

<pre><?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="com.thaicodingexample.applicationespresso.MainActivity">

<EditText
android:id="@+id/txtX"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
/>

<EditText
android:id="@+id/txtY"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:layout_below="@id/txtX"/>

<TextView
android:id="@+id/txtResult"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/txtY"
android:layout_centerHorizontal="true"
android:textSize="20sp"
android:layout_margin="20dp"
android:text="result"/>

<Button
android:id="@+id/btn_calculate"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/txtResult"
android:layout_centerHorizontal="true"
android:onClick="Calculate"
android:text="Cal"/>

</RelativeLayout></pre>

code activity

<pre>package com.thaicodingexample.applicationespresso;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.EditText;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}

public void Calculate(View v){
EditText txtX = (EditText)findViewById(R.id.txtX);
EditText txtY = (EditText)findViewById(R.id.txtY);
TextView txtResult = (TextView)findViewById(R.id.txtResult);

int x = Integer.parseInt(txtX.getEditableText().toString());
int y = Integer.parseInt(txtY.getEditableText().toString());
int result = x * y;
txtResult.setText(String.valueOf(result));
}
}</pre>

minSdkVersion เป็น version 17

เมื่อลองรันก็จะได้ดังรูป ซึ่งเป็นการนำค่า 2 ค่ามาคูณกันแล้วแสดงผล

ANDROID การใช้ ESPRESSO เพื่อ TESTING UI

ที่นี้ก็จะเริ่มมาสร้าง test กัน ในการใช้ espresso นั้นจะเป็น Test UI จะทำการสร้าง class ในส่วนของ androidTest ส่วนพวก Unit Test ที่เป็นการ test logic ต่างๆนั้นจะทำการใช้ในส่วนของ test ตามรูปด้านล่างเลยครับ

ANDROID การใช้ ESPRESSO เพื่อ TESTING UI

การทำการเขียน Test นั้นเราควรกำหนดค่า dependencies ของ project ก่อนว่ามีการใช้ espresso รึเปล่า โดยปกติ android studio version ใหม่จะทำการ config มาให้อยู่แล้วโดยจะมีหน้าต่าง config ประมาณนี้ครับ จะอยู่ในไฟล์ build.gradle ในส่วนของ app

&amp;amp;amp;amp;amp;amp;lt;pre&amp;amp;amp;amp;amp;amp;gt;dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
exclude group: 'com.android.support', module: 'support-annotations'
})
compile 'com.android.support:appcompat-v7:26.+'
compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha8'
testCompile 'junit:junit:4.12'
}&amp;amp;amp;amp;amp;amp;lt;/pre&amp;amp;amp;amp;amp;amp;gt;

เมื่อ config dependencies เสร็จผมจะทำการสร้าง class ที่มีชื่อว่า CalculateButtonTest โดยมีโค้ดดังนี้

<pre>package com.thaicodingexample.applicationespresso;

import android.support.test.rule.ActivityTestRule;
import android.support.test.runner.AndroidJUnit4;

import org.junit.Rule;
import org.junit.Test;
import org.junit.runner.RunWith;

import static android.support.test.espresso.Espresso.onView;
import static android.support.test.espresso.action.ViewActions.click;
import static android.support.test.espresso.action.ViewActions.typeText;
import static android.support.test.espresso.assertion.ViewAssertions.matches;
import static android.support.test.espresso.matcher.ViewMatchers.withId;
import static android.support.test.espresso.matcher.ViewMatchers.withText;

@RunWith(AndroidJUnit4.class)
public class CalculateButtonTest {
@Rule
public ActivityTestRule<MainActivity> mainActivityRule =
new ActivityTestRule<>(MainActivity.class);

@Test
public void CalculateButtonClick(){
onView(withId(R.id.txtX)).perform(typeText("8"));
onView(withId(R.id.txtY)).perform(typeText("5"));

onView(withId(R.id.btn_calculate)).perform(click());

onView(withId(R.id.txtResult)).check(matches(withText("40")));
}
}

จุดสังเกตโค้ดบนชื่อ class จะต้องมี annotation @RunWith จากนั้นภายใน class ก็จะต้องมีการกำหนดกติกาด้วย @Rule ซึ่งในโค้ดตัวอย่างจะมีการกำหนดว่า Activity ที่จะเริ่มต้นการ Test คือ MainActivity ต่อจากนั้นเป็นส่วนของการกำหนด step การ test โดยใช้ @Test เพื่อบอกว่า method ไหนเป็น step การ test

ในตัวอย่าง method CalculateButtonClick จะมีการอ้างถึง EditText id txtX กับ txtY แล้วทำการพิมพ์ตัวเลข 8 กับ 5 ในการจะให้ control ที่อ้างถึงทำงาน event อะไรก็ตาม จะใช้คำสั่ง perform ซึ่งผมได้ทำการ perform พิมพ์ตัวเลขโดยใช้ typeText  ต่อจากนั้นก็อ้างถึงปุ่ม btn_calculate แล้วทำการ perform click แล้วสุดท้ายก็เช็ค txtResult ว่าทีค่าข้อความเท่ากับ 40 หรือไม่ เมื่อเสร็จแล้วก็ลองรัน test ที่สร้างขึ้นโดยทำการคลิกขวาที่ไฟล์แล้วก็ run

ANDROID การใช้ ESPRESSO เพื่อ TESTING UI

เมื่อกดรันแล้วตัว android studio จะเรียกว่าจะให้ test บนอุปกรณ์ที่เราต่ออยู่หรือ emulator เมื่อเลือกแล้วมันก็จะทำการใช้งานตาม step ที่เราเขียนไว้ใน test ซึ่งของผมเมื่อรันแล้วก็จะได้ผลลัพธ์ตามด้านล่างครับ ห่างมี method test ไหนไม่ผ่านมันก็จะขึ้นสีแดงพร้อมบอกรายละเอียดครับ

ANDROID การใช้ ESPRESSO เพื่อ TESTING UI

ก็ขอเป็นอันจบบทความ Android Testing UI โดย Espresso ไว้เท่านี้นะครับสามารถ download project ตัวอย่างไปลองเล่นกันดูตาม link ด้านล่างนะครับ

Download Project

 

Add a Comment

Your email address will not be published. Required fields are marked *