สร้างสภาพแวดล้อมการพัฒนาที่ปลอดภัยยิ่งขึ้นอย่างมีประสิทธิภาพด้วย Playwright Visual comparisons

ที่มาและการมองเห็นปัญหา

• การทดสอบฟรอนต์เอนด์มีความยากหลายด้านจากการเปลี่ยนแปลงของ UI และอินพุตผู้ใช้ที่คาดเดาไม่ได้
• การทดสอบที่ต้องให้คนตรวจสอบด้วยตนเองมีข้อจำกัด จึงพิจารณานำการทดสอบอัตโนมัติเข้ามาใช้
• การทดสอบ E2E แบบบันทึกการทำงานเดิมที่มีอยู่แล้ว (TestProject, Playwright) มีต้นทุนการดูแลรักษาสูง และเปราะบางต่อการเปลี่ยนแปลงของ UI

การนำ Playwright Visual Comparisons มาใช้

• ใช้วิธีทดสอบ visual regression เพื่อจับการเปลี่ยนแปลงของ UI
• บันทึกสกรีนช็อตอ้างอิงไว้ แล้วนำมาเปรียบเทียบหลังมีการเปลี่ยนโค้ดเพื่อจับความเปลี่ยนแปลง
• สามารถเปรียบเทียบภาพได้ในรูปแบบ 2-up, Swipe, Highlight, Onion Skin

ปัญหาหลักที่พบระหว่างการนำมาใช้และวิธีแก้ไข

1. เกิด false failure จากความต่างเล็กน้อยมาก (0.01%)
   ปัญหา: มีความต่างในการเรนเดอร์ฟอนต์ตามสภาพแวดล้อมที่รันทดสอบ (OS, เบราว์เซอร์, การตั้งค่าจอแสดงผล ฯลฯ)
   วิธีแก้: ใช้ Docker container เพื่อให้การทดสอบทั้งหมดรันในสภาพแวดล้อมเดียวกัน

2. จำเป็นต้องถ่ายสกรีนช็อตหลังข้อมูลโหลดเสร็จแล้ว
   ปัญหา: หากถ่ายสกรีนช็อตก่อนที่หน้าเว็บจะโหลดเสร็จสมบูรณ์ อาจติด UI ระหว่างโหลดมาด้วย
   วิธีแก้: ใช้ฟังก์ชันยูทิลิตีที่อาศัย getByText + toBeVisible เพื่อรอจนกว่าสตริงที่ต้องการจะปรากฏ

3. องค์ประกอบที่มีแอนิเมชันทำให้สกรีนช็อตต่างกัน
   ปัญหา: องค์ประกอบอย่าง CSS animation, Canvas, SVG, WebGL ถูกแคปเจอร์ในจังหวะที่ต่างกันทุกครั้ง และทำให้เกิด flaky test
   วิธีแก้: ใช้มาตรการหลายอย่างเพื่อปิดแอนิเมชัน และเพิ่มประสิทธิภาพการรันทดสอบในส่วนที่เกี่ยวข้อง

4. ตรวจจับความเปลี่ยนแปลงที่ไม่จำเป็นจากปลั๊กอิน third-party (เช่น iframe)
   ปัญหา: ปลั๊กอิน third-party อย่างฟีดแบ็กลูกค้า แบบสำรวจ และแชตบอต ถูกโหลดผ่าน iframe และก่อให้เกิดการเปลี่ยนแปลงด้านภาพ
   วิธีแก้: ตอนสร้างสกรีนช็อต ใช้การจัดการ css กลางเพื่อซ่อน iframe และองค์ประกอบปลั๊กอินบางตัวไม่ให้แสดง

5. ตรวจสอบองค์ประกอบด้านล่างไม่ผ่านในหน้าที่มีการเลื่อน
   ปัญหา: toHaveScreenshot จะจับเฉพาะบริเวณหน้าจอที่มองเห็นอยู่ในขณะนั้นเป็นค่าเริ่มต้น จึงต้องจัดการเรื่องการเลื่อนหน้าจอเพิ่มเติม
   วิธีแก้: ใช้ตัวเลือก fullPage: true เพื่อให้จับสกรีนช็อตทั้งหน้า

บทสรุป

• visual regression test ช่วยทำให้การตรวจจับการเปลี่ยนแปลงของ UI เป็นอัตโนมัติได้อย่างมีประสิทธิภาพ
• แม้จะไม่ใช่โซลูชันที่สมบูรณ์แบบ แต่ช่วยเพิ่มทั้งประสิทธิภาพการพัฒนาและความเสถียรของการทดสอบ
• ยังจำเป็นต้องปรับปรุงอย่างต่อเนื่องและปรับแต่งสภาพแวดล้อมการทดสอบให้เหมาะสม