בדיקת צילום מסך של תצוגה מקדימה

בדיקת צילומי מסך היא דרך יעילה לאמת איך ממשק המשתמש נראה למשתמשים. הכלי לבדיקת צילום המסך של תצוגה מקדימה משלב את הפשטות ואת התכונות של תצוגות מקדימות קומפוזביליות עם טובה יותר בהרצת בדיקות צילום מסך בצד המארח. תצוגה מקדימה של הרכב התכונה 'בדיקת צילום מסך' תוכננה להיות קלה לשימוש כמו תצוגות מקדימות קומפוזביליות.

בדיקת צילום מסך היא בדיקה אוטומטית שמבצעת צילום מסך של קטע של ממשק משתמש ולאחר מכן משווה אותה לתמונת עזר שאושרה בעבר. אם התמונות לא תואמות, הבדיקה נכשלת וייוצר דוח HTML שיעזור לכם להשוות ולמצוא את ההבדלים.

באמצעות הכלי לבדיקת צילומי מסך של תצוגה מקדימה לכתיבה, אתם יכולים:

• לזהות כמה תצוגות מקדימות קומפוזביליות קיימות או חדשות שאתם רוצים להשתמש בהן צילומי מסך.
• אפשר ליצור תמונות עזר מהתצוגות המקדימות הקומפוזביליות האלה.
• להפיק דוח HTML שמזהה את השינויים בתצוגות המקדימות האלה לאחר לערוך שינויים בקוד.
• השתמשו בפרמטרים @Preview, כמו uiMode או fontScale, ובתצוגות מקדימות מרובות כדי לעזור לכם להרחיב את הבדיקות.
• משנים את הבדיקות באמצעות קבוצת המקור החדשה מסוג screenshotTest.

הדרישות

כדי להשתמש בבדיקת צילומי מסך של תצוגה מקדימה של קובץ קובץ, צריך את הדברים הבאים:

• Android Gradle מגרסה 8.5.0-beta01 ואילך.
• Kotlin 1.9.20 ומעלה.

הגדרה

כדי להפעיל את הכלי, יש לבצע את השלבים הבאים:

1. הוספת הגרסה של הפלאגין com.android.compose.screenshot 0.0.1-alpha01 לפרויקט שלך.
1. מוסיפים את הפלאגין לקובץ קטלוג הגרסאות:

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

2. בקובץ build.gradle.kts ברמת המודול, מוסיפים את הפלאגין בקטע בלוק plugins {}:

   plugins {
       ...
       alias(libs.plugins.screenshot)
   }
   

2. מפעילים את המאפיין הניסיוני בפרויקט קובץ gradle.properties.

   android.experimental.enableScreenshotTest=true
   

3. בבלוק android {} בקובץ build.gradle.kts ברמת המודול, מפעילים את הדגל הניסיוני כדי להשתמש בקבוצת המקור screenshotTest ומוודאים שהערך של kotlinCompilerExtensionVersion מוגדר ל-1.5.4 ואילך.

   android {
       ...
       composeOptions {
           kotlinCompilerExtensionVersion = "1.5.4"
       }
       experimentalProperties["android.experimental.enableScreenshotTest"] = true
   }
   

4. חשוב לוודא שהוספתם את יחסי התלות של ui-tooling.
   1. הוסיפו אותה לקטלוג הגרסאות שלכם:

      [libraries]
      androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling"}
      

   2. מוסיפים אותו לקובץ build.gradle.kts ברמת המודול:

      dependencies {
        screenshotTestImplementation(libs.androidx.compose.ui.tooling)
      }
      

הקצאת תצוגות מקדימות קומפוזביליות לשימוש לבדיקות של צילומי מסך

כדי להקצות את התצוגות המקדימות הקומפוזביליות שבהן רוצים להשתמש לבדיקות של צילומי מסך, את התצוגות המקדימות בכיתה. קובץ הכיתה של הבדיקה חייב להיות ממוקם בקבוצת המקור החדשה screenshotTest, לדוגמה app/src/screenshotTest/kotlin/com/google/yourapp/ExamplePreviewScreenshots.kt ({module}/src/screenshotTest/{kotlin|java}/com/your/package).

יש לך אפשרות להוסיף עוד תכנים קומפוזביליים או תצוגות מקדימות, כולל כמה תצוגות מקדימות, ב את הקובץ הזה או קבצים אחרים שנוצרו באותה קבוצת מקור.

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

יצירת תמונות לדוגמה

אחרי שמגדירים כיתה לבדיקה, צריך ליצור תמונות עזר לכל תצוגה מקדימה. תמונות העזר משמשות לזיהוי שינויים בשלב מאוחר יותר, לערוך שינויים בקוד. כדי ליצור תמונות עזר לבדיקות של צילומי המסך בתצוגה המקדימה שאפשר לשלב, מריצים את המשימה הבאה ב-Gradle:

• ב-Linux וב-macOS: ./gradlew updateDebugScreenshotTest (./gradlew {:module:}update{Variant}ScreenshotTest)
• Windows: gradlew updateDebugScreenshotTest (gradlew {:module:}update{Variant}ScreenshotTest)

בסיום המשימה, מוצאים את תמונות העזר ב app/src/debug/screenshotTest/reference ({module}/src/{variant}/screenshotTest/reference).

יצירת דוח בדיקה

אחרי שתמונות העזר קיימות, אפשר להריץ את משימת האימות כדי ליצור צילום מסך חדש ולהשוות אותה לתמונה להפניה:

• ב-Linux וב-macOS: ./gradlew validateDebugScreenshotTest (./gradlew {:module:}validate{Variant}ScreenshotTest)
• Windows: gradlew validateDebugScreenshotTest (gradlew {:module:}validate{Variant}ScreenshotTest)

משימת האימות יוצרת דוח HTML ב {module}/build/reports/screenshotTest/preview/{variant}/index.html

בעיות מוכרות

אפשר למצוא רשימה עדכנית של בעיות ידועות בכלי רכיב למעקב אחר בעיות. אפשר לדווח על משוב או בעיה אחרים דרך אתר המעקב אחר בעיות.

עדכוני גרסה

נתוני גרסה ושינויים בגרסאות השוטפות

0.0.1-alpha06

הגרסה הזו מציגה:

סף ההבדל בתמונה: הגדרת הסף החדשה הזו תאפשר לך שליטה מדויקת יותר בהשוואות בין צילומי מסך. כדי להגדיר, צריך לעדכן את build.gradle.kts:

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

הסף הזה יחול על כל הבדיקות של צילומי מסך שהוגדרו במודול.

• תיקוני באגים: חלק מבאגים בכלי הרינדור של כלי הכתיבה לתמיכה נוספת בכתיבה ריקה
• שיפורי ביצועים: האלגוריתם של ההבדלים בתמונות עודכן כדי להיות מהיר יותר