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

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

בדיקת צילום מסך היא בדיקה אוטומטית שמבצעת צילום מסך של קטע של ממשק משתמש ולאחר מכן משווה אותה לתמונת עזר שאושרה בעבר. אם התמונות לא תואמות, הבדיקה נכשלת ומפיקה דוח 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

בעיות מוכרות

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