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
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

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 trông như thế nào đối với người dùng. Công cụ Kiểm thử ảnh chụp màn hình của 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 Kiểm thử ảnh chụp màn hình trong bản 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 kiểm thử tự động chụp ảnh màn hình một phần giao diện người dùng rồi so sánh ảnh chụp màn hình đó với một hình ảnh tham chiếu đã được phê duyệt trước đó. Nếu các hình ảnh không khớp, thì kiểm thử sẽ không đạt và tạo một 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 trong bản xem trước Compose, bạn có thể:

Sử dụng @PreviewTest để tạo kiểm thử ảnh chụp màn hình cho bản xem trước thành phần kết hợp hiện có hoặc mới.
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 một 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 thực hiện các thay đổi về 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ô kiểm thử.
Mô-đun hoá các 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 bản xem trước trong Compose, bạn cần có:

Trình bổ trợ Android cho Gradle 8.5.0-beta01 trở lên.
Kotlin 1.9.20 trở lên. Bạn nên sử dụng Kotlin 2.0 trở lên để có thể sử dụng trình bổ trợ Gradle cho Trình biên dịch Compose.
Bật tính năng Compose cho dự án của bạn. Bạn nên bật Compose bằng trình bổ trợ Gradle cho Trình biên dịch Compose.

Lưu ý: Nếu không thể sử dụng trình bổ trợ Gradle cho Trình biên dịch Compose, bạn có thể bật Compose bằng cách trực tiếp khai báo phần phụ thuộc trên Trình biên dịch Compose. Hãy nhớ sử dụng kotlinCompilerExtensionVersion phiên bản 1.5.4 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-alpha10 vào dự án.

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

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

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

Thêm các phần phụ thuộc screenshot-validation-api và ui-tooling.

Thêm các phiên bản đó vào danh mục phiên bản:

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

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

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

Chỉ định bản xem trước thành phần kết hợp để sử dụng cho 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 đánh dấu bản xem trước bằng chú thích @PreviewTest. Bản xem trước phải nằm trong nhóm tài nguyên screenshotTest mới, ví dụ: app/src/screenshotTest/kotlin/com/example/yourapp/ExamplePreviewScreenshotTest.kt.

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

Tạo hình ảnh tham khảo

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. Những 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 thực hiện các thay đổi đối với mã. Để tạo hình ảnh tham chiếu cho các kiểm thử ảnh chụp màn hình 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 hình ảnh tham chiếu trong app/src/screenshotTestDebug/reference ({module}/src/screenshotTest{Variant}/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 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)
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

Bạn có thể tìm thấy danh sách các vấn đề đã biết hiện tại trong thành phần trình theo dõi lỗi của công cụ. 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à thay đổi đối với các phiên bản đang hoạt động.

0.0.1-alpha10

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

Kể từ phiên bản này, bạn cần đánh dấu tất cả các hàm xem trước bằng chú thích @PreviewTest. Bản xem trước không có chú thích sẽ không được thực thi.
Thư mục hình ảnh tham chiếu được thay đổi từ {module}/src/{variant}/screenshotTest/reference thành {module}/src/screenshotTest{Variant}/reference. Điều này nhằm đảm bảo rằng các hình ảnh tham chiếu được tạo đó sẽ không nằm trong mã phát hành chính thức và được điều chỉnh cho phù hợp với cấu trúc thư mục của các loại kiểm thử khác.
Tác vụ {variant}PreviewScreenshotRender sẽ bị xoá. Quá trình kết xuất hình ảnh được di chuyển vào Công cụ kiểm thử JUnit.
Tác vụ update{Variant}ScreenshotTest sẽ so sánh hình ảnh kết xuất mới với hình ảnh tham chiếu trước khi cập nhật. Tính năng này sẽ chỉ cập nhật những hình ảnh có sự khác biệt lớn hơn ngưỡng đã chỉ định. Xoá cờ dòng lệnh --updateFilter.

0.0.1-alpha06