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ị với người dùng. Công cụ Kiểm thử ảnh chụp màn hình của tính năng xem trước trong Compose kết hợp tính đơn giản và các tính năng của bản xem trước thành phần kết hợp với khả năng 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 Kiểm thử ảnh chụp màn hình của tính năng xem trước trong Compose đượ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 quy trình kiểm thử tự động, chụp ảnh màn hình một phần giao diện người dùng, sau đó 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, thì kiểm thử sẽ không thành công và tạo báo cáo HTML để giúp bạn so sánh và tìm ra sự khác biệt.

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

Xác định một số 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 cho 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 thành phần kết hợp đó.
Tạo báo cáo HTML xác định các thay đổi đối với các bản xem trước đó sau khi bạn thay đổi mã.
Sử dụng các tham số @Preview (chẳng hạn như uiMode hoặc fontScale) và các bản xem trước nhiều bản xem trước để giúp bạn mở rộng quy mô kiểm thử.
Mô-đun hoá chương trình kiểm thử 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:

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 trình bổ trợ com.android.compose.screenshot, phiên bản 0.0.1-alpha01 vào 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ợ vào khối plugins {}:
```
plugins {
    ...
    alias(libs.plugins.screenshot)
}
```

Bật thuộc tính thử nghiệm trong tệp gradle.properties của dự án.
```
android.experimental.enableScreenshotTest=true
```
Trong khối android {} của tệp build.gradle.kts cấp mô-đun, hãy bật cờ thử nghiệm để sử dụng nhóm tài nguyên screenshotTest và đảm bảo rằng kotlinCompilerExtensionVersion được đặt 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 cần phải thiết lập riêng phiên bản Compose Compiler. Tìm hiểu thêm về 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 bạn đã thêm phần phụ thuộc ui-tooling.

Thêm vào danh mục phiên 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 để dùng cho cá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 các bài kiểm thử ảnh chụp màn hình, hãy đặt bản xem trước trong một lớp kiểm thử. Tệp lớp kiểm thử phải nằm trong nhóm tài nguyên screenshotTest mới, ví dụ: app/src/screenshotTest/kotlin/com/google/yourapp/ExamplePreviewScreenshots.kt ({module}/src/screenshotTest/{kotlin|java}/com/your/package).

Bạn có thể thêm nhiều thành phần kết hợp và/hoặc bản xem trước khác (bao gồm cả nhiều bản xem trước) vào 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 một lớp kiểm thử, bạn cần tạo hình ảnh tham chiếu cho mỗi bản xem trước. Các hình ảnh tham chiếu này được dùng để xác định các thay đổi sau này, sau khi bạn thay đổi mã. Để tạo hình ảnh tham chiếu cho các bài kiểm thử ảnh chụp màn hình của bản xem trước thành phần kết hợp, hãy chạy tác vụ Gradle sau:

Linux và macOS: ./gradlew updateDebugScreenshotTest (./gradlew {:module:}update{Variant}ScreenshotTest)
Windows: gradlew updateDebugScreenshotTest (gradlew {:module:}update{Variant}ScreenshotTest)

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

Tạo báo cáo thử nghiệm

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)
Windows: 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

Nếu một bản xem trước trong nhóm tài nguyên screenshotTest chia sẻ tên phương thức đủ điều kiện với một bản xem trước trong main, thì phương thức trong nhóm tài nguyên chính sẽ được sử dụng không đúng cách cho hoạt động kiểm thử thay vì kiểm thử ảnh chụp màn hình.