แนวคิดการทดสอบการถดถอยทางภาพ

การทดสอบการถดถอยทางภาพ (VRT) จะตรวจจับการเปลี่ยนแปลงทางภาพที่ไม่ได้ตั้งใจระหว่างรุ่นของโค้ดโดยเปรียบเทียบภาพหน้าจอที่แสดงผลทีละพิกเซล วิธีนี้ตรวจจับการถดถอยของ CSS เช่น การเลื่อนตำแหน่งของเลย์เอาต์ การเปลี่ยนสี และระยะห่างที่เสียหาย ซึ่งการทดสอบหน่วยตรวจไม่พบเลย

VRT จะถ่ายภาพหน้าจอค่าพื้นฐานของคอมโพเนนต์หรือหน้า จากนั้นถ่ายภาพหน้าจอใหม่หลังการเปลี่ยนแปลงโค้ดแล้วนำมาเปรียบเทียบ ความแตกต่างจะถูกเน้นในภาพเปรียบต่าง นักพัฒนาจะตรวจสอบความแตกต่าง แล้วอนุมัติการเปลี่ยนแปลงที่ตั้งใจไว้หรือแก้ไขการถดถอยที่ไม่ได้ตั้งใจ

การเปรียบเทียบความแตกต่างระดับพิกเซลจะเปรียบเทียบภาพทีละพิกเซล จึงไวต่อความแตกต่างแต่มีแนวโน้มแจ้งผลบวกลวงจากการลบรอยหยักและการแสดงผลระดับพิกเซลย่อย เครื่องมือเปรียบต่างเชิงโครงสร้าง เช่น Applitools AI จะเปรียบเทียบเจตนาทางภาพแทนพิกเซลที่ตรงกันทุกประการ จึงลดผลบวกลวงจากความแตกต่างในการแสดงผลแบบอักษร

ภาพหน้าจอที่ได้รับการอนุมัติจะกลายเป็นค่าพื้นฐานใหม่ จัดเก็บค่าพื้นฐานไว้ในระบบควบคุมเวอร์ชัน (Git LFS สำหรับรูปภาพขนาดใหญ่) หรือบริการคลาวด์เฉพาะ แต่ละ PR จะแสดงความแตกต่างเมื่อเทียบกับค่าพื้นฐาน และผู้ดูแลจะอนุมัติหรือปฏิเสธการเปลี่ยนแปลงทางภาพในขั้นตอนการตรวจสอบ

การทดสอบ VRT ระดับคอมโพเนนต์จะทดสอบคอมโพเนนต์ส่วนติดต่อผู้ใช้แต่ละรายการแบบแยกเดี่ยว (ผ่านสตอรีบุ๊ก) ส่วนการทดสอบ VRT ระดับหน้าจะทดสอบหน้าเต็มในเบราว์เซอร์จริง การทดสอบคอมโพเนนต์ทำงานเร็วกว่าและเจาะจงกว่า ส่วนการทดสอบหน้าจะตรวจพบปัญหาเลย์เอาต์ระดับการผสานรวมระหว่างคอมโพเนนต์

ทดสอบสถานะทางภาพทั้งหมด ได้แก่ ค่าเริ่มต้น การวางเมาส์เหนือ การโฟกัส ใช้งานอยู่ ปิดใช้งาน กำลังโหลด ข้อผิดพลาด ว่างเปล่า และเต็ม สถานะการวางเมาส์เหนือต้องจำลองด้วย JavaScript (page.hover() ในเพลย์ไรต์) หากครอบคลุมสถานะไม่ครบ จะเกิดจุดบอดในการตรวจจับการถดถอยของสถานะเชิงโต้ตอบ

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

การแสดงผลแบบอักษรจะแตกต่างกันเล็กน้อยตามการผสมผสานของ OS เบราว์เซอร์ และ GPU ใช้สภาพแวดล้อมการผสานรวมอย่างต่อเนื่องที่เหมือนกัน (ด็อกเกอร์และโครมรุ่นที่ระบุ) เพื่อกำจัดผลบวกลวงที่เกิดจากสภาพแวดล้อม บริการ VRT บนคลาวด์จะจัดการให้สภาพแวดล้อมเหมือนกันโดยอัตโนมัติ

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

เรียกใช้ VRT ในการผสานรวมอย่างต่อเนื่องสำหรับทุก PR ทำให้กระบวนการสร้างล้มเหลวเมื่อพบความแตกต่างทางภาพที่ยังไม่ได้รับอนุมัติ ส่งต่อความแตกต่างทางภาพให้ผู้ตรวจสอบงานออกแบบ ไม่ใช่เฉพาะทีมวิศวกรรม เพราะการเปลี่ยนแปลงทางภาพเป็นทั้งประเด็นด้านการออกแบบและด้านวิศวกรรม

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

เหตุใดการทดสอบการถดถอยทางภาพจึงให้ผลบวกลวงจากความแตกต่างในการแสดงผลแบบอักษร

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