แนะนำ Appraise สำหรับ Visual Testing แบบอัตโนมัติ

ในการพัฒนา 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 มีประสิทธิภาพยิ่งขึ้น

มาลองใช้งานกันหน่อย

ทำการติดตั้งด้วยคำสั่ง [code] $npm install appraise -g [/code] ตัวอย่างง่าย ๆ เช่นต้องการแสดงข้อความเป็นสีเขียว มาลองเขียน test case กัน ซึ่งจะอยู่ใน directory ขื่อว่า examples ดังนี้ [gist id="d38dd20b4935aa735bdef1573dd1beb7" file="hello.md"] จากนั้นทำการสร้างไฟล์ hello.js สำหรับทดสอบจริง ๆ [gist id="d38dd20b4935aa735bdef1573dd1beb7" file="hello.js"] ทำการ run ครั้งแรก จะเกิด error ดังนี้ [gist id="d38dd20b4935aa735bdef1573dd1beb7" file="1.txt"] และจะสร้างผลการทดสอบใน directory results ขึ้นมาดังนี้ จะเห็นได้ว่า test case นี้ยังไม่ได้กำหนด expected result หรือผลที่คาดหวัง ดังนั้น เราต้องทำการ approve ผลการทำงานนี้ก่อน เพื่อทำการยอมรับผลนี้ ด้วยคำสั่ง [code] $appraise approve --page "hello" [/code] ผลที่ได้คือ

• ทำการบันทึกหน้าจอเป็นรูปภาพให้
• ทำการแก้ไขไฟล์ hello.md ด้วยการเพิ่มผลที่คาดหวังของ test case ลงไป

[gist id="d38dd20b4935aa735bdef1573dd1beb7" file="hello_update.md"] จากนั้นทำการทดสอบอีกครั้ง ก็จะผ่าน ดังนี้ [gist id="d38dd20b4935aa735bdef1573dd1beb7" file="2.txt"] ลองไปดูผลลัพธ์อีก เท่านี้ก็สามารถเริ่มต้นทดสอบได้แล้ว เพียงแค่เปลี่ยนไปเรียกระบบงานจริง ๆ เท่านั้น หรือถ้ามีการเปลี่ยนแปลง เช่นขยายขนาดของตัวอักษร ผลการทำสอบจะไม่ผ่าน และแสดงส่วนที่แตกต่างดังรูป ซึ่งง่ายมากและสะดวกมาก ๆ ลองใช้งานกันดูนะ

สุดท้ายแล้ว

เครื่องมือต่าง ๆ มันเป็นตัวช่วยให้เราทำงานร่วมกัน พูดคุยกันได้อย่างมีประสิทธิภาพเท่านั้น วันนี้เราพูดคุยและตกลงร่วมกันหรือยัง ? ขอให้สนุกกับการ coding Reference Website https://github.com/AppraiseQA/appraise https://www.infoq.com/news/2018/05/automated-visual-testing