feature-image-sikuli-robotframework
feature-image-sikuli-robotframework

Brief สั้นๆ

ทําแต่ Automate บนเว็ปมาตลอด อยู่แต่บน Browser จนเป็น comfort zone ไปแล้วถ้าเราจะทํา Automate test บน window หรือ อะไรที่อยู่บนหน้าจอละจะทําไง? คําตอบคือ “Sikuli” นั้นเองง

Sikuli คืออะไร?

เจ้านี้คือ Library ที่จะมาช่วยเราแก้ปัญหาทุกอย่าง เพราะเจ้าตัวนี้มันจะช่วยให้เรา automate ทุกๆอย่างที่เราเห็นบนหน้าจอเรา โดยไม่ได้สนใจเรื่องของ Locator ID หรือ อื่นๆเลยแม้แต่น้อย เพราะมันใช้ image recognition ในการควบคุม automate ทั้งหมด (พูดง่ายๆคือเอาภาพมันเทียบและว่าใช่กับจุดที่เราต้องการมั้ย)

ซึ่งเจ้าตัวนี้มันน่าสนใจมากๆนะ เพราะลองจิตนาการดูว่า โดยปกติแล้วเรามักเล่นแต่ element บนหน้าเว็ปเท่านั้น ไม่สามารถมายุ่งอะไรกับ OS เช่น Window ได้เลย ถ้า test scenario ของเรามีแค่นั้นก็ดีไป แต่ถ้า scenario ของเราต้องมีการยุ่งกับ OS ด้วย เราจะไม่สามารถทําได้เลย (แต่อาจจะเลี่ยงวิธีอื่นเช่น ใช่ command line ยิงไปเปิดโปรแกรมแบบนั้น)

  • Sikuli ไม่สามารถใช้กับ mobile device ได้
  • Sikuli มีความสามารถเรื่องของ text recognition (OCR) หรือแปลง่ายๆคือสามารถหา text จากในรูปได้ด้วยน่ะ
  • Sikuli สร้างขึ้นมา based on Java Application แต่มันรองรับ scripting languages พวก Python 2.7 (Robot Framework Library), Ruby, JavaScript
  • เจอคําว่า SikuliX ไม่ต้องตกใจน่ะ มันคือคําเดียวกับ Sikuli แหละ เพียงแค่ว่า X หมายถึง eXperimental branch และเค้าแนะนําให้ใช้ตัวนี้

เริ่มต้นกับ Sikuli ยังไง?

Sikuli ทํางานยังไง?

อย่างที่เรารู้กันน่ะ มันใช้ image recognition โดยใช้ OpenCV package เพื่อใช้ในการหา image on the screen โดยหลักการณ์ง่ายๆอธิบายในนี้

ถ้าให้อธิบายง่ายๆคือมันตัดรูปที่เราต้องการจะหาเนี่ยเป็น สี่เหลื่ยมจัตรุรัสแล้วก็ค่อยๆเอามาเปรียบเทียบกันโดยการ เอารูปไปอยู่ซ้ายสุดของภาพที่ต้องการจะเทียบแล้วค่อยๆไล่ไปทีละ 1 pixel !!! จนสุด โดยการเลื่อนแต่ละทีก็จะคํานวณว่ามัน match มั้ย?

example-opencv-compare-image
example-opencv-compare-image (http://docs.opencv.org/2.4/doc/tutorials/imgproc/histograms/template_matching/template_matching.html)

ซึ่งสูตรในการคํานวณลองไปหาดูข้างในได้ แต่ไม่จําเป็นหรอก 🙂

แล้วจะเอามาใช้งานกับ Robot Framework ของเรายังไง?

ถ้าสมัยก่อนก็คงมีคนพยายามมาโม robot framework ให้ไป tricker นู้นนี้นั่นเต็มไปหมด ดูได้จาก บทความนี้ และ github

แต่สําหรับเราไม่จําเป็นเพราะเราสายขี้เกรี้ยจ เรามาสนใจกับ framework ที่เค้ามีให้แล้ว แล้วเราเอามาโมต่อเองดีกว่ากับตัวนี้ Robot Framework Sikulilibrary (ยังมีคนอัพเดตอยู่เรื่อยๆนะ ณ เวลาที่เขียน เค้าพึ่งอัพเดตไป 26 วันที่แล้ว ฮ่าๆ)

ส่วนเจ้าตัวนี้ก็คือ Architecture ของ Framework ตัวนี้น่ะ

robotframework-sikuli-library-architecture
robotframework-sikuli-library-architecture (https://github.com/rainmanwy/robotframework-SikuliLibrary)

จริงๆแล้วเนื่องจาก Sikuli มันเป็น Java Application เนี้ย การจะเอามาใช้ตรงๆมันเลยลําบากนิดหน่อยโดยการต้องสร้าง server ขึ้นมาเพื่อติดต่อกับ Client และรับค่าไปประมวลผลนั้นเอง จังออกมาเป็นรูปนี้ (เบื้องหลังก็คือไปรัน Sikulilibrary.jar นั้นแหละ)

จาก Architecture ตัวนั้นจะเห็นว่ามันมีวงกลมเหลืองๆเขียนว่า Sikuli Keywords หรือก็คือ Doc หน้านี้ ที่รวบรวมข้อมูลไว้ว่าเรียกใช้อะไรได้บ้างอะ

เบื้องหลังความลับมัน

จริงๆแล้วไม่ได้มีไรซับซ้อนไปมากกว่า Java Class นึงที่ไปเรียกใช้ Jar ไฟล์ๆนึงเลย

source-code-robotframework-sikulilibrary
source-code-robotframework-sikulilibrary

Class นี้แหละ ความลับทั้งหมดของ Framework นี้เลย 🙂 จะเห็นได้ว่ามัน import source code ของ sikuli.script มาทั้งหมด เพื่อเอามาใช้งาน และ @RobotKeyword ก็คือ document ที่อยู่บนหน้าเว็ปของ Keyword นี้แหละ ที่เหลือก็ arguments ทั้งหลาย ทั่วๆไป เพราะฉะนั้นทั้งหมดก็แค่ไปไล่อ่านดูก็ได้ว่ามันทําไรได้บ้าง sourcecode ทําไรบ้าง

ยกตัวอย่างการไล่โค้ดเบื้องหลังน่ะ

สมมุติว่าเราอยากรู้ว่า Wait Until Screen Not Contain จริงๆมันทํางานยังไง?

robotframework-sikulilibrary-waituntilscreennotcontain
robotframework-sikulilibrary-waituntilscreennotcontain

เราจะเห็นว่ามันมีเรื่องของ screen.waitVanish() ?? ซึ่งมาจากไหนไม่รู้? เพราะมันเป็น class ที่ extended มาจาก sikuli นั้นเอง โดยเราสามารไล่ดูจาก class screen ที่มันเรียก waitVanish() ได้

แต่ถ้าลองหาดูดีๆน่ะ มันก็ยังไม่มีเรื่องของ waitVanish() อยู่ดี เพราะ method นี้เป็นเรื่องที่ทุก method ต้องมีในการทํา wait นั้นเอง มันเลยถูก inheritance มาจาก class แม่เลยก็คือ region

sikuli-source-code-screen
sikuli-source-code-screen

ซึ่งจะเห็นจาก source code จากตรงนี้

source-code-sikuli-region
source-code-sikuli-region

ว่าจริงๆแล้วเบื้องหลังมันทํางานยังไงกันแน่ 🙂

ตัวอย่างการใช้งาน Sikuli In Action

มี 2 ตัวอย่างที่น่าสนใจมากคือเรื่องของ hello_world และ drag_and_drop เจ้าสองตัวนี้ช่วยอธิบายถึงการใช้งานของ Framework ตัวนี้ได้ดีทีเดียว

Hello World

ตัวอย่างนี้มันจะทําหน้าที่เปิด

  1. start menu
  2. เปิด notepad
  3. ใส่ข้อมูลลงใน notepad
  4. กดปิดโดยไม่ save
hello-world-robotframework-sikuli
hello-world-robotframework-sikuli

อย่างที่บอกเรื่องของ sikuli คือเรื่องการเปรียบเทียบ image ด้วย opencv อย่างที่บอกไว้ ดังนั้นทุกครั้งสิ่งที่ต้องทําก็คือ add image ที่จะเปียบเทียบนั้นเอง จากตัวอย่างนี้ก็คือ ตัวแปร ${IMAGE_DIR} นั้นเอง

โดยนี้คือหน้าตาของ image ที่จะใช้ในการเปรียบเทียบก็คือ

demo-hello-world-robotframework-sikuli
demo-hello-world-robotframework-sikuli

เจ้าพวกนี้คือสิ่งที่จะใช้เปรียบเทียบนั้นเอง โดยเมื่อมันเปรียบเทียบกับรูป มันจะ capture รูปใหญ่มาเทียบกับรูปเล็กๆพวกนี้ แบบตัวอย่างนี้

example-opencv-compare-image
example-opencv-compare-image

อีกตัวอย่างนึงที่น่าสนใจก็คือ

Drag And Drop

ส่วนอันนี้แตกต่างหน่อยคือ มันจะทําการ drag and drop ไฟล์กับ folder ต่างๆโดยดูจาก ชื่อไฟล์ และ ชื่อโฟล์เดอร์

demo-drag-and-drop-robotframework-sikuli
demo-drag-and-drop-robotframework-sikuli

อย่างที่เคยบอกเวลาใช้ต้องใช้ image เทียบตามนี้

demo-drag-and-drop-robotframework-sikuli
demo-drag-and-drop-robotframework-sikuli

มันจะหาไฟล์ชื่อ FILE1 และ FILE2 แล้ว drag ไป drop ที่ไฟล์ target นั้นเอง

ซึ่งจริงๆแล้วนี้มันก็ดูเหมือนจะจบลงสวยงามสําหรับ demo นี้น่ะ แต่พอเอาเข้าจริงๆแล้ว ปัญหาที่ชวนปวดหัวคือ มันมี Unexpected error อยู่เยอะมาก เช่น

error-drag-and-drop-demo-robotframework-sikuli
error-drag-and-drop-demo-robotframework-sikuli

เห็นอะไรมั้ย? มันมี balloon ลอยขึ้นมา และมีคําว่า FILE1 และนั้นทําให้เกิด error ออกมา เพราะว่าจาก image ยังมีคําว่า FILE1 อยู่นั้นเอง 🙁 เจ็บปวดมั้ยล่ะ 5555

สรุปแล้วว่า

ในบางกรณีมันก็เพี้ยนๆแบบนี้แหละ เพราะฉะนั้นถ้าจะใช้อยากให้เลือกใช้ด้วยว่าเราควรจะใช้หรือไม่ โดยเทียบจากการทดสอบว่าเราทําบนเว็ป บนเดสท๊อป หรือ บน devices ซึ่งหลังจากตัดสินใจแล้วเราถึงจะใช้ โดยปกติแล้วเราก็จะใช้ผสมกันนั้นแหละ ไม่แบบใดแบบนึงเท่านั้น 🙂

ใช้ในกรณีที่จําเป็น หรือไม่เราก็ทํา Libray compare image เอง เช่น แบบนี้ เป็นต้น

 

Leave a Reply

avatar

This site uses Akismet to reduce spam. Learn how your comment data is processed.