ในการพัฒนา software นั้น เรื่อง Look and Feel เป็นสิ่งที่สำคัญมาก ๆ
software มีเพียงความสามารถที่ดียังไม่พอ ต้องดูดี สวยงามและใช้งานง่ายอีกด้วย
คำถามที่น่าสนใจคือ
เราทำการทดสอบกันอย่างไร ?
แต่อาจจะกว้างไป เอาแคบลงมาคือ
เราทำการทดสอบในส่วนของการแสดงผลอย่างไรบ้าง ?
ในเชิงของการทดสอบจะเรียกว่า Visual Testing
ปกติเราน่าจะทดสอบด้วย คน
เอาคนมาทดสอบ มานั่งดู มาใช้งาน
แล้วพิจารณาและตัดสินว่า ถูกหรือไม่
ทำให้ใช้เวลาการทดสอบเยอะ หรือ ช้านั่นเอง
เพราะว่าในส่วนของการแสเงผลนั้น
มันยากมาก ๆ สำหรับการทดสอบ
มีหลายสิ่งอย่างให้พิจารณา มันซับซ้อนมาก ๆ
ยกตัวอย่างเช่น
ในแต่ละ element แต่ละส่วนงานทำงานและแสดงผลได้อย่างถูกต้อง
แต่เมื่อนำมารวมกัน กลับทำงานไม่ถูกต้อง หรือ แสดงผลผิดพลาด
ดังนั้นเราควรลดเวลาการทดสอบลงไหม ?
เพิ่มคนทดสอบสิ !!
หาเครื่องมือมาช่วยสิ ?
ทดสอบแบบอัตโนมัติสิ ?
ไม่ว่าจะเป็นทางไหน เราควรทำนะ
ถ้าต้องการทดสอบในระดับนี้
จำเป็นต้องแยกการ build และ deploy ออกมาจากระบบงานเดิม
เพราะว่าถ้ายังเอาไปผูกกับ End-to-End test อยู่ก็ไม่รอดแน่ ๆ
เพราะว่าทำงานได้ช้ามาก ๆ และพังบ่อยสุด ๆ
ดังนั้นต้องคิดใหม่ทำใหม่
ในบทความนี้ขอแนะนำ Appraise (Painless visual test automation)
ทีมผู้สร้างก็ไม่ใช่ใครที่ไหน คือ Gojko Adzic
เขียนหนังสือที่น่าสนใจเช่น
Specification by Example,
Bridging the communication gab และ Fifty Quick Idea to Improve your Tests
ทำการสร้าง Appraise ขึ้นมาจากความเจ็บปวดล้วน ๆ
ซึ่งเจอในการพัฒนาที่ MindMup
เป็น consumer application
ส่วนใหญ่เป็นเด็กนักเรียนทั้งนั้น
ดังนั้นในส่วนของ user interface (UI) จึงสำคัญมาก ๆ
โดยขนาดของทีมเล็ก จำนวนคนน้อย
คนดูแลและsupport ก็น้อยไปอีก
แต่ตรงข้ามกับ code ที่มีขนาดใหญ่ขึ้นในทุก ๆ วัน
ทำให้การพัฒนา feature ใหม่ยากและใช้เวลาสูงขึ้นมาก ๆ
ถึงแม้จะมีชุดการทดสอบในส่วนต่าง ๆ
ทั้ง unit, integration และ UI หรือ Visual Testing จำนวนมาก
แต่ก็ยากต่อการดูแลรักษามาก
โดยเฉพาะ Visual Testing ซึ่งใช้การตรวจสอบ DOM element เป็นหลัก
ยกตัวอย่างเช่น
เมื่อทำการแก้ไขขนาดของตัวอักษรแล้ว
ส่งผลให้ชุดการทดสอบเป็นร้อย ๆ ทำงานผิดพลาด
นั่นหมายความว่า
แทนที่จะใช้เวลาส่วนใหญ่ในการพัฒนา feature
กลับต้องมาแก้ไข test case กัน
ซึ่งมันไม่ช่วยก่อให้เกิดประโยชน์เลย
ดังนั้นจึงเกิดแนวคิดว่า
จะทำอย่างไรดี เพื่อลดเวลาในการทดสอบลงไป
นั่นคือเพิ่มความเร็วของขั้นตอนการพัฒนาและทดสอบนั่นเอง
และลดจำนวนคนทดสอบหรือมาแทนที่ไปเลย
แถมต้องทำงานแบบอัตโนมัติด้วยนะ
นี่คือที่มาของเครื่องมือตัวนี้
และสุดท้ายก็ปล่อยเป็น opensource ออกมา
ตอนนี้อยู่ในสถานะ alpha นะ !!
Appraise นั้นได้นำแนวทางของ Specification by Example มาใช้
นั่นหมายความว่า
ในแต่ละ test case ต้องมี concrete example ที่ชัดเจน
นำ test case เหล่านี้ไปทดสอบแบบอัตโนมัติ
ทำการทดสอบด้วย Google Chrome Headless
ซึ่งจะทำการ snapshot ส่วนที่ต้องการเป็นรูปภาพและเปรียบเทียบกับผลที่คาดหวังหรือไม่
ถ้าผลออกมาไม่ตรงกับที่คาดหวังแล้ว
Appraise จะแสดงผลที่แตกต่างออกมาให้เห็น
จากนั้นจะให้คนมา approve ว่าผลที่แตกต่างถูกหรือไม่ต่อไป
ถ้าทำการยอมรับความแตกต่างก็จะบันทึกผลใหม่ให้ทันที
ซึ่งง่ายต่อการดูแลรักษา test case อย่างมาก
ทำให้เครื่องมือตัวนี้ ไม่ได้ใช้แค่ QA/Tester เท่านั้น
แต่ยังรวมเป็นถึงทีมทั้งหมดหรือ Cross-functional team นั่นเอง
ทำให้แต่ละคนแต่ละทีม พูดคุยกันได้ง่ายขึ้น เห็นภาพของเป้าหมายตรงกัน
ที่สำคัญช่วยให้การ review มีประสิทธิภาพยิ่งขึ้น
มาลองใช้งานกันหน่อย
ทำการติดตั้งด้วยคำสั่ง
$npm install appraise -g
ตัวอย่างง่าย ๆ เช่นต้องการแสดงข้อความเป็นสีเขียว
มาลองเขียน test case กัน
ซึ่งจะอยู่ใน directory ขื่อว่า examples ดังนี้
จากนั้นทำการสร้างไฟล์ hello.js สำหรับทดสอบจริง ๆ
ทำการ run ครั้งแรก จะเกิด error ดังนี้
และจะสร้างผลการทดสอบใน directory results ขึ้นมาดังนี้
จะเห็นได้ว่า test case นี้ยังไม่ได้กำหนด expected result หรือผลที่คาดหวัง
ดังนั้น เราต้องทำการ approve ผลการทำงานนี้ก่อน
เพื่อทำการยอมรับผลนี้ ด้วยคำสั่ง
$appraise approve --page "hello"
ผลที่ได้คือ
- ทำการบันทึกหน้าจอเป็นรูปภาพให้
- ทำการแก้ไขไฟล์ hello.md ด้วยการเพิ่มผลที่คาดหวังของ test case ลงไป
จากนั้นทำการทดสอบอีกครั้ง ก็จะผ่าน ดังนี้
ลองไปดูผลลัพธ์อีก
เท่านี้ก็สามารถเริ่มต้นทดสอบได้แล้ว
เพียงแค่เปลี่ยนไปเรียกระบบงานจริง ๆ เท่านั้น
หรือถ้ามีการเปลี่ยนแปลง เช่นขยายขนาดของตัวอักษร
ผลการทำสอบจะไม่ผ่าน และแสดงส่วนที่แตกต่างดังรูป
ซึ่งง่ายมากและสะดวกมาก ๆ
ลองใช้งานกันดูนะ
สุดท้ายแล้ว
เครื่องมือต่าง ๆ มันเป็นตัวช่วยให้เราทำงานร่วมกัน พูดคุยกันได้อย่างมีประสิทธิภาพเท่านั้น
วันนี้เราพูดคุยและตกลงร่วมกันหรือยัง ?
ขอให้สนุกกับการ coding
Reference Website
https://github.com/AppraiseQA/appraise
https://www.infoq.com/news/2018/05/automated-visual-testing
