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 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ể:
- Xác định một số bản xem trước thành phần kết hợp hiện có hoặc mới mà bạn muốn sử dụng cho các bài 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 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ưuiModehoặcfontScalevà 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
screenshotTestmớ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ó:
- 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ản0.0.1-alpha07vào dự á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-alpha07" [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ốiplugins {}:plugins { ... alias(libs.plugins.screenshot) } - Bật thuộc tính thử nghiệm trong tệp
gradle.propertiescủa dự án.android.experimental.enableScreenshotTest=true
- Trong khối
android {}của tệpbuild.gradle.ktsở cấp mô-đun, hãy bật cờ thử nghiệm để sử dụng nhóm tài nguyênscreenshotTestvà đảm bảo rằngkotlinCompilerExtensionVersionđược đặt thành 1.5.4 trở lên.android { ... composeOptions { kotlinCompilerExtensionVersion = "1.5.4" } experimentalProperties["android.experimental.enableScreenshotTest"] = true } - Đả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.ktscấp mô-đun:dependencies { screenshotTestImplementation(libs.androidx.compose.ui.tooling) }
- Thêm vào danh mục phiên bản:
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 các bài kiểm thử ảnh chụp màn hình, hãy đặt bản xem trước vào 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 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.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 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/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) - 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-alpha06
Bản phát hành này giới thiệu:
Ngưỡng chênh lệch hình ảnh: Chế độ cài đặt ngưỡng chung mới này sẽ cho phép bạn kiểm soát tốt hơn 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 kiểm thử ảnh chụp màn hình được xác định trong mô-đun.
- Sửa lỗi: Một số lỗi Compose Renderer và hỗ trợ thêm 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