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

การทดสอบภาพหน้าจอเป็นวิธีที่มีประสิทธิภาพในการยืนยันลักษณะที่ 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-alpha01 ไปยังโปรเจ็กต์ของคุณ
1. เพิ่มปลั๊กอินลงในไฟล์แคตตาล็อกเวอร์ชัน โดยทำดังนี้

   [versions]
   agp = "8.5.0-beta01"
   kotlin = "1.9.20"
   ...
   screenshot = "0.0.1-alpha01"
   
   [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 ให้เปิดใช้งานแฟล็กการทดสอบเพื่อใช้ ตั้งค่าแหล่งที่มา 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)
      }
      

กำหนดตัวอย่าง Composable เพื่อใช้สำหรับการทดสอบภาพหน้าจอ

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

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

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!")
        }
    }
}

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

หลังจากตั้งค่าชั้นเรียนทดสอบแล้ว คุณจะต้องสร้างรูปภาพอ้างอิงสำหรับตัวอย่างเพลงแต่ละรายการ รูปภาพอ้างอิงเหล่านี้จะใช้เพื่อระบุการเปลี่ยนแปลงในภายหลัง หลังจากที่คุณ เปลี่ยนแปลงโค้ดได้ วิธีสร้างรูปภาพอ้างอิงสำหรับตัวอย่างที่เขียนได้ด้วย Compose ทดสอบภาพหน้าจอ ให้เรียกใช้งาน 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%
        }
    }
}

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

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