หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

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

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

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

ข้อกำหนด

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

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

ตั้งค่า

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

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

เพิ่มปลั๊กอินลงในไฟล์แคตตาล็อกเวอร์ชัน

[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"}

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

เปิดใช้พร็อพเพอร์ตี้เวอร์ชันทดลองในไฟล์ gradle.properties ของโปรเจ็กต์
```
android.experimental.enableScreenshotTest=true
```
ในบล็อก android {} ของไฟล์ build.gradle.kts ระดับโมดูล ให้เปิดใช้ Flag การทดลองเพื่อใช้ชุดแหล่งที่มา screenshotTest และตรวจสอบว่าได้ตั้งค่า kotlinCompilerExtensionVersion เป็น 1.5.4 ขึ้นไป
หมายเหตุ: หากใช้ Kotlin 2.0 ขึ้นไป คุณไม่จําเป็นต้องตั้งค่าเวอร์ชันคอมไพเลอร์ Compose แยกต่างหาก ดูข้อมูลเพิ่มเติมเกี่ยวกับปลั๊กอิน Gradle ของคอมไพเลอร์ Compose
```
android {
    ...
    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.4"
    }
    experimentalProperties["android.experimental.enableScreenshotTest"] = true
}
```
ตรวจสอบว่าคุณได้เพิ่มข้อกําหนดของ 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%
        }
    }
}

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

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