เพิ่มเครื่องมือที่มีประโยชน์นี้ลงในคลังแสงของคุณ
คุณเคยถามตัวเองว่าจะทดสอบส่วนหน้าของแอปพลิเคชันอย่างไร? ในบทความนี้ เราจะอธิบายรายละเอียดเกี่ยวกับการทดสอบด้วยภาพซึ่งตรงข้ามกับการทดสอบพฤติกรรม เป็นไปได้ไหมที่จะตรวจสอบภาพโดยอัตโนมัติ? นั่นไม่ต้องการมนุษย์เหรอ?
ใช่ เป็นไปได้และเป็นอัตโนมัติเต็มรูปแบบ! โดยจะตรวจจับการถดถอยของภาพทั้งหมดและให้ประโยชน์เพิ่มเติม เช่น การแสดงสำหรับสมาชิกในทีมใหม่
มาดูกันว่ามันจะจับการถดถอยแบบใด
ในทางคณิตศาสตร์สิ่งนี้ผิดแต่ก็แสดงได้ดี การทดสอบพฤติกรรมสามารถป้องกันข้อผิดพลาดประเภทนี้ได้ ตัวอย่างเช่น หากคุณใช้ JavaScript คุณสามารถเขียนการทดสอบแบบด้านล่างนี้ได้
ตอนนี้เรามาดูการถดถอยทางสายตากัน
ในกรณีนี้ เครื่องหมายเท่ากับหมุนได้ไม่ดี นี่คือการถดถอยทางสายตาที่อาจเกิดจากการดัดแปลงที่มีขอบเขตไม่ดี
เรามาดูวิธีการป้องกันสิ่งนั้นกัน
การทดสอบภาพรวม
การทดสอบด้วยภาพนำเทคนิคที่รู้จักกันดีมาใช้ซ้ำ ซึ่งก็คือการทดสอบสแน็ปช็อตหรือที่เรียกว่า Golden Master
เทคนิคนี้ประกอบด้วยขั้นตอนการสั่งซื้อหลายขั้นตอน :
- ภาพรวมสถานะปัจจุบันที่จะเป็นข้อมูลอ้างอิง
- ทำการเปลี่ยนแปลงรหัส
- ภาพรวมสถานะใหม่
- การเปรียบเทียบสถานะอ้างอิงกับสถานะใหม่
- ยอมรับการเปลี่ยนแปลงเฉพาะในกรณีที่ความแตกต่างเป็นไปตามที่คาดหวังเท่านั้น
การทดสอบสแนปชอตสามารถทำได้โดยใช้เทคนิคที่แตกต่างกัน ตัวอย่างเช่น นักพัฒนาเว็บสามารถ สแนปช็อต DOM เพื่อดูผลกระทบของโค้ด หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับหัวข้อนี้ ฉันขอแนะนำให้อ่าน เอกสาร Jest
การทดสอบภาพแสดงโค้ดและจับภาพหน้าจอ เป็นกรณีเฉพาะของการทดสอบสแนปช็อตซึ่งจัดเก็บสถานะเป็นรูปภาพ
มาดูวิธีจับภาพหน้าจอของ UI โดยอัตโนมัติเพื่อระบุการถดถอยของภาพในอนาคต
กำลังเรนเดอร์
ไม่ว่าเทคโนโลยีส่วนหน้าจะเป็นอย่างไร ก็มีเอ็นจิ้นที่รับผิดชอบในการเรนเดอร์เสมอ มันจะรับโค้ดเป็นอินพุตและสร้างภาพเป็นเอาต์พุต
สำหรับการพัฒนาเว็บ กลไกคือเบราว์เซอร์ มันตีความ HTML, CSS และ JS เพื่อวาดภาพ
หากคุณใช้ Flutter การเรนเดอร์จะซับซ้อนมากขึ้นเนื่องจากคุณกำหนดเป้าหมายแพลตฟอร์มที่แตกต่างกัน ด้วยเหตุนี้ การเรนเดอร์จึงถูกแบ่งออกเป็นสองส่วนหลัก เอ็นจิ้นทั่วไปเขียนด้วยภาษา C/C++ และส่วนที่ฝังประกอบด้วยเนื้อหาเฉพาะแพลตฟอร์ม สำหรับข้อมูลเพิ่มเติม คุณสามารถอ่าน "เอกสารประกอบ" นี้
แนวคิดเบื้องหลังการทดสอบภาพคือการเรียกกลไกการเรนเดอร์ผ่าน API และจัดเก็บภาพเป็นรูปภาพ
เทคโนโลยีส่วนหน้าบางอย่างมีเครื่องมือที่ API เรียกใช้สำหรับเรา ตัวอย่างเช่น Flutter มีคุณสมบัติในตัวที่ช่วยให้เราสามารถเขียน Visual Test (หรือที่เรียกว่า Golden Test) เมื่อดำเนินการทดสอบ Flutter จะเรียกตัวเองว่าเอ็นจิ้นการเรนเดอร์
สำหรับการพัฒนาเว็บ ไม่มีฟีเจอร์ในตัวเหมือนใน Flutter จริงๆ แล้ว มีเบราว์เซอร์หลายตัว จึงมีเทคนิคการเรนเดอร์ที่หลากหลาย วิธีที่ง่ายที่สุดคือใช้ "ซีลีเนียม" เป็นสะพานเชื่อมกับเบราว์เซอร์ของคุณ โดยจะมี API มาตรฐานสำหรับการจับภาพหน้าจอของหน้าที่แสดงผล
ตอนนี้คุณรู้วิธีสแนปช็อตโค้ดที่แสดงผลลงในรูปภาพโดยอัตโนมัติแล้ว มาดูวิธีเปรียบเทียบรูปภาพสองรูปเพื่อระบุความแตกต่างกัน
การเปรียบเทียบภาพ
ข้อมูลอ้างอิงและรูปภาพใหม่มีขนาดเท่ากันเนื่องจากเราสร้างมันขึ้นมาด้วยเครื่องมือเดียวกัน ด้วยเหตุนี้เราจึงใช้แนวทางง่ายๆ ได้ รูปภาพสามารถเห็นได้เป็นอาร์เรย์ไบต์ 2 มิติ เราวนซ้ำแต่ละบิตและเปรียบเทียบทีละรายการ เมื่อไบต์ต่างกัน เราจะทำเครื่องหมายตำแหน่งปัจจุบัน
ตอนนี้คุณรู้แนวคิดหลักในการทดสอบภาพแล้ว: การถ่ายภาพสแนปช็อต การเรนเดอร์ และการเปรียบเทียบรูปภาพ เรามาพูดถึงประเด็นหลักกันดีกว่า
ทำให้เกิดความไม่สอดคล้องกัน
รหัสเดียวกันสามารถสร้างภาพที่แตกต่างกันได้ ตัวอย่างเช่น เว็บแอปพลิเคชันจะมีลักษณะแตกต่างกันไปขึ้นอยู่กับเบราว์เซอร์ แม้ว่าคุณจะใช้เครื่องยนต์เดียวกัน แต่คุณก็อาจมีผลลัพธ์ที่แตกต่างออกไป สาเหตุหลายประการสามารถอธิบายเรื่องนี้ได้ คุณสามารถใช้กลไกเดียวกันแต่ไม่ใช่เวอร์ชันเดียวกัน มีนโยบายที่ติดตั้งไว้ล่วงหน้า หรือใช้ระบบปฏิบัติการอื่น (เพิ่มเติมเกี่ยวกับ การเรนเดอร์แบบอักษร)
ความไม่สอดคล้องกันเล็กๆ น้อยๆ เหล่านี้เป็นสิ่งที่น่ากลัวสำหรับการทำงานเป็นทีม การทดสอบสามารถผ่านสำหรับสมาชิกในทีมคนหนึ่ง แต่ล้มเหลวสำหรับอีกคนหนึ่ง ในกรณีนั้น คุณไม่สามารถเชื่อถือการทดสอบของคุณได้ เนื่องจากไม่มีประโยชน์
วิธีแก้ไขคือยอมรับความแตกต่างตามเกณฑ์ ตัวอย่างเช่น คุณสามารถกำหนดเกณฑ์ที่ยอมรับความแตกต่างจากข้อมูลอ้างอิงเพียง 1% เท่านั้น การค้นหาเกณฑ์ที่เหมาะสมนั้นเป็นการทดลอง ยิ่งเกณฑ์สูงเท่าไร คุณจะตรวจจับการถดถอยได้น้อยลง และยิ่งมีค่าน้อย การทดสอบก็จะล้มเหลวมากขึ้นเนื่องจากความไม่สอดคล้องกัน นี่คือเหตุผลที่ฉันแนะนำให้มองว่าโซลูชันนี้เป็นทางเลือกสุดท้าย
เพื่อแก้ไขปัญหานี้ ทีม Flutter ได้ค้นพบวิธีแก้ปัญหาที่น่าสนใจ คุณสามารถเรนเดอร์โค้ด Flutter ของคุณด้วยสี่เหลี่ยมสีแทนบล็อคข้อความได้ ซึ่งช่วยให้มีการเรนเดอร์เหมือนกันในทุกแพลตฟอร์ม เคล็ดลับนี้เป็นไปได้เนื่องจากทุกแพลตฟอร์มใช้กลไกการเรนเดอร์เดียวกัน
หากคุณกำลังฝึกการพัฒนาเว็บไซต์ วิธีแก้ปัญหาง่ายๆ คือการใช้ SaaS เช่น Chromatic ที่จะจับภาพหน้าจอบนแพลตฟอร์มเดียวกัน
สุดท้าย คุณสามารถใช้ประโยชน์จากการจำลองเสมือนได้ด้วยตัวเองโดยใช้นักเทียบท่า คุณจะต้องใช้อิมเมจนักเทียบท่าที่มีเอ็นจิ้นที่เรนเดอร์แอปพลิเคชัน
ตอนนี้คุณรู้วิธีแก้ปัญหาความไม่สอดคล้องกันของการเรนเดอร์แล้ว เรามาพูดถึงประโยชน์เพิ่มเติมของการทดสอบด้วยภาพกันดีกว่า
สิทธิประโยชน์เพิ่มเติม
หากคุณฝึกการทบทวนโค้ด ในฐานะผู้ตรวจสอบ คุณจะสามารถเห็นภาพที่สร้างจากโค้ดได้ นอกจากนี้ แพลตฟอร์ม Git ส่วนใหญ่ยังมีเครื่องมือในการตรวจสอบความแตกต่างระหว่างรูปภาพ ดังนั้นคุณจะสามารถเพิ่มความคิดเห็นเกี่ยวกับรูปภาพได้เมื่อคุณพบการเปลี่ยนแปลงที่น่าสงสัย
นอกจากนี้คุณยังจะมีการจัดแสดงใบสมัครของคุณ เป็นเรื่องที่น่าสนใจสำหรับการเริ่มต้นสมาชิกในทีมใหม่
สุดท้ายแต่ไม่ท้ายสุด คุณจะสามารถเห็นการเปลี่ยนแปลงทางภาพเมื่อเวลาผ่านไป นี่เป็นสิ่งที่ดีเมื่อคุณกำลังค้นหาสาเหตุหรือเวลาที่มีการเปลี่ยนแปลงบางอย่าง
ข้อจำกัด
ก่อนหน้านี้เราได้พูดคุยเกี่ยวกับปัญหาการแสดงผลแม้ว่าจะมีข้อจำกัดอื่นๆ ก็ตาม
คุณไม่สามารถทดสอบภาพเคลื่อนไหวด้วยการทดสอบภาพได้ เครื่องมือที่มีอยู่ทั้งหมดที่กล่าวถึงจะหยุดภาพเคลื่อนไหวของคุณก่อนที่จะจับภาพหน้าจอ ดังนั้น หากคุณทำการเปลี่ยนแปลงภาพเคลื่อนไหว คุณจะไม่ได้รับการสนับสนุน
การทดสอบด้วยภาพจะช้าเมื่อเทียบกับการทดสอบหน่วยแบบคลาสสิก โดยจะอยู่ในลำดับวินาที ในขณะที่การทดสอบด้วยการมองเห็นจะอยู่ในลำดับมิลลิวินาที ผลที่ตามมาคือ วงจรตอบรับของคุณจะช้าลง
บทสรุป
อย่าเข้าใจฉันผิด การทดสอบด้วยภาพไม่ใช่เรื่องยาก ไม่ได้แทนที่แนวทางการทดสอบอื่นๆ เช่น การทดสอบพฤติกรรม คุณสามารถเห็นมันเป็นเครื่องมืออื่นในกล่องเครื่องมือของคุณ นอกจากนี้ยังมีข้อจำกัดบางประการที่คุณต้องระวัง เช่น การแสดงผลที่ไม่สอดคล้องกัน
คุณมั่นใจและต้องการลองทดสอบด้วยภาพในโครงการของคุณหรือไม่? ฉันจะเผยแพร่คู่มือที่ใช้งานได้จริงสำหรับนักพัฒนาเว็บเร็วๆ นี้ คุณสามารถติดตามฉันสำหรับบทความประเภทนี้เพิ่มเติม
สุดท้ายนี้ หากคุณฝึก TDD ด้วยการทดสอบพฤติกรรมของคุณ คุณก็สามารถทำแบบทดสอบที่เทียบเท่ากับการมองเห็นของคุณได้ เรียกว่า Visual Testing Driven Development (VTDD) หากต้องการข้อมูลเพิ่มเติม โปรดดูที่ "บทความเกี่ยวกับสี"
