รู้จัก Cypress: Web Test Framework ที่จะทำให้คุณลืม Selenium ไปได้เลย
สวัสดีครับ หลายๆ คนในที่นี้ที่เป็น Dev/QA ที่ทำงานสาย Web Development ก็น่าจะเคยเขียน Web UI Test Automation ให้กับโปรเจ็คของตัวเองด้วย Selenium Framework กันใช่มั้ยครับ ผมก็เป็นหนึ่งในนั้น ซึ่งจากประสบการณ์ที่ผมใช้ Selenium มาหลายปี ผมได้พบปัญหาหลายๆ อย่างที่อยากจะมาแชร์เล่าสู่กันฟังครับ
- Test ใช้ระยะเวลาในการรันนานถึงนานมาก (Very Long Test Execution Time) ถึงแม้ว่าจะทำ Parallel Test แล้วก็ตาม
- Flaky Test คือ Test ไม่ Reliable การรันเทสเคสข้อเดียวกันบางครั้งรันผ่าน บางครั้งก็พัง ซึ่งเรื่องนี้เป็นปัญหาระดับชาติที่แก้ค่อนข้างยากของวงการ Test Automation เลยทีเดียว (ถึงขั้น Google ยังเคย Mention ถึงปัญหานี้ในองค์กรของตัวเองเลยครับ)
- ต้องมีการเขียน Wait Mechanism มากมาย (Implicit/Explicit Wait) ซึ่งพอเขียนเสร็จแล้วก็ยังไม่แน่ใจกับตัวเองว่าเขียน Wait ครบหรือยัง เซ็ต Timeout ไว้นานพอมั้ย?
- ต้องคอย Update WebDriver ของ Browser ต่างๆ ให้ทันตามเวอร์ชันของ Browser ที่ Upgrade ไป ซึ่ง Browser ยุคนี้ก็ Release กันถี่เหลือเกิน
- เวลารันเทสแล้ว Fail เราอยาก Debug โค้ดเราเพื่อหา Root Cause ของ Failure ทำได้ค่อนข้างยาก ถึงขั้นต้องเขียนโค้ดเพื่อให้มีการ Capture Screenshot หรือ Video Recorded เอาไว้ดูย้อนหลังเลยทีเดียว
- Programming Language ที่หลากหลายเกินไป บางคนอาจจะมองเป็นข้อดี แต่ผมมองว่ามันอาจจะเป็นปัญหาตามมาภายหลังได้ ยกตัวอย่างเช่น Frontend Dev ถนัดเขียน Javascript แต่ QA ถนัดเขียน Python/Robot Framework มากกว่า ทำให้เกิด Language Barrier ขึ้นตามมา กล่าวคือ Dev/QA ไม่สามารถช่วยกันเขียน Automated Test ได้ ต่างคนต่างทำหน้าที่ตัวเองแยกกันไป
และอีกมากมาย ซึ่งจริงๆ แล้วไม่ได้หมายความว่า Selenium มันไม่ดีหรอกครับ แต่ด้วยความที่ Web Technology ที่มันพัฒนาไปไกล Frontend Framework ใหม่ๆ เองก็เปลี่ยนรูปแบบการเขียนโค้ดไปมาก มีลูกเล่นใหม่ๆ ใน Browser เข้ามามากมาย ทำให้ Test Automation Framework ก็ต้องปรับตัวตามเช่นกัน
ย้อนกลับไปดู Selenium WebDriver กันก่อน
Selenium นั้นเกิดมาตั้งแต่ปี 2004 ในยุคที่เว็บไซต์ส่วนใหญ่ยังเรียกว่าเป็น Web 1.0 อยู่ ซึ่งคำว่า Web1.0 ก็คือ Web ที่ Provide Static Content ให้กับ User เพื่ออ่าน โดยที่ไม่ได้มี Interaction กับ User มากนัก เราสามารถ Expect สิ่งที่ Web จะแสดงผลออกมาได้ไม่ยาก ไม่ค่อยมีความซับซ้อน ซึ่ง Selenium ก็ทำงานได้ดีและเหมาะมากๆ สำหรับการทำ Test ในช่วงนั้นครับ
เวลาผ่านไป มีการพัฒนา Web จนถึงจุดที่เรียกว่าเป็น Web 2.0 กล่าวคือเป็นเว็บไซต์ที่มีลักษณะเป็น Dynamic/User Generated Content มากขึ้น รวมถึงการมาของ Social Network ต่างๆ เช่น Facebook, Twitter ทำให้เปลี่ยน Web Technology ไปตลอดกาลครับ การทำ Test ก็มีความยุ่งยากมากขึ้น และต้องเขียนโค้ดให้ซับซ้อนมากขึ้นเพื่อรองรับกับ Content ของเว็บที่สามารถเปลี่ยนแปลงไปได้เรื่อยๆ ซึ่งหลายๆ คนน่าจะเคยเจอปัญหาว่าเขียน Expected Result ค่อนข้างยาก เพราะมี Factor ที่ Control ไม่ได้หลายอย่าง
และที่สำคัญตัว Architecture ของ Selenium เองก็อาจจะมีส่วนทำให้การเขียน Test ไม่มีประสิทธิภาพเท่าที่ควรครับ
ถ้าเราดูจาก Framework Architechture แล้ว การ Simulate User Action หนึ่งครั้งเช่น การ Click ปุ่ม เบื้องหลังการทำงานนั้น Client (ตัว Selenium-Bindings ภาษาต่างๆ) จะมีการ Invoke HTTP Request แบบ JSON Wire Protocol ไปยัง WebDriver และหลังจากนั้น WebDriver ค่อยไปสั่ง Click บน Browser อีกที จะเห็นว่าเกิด Overhead ค่อนข้างมากต่อการทำงานหนึ่งครั้ง (และเป็นการสั่งแบบ Remote Command ด้วย) ซึ่งเป็นผลทำให้เทสทำงานได้ช้าลงเรื่อยๆ เมื่อปริมาณ Test Case มีปริมาณมากขึ้นเนื่องจากเกิด Method Invocation + Network Traffic ปริมาณมากนั่นเอง
มาดู(ของดี) Cypress กันดีกว่า
Cypress เป็น Test Framework ที่ถูก Design ขึ้นมาในปี 2014 (10 ปีให้หลังจาก Selenium เริ่มใช้งาน) เพื่อแก้ปัญหาที่พูดถึงไปก่อนหน้านี้ครับ โดยตัว Cypress จะถูกรันขึ้นมาอยู่ใน Run Loop Process เดียวกับ Web Application ของเรา ซึ่งเบื้องหลังการทำงานของมันคือ NodeJS Server ที่ช่วยคอยจัดการการทำงานของ Test Code กับ Application Code ให้ทำงานควบคู่กันไปอย่างราบรื่น รวมถึงจัดการงานต่างๆ ที่ตัว Test ต้องการใช้แต่ Scope อยู่ภายนอก Browser ให้อีกด้วย
Features เด่นของ Cypress
- ทำ Test ได้ทุก Level: ตั้งแต่ Unit/Integration จนถึง End to End Test (ตาม Concept Test Pyramid) และสามารถทำ Test ได้ทั้งแบบ UI และ API Test
- เขียนด้วย Javascript/TypeScript: ซึ่งเป็นภาษาที่ Developers ใช้เขียนโค้ด App อยู่แล้ว ทำให้ Developers มีความคุ้นเคยในตัว Syntax สามารถช่วย QA เขียน Test ได้ด้วย ทำให้ Dev/QA สามารถทำงานได้อย่างใกล้ชิดกันได้มากยิ่งขึ้น
- Native Access: เราสามารถ Access Objects, Window, DOM Elements, Local Storage, Function ต่างๆ ของ Web Application จาก Test Code ของเราได้ทั้งหมด! อันนี้ส่วนตัวชอบมาก ตามหามานาน
- Support การทำ Mock/Spies/Stub: สามารถสร้าง Mock Objects ต่างๆ ใน App ของเราเช่น Network Requests, Local Storage, 3rd Party Application ต่างๆ ไม่ให้มันมาทำงานกวน App ของเราในขณะที่ Test เรากำลังทำงาน ซึ่งตัว Cypress เอง Provide สิ่งต่างๆ เหล่านี้ให้หมดโดยไม่ต้องพึ่งพา Tool อื่นๆเลย ซึ่งก็จะทำให้เราสามารถ Control และเขียน Expected Behavior ของ Test ได้แม่นยำขึ้น Flaky Test น้อยลง รวมถึงทำให้สามารถสร้าง Test Scenario ที่เป็น Edged Cases ต่างๆ เช่น Server-Side Unavailable หรือ Server-Side Error (HTTP 500) ได้อีกด้วย
- Debugging ทำได้ง่าย: Cypress ทำการ Snapshot ทุกๆ Step การรัน Test ให้เราอัตโนมัติ มีการทำ Screenshot, Video Recorded ให้เราดูย้อนหลังได้เลย และเราสามารถใช้ Dev Tools ของ Browser ในการ Inspect ดู Error ต่างๆ ของ Application เราที่เกิดขึ้นในขณะที่รัน Test ได้อีกด้วย
- Automatic Wait: เราไม่ต้องเขียนโค้ดเพื่อ Wait หรือ Sleep ใดๆ อีกต่อไป Cypress ทำให้อัตโนมัติครับ ดีงามมากๆ
- Realtime Reloads: Cypress จะมีการ Monitor Test Code ของเราตลอดเวลา เมื่อใดที่ Test Code ของเรามีการเปลี่ยนแปลง ตัว Cypress จะทำการ Reload Test เราขึ้นมารันให้อัตโนมัติ (อันนี้เจ๋งดี)
Cypress เป็น Open Source Project สามารถใช้งานได้ฟรี (MIT License) ยกเว้นบาง Features เช่น Dashboard และ Parallel Test ซึ่งต้องจ่ายเงินซื้อเพิ่มครับ
Cypress รองรับการรันเทสบน Browsers หลากหลายยี่ห้อเลยนะครับ ทั้ง Electron.js, Google Chrome, Mozilla Firefox และรวมถึง Browsers ที่เป็น Chromium Based Family เช่น Microsoft Edge, Brave ด้วยครับ เรียกได้ว่าใช้เทสได้แทบจะทุก Browsers ยอดนิยมเลยนะครับ
โดยรวมแล้วผมคิดว่า Cypress เป็น Framework ที่เหมาะกับการเขียน Test สำหรับ Web Application ในยุค Web 2.0 นี้มากๆ ครับ สามารถหาข้อมูลรวมถึงตัวอย่างการเขียน Test เพิ่มเติมได้จาก https://www.cypress.io ครับ
นอกจากนี้ผมได้สร้าง Cypress.io Thailand Community ขึ้นมาเพื่อแบ่งปันไอเดียรวมถึงการเขียน Web Test ด้วย Cypress ต่างๆ ใครสนใจก็ขอเชิญเข้าร่วมกลุ่มกันได้เลยคร้าบ :)
สุดท้ายไว้ถ้ามีโอกาสผมจะมาพูดถึง How To รวมถึง Best Practices ในการเขียน Test ด้วย Cypress ในบทความต่อๆ ไป สวัสดีครับ
