Visual test automation

ในการพัฒนา software นั้น เรื่อง Look and Feel เป็นสิ่งที่สำคัญมาก ๆ software ที่ทำงานได้ดียังไม่พอ ต้องดูดีสวยงามและใช้งานง่ายอีกด้วย คำถามที่น่าสนใจคือ จะทำการทดสอบในส่วนของการแสดงผลอย่างไรบ้าง

โดยปกติในการทำการทดสอบการแสดงผล จะใช้คนเป็นผู้ทดสอบ มานั่งดู มาใช้งาน แล้วพิจารณาและตัดสินว่า ถูกหรือไม่ ทำให้ต้องใช้เวลาและกำลังคนในการทดสอบค่อยข้างมาก เพราะว่าในส่วนของการแสดงผลนั้นมันยากมาก ๆ สำหรับการทดสอบ มีหลายสิ่งอย่างให้พิจารณา ยกตัวอย่างเช่น ในแต่ละ element แต่ละส่วนงานทำงานและแสดงผลได้อย่างถูกต้องแต่เมื่อนำมารวมกัน กลับทำงานไม่ถูกต้อง หรือ แสดงผลผิดพลาด การลดเวลาและต้นทุนในการทดสอบลงโดยใช้การทดสอบแบบอัตโนมัติ เป็นสิ่งจำเป็น และต้องมีเครื่องมือช่วย

ในบทความนี้ขอแนะนำ Appraise ซึ่ง Appraise นั้นได้นำแนวทางของ Specification by Example มาใช้ นั่นหมายความว่า ในแต่ละ test case ต้องมี concrete example ที่ชัดเจน นำ test case เหล่านี้ไปทดสอบแบบอัตโนมัติ ทำการทดสอบด้วย Google Chrome Headless ซึ่งจะทำการ snapshot ส่วนที่ต้องการเป็นรูปภาพและเปรียบเทียบกับผลที่คาดหวังหรือไม่ ถ้าผลออกมาไม่ตรงกับที่คาดหวัง Appraise จะแสดงผลที่แตกต่างออกมาให้เห็น จากนั้นจะให้คนมา approve ว่าผลที่แตกต่างถูกหรือไม่ต่อไป ถ้าทำการยอมรับความแตกต่างก็จะบันทึกผลใหม่ให้ทันที ซึ่งง่ายต่อการดูแลรักษา test case อย่างมาก

เริ่มต้นการใช้งาน Appraise

ทำการติดตั้ง Appraise ด้วย NPM

npm install appraise -g

จะทำการติดตั้ง Appraise เป็น global command line uitlity อย่างไรก็ตาม สามารถติตั้งเป็นแบบ NPM package dependency โดยใช้ NPM script เรียกใช้ commamd line ก็ได้เช่นกัน

สร้าง test page

เริ่มต้นสร้าง folder “examples” เป็นที่เก็บ test page  (default folder สำหรับเก็บ test page ของ Appraise คือ “examples”)  Appraise ใช้  Github-flavoured Markdown syntax  ในการประมวลผล test page

สร้าง file : hello-world.md ใน folder “examples” และเพิ่มข้อความดังนี้


This paragraph is just an intro, it will be ignored for testing
~~~yaml example="first" fixture="hello.js"
color: blue
~~~

สร้าง test fixture

test fixture ใช้สำหรับ Appraise สำหรับประมวลผล example ไปเป็น test result โดยสร้าง file : hello.js ใน folder “examples”และเพิ่ม code ดังนี้

ทำการ run ทดสอบ

ทดสอบโดยใช้คำสั่ง

appraise run

ซึ่งจะได้ผลดังนี้

Appraise บันทึกผลการทดสอบไว้ใน folder “results” ซึ่งได้ผลการทดสอบ file : result/hello-world.htm ดังนี้

จะเห็นได้ว่าผลการทดสอบ failed เนื่องจาก test case นี้ยังไม่ได้กำหนด expected result หรือผลที่คาดหวัง อย่างไรก็ตาม ถ้าพิจารณาผลการทำงานว่าใช้ได้ Appraise มีทางเลือกให้สามารถ capture ผลเพื่อใช้ในการทดสอบครั้งต่อไป โดยทำการ approve ผลการทำงานนี้ก่อนเพื่อทำการยอมรับผลนี้ ด้วยคำสั่ง

appraise approve --page "hello-world"

Appraise จะทำการบันทึกผลเป็นรูปภาพลงใน  folder “examples” และแก้ไข hello-world.md กำหนด expected result ดังนี้

จากนั้นมาเริ่มทดสอบอีกครั้งโดยใช้คำสั่ง

appraise run

ซึ่งจะได้ผลดังนี้

เข้าไปดูผลการทดสอบ file : result/hello-world.htm อีกครั้งดังนี้

หากทำการแก้ไข test fixture โดยการเพิ่มขนาดตัวอักษร จากนั้นมาเริ่มทดสอบอีกครั้งโดยใช้คำสั่ง

appraise run

ก็จะได้ผลดังนี้

ซึ่งแสดงให้เห็นว่า ผลการทดสอบ failed จากขนาดตัวอักษรที่เปลี่ยนไป ไม่เป็นไปตามที่ต้องการ

 

อ้างอิง
https://github.com/AppraiseQA/appraise

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


Leave a Reply

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