تست رابط کاربری اندروید

تست رابط کاربری اندروید

Android SDK ابزارهای زیر را برای پشتیبانی از تست رابط کاربری  در برنامه شما فراهم می کند:

• uiautomatorviewer
• uiautomator

uiautomatorviewer

ابزاری ساده که دارای رابط کاربری گرافیکی برای اسکن و تجزیه و تحلیل اجزای UI یک برنامه اندرویدی می باشد.

ابزار uiautomatorviewer یک رابط بصری مناسب برای بررسی سلسله مراتب لایوت و مشاهده خصوصیات هر یک از اجزای UI  که در دستگاه مورد آزمایش نمایش داده می شوند ، فراهم می کند. با استفاده از این اطلاعات ، بعداً می توانید آزمایشات uiautomator را ایجاد کنید که اجزای خاص UI را برای آزمایش هدف قرار می دهند.

برای تجزیه و تحلیل اجزای UI در برنامه ای که می خواهید آزمایش کنید ، مراحل زیر را باید پس از نصب برنامه انجام دهید.

• مطمئن شوید که دستگاه اندرویدی مورد آزمایش به رایانه متصل باشد
• یک پنجره ترمینال باز کنید و به /android-sdk>/tools> بروید
• ابزار را با دستور زیر اجرا کنید:

uiautomatorviewer

دستورات مطابق شکل زیر دنبال می شوند:

مشاهده خواهید کرد که پنجره زیر ظاهر می شود. این پنجره ی پیش فرض UI Automator Viewer است:

روی نماد دستگاه ها در گوشه بالا سمت راست کلیک کنید. برنامه UI Automator Viewer شروع به گرفتن عکس فوری UI XML از صفحه فعلی باز شده در دستگاه می کند. در هنگام آماده کردن تصویر، دیالوگ زیر را می بینید:

پس از آن ، عکس فوری از صفحه دستگاه خود را در پنجره uiautomatorviewer مشاهده خواهید کرد. مانند تصویر زیر:

در سمت راست این پنجره ، دو قسمت را می بینید. قسمت فوقانی ساختار گره ها ، نحوه چیدمان و قرار گیری اجزای UI را نشان می دهد. با کلیک بر روی هر گره ، جزئیات مربوط به آن در قسمت پایین نشان داده می شود.

به عنوان مثال ، شکل زیر را در نظر بگیرید. وقتی روی دکمه کلیک می کنید ، می توانید در قسمت بالایی ببینید که دکمه انتخاب شده است و در پارتیشن پایین ، جزئیات آن نشان داده می شود. از آنجا که این دکمه قابلیت کلیک دارد ، به همین دلیل ویژگی clickable در آن برابر true است:

UI Automator Viewer همچنین به شما کمک می کند تا UI خود را در جهت گیری های مختلف بررسی کنید. به عنوان مثال ، جهت دستگاه خود را به حالت افقی تغییر دهید و دوباره عکس صفحه را بگیرید. نتیجه در شکل زیر نشان داده شده است:

uiautomator

اکنون می توانید موارد آزمایشی خود را ایجاد کرده و برای بررسی ، آنها را با uiautomatorviewer اجرا کنید. برای ایجاد مورد آزمایشی خود ، باید مراحل زیر را انجام دهید:

• از Project Explorer ، بر روی پروژه جدیدی که ایجاد کرده اید کلیک راست کنید ، سپس Properties> Java Build Path را انتخاب کرده و موارد زیر را انجام دهید:
• روی Add Library> JUnit کلیک کنید و سپس JUnit3 را انتخاب کنید تا پشتیبانی JUnit اضافه شود.
• روی ...Add External JARs کلیک کنید و به پوشه SDK بروید. در داخل پوشه platforms ، آخرین نسخه SDK را انتخاب کنید و هر دو فایل uiautomator.jar و android.jar را اضافه کنید.
• کلاس تان را تغییر بدید تا از کلاس UiAutomatorTestCase ارث بری کند.
• کد لازم برای تست موارد آزمایشی (test case) های خود را بنویسید.
• هنگامی که تست خود را کد نویسی کردید ، مراحل زیر را برای ساخت و استقرار JAR آزمونگر در دستگاه اندرویدی خود دنبال کنید.
• برای ساخت JAR خروجی ، فایل های پیکربندی build مورد نیاز را ایجاد کنید. برای تولید فایل های پیکربندی build ، یک ترمینال را باز کنید و دستور زیر را اجرا کنید:

<android-sdk>/tools/android create uitest-project -n <name> -t 1 -p <path>

• <name> نام پروژه ای است که شامل فایل کدهای آزمون uiautomator شما می باشد و <path> مسیری است به دایرکتوری  پروژه مربوطه.
• از خط فرمان ، متغیر ANDROID_HOME را تنظیم کنید:

set ANDROID_HOME=<path_to_your_sdk>

• به دایرکتوری پروژه ای که فایل build.xml شما در آن قرار دارد بروید و فایل JAR مربوط به تست خود را build کنید:

ant build

• با استفاده از دستور adb push ، فایل JAR تولید شده خود را در دستگاه اندرویدی مورد آزمایش قرار دهید:

adb push <path_to_output_jar>  /data/local/tmp/

• آزمون خود را با دستور زیر اجرا کنید:

adb shell uiautomator runtest LaunchSettings.jar -c com.uia.example.my.LaunchSettings

پیاده سازی برنامه نمونه

مثال زیر استفاده از UITesting را نشان می دهد. در این مثال ، یک برنامه ابتدایی می سازیم که می تواند برای uiautomatororviewer استفاده شود.

برای آزمودن این برنامه نمونه، باید آن را روی یک دستگاه واقعی اجرا کنید و سپس مراحل uiautomatorviewer که در ابتدا توضیح داده شد را دنبال کنید.

1. با استفاده از اندروید استودیو یک برنامه اندرویدی با پکیج com.amani.myapplication بسازید.
2. کدهای لازمه را به فایل src/MainActivity.java اضافه می کنیم.
3. با تغییر فایل XML لایوت res/layout/activity_main.xml مولفه های لازم را به آن اضافه می کنیم.
4. اکتیویتی با نام src/second.java ایجاد می کنیم.
5. فایل XML  لایوت res/layout/view.xml را ایجاد کرده و مولفه های لازم را به آن اضافه می کنیم.
6. برنامه را اجرا و یک دستگاه اندرویدی را انتخاب می کنیم سپس برنامه را روی آن نصب و نتایج را بررسی می کنیم.

در زیر محتوای MainActivity.java را می بینید:

package com.amani.myapplication;

import android.content.Intent;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends ActionBarActivity {
   Button b1;

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

      b1=(Button)findViewById(R.id.button);
      b1.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View v) {
            Intent in =new Intent(MainActivity.this,second.class);
            startActivity(in);
         }
      });
   }
}

در زیر محتوای second.java را می بینید:

package com.amani.myapplication;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

public class second extends Activity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.view);
      Button b1=(Button)findViewById(R.id.button2);
      
      b1.setOnClickListener(new View.OnClickListener() {
         @Override
         public void onClick(View v) {
            Toast.makeText(second.this,"Thanks",Toast.LENGTH_LONG).show();
         }
      });
   }
}

در زیر محتوای activity_main.xml را می بینید:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
   android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
   
   <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Mohamadreza Amani"
      android:id="@+id/myName"
      android:textSize="25sp"
      android:textColor="#0033cc"
      android:layout_centerHorizontal="true" />
      
   <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="help4usr@gmai.com"
      android:id="@+id/myEmail"
      android:layout_below="@+id/myName"
      android:layout_alignRight="@+id/myName"
      android:layout_alignEnd="@+id/myName"
      android:textColor="#009933"
      android:textIsSelectable="false"
      android:textSize="35dp" />
      
   <ImageView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:id="@+id/imageView"
      android:src="@drawable/ic_android"
      android:layout_below="@+id/myEmail"
      android:layout_centerHorizontal="true" />
      
   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Button"
      android:id="@+id/button"
      android:layout_marginTop="98dp"
      android:layout_below="@+id/imageView"
      android:layout_centerHorizontal="true" />

</RelativeLayout>

در زیر محتوای view.xml را می بینید:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical" android:layout_width="match_parent"
   android:layout_height="match_parent">

   <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Button"
      android:id="@+id/button2"
      android:layout_gravity="center_horizontal"
      android:layout_centerVertical="true"
      android:layout_centerHorizontal="true" />
</RelativeLayout>

در زیر محتوای Strings.xml را می بینید:

<resources>
   <string name="app_name">My Application</string>
</resources>

در زیر محتوای AndroidManifest.xml را می بینید:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="com.amani.myapplication" >
   
   <application
      android:allowBackup="true"
      android:icon="@mipmap/ic_launcher"
      android:label="@string/app_name"
      android:theme="@style/AppTheme" >
      
      <activity
         android:name=".MainActivity"
         android:label="@string/app_name" >
         
         <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
         </intent-filter>
         
      </activity>
      
      <activity android:name=".second"></activity>
      
   </application>
</manifest>

حالا سعی می کنیم برنامه نمونه UI Testing را اجرا کنیم. یک دستگاه موبایل اندرویدی واقعی را به رایانه خود وصل کنید. برای اجرای برنامه از اندروید استودیو ، یکی از فایل های اکتیویتی پروژه خود را باز کنید و از نوار ابزار روی نماد Run (مثلث سبز رنگ) کلیک کنید. قبل از شروع برنامه ، اندروید استودیو پنجره زیر را نمایش می دهد تا گزینه ای را انتخاب کنید که می خواهید برنامه اندرویدی خود را روی آن اجرا کنید:

گزینه دستگاه موبایل خود را انتخاب کنید و سپس دستگاه موبایل خود را که صفحه برنامه را نشان می دهد ، بررسی کنید. اکنون برای انجام تست ui روی این برنامه ، کافی است مراحلی که در بخش uiautomatorviewer ذکر شد را دنبال کنید.