Screenshot Test: คืออะไร ประเภท และทำงานอย่างไรในการทดสอบ

Screenshot Test คืออะไรและทำไมจึงจำเป็น?

Screenshot Test คือการทดสอบอินเทอร์เฟซผู้ใช้แบบ end-to-end ที่การทดสอบเปิดหน้าจอแอปพลิเคชัน ดำเนินการ (แตะ ป้อนข้อความ เลื่อน) และถ่ายภาพหน้าจอของสถานะผลลัพธ์ ภาพหน้าจอจะถูกเปรียบเทียบกับ baseline ที่เก็บไว้ในคลังสินค้า หากภาพหน้าจอแตกต่างกัน — การทดสอบล้มเหลว การทดสอบ screenshot ตรวจจับการถดถอยทางภาพที่การทดสอบหน่วยไม่สามารถมองเห็นได้: ระยะขอบที่ไม่ถูกต้อง องค์ประกอบที่ทับซ้อนกัน สีที่ผิด

ทำไมต้องมีการทดสอบ screenshot หากมีการทดสอบ golden? — การทดสอบ golden จะตรวจสอบส่วนประกอบแบบแยกส่วน: ปุ่มเดียว การ์ดเดียว ข้อความเดียว การทดสอบ screenshot จะตรวจสอบทั้งหน้าจอในสภาพแวดล้อมที่ใกล้เคียงกับการใช้งานจริงมากที่สุด: การนำทางจริง ข้อมูลจริง (หรือ mock ที่สมจริงที่สุด) แบบอักษรระบบจริง แถบสถานะจริง มีเพียงการทดสอบ screenshot เท่านั้นที่จะแสดงว่าปุ่มถูกทับซ้อนกับองค์ประกอบอื่นบนอุปกรณ์จริง

คุณค่าทางธุรกิจของการทดสอบ screenshot

คุณค่าทางธุรกิจ — ตามข้อมูลของ Google (2023) ข้อบกพร่องทางภาพคิดเป็น 15-25% ของข้อบกพร่องทั้งหมดในแอปพลิเคชันมือถือ การทดสอบ screenshot ทำให้การตรวจสอบคุณภาพทางภาพเป็นอัตโนมัติซึ่งก่อนหน้านี้ดำเนินการด้วยตนเองโดยวิศวกร QA การทดสอบ screenshot หนึ่งครั้งแทนที่การทดสอบด้วยตนเอง 5-10 นาทีของหนึ่งหน้าจอ สำหรับแอปพลิเคชันที่มี 50 หน้าจอ การประหยัด: 4-8 ชั่วโมงทำงานต่อการเรียกใช้การทดสอบการถดถอย การทดสอบ screenshot คืนทุนใน 2-3 รอบการเผยแพร่

Screenshot Test vs Golden Test: การเปรียบเทียบแนวทาง

การทดสอบ golden เร็วกว่าและง่ายกว่า: การเรนเดอร์ส่วนประกอบในบัฟเฟอร์นอกหน้าจอใช้เวลาเป็นมิลลิวินาที ไม่ต้องใช้อุปกรณ์ และมีความเสถียรบน CI การทดสอบ screenshot สมจริงกว่า: จับภาพหน้าจอจริงพร้อมองค์ประกอบระบบ รองรับแอนิเมชันและการนำทาง และทำงานบนอุปกรณ์จริง การเลือกขึ้นอยู่กับเป้าหมาย: ข้อเสนอแนะที่รวดเร็วสำหรับนักพัฒนา (golden) หรือความสมจริงสูงสุดก่อนเผยแพร่ (screenshot)

กลยุทธ์ความครอบคลุม: golden + screenshot

Golden + Screenshot — ใช้การทดสอบ golden สำหรับทุกส่วนประกอบ UI ในไลบรารีส่วนประกอบ (Design System) 80% ของการถดถอยทางภาพถูกจับได้ที่ระดับส่วนประกอบ การทดสอบ screenshot — สำหรับเส้นทางผู้ใช้ที่สำคัญ: การเริ่มต้นใช้งาน การเข้าสู่ระบบ ขั้นตอนการชำระเงิน ตะกร้าสินค้า 20% ของการถดถอยที่เกี่ยวข้องกับการรวมส่วนประกอบบนหน้าจอจริงจะถูกจับได้โดยการทดสอบ screenshot เท่านั้น ที่ IT Sectr เราใช้อัตราส่วน 80/20: golden 400 รายการ + screenshot 100 รายการ

เมื่อไม่จำเป็นต้องทดสอบ screenshot — หากหน้าจอประกอบด้วยเนื้อหาแบบคงที่โดยไม่มีการโต้ตอบ การทดสอบส่วนประกอบ golden จะให้การตรวจสอบในระดับเดียวกันด้วยต้นทุนที่ต่ำกว่า หากหน้าจอเปลี่ยนแปลงแบบไดนามิก (ฟีด, แชท) การทดสอบ screenshot ต้องมีการตั้งค่าข้อมูลที่ซับซ้อนและเวลาในการรอ ในกรณีดังกล่าว ให้ใช้ screenshot สำหรับสถานะพื้นฐาน (รายการว่าง, การโหลด) และ golden สำหรับการ์ดแต่ละใบในรายการ

UI Automator และ Firebase Test Lab สำหรับ Android

UI Automator คือเฟรมเวิร์ก Android สำหรับการทดสอบ UI ข้ามแอปพลิเคชัน ช่วยให้สามารถถ่ายภาพหน้าจอผ่าน UiDevice.takeScreenshot() แตกต่างจาก Espresso (ทำงานภายในแอปพลิเคชันเดียว) ตรงที่ UI Automator สามารถโต้ตอบกับไดอะล็อกระบบ (การอนุญาต, การแจ้งเตือน) และแอปพลิเคชันอื่นๆ การทดสอบ screenshot บน UI Automator: เปิดแอป รอการโหลด ถ่ายภาพหน้าจอ เปรียบเทียบกับ baseline

class LoginScreenScreenshotTest {

    @get:Rule
    val rule = ComposeTestRule.createAndroidComposeRule<MainActivity>()

    @Test
    fun login_screen_default() {
        val device = UiDevice.getInstance(
            InstrumentationRegistry.getInstrumentation()
        )

        // รอให้หน้าจอโหลด
        IdlingRegistry.getInstance().waitForIdle()

        // ถ่ายภาพหน้าจอ
        val screenshot = device.takeScreenshot()
        val golden = loadGolden("login_default.png")

        // เปรียบเทียบกับภาพอ้างอิง
        val diff = ImageComparator.compare(screenshot, golden)
        assertTrue(diff.similarity > 0.98)
    }
}

Firebase Test Lab คือบริการ Google Cloud สำหรับเรียกใช้การทดสอบด้วยเครื่องมือบนอุปกรณ์จริงหลายร้อยเครื่องพร้อมกัน การทดสอบ screenshot บน Firebase Test Lab จะจับภาพหน้าจอบนอุปกรณ์ต่างๆ (Pixel 7, Galaxy S24, Xiaomi 14) และเปรียบเทียบกับ baseline ข้อดี: การทดสอบหนึ่งครั้งตรวจสอบ UI บน 20 อุปกรณ์ใน 10-15 นาที ข้อเสีย: ต้นทุน ($1-5 ต่อการทดสอบบน 20 อุปกรณ์) Firebase Test Lab รวมเข้ากับ CI ผ่าน gcloud CLI หรือปลั๊กอิน Gradle

Shot: ไลบรารีสำหรับทำให้การทดสอบ screenshot ง่ายขึ้น

Shot คือไลบรารีสำหรับการทดสอบ screenshot บน Android ที่ช่วยให้การสร้างและเปรียบเทียบภาพหน้าจอง่ายขึ้น Shot ทำงานบน Espresso และ UI Automator เพิ่มการจัดการ golden (สร้าง, อัปเดต, ลบ) การเปรียบเทียบกับเกณฑ์ (พิกเซลหรือเปอร์เซ็นต์) และการสร้างรายงาน HTML Shot เหมาะสำหรับโครงการที่ต้องการนำการทดสอบ screenshot ไปใช้อย่างรวดเร็วโดยไม่ต้องเขียนโครงสร้างพื้นฐานการเปรียบเทียบภาพของตนเอง

XCUITest และ Xcode Cloud สำหรับ iOS

XCUITest คือเฟรมเวิร์กของ Apple สำหรับการทดสอบ UI ของแอปพลิเคชัน iOS, iPadOS และ tvOS การทดสอบ screenshot บน XCUITest ใช้ XCUIScreen.main.screenshot() สำหรับการจับภาพหน้าจอและ XCAttachment สำหรับบันทึกภาพหน้าจอ XCUITest จำลองการกระทำของผู้ใช้: แตะ, ปัด, typeText และถ่ายภาพหน้าจอหลังจากแต่ละขั้นตอน ใน Xcode 16+ มีการเพิ่มการรองรับในตัวสำหรับการเปรียบเทียบภาพหน้าจอกับ baseline ผ่าน XCTAttachment

final class LoginScreenScreenshotTests: XCTestCase {

    var app: XCUIApplication!

    override func setUp() {
        super.setUp()
        app = XCUIApplication()
        app.launch()
    }

    func test_login_initial_state() {
        let loginButton = app.buttons["login_button"]
        XCTAssertTrue(loginButton.exists)

        // ถ่ายภาพหน้าจอ
        let screenshot = app.screenshot()
        let attachment = XCTAttachment(screenshot: screenshot)
        attachment.name = "Login-Screen-Initial"
        attachment.lifetime = .keepAlways
        add(attachment)

        // เปรียบเทียบกับภาพอ้างอิง (ต้องใช้ XCTAttachment + golden)
        assertScreenshot(
            screenshot: screenshot,
            goldenName: "login_initial_state"
        )
    }
}

Xcode Cloud คือ CI บนคลาวด์ของ Apple สำหรับสร้างและทดสอบแอปพลิเคชัน iOS Xcode Cloud รองรับการเรียกใช้การทดสอบ XCUITest บนเครื่องจำลอง การทดสอบ screenshot สามารถเรียกใช้บนเครื่องจำลองหลายเครื่องพร้อมกัน (iPhone 15, iPhone 15 Pro Max, iPad Pro) ผลลัพธ์: XCResult Bundle พร้อมไฟล์แนบ Xcode Cloud ไม่ได้ถูกสร้างไว้ใน GitHub/GitLab — ใช้ Xcode Cloud Webhooks สำหรับการรวม ทางเลือก: GitHub Actions กับ macos-14 และ xcodebuild

เฟรมเวิร์กการเปรียบเทียบ — iOSSnapshotTestCase (Uber) ยังใช้ได้กับการทดสอบ screenshot หากเรียกใช้บนเครื่องจำลอง SwiftSnapshotTesting (pointfree) เหมาะสำหรับการทดสอบ golden ของส่วนประกอบมากกว่า สำหรับการทดสอบ screenshot บน iOS ให้ใช้เครื่องมือ XCUITest ในตัว + XCTAttachment + ImageComparator ที่กำหนดเอง (Pixelmator หรือ AImage) บน CI ให้ใช้เครื่องจำลอง — บนอุปกรณ์จริง การทดสอบ screenshot ทำงานผ่าน Device Farm (AWS Device Farm) เท่านั้น

กระบวนการอัตโนมัติของการทดสอบ screenshot ใน CI

การจัดการ baseline — ภาพหน้าจออ้างอิงถูกเก็บไว้ในคลังสินค้า (Git LFS) หรือใน S3 ภาพหน้าจอแต่ละภาพถูกตั้งชื่อตามเทมเพลต: {testName}_{device}_{orientation}_{locale}.png ตัวอย่าง: loginScreenPixel7PortraitRu.png เมื่อเพิ่มอุปกรณ์หรือท้องถิ่นใหม่ จะสร้าง baseline ใหม่ เมื่อเปลี่ยน UI baselines เก่าจะถูกแทนที่ด้วยอันใหม่หลังจากการตรวจสอบโค้ด Baseline เป็นส่วนหนึ่งของฐานโค้ด เช่นเดียวกับซอร์สโค้ดของการทดสอบ

ไปป์ไลน์ CI — (1) สร้างแอปพลิเคชัน (2) เรียกใช้การทดสอบ screenshot บนอีมูเลเตอร์/เครื่องจำลอง (3) เปรียบเทียบภาพหน้าจอกับ baselines (4) เมื่อไม่ตรงกัน — สร้างภาพ diff (5) อัปโหลดสิ่งประดิษฐ์ diff (actual, expected, diff — สามไฟล์) (6) เผยแพร่รายงาน HTML พร้อมตารางผลลัพธ์ (7) หากเกินเกณฑ์ — การทดสอบล้มเหลว (8) ผู้ตรวจสอบตรวจสอบสิ่งประดิษฐ์ diff และตัดสินใจ: อนุมัติ (อัปเดต baseline) หรือปฏิเสธ (แก้ไขโค้ด)

เกณฑ์และความทนทาน — การเปรียบเทียบแบบพิกเซลต่อพิกเซลแบบสัมบูรณ์นั้นเข้มงวดเกินไป ใช้ SSIM (ดัชนีความคล้ายคลึงเชิงโครงสร้าง) หรือ MSE (ความคลาดเคลื่อนกำลังสองเฉลี่ย) SSIM 0.98 = ความคล้ายคลึงเชิงโครงสร้าง 98% — เกณฑ์ที่ดี หน้าจอที่แตกต่างกันอาจต้องการเกณฑ์ที่แตกต่างกัน: หัวข้อมืด (สีดำมากขึ้น — ความแม่นยำสูงขึ้น), การไล่ระดับสี (สัญญาณรบกวนมากขึ้น — ความแม่นยำต่ำลง) กำหนดค่าเกณฑ์ต่อการทดสอบผ่านพารามิเตอร์: @ScreenshotTest(threshold = 0.99)

Device Farm vs เครื่องจำลอง — การทดสอบบนอุปกรณ์จริง (Firebase Test Lab, AWS Device Farm) ให้ความสมจริงสูงสุด แต่ช้าและมีค่าใช้จ่าย การทดสอบบนเครื่องจำลอง/อีมูเลเตอร์นั้นรวดเร็วและฟรี แต่ไม่แสดงคุณสมบัติของอุปกรณ์จริง (GPU ที่แตกต่างกัน, การสร้างสีของจอแสดงผล, ความหนาแน่นของพิกเซล) กลยุทธ์: เครื่องจำลองสำหรับการตรวจสอบก่อนรวม (5 นาที), Device Farm สำหรับการทดสอบข้ามคืน (30 นาที, 20 อุปกรณ์) ที่ IT Sectr เราใช้ Firebase Test Lab สำหรับการทำงานข้ามคืนบนอุปกรณ์ Android 10 อันดับแรก