Electron desktop application คืออะไร และเราจะทำ Automation test ให้มันยังไงดี
เกริ่นนำ
สวัสดีวันหยุดครับทุกคน บ่ายๆวันแรงงานแบบนี้ ถ้าใครไม่ได้ออกไปเที่ยวไหน ทาง Doppiotech มีบทความสั้นๆ ได้สาระความรู้มาให้อ่านเล่นกัน วันนี้จะมาพูดถึงการทำ Automation test บน Desktop application กันครับ ซึ่งขึ้นชื่อว่า Desktop application (โดยมากเรามักจะหมายถึง Windows application) หลายคนอาจจะทำหน้าหวาดกลัวไปตามๆ กัน เพราะศาสตร์ในการทำ Desktop application นั้นมันมีหลากหลายมาก ทำไมน่ะเหรอ ก็เพราะ เทคโนโลยีที่ใช้สร้าง Desktop application มันมีหลายอย่างมากเลย ไม่ว่าจะเป็น Flutter, WinUI, UWP, WPF, Windows Forms, Electron, Java Swing และอื่นๆ อีกมากมาย ซึ่งแต่ละแบบก็จะมีวิธีทำ Automation test ที่แตกต่างกันไป Framework ที่ต้องใช้ก็จะไม่เหมือนกัน และบางครั้งเราก็ต้องไปจบด้วยการใช้เคล็ดวิชาสุดยอดแห่งการทำ Automation test ทั้งปวง ที่ไม่มีใครอยากจะใช้ ที่ชื่อ Sikuli (ไว้ว่างๆจะเขียนบทความให้อ่านเกี่ยวกับเจ้าตัวนี้นะครับ) แต่สั้นๆ เลย Sikuli เป็น library ที่ทำ automation โดยอาศัยหลักการของ Image processing ทำให้มันสามารถทำงานได้กว้าง แต่เนื่องจากเป็นการดีลกับรูปมันเลยค่อนข้างจุกจิกและsensitive จากทั้งหมดที่กล่าวมาทำให้หลายๆคนมักจะกังวลเวลาได้ยินว่า ต้องทำ Automation test กับ Desktop application อย่างไรก็ตามวันนี้เราจะมาพูดถึง Desktop application แบบนึงที่ ทำ Automation test ได้ง่ายกว่าที่ทุกคนคิด นั่นก็คือ Desktop application ประเภทที่สร้างมาโดยใช้ framework ที่ชื่อ Electron นั่นเอง จะเป็นยังไงไปรับชมกันเล้ยยย
Electron คืออะไรก่อน
เรื่องมันมีอยู่ว่าในวงการ Developer ทั้งหลายก็จะแบ่งเป็นหลายๆชนเผ่า เช่น ชนเผ่า Backend , ชนเผ่า Frontend, ชนเผ่า C#, ชนเผ่า Python, ชนเผ่า Java และอื่นๆ อีกมากมาย แตกต่างกันไปตามภาษาที่เขียนโปรแกรม และลักษณะงานที่ Developer คนนั้นๆ ทำงาน แต่มันจะมีอยู่ชนเผ่านึงที่มักจะแผ่ขยายอิทธิพลไปในหลายๆงาน มากขึ้นเรื่อยๆ และก็มักจะทำได้ดีซะด้วย นั่นคือ ชนเผ่าที่เขียนภาษา JavaScript หรือ JS นั่นเองครับ ต้องบอกว่า ตอนแรกสุด JavaScript มันก็เป็นภาษาที่ถูกทำขึ้นมาเพื่อใช้งานกับ web browser หรือที่เราเรียกมันว่าเป็น client side scripting ก็คือโค้ดที่เขียนขึ้นมาแล้วถูก execute ที่ฝั่งของ browser (ก็คือ client นั่นแหละ) แต่พอกาลเวลาผ่านมาเรื่อยๆ มันก็มีคนคิดอะไรใหม่ๆขึ้นมาว่า ทำไมเราไม่เอาเจ้า JavaScript ไปทำอย่างอื่นบ้างล่ะ มันก็เลยเกิด framework / library ต่างๆ ขึ้นมามากมาย ที่ใช้ในงานนอกเหนือจากเว็บ เช่น
- React native สำหรับทำ mobile application cross platform
- Ionic framework สำหรับทำ mobile application cross platform
- NodeJS สำหรับทำ backend application
- และอื่นๆอีกมากมาย
ทำให้เรียกว่า ใครเขียน JS เป็นเราก็ไปเรียนรู้ framework อื่นๆเพิ่มเติมเราก็สามารถทำงานได้ในหลายๆ area และ area นึงที่ JS ได้เข้าไปมีบทบาทก็คือ การสร้าง Desktop application ด้วยการใช้ JavaScript นั่นเอง และ Framework ที่ว่านั้นก็ได้ชื่อว่า Electron JS
Electron นี่มันทำงานยังไง
หลักการของ Electron มัน Simple มากเลย มันอยู่บนคอนเซปต์คือ เฮ้ย chat ถ้านายเขียนเว็บเป็นอยู่แล้ว นายจะไปลำบากเขียน Desktop application อีกทำไม นายใช้เราดิวะ (คนสร้าง Electron ไม่ได้พูด) หลักการของ Electron คือการที่มันให้เราทำเว็บเหมือนเว็บปกตินี่แหละขึ้นมาเป็นส่วน UX/UI ติดต่อกับผู้ใช้ แล้วเราก็ใช้ NodeJS ซึ่งเป็น framework สำหรับการใช้ JS เขียน Backend application มาร่วมด้วย พอเรามีสองอย่างนี้ เราก็ มีทั้งส่วนติดต่อกับผู้ใช้ และมีส่วนของ Backend ที่ทำหน้าที่ไปติดต่อกับ Operating system เพื่อทำงานอื่นๆ เหมือน desktop application เช่น การติดต่อฐานข้อมูล, การติดต่อกับ hardware ต่างๆ หลังจากนั้น เราก็ห่อไอ้ทั้งสองส่วนที่ว่ามา (UI/UX กับ ส่วน Backend) ด้วย browser ที่ชื่อ Chromium (มันก็คือ Chrome ใน version opensource นั่นเอง) แล้วก็ pack เป็น package ให้พร้อมใช้ พูดง่ายๆ ก็คือ !!! Desktop Application ในแบบ Electron มันก็เหมือน การที่ใครสักคนนึง สร้างเว็บไซต์ขึ้นมา เสร็จแล้วก็เอา browser ตัวนึงใส่คู่มากับ website นั้น แล้วบอก browser นี้ว่า เปิดแต่เว็บของฉันนะ ไม่ต้องมีช่องให้กรอก URLไปเว็บอื่น และจงทำตัวให้เนียนอย่าให้ใครรู้ว่าแกคือ Browser , Oh my god โคตร Genius สังเกตง่ายๆ เลยคือ Application ประเภทที่เป็น Electron แม้ว่าคุณจะสร้างแอพที่มันโคตรเล็กแค่ไหน อาจจะแค่ Hello world ธรรมดา แต่เวลาคุณทำเป็น package ออกมาAppมันจะดูใหญ่ๆ แปลกๆ เป็นหลัก 100 Mb ก็เพราะว่า มันต้องมีไอ้ Browser chromium นี่ติดมาด้วยตลอดนั่นเอง
ฟังดูดีนะ แต่ผมคงไม่ค่อยได้ใช้ Application ในรูปแบบนี้มั้งพี่
ช้าก่อน ! ถ้าคุณคิดว่า Application ในรูปแบบของ Electron มันมีน้อยละก็ คุณคิดใหม่ได้เลย ผมเชื่อว่าถ้าคุณเป็นคนที่ทำงานในสาย IT คุณต้องมีไอ้แอพประเภทที่สร้างด้วย Electron นี่ไม่แอพก็สองแอพในเครื่อง และแถมคุณน่าจะใช้งานมันอยู่แทบจะทุกวันด้วยซ้ำ คุณเคยใช้แอพประเภทที่ มันมีทั้งเวอร์ชั่นเว็บ และ เวอร์ชั่น Desktop ไหม และหน้าตามันก็แทบจะเหมือนกันหยั่งกะแกะมาเลย ถ้าเป็นแบบนั้นให้สงสัยไว้ก่อนเลยว่า “Electron ปะวะ” ตัวอย่างของแอพที่ใช้ Electron สร้างขึ้นมาสำหรับเวอร์ชั่น Desktop ก็ดูได้ตามข้างล่างเลยจ้า
ผมคันมืออยาก Automate มันขึ้นมาเลยพี่ ผมต้องทำไง
แป๊ปนึงนะ พี่ขออธิบายหลักการให้เข้าใจก่อน ก่อนจะเข้าสู่ช่วง coding theraphy, คือต้องบอกว่า พอ Electron จริงๆ มันก็คือแค่ Chromium ที่เปิดไฟล์เว็บที่ถูกกำหนดโดย developer มา มันก็คือ Web browser ดีๆ นี่เองล่ะครับ เพราะงั้นสิ่งที่เราจะเอามาทำ Automation test กับ Electron ได้และพวกเราคุ้นเคยกันมากที่สุด ก็คือ Selenium นั่นเองครับ แต่ก่อนจะดูว่าจะทำ Automation test กับ Electron ยังไง เรามาดูหลักการทำงานของ Selenium กับ Web browser โดยทั่วไปกันก่อนครับ
จากภาพด้านบนจะเห็นว่าโดยปกติแล้วเวลาเราเขียนโปรแกรมโดยใช้ภาษาอะไรสักอย่าง ไม่ว่าจะเป็น Java, C#, Python, Robot framework คู่กับ Selenium เวลา Selenium มันทำงานกับ Browser ต่างๆ น่ะ มันไม่ได้ไปคุยกับ Browser โดยตรงนะ แต่มันจะคุยผ่านโปรแกรมเล็กๆ ตัวนึงที่เรียกว่า Driver , ซึ่งเราก็จะต้องเลือก Driver ให้ตรงกับ ชนิด และ เวอร์ชั่นของ Browser ที่เราจะทำการ Test นั่นเป็นเหตุผลที่ เวลาเราจะใช้ Selenium กับ Chrome เราต้องลง Chrome driver และ ไอ้เจ้า Chrome นี่มันก็ชอบทำการ Update อัตโนมัติ ทำให้เวอร์ชั่นของ Chrome driver เรา ไม่ตรงกับ Version ของ Chrome และเราก็ต้องมาคอยนั่ง Update version Chrome driver นั่นเอง ทีนี้ลองมาดูว่าปกติ สมมติเวลาเราใช้ Robot framework เรา Automate website ยังไง เอาแบบเบสิคเลยนะ
จากภาพด้านบนจะเห็นว่า เวลาเราเรียกคำสั่ง Open browser ใน Robot framework สิ่งที่มันเกิดขึ้นเป็นลำดับขั้น มันจะเกิดขึ้นตามนี้
- Robot framework จะไปสั่งให้ Start program chromedriver ขึ้นมา (แค่ chromedriver นะ ไม่ใช่ Chrome)
- Robot framework จะไปสั่ง Driver ว่า เฮ้ยชั้นต้องการเปิดเว็บชื่อ google.com บน Chrome นะ จัดการให้หน่อย
- พอ Driver ได้รับคำสั่งแล้ว ตัวมันจะรู้ว่า มันต้องไปเรียกโปรแกรม Chrome ในเครื่องเราขึ้นมาจาก path ไหน folder ไหน มันก็จะทำการไปเปิด Chrome แล้วไปที่เว็บที่เราต้องการ
โอเคเข้าใจแล้ว ! ทีนี้บอกผมได้ยังว่า แล้วถ้าจะทำกับ Electron app ผมต้องทำยังไง
ขั้นแรกเลย อย่างที่บอกไปก่อนหน้าว่าจริงๆ Electron app มันก็เป็นแค่ Chromium (Chrome ใน version opensource แค่นั้นเอง) เพราะงั้นเราก็เลยสามารถใช้ Chromedriver ในการคุมมันได้ แต่เราต้องเลือก Chromedriver version ให้เหมาะสมกับเจ้า Chromium ที่เรากำลังจะไปควบคุม ซึ่ง Electron app แต่ละตัวก็จะใช้ Chromium version แตกต่างกันไป และ มันก็อาจจะไม่ใช่ Version เดียวกับ Chrome browser ในเครื่องเราด้วย ขั้นแรกเราเลยต้องดูก่อนว่า Chromium ที่ใช้อยู่ในแอพที่เราจะทำ Automate คือ เวอร์ชั่นอะไร ซึ่งแต่ละแอพจะมีวิธีดูแตกต่างกันเล็กน้อย แต่หลักการจะเหมือนกันคือ
1. เปิด developer console ของแอพขึ้นมาให้ได้
2. ดูค่าของตัวแปรที่ชื่อ navigator.userAgent
ในตัวอย่างนี้ผมจะใช้แอพ VScode ละกันนะ เพราะว่ามันง่ายดีขั้นแรกเลย เราก็เปิด VSCode developer console ขึ้นมาก่อนโดยกดที่ Menu Help > Toggle Developer Tools
เราจะได้หน้าตาแบบด้านล่าง เริ่มเอ๊ะ มันคุ้นๆ นะเฮีย หน้าจอแบบนี้
หลังจากนั้นให้เราพิมพ์ว่า navigator.userAgent แล้วกด Enter เพื่อดูค่าของตัวแปรนี้ ตามภาพด้านล่าง จะเห็นว่าตัว VScode ของผม Run อยู่บน Chromium version 118
หลังจากผมรู้แล้วว่า ผมใช้ Chromium version 118 ผมก็ไปตามหา Chromedriver version 118 มา ผมไม่ลง detail มากละกันนะครับ สำหรับ step นี้ ก็ search google แล้วหาโหลดทั่วไป อย่างของผมก็โหลดมาจาก https://storage.googleapis.com/chrome-for-testing-public/118.0.5962.0/mac-arm64/chromedriver-mac-arm64.zip
เอาหล่ะได้เวลามาเขียนโค้ด เพื่อให้ Automate เจ้า VSCode กันแล้ว
สำหรับการเขียนโค้ดในครั้งนี้ เราจะไม่ใช้ Keyword Open Browser เพราะว่า ถ้าเราใช้ Open browser เดี๋ยวจะกลายเป็นมันจะไปทำการเปิด Chrome ทุกอย่างให้เราเองซึ่งเราไม่ต้องการ สิ่งที่เราจะทำกันคือ “เลียนแบบ” วิธีการทำงานของเจ้า Open browser แต่เราจะทำมันเองทีละขั้นตอนดังนี้
- Start chromedriver ขึ้นมา เราจะเขียนโค้ดเพื่อ Start ก็ได้ครับ แต่ในที่นี้ผมเอาง่ายๆ ผม start chromedriver ขึ้นมารอด้วยมือละกันนะครับ วิธีการก็แค่ไปที่ที่เราเก็บ Chromedriver เวอร์ชั่นที่เราอยากจะใช้ไว้ แล้วก็ start มันขึ้นมา หลังจากนั้น จด port ที่ใช้ในการติดต่อ chromedriver ไว้เพื่อเราจะได้เอาไปใส่ในโค้ด (ของผมคือ 9515)
2. ทำการเขียนโค้ดตามด้านล่างเพื่อให้ Robot framework เชื่อมต่อไปหา chromedriver ในข้อแรก และทำการเปิด VScode ขึ้นมา ทำ automate
จากภาพด้านบน โค้ดของเราจะแบ่งออกเป็นสองส่วนคือ
ส่วนที่ : 1 คือส่วนที่เราใช้คำสั่ง Create WebDriver โดยกำหนด Driver name เป็น Remote แปลว่า เราไม่ต้องการรัน webdriver ขึ้นมา แต่เราอยากจะให้มัน connect ไปหา webdriver ที่เรารันไว้แล้วจากข้อ 1 ที่ port 9515 โดยเรามีการสร้างตัวแปร options แล้วกำหนด binary_location ส่งไปด้วย เพื่อบอกว่า browser ที่เราต้องการเปิดคือโปรแกรม VScode (ซึ่งจริงๆ ก็คือ Chromium นั่นเอง)
ส่วนที่ 2 : คือส่วนที่เราทำการ automate เหมือนautomate web ตามปกติเลย ใช้คำสั่งของ Selenium ต่างๆ ได้ตามปกติ เวลาเรา inspect ก็ใช้ Developer console เหมือนตอนดูversion ของ Chromium ด้านบน เหมือนเว็บไม่มีผิดเพี้ยน ในตัวอย่างนี้ใช้ Sleep เพื่อการ Demo แต่เวลาไปเขียนจริงอย่าใช้ Sleep กันน้าาาทุกคนมันไม่ดี
* สำหรับวิธีดู path ของ VScode ที่เราต้องไป ให้เราเปิดหน้าต่าง Finder > Applications > VScode > Show package content แล้วเข้าต่อไปเรื่อยๆ จนเจอ Folder ชื่อ MacOS จะเจอ File ชื่อ Electron ตัวนี้แหละคือ Chromium ซึ่ง ไฟล์อาจจะแตกต่างกันไปตามแต่ละแอพ อย่าง Slack จะชื่อไฟล์ว่า Slack ไม่ใช่ Electronอาจจะต้องลอง Search ดูเน้อ
เอาหล่ะ ลองมารันกัน วิธีรันก็รันตามปกติเหมือนรัน automate ทั่วไปเลย เช่น robot test.robot เราก็จะได้ผลตามภาพกันเล้ย (ต้องเปิดหน้าต่างที่รัน chromedriver ค้างไว้เน้อ)
เท่านี้เราก็สามารถทำ Automate test บน Electron application ได้ง่ายๆ เหมือนเราทำ Automate test บนเว็บแล้ว ถ้าเพื่อนๆ เจองานที่ต้องทำ Automate บน Desktop application ก็อย่าลืมเช็คดูล่ะ ว่ามันเป็น Electron รึเปล่า ถ้าใช่ บางทีด้วยสกิล automate web ที่เรามีอยู่แล้ว ก็อาจจะทำ Automate เจ้าแอพนั้นได้ง่ายๆ เลยนะ สำหรับวันนี้ ก็ขอจบบทความไว้เพียงเท่านี้ หวังว่าเพื่อนๆ จะได้ประโยชน์และสาระเพื่อเอาไปประยุกต์ใช้กับงานกันนะครับ สุดท้ายท้ายสุด ขอฝาก tie in โฆษณารับสมัครงานเหมือนเดิม Doppio Tech ยังรับ Automation engineer / QA analyst อีกหลายตำแหน่งสนใจก็สมัครกันมาได้นะค้าบ อ่อนแอก็แพ้ไป แต่มีใจก็ทักมาเด้อที่ careers@doppiotech.com หรือ Facebook page Doppio Tech จ้า วันนี้ลาไปก่อนสวัสดีค้าบ
