มือใหม่หัดใช้ Appium ตอนจบ : Appium in Action !

 

20150210-appium-in-action-1

 

สวัสดีค่ะ ผู้อ่าน welovebug  สำหรับวันนี้ ตอนจบของบทความ Appium in Action มาแล้วค่ะ บทความ ใน ตอนนี้ ก็จะพามาลงมือ ลองทำ Automated Testing with Native App : Facebook ด้วย Appium กันค่ะ หลังจากที่ เราได้เตรียมคอมพิวเตอร์ของเรา จาก มือใหม่หัดใช้ Appium : Episode I – Prepare to Automation ! กันไปบ้างแล้ว แน่นอนว่า บทความที่กำลังอ่านในตอนนี้ ต้องเป็น การลงมือ ภาคปฏิบัติ Appium in Action นั่นเอง โดยจะมีหัวข้อดังนี้

  • Create Android Virtual Device – สร้าง Android Virtual Device ไว้ทดสอบบนคอมพิวเตอร์
  • Setting up Test Project with Maven & JUnit – สร้าง Test Project ด้วย Maven และ JUnit
  • Invoke the App ! – มาดูกันเถอะว่า Test Script ของเราน่ะทำงานได้มั้ย
  • Hello World from Appium! – สวัสดี โลกกว้าง ด้วย Appium

……

 Create Virtual Device for Testing 

สำหรับในบทความนี้ เราจะมาทดสอบ Native App บน ระบบปฏิบัติการณ์ Android ซึ่ง ต้องมีการใช้ มือถืออย่างแน่นอนค่ะ แต่ เราจะยังไม่ใช่ มือถือจริงๆมา Run Automated Test Script เราจะมาใช้ Android Emulator ในการทดสอบครั้งนี้ก่อนค่ะ และ พระเอก ในวันนี้ของเราก็คือ GenyMotion ที่มี Slogan ประจำตัวเค้าคือ

genymotion

” A faster Android Emulator ! “

ติดตั้ง Genymotion Plugin ให้กับ Eclipse

  1. Launch Eclipse เพื่อเริ่มการทำงานของ Eclipse
  2. ไปที่ Help > Install New Software.
  3. กดปุ่ม Add ด้านขวา จะมี PopUp ปรากฏขึ้นมา ใน ช่อง Name : ใส่คำว่า Genymotion และในช่อง Location ใส่คำว่า : http://plugins.genymotion.com/eclipsehttp://plugins.genymotion.com/eclipse  20150212-install-genymotion-pluginจากนั้น กดปุ่ม OK
  4. เมื่อกลับมาที่หน้า install ให้ เลือกติดตั้ง Plugin ของ GenyMotion จากนั้นกดปุ่ม Next เพื่อติดตั้ง Plugin20150212-install-genymotion-plugin-2
  5. เมื่อติดตั้งเรียบร้อย ให้ทำการ Restart Eclpse นั่นคือ ปิด แล้วเปิด Eclipse ใหม่นั่นเอง
  6. พอเข้า Eclipse มาจะเจอ icon  Screen Shot 2558-02-12 at 11.48.18 AMปรากฏ ที่ menu bar ของ Eclipse 20150212-menubar
  7. ดูวิธีติดตั้ง Genymotion Plugin เพิ่มเติม ได้ที่นี่ Click

สร้าง Android Emulator / Virtual Device 

หลังจากที่ ติดตั้ง Genymotion ไปแล้ว คราวนี้เราก็จะมาสร้าง Android Emulator ไว้บนคอมพิวเตอร์ของเรา ซึ่งจะมีขั้นตอนง่ายดังนี้

  1. กดที่ ไอคอน Screen Shot 2558-02-12 at 11.48.18 AM บน MenuBar ของ Eclipse 20150212-menubar
  2. จะมี Pop Up ขึ้นมาและ เลือกปุ่ม New 20150212-create-virtual-device-1
  3. จะมี PopUp แสดงขึ้นมาและเลือกสร้าง Virtual Device ได้ตามต้องการ เช่น ในทีนี้ เลือกสร้าง Android Version 4.3 Device Model Google Nexus 7 จากนั้นกดปุ่ม Next 20150212-create-virtual-device-2
  4. ในตรงนี้อาจจะใส่ชื่อ Device Name ให้สั้นๆ เพื่อง่าย ต่อการ นำไปใช้สร้าง automated script ภายหลัง เช่น device name ตามตัวอย่างตั้งว่า “Google Nexus 7” กด ปุ่ม Next 20150212-create-virtual-device-3
  5. เมื่อ Geny Motion ทำการสร้าง Virtual Device เสร็จแล้ว จะปรากฏรายชื่อ Virtual Device ขึ้นมาให้เลือกใช้งาน20150212-create-virtual-device-4

ติดตั้ง  ARM Translation ให้กับ Android Virtual Device

หลังจากสร้าง virtual device จาก Genymotion แล้ว ต้องใส่ file ARM Translation เข้าไปด้วยเสมอ เพื่อป้องกันการเกิดปัญหา
INSTALL_FAILED_CPU_ABI_INCOMPATIBLE  ที่จะทำให้เราไม่สามารถ ติดตั้งหรือ Run Test Script บน Virtual Device ได้ เราจึงต้อง ทำการแก้ไขปัญหาดังนี้

  1. Download file ARM Translation จาก ที่นี่ Click
  2. หลังจากดาวน์โหลดเสร็จสิ้น จะได้ไฟล์ ” Genymotion-ARM-Translation_v1.1.zip ” ให้ทำการลากใส่ Virtual Device ของเราที่เปิดทิ้งไว้รอ
  3. จะมี Pop Up สอบถามเพื่อยืนยัน การติดตั้ง File ให้กด ตกลง 20150215-install-arm-translation-1
  4. หลังจากติดตั้งสำเร็จ ให้ทำการ Restart Device ด้วยการกดปุ่ม ปิด แล้ว เปิดใหม่  20150215-install-arm-translation-2

ติดตั้ง Google Apps ให้ กับ Android Virtual Device

หลังจากที่สร้าง virtual Device แล้ว ในทุกครั้งจะต้อง ลง Google Apps เสมอ เพราะว่า Genymotion จะไม่มีติดตั้งไว้ตั้งแต่ต้นทำให้ ผู้ใช้งานไม่สามารถเขียน หรือ ทดสอบ App ที่ต้องใช้งานร่วมกับ Google Play Service ได้ เช่น Google Map ค่ะ โดยจะมีขั้นตอนดังนี้

  1. กดที่ ไอคอน Screen Shot 2558-02-12 at 11.48.18 AMบน MenuBar20150212-menubar
  2. เลือก Virtual Device ที่เพิ่งสร้างไป ในตัวอย่างคือ Google Nexus 7 กดปุ่ม start
  3. จากนั้นไปดาวน์โหลด ตัวติดตั้ง Google Apps ตาม version android ที่เราใช้ ตามตัวอย่างนี้เราใช้ Android 4.3   Click 
  4. หลังจาก ดาวน์โหลดเสร็จจะได้ไฟล์ที่ชื่อว่า “gapps-jb-20130813-signed.zip” ไม่ต้องทำอะไร ให้ลาก ไฟล์ไปใส่ Virtual Device ของเราได้เลย
  5. จะมี Pop Up ขึ้นมาถามการติดตั้ง ให้กด ตกลง20150212-install-google-apps-1
  6. แล้วทำการ Restart Device ด้วยการกดปุ่ม ปิด แล้ว เปิดใหม่ 20150212-install-google-apps-2
  7. เมื่อเปิด Virtual Device ขึ้นมา ระหว่างนี้อาจจะมีข้อความบอกว่า Google Apps Stop Service 20150212-google-stop-serviceให้กด ok ข้ามไปก่อน จากนั้น เลือกไปที่ Settings > Accounts > Add Account > เลือกเป็น Google 20150215-select-account
  8. คราวนี้ก้อ login ด้วย gmail account ( gmail account กับ google account ก็อันเดียวกัน ใครยังไม่มีก็ไปสมัครไว้นะจ้ะ )
  9. หลังจาก log in google account แล้ว ก็ เลือกที่ Play Store
  10. พอเข้ามาที่ Play Store แล้ว ก็เลือกมุมขวาบน My Apps > UPDATE ALL
  11. ( optional ) ลง Google Maps ใน Virtual Device

เมื่อติดตั้งทุกอย่างครบ เราก็จะมี  Android Virtual device พร้อม ให้เราทำ Automated Testing เรียบร้อยแล้ว เย้เย้ \(^.^)/

…..

Setting up Test Project with Maven & JUnit
สร้าง Test Project ด้วย Maven และ JUnit

คราวนี้ ก็ มาถึง ใน่ส่วน ของ การสร้าง Test Script เพื่อ สั่งให้ App ของเรา ทำงาน อัติโนมัติ ามที่เราอยากจะทดสอบค่ะ ซึ่งจะเป็นในส่วน การลงมือทำ coding แล้วน๊าาาา

บทความนี้ เราจะ ใช้ Programming Language ก็ คือ Java และ ใช้ จะใช้ Uiselector ซึ่งเป็น class  ที่มาจาก UiAutomator Framework ในการทดสอบ user interface ของ Android ในการทำงานร่วมกันกับ Appium ค่ะ

สำหรับคำอธิบายต่างๆ ที่เกี่ยวกับ UiSelector นั้นดูได้ ที่นี่  Click ส่วน คำอธิบายของ UIAutomator ดูได้ ที่นี่  Click

เริ่มต่น สร้าง Test Project ด้วย Maven & Junit

  1. Launch Eclipse เพื่อเริ่มการทำงานของ Eclipse
  2. เลือก New Project > เลือกเป็น Maven Project 20150213-create-maven-project-1สาเหตุที่เลือกใช้ Maven Project เพราะว่าไม่ต้องทำการ Add Jar File เหมือนกับ Java Project และง่ายต่อการเพิ่ม หรือ การจัดการ Dependencies ที่จะใช้ใน Project ค่ะ
  3. ในหน้า Maven Project เลือก Artifact ID เป็น mavane-achetype-quickstart version RELEASE20150213-create-maven-project-2
  4. ในหน้าถัดมา group id : com.appium.facebook , artifactid : android, package : com.appium.facebook.android กด Finish ก็จะได้ maven project 20150213-create-maven-project-3
  5. Expand ตัวโปรเจคท์ที่เราสร้างขึ้น จากนั้น คลิก ขวา ที่ pom.xml file เพื่อเปิด ไฟล์ pom.xml 20150213-open-pomfile
  6. เมื่อเปิดไฟล์ได้แล้วไปที่ TAB : Dependencies จะ สังเกตุว่ามี junit 3.8.1(test) อยู่ให้ กดที่ชื่อ junit 3.8.1 (test) แล้วกดปุ่ม Remove ออก20150213-open-pomfile2
  7. เลือก Add ใส่ คำว่า junit เพื่อค้นหา junit version ที่ต้องการใช้  20150213-add-dependencies-1ให้ค้นหา junit และ เลือก junit junit จากนั้นจะได้ junit 4.12 มา20150213-add-dependencies-2
  8. หลังจาก add junit 4.12 แล้ว ให้ คลิ้กที่ junit เลือก properties เลือก scope เป็น test เพราะเราจะใช้ในการ run test เท่านั้น จากนั้น จาก junit 4.12 จะกลายเป้น junit 4.12(test)20150213-add-dependencies-3
  9. จากนั้น ทำเช่นเดียวกัน คือ add appium เข้าไปใน dependencies คิอ กดปุ่ม Add > ใส่คำว่า Appium > รอจนกว่า search result ขึ้นมา > เลือกที่เป็น io appium 20150213-add-dependencies-4
  10. ที่สำคัญรองลงมาคือ Selenium ที่ต้อง add ใส่ใน dependencies เช่นเดียวกัน ทำเหมือนขั้นตอนการ add junit , appium คือ กดปุ่ม add ใส่ selenium > รอจนกว่า search result จะขึ้นมา > เลือกจาก org.seleniumhq.selenium , selenium-server 20150213-add-dependencies-6
  11. เมื่อได้ dependencies ครบทั้งสามตัว คือ junit 4.12 , appium , serlenium-server ให้กด save บน menu bar แล้วปิด File pom.xml 20150213-add-dependencies-7

Coding Time ! ( Create Capabilities file )

หลังจากสร้าง File Java Class ไปแล้ว ก็ได้เวลาของการ Coding แล้วล่ะค่ะ เพื่อ สร้าง test script ขึ้นมา 1 file

ซึ่งเจ้า file นี้ ก็จะไปคุยกับ  appium ว่า : เธอๆ … ฉันจะ เทสท์ app นี้ ด้วย platform นี้ version นี้ นะ

จากนั้น appium ก็จะ ทำการ เตรียม test environment ตามที่ เจ้า test script มาบอกไว้ และ ผู้ใช้อย่างเราก็สามารถทำ automated test ได้ค่ะ

เจ้าไฟล์นี้ ก็ คือ  Appium Server Capabilities นั่นเอง

Server Capabilities ที่ใช้บ่อย คือ

  • “automationName”  : จะใช้ automation engine ในการทดสอบครั้งนี้ Appium or Selendroid
  • “platformName” : ใช้  platform name ตัวใดในการทดสอบ บางครั้งอาจเปลี่ยนเป็น iOS , FirefoxOS
  • “platformVersion” : จะใช้  platform versionใดในการทดสอบเช่น 4.4 คือเวอร์ชั่น ของ android , หรือ 7.1 ที่เป็น version ของ iOS
  • “deviceName”  : จะใช้ device name ชื่อเครื่องอะไร เช่น virtual device เราชื่อ Google Nexus 7 ก็ใส่ตรงนี้
  • “app” : local path ของ app ที่เราจะทดสอบ

ในส่วนของการทดสอบบน Android ก็จะมี Server Capabilities ที่เพิ่มเติมเข้ามา อย่างเช่น

  • appActivity    : Android activity ของ package ที่เราต้องการทดสอบ
  • appPackage : Java package ของ Android app ที่เราต้องการทดสอบ

ดูข้อมูล เพิ่มเติมได้ที่นี่ Click

เอาล่ะ เราก็จะมาเริ่มต้นกันเลย

  1. ไปที่ Project ที่เราสร้าง > Expand folder src/test/java
  2. คลิ้กขวาที่ package ที่เราสร้างขึ้น ที่ชื่อ com.appium.facebook.android20150213-create-test-script-1
  3. เลือก New > Class > Java Class ตั้งชื่อไฟล์20150213-create-test-script-2
  4. จากนั้นจะได้ไฟล์ตามในรูป เปิดขึ้นมาพร้อมให้เราทำการ Coding20150213-create-test-script-3
  5. เริ่มจาก การใส่
    @Test
    public void testFBLogin() throws MalformedURLException{
    File appDir = new File(“src”);
    File app = new File (appDir,”Facebook.apk”);
    DesiredCapabilities capabilities = new DesiredCapabilities();
    20150213-example-java-code
    นระหว่างนี้ Eclipse จะทำการ import สิ่งที่ต้องใช้มาให้โดยอัติโนมัติ เราก็ทำการ เขียน code ตามในรูปให้ครบ และ กดปุ่ม save
  6. Download facebook apk และนำไปใส่ไว่ใน folder src 20150212-folder-src

คำอธิบาย ไฟล์

 

20140219-appium-example-code

File appDir บอกว่า ไฟล์ที่ใช้อยู่ที่ directory ไหน

File app บอกว่า ฉันจะใช้ไฟล์ที่อยู่ใน Directory ที่ระบุไว้ และชื่ออะไร

DesiredCapabilities capabilities = new DesiredCapabilities();  = บอกว่า นี่คือไฟล์ Capabilities ที่ใช้ กับ Appium

capabilities.setCapability(“automationName”, “Appium”); =  บอกว่า จะใช้ Automationname ที่ชื่อ Appium ในการทดสอบ ในบางครั้ง ตรงนี้จถูกเปลี่ยนค่าเป็น Selendroid กรณีทดสอบบน Android ที่ต่ำกว่า เวอร์ชั่น 4.3

capabilities.setCapability(“platformName”, “Android”); = บอกว่าจะใช้  platform name ตัวใดในการทดสอบ บางครั้งอาจเปลี่ยนเป็น iOS , FirefoxOS

capabilities.setCapability(“platformVersion”,”4.3″); platform= บอกว่าจะใช้  platform versionใดในการทดสอบเช่น android 4.4 , android 5.0 , iOS7.1

capabilities.setCapability(“deviceName”, “Google Nexus 7”); =บอกว่าจะใช้ device name อะไร ในบางครั้ง อาจเป็น Android Emulator กรณีที่ใช้ Android Emulator ที่มากับ Android Studio หรือ iOS Simulator กรณี ทดสอบกับ XCode แต่ครั้งนี้เราใช้ Geny Motion ที่มีการสร้าง Virtual device และตั้งชื่อว่า Google Nexus7 นั่นเอง

capabilities.setCapability(“appPackage”,”com.facebook.katana”); = บอกว่า ต้องการทดสอบ app Package ที่มีชื่อว่า อะไร เนื่องจากบน Android ชื่อ แพคเกจของ facebook เป็น “com.facebook.katana ”

capabilities.setCapability(“appActivity”,”LoginActivity”); = บอกว่า ต้องการทดสอบ Activity อะไรของ app กรณีนี้คือ LoginActivity

capabilities.setCapability(“app”, app.getAbsolutePath()); =  บอกว่า จะทดสอบ app ที่อยู่ใน Path นี้ตามที่ระบุไว้ บางที เราก็สามารถเปลี่ยนเป็น “app”, “location apk file ที่ต้องการทดสอบ” ได้

AndroidDriver driver = new AndroidDriver(new URL(“http://127.0.0.1:4723/wd/hub”), capabilities); = ตรงนี้ คือ url ของ appium

driver.manage().timeouts().implicitlyWait(500,TimeUnit.SECONDS); = ตรงนี้คือบอกว่า ให้รอเป็นจำนวน เวลา กี่วินาที ในการทดสอบ Activity ข้างบน สามารถเปลี่ยนหน่วย วินาที เป็น นาที หรือ ชั่วโมงได้ตามความเหมาะสม

 …..

Invoke the App !

เอาล่ะ คราวนี้ เราจะ มาลอง Run Script ที่เราสร้างขึ้นมาก่อนเพื่อดูว่า Script นั้นทำงานได้จริงหรือเปล่า

ตามตัวอย่าง Video

Click ที่นี่

ตัวอย่าง Code อยู่ที่นี่ Click 

….

หลังจากมั่นใจว่า Test Script ข้างบน ทำงานได้ เราก็จะมาเพิ่ม รายละเอียดในการทดสอบ Log in Facebook และ Post Status ค่ะ !

สิ่งที่เราจะทดสอบกันในวันนี้คือ การ log in ของ Facebook และ Post Status ค่ะ

ทีนี้ เราจะหาค่า element ต่างๆบน Facebook ที่เป็น native app อย่างไร น่าจะเป็นคำถามที่ หลายคนสงสัย ซึ่ง ก็ สามารถใช้ appium ได้ หรือ ใช้ tool ที่มากับ android sdk นั่นก็ คือ uiautomatorviewer สำหรับบทความนี้จะใช้ tool : uiautomatorviewer ค่ะ

วิธีการหา element บน facebook android app ด้วย uiautomatorviewer

  1. ไปที่ folder ที่เราลง android sdk ไว้
  2. เข้าไปที่ folder ชื่อ tools และ doubleclick ที่ uiautomatorviewer
  3. ตัวโปรแกรม uiautomatorviewer จะเริ่มต้นทำงานขึ้นมา20150213-uiautomator-1
  4. ให้กดปุ่ม 20150213-uiautomator-2จากนั้น uiautomator จะทำการ เปิดหน้าจอของแอพที่เรารันทิ้งไว้บน android vitual device ขึ้นมา20150213-uiautomator-3
  5. เมื่อเราคลิกให้แถบสีแดงแสดงขึ้นมา จะพบว่า ด้านขวา มีการบอกว่าตรงที่เราจิ้มไปในหน้าจอนั้น คือ element อะไรบ้าง

เอาล่ะ เราก็จมาเริ่มต้น ลงมือ ใส่ code ลงไปใน file ข้างบนที่เรามีอยู่แล้ว โดยจะใช้ uiautomator ซึ่งเป้น testing framework บน android ที่ใช้ทดสอบ user interface และใช้ UiSelector เป็น method ในการระบุ element ที่ เราต้องการทดสอบค่ะ  ตามในรูป

20150213-my-test-script

คำอธิบาย ไฟล์บางส่วน

driver.findElementByAndroidUIAutomator(“new UiSelector().resourceId(\”com.facebook.katana:id/login_username\”)”).sendKeys(“(your-facebook-username)”); = บอกว่าเราจะทดสอบ element นี้โดยใช้ resourceid อะไร (ในบางครั้งสามารถเปลี่ยนเป็นอย่างอื่นได้ เช่น Accessibilityid ) และส่งข้อมูล (ที่ระบุในนี้) ในตัวอย่างคือ

resouceid ” com.facebook.katana:id/login_username” ส่งข้อมูล ( SendKeys) Facebookusername ไป

สุดท้ายแล้ว ก็อย่าลืมกดปุ่ม Save Test Script ให้ เรียบร้อยแล้ว เรา ก็ทำการ Start Virtual Device + Launch Appium และ มาลอง Run Script ดูตัวอย่างได้ใน Video เลยค่ะ

ตัวอย่างการทำงานของ Automated Script ดู Video ได้ ที่นี่ ค่ะ

 ตัวอย่าง Code อยู่ที่นี่ Click 

….

Link ที่ควรอ่านและ ศึกษาเพิ่มเติม เกี่ยวกับ Appium 

  • Appium tutorial : http://appium.io/tutorial?lang=en
  • Appium Documentation  : http://appium.io/documentation.html?lang=en
  • Appium Desired Capabilities Document : https://github.com/appium/appium/blob/master/docs/en/writing-running-appium/caps.md
  • Appium API Document (java) :http://appium.github.io/java-client/
  • Appium server capabilities : http://appium.io/slate/en/master/?java#appium-server-capabilities

สำหรับ บทความ ใน series : มือใหม่ หัดใช้ Appium ก็ ขอจบเพียงเท่านี้ค่ะ หวังว่า มือใหม่ ทุกคนคงจะเอาไปฝึกฝน และ ต่อยอด Test Script ที่มีมาในบทความ นี้ กันต่อไปนะคะ ฝึกทุกวัน วันละนิด เพื่อให้มีความเชี่ยวชาญเพิ่มขึ้น จาก มือใหม่ จะได้ เป็น มือ พร้อมใช้งาน และ ก้าวสู่ขั้นต่อไปได้ค่ะ  (=^・ω・^=) /

…..

3 thoughts on “มือใหม่หัดใช้ Appium ตอนจบ : Appium in Action !”

  1. สอบถามค่ะ พี่ Tanjai
    ถ้าหากต้องการ Run Code ต้องเปิด Appium และ genymotion ไหมค่ะ

    1. เปิด Appium + GenyMotion ตามในวิดิโอเลยจ้า
      ตอนสั่ง Run ก็คือ กดปุ่ม Run สีเขียวๆ ใน Eclipse จ้ะ

Leave a Reply

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