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 trong Compose Preview 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 lợi ích về năng suất khi chạy các bài 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 Compose Preview được thiết kế để dễ sử dụng như bản xem trước thành phần kết hợp.
Bài kiểm thử ảnh chụp màn hình là một bài kiểm thử tự động chụp ảnh màn hình của một phần giao diện người dùng, sau đó so sánh ảnh chụp màn hình đó với một hình ảnh tham khảo đã được phê duyệt trước đó. Nếu hình ảnh không khớp, bài kiểm thử sẽ không đạt và tạo ra 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 Compose Preview, bạn có thể:
- Sử dụng
@PreviewTestđể tạo bài 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ừ những 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 những bản xem trước đó sau khi bạn thực hiện thay đổi mã.
- Sử dụng các tham số
@PreviewnhưuiModehoặcfontScalevà nhiều bản xem trước để giúp bạn mở rộng quy mô kiểm thử. - Chia nhỏ các bài kiểm thử bằng nhóm tài nguyên
screenshotTestmới.
Tích hợp IDE
Mặc dù bạn có thể sử dụng công cụ Kiểm thử ảnh chụp màn hình trong Compose Preview bằng cách chạy các tác vụ Gradle cơ bản (updateScreenshotTest và validateScreenshotTest) theo cách thủ công, nhưng Android Studio Otter 3 Feature Drop Canary 4 giới thiệu tính năng tích hợp IDE đầy đủ. Điều này cho phép bạn tạo hình ảnh tham chiếu, chạy kiểm thử và phân tích lỗi xác thực hoàn toàn trong IDE. Dưới đây là một số tính năng chính:
- Biểu tượng trong rãnh trong trình chỉnh sửa. Giờ đây, bạn có thể chạy kiểm thử hoặc cập nhật hình ảnh tham chiếu trực tiếp từ mã nguồn. Các biểu tượng chạy màu xanh lục xuất hiện trong rãnh bên cạnh các thành phần kết hợp và lớp được chú giải bằng
@PreviewTest.- Chạy kiểm thử ảnh chụp màn hình. Thực thi kiểm thử dành riêng cho một hàm hoặc cho toàn bộ lớp.
- Thêm hoặc cập nhật hình ảnh tham chiếu. Kích hoạt quy trình cập nhật dành riêng cho phạm vi đã chọn.
- Quản lý hình ảnh tham chiếu tương tác. Việc cập nhật hình ảnh tham chiếu giờ đây an toàn và chi tiết hơn.
- Hộp thoại tạo hình ảnh tham khảo mới. Thay vì chạy một tác vụ Gradle hàng loạt, một hộp thoại mới cho phép bạn hình dung và chọn chính xác những bản xem trước cần tạo hoặc cập nhật.
- Các biến thể xem trước. Hộp thoại liệt kê riêng từng biến thể xem trước (chẳng hạn như giao diện sáng hoặc giao diện tối, hoặc các thiết bị khác nhau), cho phép bạn chọn hoặc xoá các mục cụ thể trước khi tạo hình ảnh.
- Kết quả kiểm thử và trình xem khác biệt được tích hợp. Xem kết quả mà không cần rời khỏi IDE.
- Bảng điều khiển chạy hợp nhất. Kết quả kiểm thử ảnh chụp màn hình xuất hiện trong cửa sổ công cụ Run (Chạy) tiêu chuẩn. Các bài kiểm thử được nhóm theo lớp và hàm, với trạng thái đạt hoặc không đạt được đánh dấu rõ ràng.
- Công cụ khác biệt trực quan. Khi một bài kiểm thử không đạt, thẻ Screenshot (Ảnh chụp màn hình) cho phép bạn so sánh hình ảnh Reference (Tham chiếu), Actual (Thực tế) và Diff (Khác biệt) cạnh nhau.
- Thuộc tính chi tiết. Thẻ Attributes (Thuộc tính) cung cấp siêu dữ liệu về các bài kiểm thử không đạt, bao gồm tỷ lệ phần trăm khớp, kích thước hình ảnh và cấu hình xem trước cụ thể được sử dụng (ví dụ:
uiModehoặcfontScale).
- Phạm vi kiểm thử linh hoạt. Giờ đây, bạn có thể thực thi các bài kiểm thử ảnh chụp màn hình với nhiều phạm vi trực tiếp từ Project View (Chế độ xem dự án). Nhấp chuột phải vào một mô-đun, thư mục, tệp hoặc lớp để chạy các bài kiểm thử ảnh chụp màn hình dành riêng cho lựa chọn đó.
Yêu cầu
Để sử dụng tính năng Kiểm thử ảnh chụp màn hình trong Compose Preview thông qua tính năng tích hợp IDE đầy đủ, dự án của bạn phải đáp ứng các yêu cầu sau:
- Android Studio Panda 1 Canary 4 trở lên.
- Trình bổ trợ Android cho Gradle (AGP) phiên bản 9.0 trở lên.
- Trình bổ trợ Kiểm thử ảnh chụp màn hình trong Compose Preview phiên bản 0.0.1-alpha14 trở lên.
- Kotlin phiên bản 2.2.10 trở lên.
- JDK phiên bản 17 trở lên.
- Đã bật Compose cho dự án của bạn. Bạn nên bật Compose bằng trình bổ trợ Gradle của Trình biên dịch Compose.
Nếu chỉ muốn sử dụng các tác vụ Gradle cơ bản mà không cần tích hợp IDE, thì các yêu cầu như sau:
- Trình bổ trợ Android cho Gradle (AGP) phiên bản 8.5.0 trở lên.
- Trình bổ trợ Kiểm thử ảnh chụp màn hình trong Compose Preview phiên bản 0.0.1-alpha14 trở lên.
- Kotlin phiên bản 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 của Trình biên dịch Compose.
- JDK phiên bản 17 trở lên.
- Đã bật Compose cho dự án của bạn. Bạn nên bật Compose bằng trình bổ trợ Gradle của Trình biên dịch Compose.
Thiết lập
Cả công cụ tích hợp và các tác vụ Gradle cơ bản đều dựa vào trình bổ trợ Kiểm thử ảnh chụp màn hình trong Compose Preview. Để thiết lập trình bổ trợ, hãy làm theo các bước sau:
Bật thuộc tính thử nghiệm trong tệp
gradle.propertiescủa dự án.android.experimental.enableScreenshotTest=trueTrong 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ênscreenshotTest.android { experimentalProperties["android.experimental.enableScreenshotTest"] = true }Thêm trình bổ trợ
com.android.compose.screenshot, phiên bản0.0.1-alpha14và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 = "9.0.0-rc03" kotlin = "2.1.20" screenshot = "0.0.1-alpha14" [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) }
Thêm các phần phụ thuộc
screenshot-validation-apivàui-tooling.Thêm các phần phụ thuộc này 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 phần phụ thuộc 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 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 đánh dấu các bản xem trước bằng chú giải @PreviewTest. Các 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 nhiều thành phần kết hợp hoặc bản xem trướ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.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 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 thực hiệ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 trong bản xem trước thành phần kết hợp, hãy làm theo hướng dẫn trong phần này để tích hợp IDE hoặc cho các tác vụ Gradle.
Trong IDE
Nhấp vào biểu tượng trong rãnh bên cạnh một hàm @PreviewTest rồi chọn Add/Update Reference Images (Thêm/Cập nhật hình ảnh tham chiếu). Chọn các bản xem trước trong hộp thoại rồi nhấp vào Add (Thêm).
Với các tác vụ Gradle
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 tạo báo cáo kiểm thử bằng cách làm theo hướng dẫn trong phần này để tích hợp IDE hoặc cho các tác vụ Gradle.
Trong IDE
Nhấp vào biểu tượng trong rãnh bên cạnh một hàm @PreviewTest rồi chọn Run 'ScreenshotTests' (Chạy "ScreenshotTests").
Nếu một bài kiểm thử không đạt, hãy nhấp vào tên bài kiểm thử trong bảng điều khiển Run (Chạy). Chọn thẻ Screenshot (Ảnh chụp màn hình) để kiểm tra sự khác biệt về hình ảnh bằng cách sử dụng các chế độ điều khiển thu phóng và di chuyển được tích hợp.
Với các tác vụ Gradle
Chạy tác vụ xác thực để chụp ảnh màn hình mới và so sánh với hình ảnh tham khảo:
- Linux và macOS:
./gradlew validateDebugScreenshotTest(./gradlew :{module}:validate{Variant}ScreenshotTest) - Windows:
gradlew validateDebugScreenshotTest(gradlew :{module}:validate{Variant}ScreenshotTest)
Nhiệm vụ xác minh tạo một báo cáo HTML tại {module}/build/reports/screenshotTest/preview/{variant}/index.html.
Vấn đề đã biết
- Kotlin Multiplatform (KMP): Cả IDE và trình bổ trợ cơ bản đều được thiết kế dành riêng cho các dự án Android. Chúng không hỗ trợ các mục tiêu không phải Android trong các dự án KMP.
Bạn có thể tìm thấy danh sách đầy đủ các vấn đề đã biết hiện tại trong thành phần công cụ theo dõi lỗi . Hãy 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
Để xem danh sách đầy đủ các nội dung cập nhật trong bản phát hành, hãy xem ghi chú phát hành.