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

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

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

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

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

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

ข้อกำหนด

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

ปลั๊กอิน Android Gradle 8.5.0-beta01 ขึ้นไป
Kotlin 1.9.20 ขึ้นไป เราขอแนะนำให้ใช้ Kotlin 2.0 ขึ้นไปเพื่อให้คุณใช้ปลั๊กอิน Gradle ของ Compose Compiler ได้
คอมโพสิชันเปิดใช้สำหรับโปรเจ็กต์ของคุณ เราขอแนะนำให้เปิดใช้ Compose โดยใช้ปลั๊กอิน Gradle ของคอมไพเลอร์ Compose

หมายเหตุ: หากใช้ปลั๊กอิน Gradle ของ Compose Compiler ไม่ได้ คุณสามารถเปิดใช้ Compose โดยประกาศการพึ่งพา Compose Compiler โดยตรง ตรวจสอบว่าคุณใช้ kotlinCompilerExtensionVersion เวอร์ชัน 1.5.4 ขึ้นไป

ตั้งค่า

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

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

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

[versions]
agp = "8.11.0-alpha06"
kotlin = "2.1.20"
screenshot = "0.0.1-alpha10"

[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
```
android {
    experimentalProperties["android.experimental.enableScreenshotTest"] = true
}
```

เพิ่มการอ้างอิง screenshot-validation-api และ ui-tooling

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

[libraries]
screenshot-validation-api = { group = "com.android.tools.screenshot", name = "screenshot-validation-api", version.ref = "screenshot"}
androidx-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling"}

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

dependencies {
  screenshotTestImplementation(libs.screenshot.validation.api)
  screenshotTestImplementation(libs.androidx.ui.tooling)
}

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

หากต้องการกำหนดตัวอย่างที่คอมโพสิเบิลที่ต้องการใช้ทดสอบภาพหน้าจอ ให้ทำเครื่องหมายตัวอย่างด้วยคำอธิบายประกอบ @PreviewTest ตัวอย่างต้องอยู่ในชุดแหล่งที่มา screenshotTest ใหม่ เช่น app/src/screenshotTest/kotlin/com/example/yourapp/ExamplePreviewScreenshotTest.kt

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

package com.example.yourapp

import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import com.android.tools.screenshot.PreviewTest
import com.example.yourapp.ui.theme.MyApplicationTheme

@PreviewTest
@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/screenshotTestDebug/reference ({module}/src/screenshotTest{Variant}/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-alpha10

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

ตั้งแต่เวอร์ชันนี้เป็นต้นไป คุณต้องทําเครื่องหมายฟังก์ชันตัวอย่างทั้งหมดด้วยคำอธิบายประกอบ @PreviewTest ระบบจะไม่แสดงตัวอย่างเพลงที่ไม่มีคำอธิบายประกอบ
เปลี่ยนไดเรกทอรีรูปภาพอ้างอิงจาก {module}/src/{variant}/screenshotTest/reference เป็น {module}/src/screenshotTest{Variant}/reference การดำเนินการนี้เพื่อให้แน่ใจว่ารูปภาพอ้างอิงที่สร้างขึ้นจะไม่เป็นส่วนหนึ่งของโค้ดเวอร์ชันที่ใช้งานจริง และเพื่อให้สอดคล้องกับโครงสร้างไดเรกทอรีของการทดสอบประเภทอื่นๆ
ระบบจะนำงาน {variant}PreviewScreenshotRender ออก ย้ายข้อมูลการแสดงผลรูปภาพไปยัง JUnit Test Engine แล้ว
งาน update{Variant}ScreenshotTest จะเปรียบเทียบรูปภาพที่แสดงผลใหม่กับรูปภาพอ้างอิงก่อนอัปเดต โดยจะอัปเดตเฉพาะรูปภาพที่มีความแตกต่างมากกว่าเกณฑ์ที่ระบุเท่านั้น นำ Flag --updateFilter ออกจากบรรทัดคำสั่งแล้ว

0.0.1-alpha06

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

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

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

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

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