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. Công cụ Kiểm thử ảnh chụp màn hình bản 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 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 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 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ợ 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 cần phải đặt 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.
1. 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"}
```
2. 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 các bài 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 tác vụ hoàn tất, 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ử

Khi hình ảnh tham chiếu đã tồn tại, hãy chạy tác vụ xác thực để chụp ảnh màn hình mới và so sánh ảnh chụp màn hì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 ý kiến phản hồi và vấn đề khác thông qua công cụ theo dõi lỗi.

Nội dung cập nhật trong bản phát hành

Ghi chú phát hành và các thay đổi đối với các phiên bản đang phát hành

0,0.1-alpha06

Bản phát hành này giới thiệu:

Ngưỡng chênh lệch hình ảnh: Cài đặt ngưỡng chung mới này sẽ cho phép bạn có được quyền kiểm soát tốt hơn đối với việc so sánh ảnh chụp màn hình. Để định cấu hình, hãy cập nhật build.gradle.kts của mô-đun:

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

Ngưỡng này sẽ được áp dụng cho tất cả các thử nghiệm ảnh chụp màn hình đã xác định trong mô-đun.

Sửa lỗi: Một số lỗi Trình kết xuất Compose và tính năng hỗ trợ bổ sung cho Compose trống
Cải tiến hiệu suất: Cập nhật thuật toán so sánh hình ảnh để nhanh hơn