เขียนการทดสอบภาพหน้าจอตัวอย่าง

การทดสอบภาพหน้าจอเป็นวิธีที่มีประสิทธิภาพในการยืนยันลักษณะที่ UI แสดงต่อผู้ใช้ เครื่องมือทดสอบภาพหน้าจอของตัวอย่างที่คอมโพสจะรวมความเรียบง่ายและฟีเจอร์ของตัวอย่างที่คอมโพสได้เข้ากับการเพิ่มประสิทธิภาพของการทดสอบภาพหน้าจอฝั่งโฮสต์ ตัวอย่าง Compose การทดสอบภาพหน้าจอออกแบบมาให้ใช้งานง่ายเหมือนกับตัวอย่างคอมโพเนนต์ที่เขียนด้วย Compose ได้

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

เครื่องมือทดสอบภาพหน้าจอของตัวอย่างการเขียนช่วยให้คุณทำสิ่งต่อไปนี้ได้

• ระบุจำนวนตัวอย่างที่คอมโพสได้ที่มีอยู่หรือใหม่ที่ต้องการใช้สำหรับการทดสอบภาพหน้าจอ
• สร้างรูปภาพอ้างอิงจากตัวอย่างที่คอมโพสได้เหล่านั้น
• สร้างรายงาน HTML ที่ระบุการเปลี่ยนแปลงในตัวอย่างเหล่านั้นหลังจากที่คุณทำการเปลี่ยนแปลงโค้ด
• ใช้พารามิเตอร์ @Preview เช่น uiMode หรือ fontScale และการแสดงตัวอย่างหลายรายการเพื่อช่วยปรับขนาดการทดสอบ
• แบ่งการทดสอบออกเป็นส่วนๆ ด้วยชุดแหล่งที่มา screenshotTest ใหม่

ข้อกำหนด

หากต้องการใช้การทดสอบภาพหน้าจอของตัวอย่างการเขียน คุณต้องมีสิ่งต่อไปนี้

• Android Gradle 8.5.0-beta01 ขึ้นไป
• Kotlin 1.9.20 ขึ้นไป

ตั้งค่า

หากต้องการเปิดใช้เครื่องมือ ให้ทำตามขั้นตอนต่อไปนี้

1. เพิ่มปลั๊กอิน com.android.compose.screenshot เวอร์ชัน 0.0.1-alpha07 ลงในโปรเจ็กต์
1. เพิ่มปลั๊กอินลงในไฟล์แคตตาล็อกเวอร์ชัน

   [versions]
   agp = "8.5.0-beta01"
   kotlin = "1.9.20"
   ...
   screenshot = "0.0.1-alpha07"
   
   [plugins]
   ...
   screenshot = { id = "com.android.compose.screenshot", version.ref = "screenshot"}
   

2. ในไฟล์ build.gradle.kts ระดับโมดูล ให้เพิ่มปลั๊กอินในบล็อก plugins {} ดังนี้

   plugins {
       ...
       alias(libs.plugins.screenshot)
   }
   

2. เปิดใช้พร็อพเพอร์ตี้เวอร์ชันทดลองในไฟล์ gradle.properties ของโปรเจ็กต์

   android.experimental.enableScreenshotTest=true
   

3. ในบล็อก android {} ของไฟล์ build.gradle.kts ระดับโมดูล ให้เปิดใช้ Flag การทดลองเพื่อใช้ชุดแหล่งที่มา screenshotTest และตรวจสอบว่าได้ตั้งค่า kotlinCompilerExtensionVersion เป็น 1.5.4 ขึ้นไป

   android {
       ...
       composeOptions {
           kotlinCompilerExtensionVersion = "1.5.4"
       }
       experimentalProperties["android.experimental.enableScreenshotTest"] = true
   }
   

4. ตรวจสอบว่าคุณได้เพิ่มข้อกําหนดของ ui-tooling แล้ว
   1. เพิ่มลงในแคตตาล็อกเวอร์ชันโดยทำดังนี้

      [libraries]
      androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling"}
      

   2. เพิ่มลงในไฟล์ build.gradle.kts ระดับโมดูล ดังนี้

      dependencies {
        screenshotTestImplementation(libs.androidx.compose.ui.tooling)
      }
      

กำหนดตัวอย่างคอมโพเนนต์ที่จะใช้ทดสอบภาพหน้าจอ

หากต้องการกำหนดตัวอย่างที่คอมโพสได้ซึ่งคุณต้องการใช้สำหรับการทดสอบภาพหน้าจอ ให้วางตัวอย่างนั้นไว้ในคลาสทดสอบ ไฟล์คลาสทดสอบต้องอยู่ในชุดแหล่งที่มา screenshotTest ใหม่ เช่น app/src/screenshotTest/kotlin/com/google/yourapp/ExamplePreviewScreenshots.kt ({module}/src/screenshotTest/{kotlin|java}/com/your/package)

คุณสามารถเพิ่มคอมโพสิเบิลและ/หรือตัวอย่างเพลงอื่นๆ รวมถึงตัวอย่างเพลงหลายรายการในไฟล์นี้หรือไฟล์อื่นๆ ที่สร้างขึ้นจากชุดแหล่งที่มาเดียวกัน

package com.google.yourapp

import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import com.google.yourapp.ui.theme.MyApplicationTheme

class ExamplePreviewsScreenshots {

    @Preview(showBackground = true)
    @Composable
    fun GreetingPreview() {
        MyApplicationTheme {
            Greeting("Android!")
        }
    }
}

สร้างรูปภาพอ้างอิง

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

• Linux และ macOS: ./gradlew updateDebugScreenshotTest (./gradlew {:module:}update{Variant}ScreenshotTest)
• Windows: gradlew updateDebugScreenshotTest (gradlew {:module:}update{Variant}ScreenshotTest)

หลังจากงานเสร็จแล้ว ให้ค้นหารูปภาพอ้างอิงใน app/src/debug/screenshotTest/reference ({module}/src/{variant}/screenshotTest/reference)

สร้างรายงานการทดสอบ

เมื่อรูปภาพอ้างอิงพร้อมใช้งานแล้ว ให้เรียกใช้งานตรวจสอบเพื่อจับภาพหน้าจอใหม่และเปรียบเทียบกับรูปภาพอ้างอิง ดังนี้

• Linux และ macOS: ./gradlew validateDebugScreenshotTest (./gradlew {:module:}validate{Variant}ScreenshotTest)
• Windows: gradlew validateDebugScreenshotTest (gradlew {:module:}validate{Variant}ScreenshotTest)

งานการยืนยันจะสร้างรายงาน HTML ที่ {module}/build/reports/screenshotTest/preview/{variant}/index.html

ปัญหาที่ทราบ

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

การอัปเดตการเผยแพร่

บันทึกประจำรุ่นและการเปลี่ยนแปลงสำหรับเวอร์ชันที่ใช้อยู่

0.0.1-alpha06

ฟีเจอร์ใหม่ในรุ่นนี้ ได้แก่

เกณฑ์ความแตกต่างของรูปภาพ: การตั้งค่าเกณฑ์ส่วนกลางใหม่นี้จะช่วยให้คุณควบคุมการเปรียบเทียบภาพหน้าจอได้ดียิ่งขึ้น หากต้องการกำหนดค่า ให้อัปเดตไฟล์ build.gradle.kts ของข้อบังคับดังนี้

android {
    ...
    testOptions {
        ...
        screenshotTests {
            imageDifferenceThreshold = 0.0001f // 0.01%
        }
    }
}

ระบบจะใช้เกณฑ์นี้กับการทดสอบภาพหน้าจอทั้งหมดที่กําหนดไว้ในโมดูล

• แก้ไขข้อบกพร่อง: ข้อบกพร่องบางอย่างของโปรแกรมแสดงผลคอมโพสิทและเพิ่มการรองรับคอมโพสิทว่าง
• การเพิ่มประสิทธิภาพ: อัปเดตอัลกอริทึมการเปรียบเทียบรูปภาพให้เร็วขึ้น