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ặcfontScale
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.
![](https://developer.android.google.cn/static/studio/images/compose-screenshot-testing.png?authuser=9&hl=vi)
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ốiplugins {}
: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ô-đunbuild.gradle.kts
, hãy bật cờ thử nghiệm để sử dụngscreenshotTest
nhóm tài nguyên và đảm bảo rằngkotlinCompilerExtensionVersion
được thiết lập thành 1.5.4 trở lên.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) }
- Thêm phiên bản này vào danh mục phiên bản của bạn:
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.