Trang này được dịch bởi Cloud Translation API.

Kiểm thử ảnh chụp màn hình của tính năng xem trước trong Compose

Kiểm thử ảnh chụp màn hình là một cách hiệu quả để xác minh giao diện người dùng của bạn hiển thị như thế nào. Chiến lược phát hành đĩa đơn Công cụ Kiểm tra ảnh chụp màn hình của tính năng Xem trước trong Compose kết hợp sự đơn giản và tính năng của bản xem trước thành phần kết hợp bằng mức tăng năng suất khi chạy kiểm thử ảnh chụp màn hình phía máy chủ. Tính năng xem trước trong Compose Tính năng Kiểm thử ảnh chụp màn hình được thiết kế để dễ sử dụng như bản xem trước thành phần kết hợp.

Kiểm thử ảnh chụp màn hình là một kiểm thử tự động dùng để chụp ảnh màn hình một phần giao diện người dùng rồi so sánh với hình ảnh tham chiếu đã được phê duyệt trước đó. Nếu hình ảnh không khớp, kiểm thử không thành công và tạo ra báo cáo HTML để giúp bạn so sánh và tìm sự khác biệt.

Với công cụ Kiểm tra ảnh chụp màn hình xem trước trong Compose, bạn có thể:

Xác định số lượng bản xem trước thành phần kết hợp mới hoặc hiện có mà bạn muốn sử dụng kiểm thử ảnh chụp màn hình.
Tạo hình ảnh tham chiếu từ các bản xem trước có thể kết hợp đó.
Tạo báo cáo HTML xác định các thay đổi đối với bản xem trước đó sau khi bạn thực hiện thay đổi mã.
Sử dụng các tham số @Preview, chẳng hạn như uiMode hoặc fontScale và nhiều bản xem trước giúp bạn mở rộng quy mô thử nghiệm.
Mô-đun hoá các chương trình kiểm thử của bạn bằng nhóm tài nguyên screenshotTest mới.

Yêu cầu

Để sử dụng tính năng Kiểm thử ảnh chụp màn hình của tính năng Xem trước trong Compose, bạn cần có:

Android Gradle 8.5.0-beta01 trở lên.
Kotlin 1.9.20 trở lên.

Thiết lập

Để bật công cụ này, hãy làm theo các bước sau:

Thêm phiên bản trình bổ trợ com.android.compose.screenshot 0.0.1-alpha01 cho dự án của bạn.

Thêm trình bổ trợ vào tệp danh mục phiên bản:

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

Trong tệp build.gradle.kts ở cấp mô-đun, hãy thêm trình bổ trợ này vào Khối plugins {}:
```
plugins {
    ...
    alias(libs.plugins.screenshot)
}
```

Bật thuộc tính thử nghiệm trong Tệp gradle.properties.
```
android.experimental.enableScreenshotTest=true
```
Trong khối android {} ở cấp mô-đun build.gradle.kts, hãy bật cờ thử nghiệm để sử dụng screenshotTest nhóm tài nguyên và đảm bảo rằng kotlinCompilerExtensionVersion được thiết lập thành 1.5.4 trở lên.
Lưu ý: nếu đang sử dụng Kotlin 2.0 trở lên, bạn không phải đặt thuộc tính Phiên bản Trình biên dịch Compose riêng biệt. Tìm hiểu thêm về chính sách Trình bổ trợ Gradle của Trình biên dịch Compose.
```
android {
    ...
    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.4"
    }
    experimentalProperties["android.experimental.enableScreenshotTest"] = true
}
```

Hãy đảm bảo rằng bạn đã thêm ui-tooling phần phụ thuộc.

Thêm phiên bản này vào danh mục phiên bản của bạn:

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

Thêm vào tệp build.gradle.kts cấp mô-đun:

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

Chỉ định bản xem trước thành phần kết hợp để sử dụng cho việc kiểm thử ảnh chụp màn hình

Để chỉ định bản xem trước thành phần kết hợp mà bạn muốn sử dụng cho việc kiểm thử ảnh chụp màn hình, hãy đặt các bản xem trước trong một lớp kiểm thử. Tệp lớp kiểm thử phải được đặt trong Ví dụ: screenshotTest nhóm tài nguyên app/src/screenshotTest/kotlin/com/google/yourapp/ExamplePreviewScreenshots.kt ({module}/src/screenshotTest/{kotlin|java}/com/your/package).

Bạn có thể thêm các thành phần kết hợp và/hoặc bản xem trước khác, bao gồm nhiều bản xem trước, trong tệp này hoặc các tệp khác được tạo trong cùng một nhóm tài nguyên.

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

Tạo hình ảnh tham chiếu

Sau khi thiết lập lớp kiểm thử, bạn cần tạo ảnh tham chiếu cho mỗi lớp bản xem trước. Các hình ảnh đối chiếu này được dùng để xác định các thay đổi về sau, sau khi bạn thực hiện thay đổi mã. Cách tạo hình ảnh tham chiếu cho bản xem trước thành phần kết hợp kiểm thử ảnh chụp màn hình, hãy chạy tác vụ Gradle sau:

Linux và macOS: ./gradlew updateDebugScreenshotTest (./gradlew {:module:}update{Variant}ScreenshotTest)
Cửa sổ: gradlew updateDebugScreenshotTest (gradlew {:module:}update{Variant}ScreenshotTest)

Sau khi hoàn thành nhiệm vụ, hãy tìm hình ảnh tham chiếu trong app/src/debug/screenshotTest/reference ({module}/src/{variant}/screenshotTest/reference).

Tạo báo cáo kiểm thử

Sau khi đã có hình ảnh tham chiếu, hãy chạy tác vụ xác thực để chụp ảnh màn hình mới rồi so sánh với hình ảnh tham chiếu:

Linux và macOS: ./gradlew validateDebugScreenshotTest (./gradlew {:module:}validate{Variant}ScreenshotTest)
Cửa sổ: gradlew validateDebugScreenshotTest (gradlew {:module:}validate{Variant}ScreenshotTest)

Tác vụ xác minh sẽ tạo một báo cáo HTML tại {module}/build/reports/screenshotTest/preview/{variant}/index.html.

Vấn đề đã biết

Bạn có thể tìm thấy danh sách các vấn đề hiện tại đã biết trong phần Thành phần Công cụ theo dõi lỗi. Báo cáo mọi vấn đề và ý kiến phản hồi khác thông qua công cụ theo dõi lỗi.