झलक दिखाने वाले स्क्रीनशॉट की टेस्टिंग कंपोज़ करें

स्क्रीनशॉट की जांच करने की सुविधा की मदद से, यह पुष्टि की जा सकती है कि यूज़र इंटरफ़ेस (यूआई) उपयोगकर्ताओं को कैसा दिखता है. Compose Preview Screenshot Testing टूल में, कंपोज़ेबल की झलक देखने की सुविधा की आसानी और फ़ीचर के साथ-साथ, होस्ट-साइड स्क्रीनशॉट टेस्ट चलाने से मिलने वाली ज़्यादा प्रॉडक्टिविटी की सुविधा भी मिलती है. Compose Preview Screenshot Testing को, कंपोज़ेबल की झलक देखने की सुविधा की तरह ही आसानी से इस्तेमाल किया जा सकता है.

स्क्रीनशॉट टेस्ट, अपने-आप होने वाला टेस्ट है. इसमें यूज़र इंटरफ़ेस (यूआई) के किसी हिस्से का स्क्रीनशॉट लिया जाता है. इसके बाद, इसकी तुलना पहले से मंज़ूर की गई रेफ़रंस इमेज से की जाती है. अगर इमेज मेल नहीं खाती हैं, तो टेस्ट फ़ेल हो जाता है. साथ ही, एक एचटीएमएल रिपोर्ट जनरेट होती है. इससे आपको तुलना करने और अंतर ढूंढने में मदद मिलती है.

Compose Preview Screenshot Testing टूल की मदद से, ये काम किए जा सकते हैं:

• मौजूदा या नए कंपोज़ेबल की झलक देखने की सुविधा के लिए, स्क्रीनशॉट टेस्ट बनाने के लिए @PreviewTest का इस्तेमाल करना.
• उन कंपोज़ेबल की झलक देखने की सुविधा से, रेफ़रंस इमेज जनरेट करना.
• कोड में बदलाव करने के बाद, उन झलक में हुए बदलावों की पहचान करने वाली एचटीएमएल रिपोर्ट जनरेट करना.
• @Preview पैरामीटर, जैसे कि uiMode या fontScale, और एक साथ कई झलक देखने की सुविधा का इस्तेमाल करके, अपने टेस्ट को स्केल करना.
• सोर्स सेट के नए screenshotTest की मदद से, अपने टेस्ट को मॉड्यूलर बनाना.

आईडीई इंटिग्रेशन

Compose Preview Screenshot Testing टूल का इस्तेमाल, Gradle के टास्क (updateScreenshotTest और validateScreenshotTest) को मैन्युअल तरीके से चलाकर किया जा सकता है. हालांकि, Android Studio Otter 3 Feature Drop Canary 4 में, आईडीई इंटिग्रेशन की पूरी सुविधा मिलती है. इससे, आईडीई में ही रेफ़रंस इमेज जनरेट की जा सकती हैं, टेस्ट चलाए जा सकते हैं, और पुष्टि करने में हुई गड़बड़ियों का विश्लेषण किया जा सकता है. यहां कुछ अहम सुविधाएं दी गई हैं:

• एडिटर में गटर आइकॉन. अब सोर्स कोड से सीधे टेस्ट चलाए जा सकते हैं या रेफ़रंस इमेज अपडेट की जा सकती हैं. @PreviewTest के साथ एनोटेट किए गए कंपोज़ेबल और क्लास के बगल में, गटर में हरे रंग के रन आइकॉन दिखते हैं.
  • स्क्रीनशॉट टेस्ट चलाना. खास तौर पर, किसी एक फ़ंक्शन या पूरी क्लास के लिए टेस्ट चलाना.
  • रेफ़रंस इमेज जोड़ना या अपडेट करना. चुने गए स्कोप के लिए, खास तौर पर अपडेट फ़्लो ट्रिगर करना.

• रेफ़रंस इमेज को इंटरैक्टिव तरीके से मैनेज करना. रेफ़रंस इमेज को अपडेट करना अब ज़्यादा सुरक्षित और बेहतर है.
  • रेफ़रंस इमेज जनरेट करने का नया डायलॉग. Gradle के टास्क को एक साथ चलाने के बजाय, एक नया डायलॉग आपको यह विज़ुअलाइज़ करने और चुनने की सुविधा देता है कि किन झलक को जनरेट या अपडेट करना है.
  • वैरिएंट की झलक देखना. डायलॉग में, झलक के सभी वैरिएंट (जैसे, लाइट थीम या डार्क थीम या अलग-अलग डिवाइस) अलग-अलग दिखते हैं. इससे, इमेज जनरेट करने से पहले, खास आइटम चुने या हटाए जा सकते हैं.

• टेस्ट के नतीजे और अंतर देखने की सुविधा इंटिग्रेट करना. आईडीई से बाहर निकले बिना नतीजे देखना.
  • रन पैनल को यूनिफ़ाई करना. स्क्रीनशॉट टेस्ट के नतीजे, रन टूल विंडो में दिखते हैं. टेस्ट को क्लास और फ़ंक्शन के हिसाब से ग्रुप किया जाता है. साथ ही, पास या फ़ेल होने का स्टेटस साफ़ तौर पर मार्क किया जाता है.
  • विज़ुअल अंतर देखने का टूल. जब कोई टेस्ट फ़ेल होता है, तो स्क्रीनशॉट टैब में, रेफ़रंस, असल, और अंतर वाली इमेज की तुलना की जा सकती है.
  • ज़्यादा जानकारी वाले एट्रिब्यूट. एट्रिब्यूट टैब में, फ़ेल हुए टेस्ट का मेटाडेटा दिखता है. इसमें मैच होने का प्रतिशत, इमेज के डाइमेंशन, और इस्तेमाल किया गया खास झलक कॉन्फ़िगरेशन (जैसे, uiMode या fontScale) शामिल है.

• टेस्ट के स्कोप को फ़्लेक्सिबल बनाना. अब प्रोजेक्ट व्यू से सीधे, अलग-अलग स्कोप के साथ स्क्रीनशॉट टेस्ट चलाए जा सकते हैं. किसी मॉड्यूल, डायरेक्ट्री, फ़ाइल या क्लास पर राइट क्लिक करके, खास तौर पर उस सिलेक्शन के लिए स्क्रीनशॉट टेस्ट चलाए जा सकते हैं.

ज़रूरी शर्तें

आईडीई इंटिग्रेशन की पूरी सुविधा के साथ, Compose Preview Screenshot Testing का इस्तेमाल करने के लिए, आपके प्रोजेक्ट को ये शर्तें पूरी करनी होंगी:

• Android Studio Panda 1 Canary 4 या इसके बाद वाला वर्शन.
• Android Gradle प्लगिन (एजीपी) का 9.0 या इसके बाद वाला वर्शन.
• Compose Preview Screenshot Testing प्लगिन का 0.0.1-alpha14 या इसके बाद वाला वर्शन.
• Kotlin का 2.2.10 या इसके बाद वाला वर्शन.
• JDK का 17 या इसके बाद वाला वर्शन.
• आपके प्रोजेक्ट के लिए, Compose की सुविधा चालू होनी चाहिए. हमारा सुझाव है कि Compose Compiler Gradle प्लगिन का इस्तेमाल करके, Compose की सुविधा चालू करें.

अगर आपको आईडीई इंटिग्रेशन के बिना, सिर्फ़ Gradle के टास्क का इस्तेमाल करना है, तो ये शर्तें पूरी करनी होंगी:

• Android Gradle प्लगिन (एजीपी) का 8.5.0 या इसके बाद वाला वर्शन.
• Compose Preview Screenshot Testing प्लगिन का 0.0.1-alpha14 या इसके बाद वाला वर्शन.
• Kotlin का 1.9.20 या इसके बाद वाला वर्शन. हमारा सुझाव है कि Kotlin 2.0 या इसके बाद वाला वर्शन इस्तेमाल करें, ताकि Compose Compiler Gradle प्लगिन का इस्तेमाल किया जा सके.
• JDK का 17 या इसके बाद वाला वर्शन.
• आपके प्रोजेक्ट के लिए, Compose की सुविधा चालू होनी चाहिए. हमारा सुझाव है कि Compose Compiler Gradle प्लगिन का इस्तेमाल करके, Compose की सुविधा चालू करें.

सेटअप

इंटिग्रेट किए गए टूल और Gradle के टास्क, दोनों के लिए Compose Preview Screenshot Testing प्लगिन की ज़रूरत होती है. प्लगिन सेट अप करने के लिए, यह तरीका अपनाएं:

1. अपने प्रोजेक्ट की gradle.properties फ़ाइल में, एक्सपेरिमेंट के तौर पर उपलब्ध प्रॉपर्टी चालू करें.

   android.experimental.enableScreenshotTest=true
   

2. मॉड्यूल-लेवल की build.gradle.kts फ़ाइल के android {} ब्लॉक में, screenshotTest सोर्स सेट का इस्तेमाल करने के लिए, एक्सपेरिमेंट के तौर पर उपलब्ध फ़्लैग चालू करें.

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

3. अपने प्रोजेक्ट में, com.android.compose.screenshot प्लगिन का 0.0.1-alpha14 वर्शन जोड़ें.

   1. प्लगिन को वर्शन कैटलॉग फ़ाइल में जोड़ें:

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

   2. मॉड्यूल-लेवल की build.gradle.kts फ़ाइल में, plugins {} ब्लॉक में प्लगिन जोड़ें:

      plugins {
          alias(libs.plugins.screenshot)
      }
      

4. screenshot-validation-api और ui-tooling डिपेंडेंसी जोड़ें.

   1. इन्हें अपने वर्शन कैटलॉग में जोड़ें:

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

   2. इन्हें मॉड्यूल-लेवल की build.gradle.kts फ़ाइल में जोड़ें:

      dependencies {
        screenshotTestImplementation(libs.screenshot.validation.api)
        screenshotTestImplementation(libs.androidx.ui.tooling)
      }
      

स्क्रीनशॉट टेस्ट के लिए, कंपोज़ेबल की झलक देखने की सुविधा तय करना

स्क्रीनशॉट टेस्ट के लिए, कंपोज़ेबल की झलक देखने की सुविधा तय करने के लिए, @PreviewTest एनोटेशन के साथ झलक को मार्क करें. झलक, सोर्स सेट के नए screenshotTest में होनी चाहिए. उदाहरण के लिए:

app/src/screenshotTest/kotlin/com/example/yourapp/ ExamplePreviewScreenshotTest.kt

इस फ़ाइल या उसी सोर्स सेट में बनाई गई अन्य फ़ाइलों में, एक साथ कई झलक देखने की सुविधा के साथ-साथ, ज़्यादा कंपोज़ेबल या झलक जोड़ी जा सकती हैं.

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

रेफ़रंस इमेज जनरेट करना

टेस्ट क्लास सेट अप करने के बाद, हर झलक के लिए रेफ़रंस इमेज जनरेट करनी होंगी. कोड में बदलाव करने के बाद, इन रेफ़रंस इमेज का इस्तेमाल करके, बदलावों की पहचान की जाती है. कंपोज़ेबल की झलक देखने की सुविधा के स्क्रीनशॉट टेस्ट के लिए, रेफ़रंस इमेज जनरेट करने के लिए, आईडीई इंटिग्रेशन या Gradle के टास्क के लिए, इस सेक्शन में दिए गए निर्देशों का पालन करें.

आईडीई में

@PreviewTest फ़ंक्शन के बगल में मौजूद गटर आइकॉन पर क्लिक करें और रेफ़रंस इमेज जोड़ें/अपडेट करें को चुनें. डायलॉग में झलक चुनें और जोड़ें पर क्लिक करें.

Gradle के टास्क की मदद से

Gradle का यह टास्क चलाएं:

• Linux और macOS: ./gradlew updateDebugScreenshotTest (./gradlew :{module}:update{Variant}ScreenshotTest)
• Windows: gradlew updateDebugScreenshotTest (gradlew :{module}:update{Variant}ScreenshotTest)

टास्क पूरा होने के बाद, रेफ़रंस इमेज को app/src/screenshotTestDebug/reference ({module}/src/screenshotTest{Variant}/reference) में ढूंढें.

टेस्ट रिपोर्ट जनरेट करना

रेफ़रंस इमेज मौजूद होने के बाद, आईडीई इंटिग्रेशन या Gradle के टास्क के लिए, इस सेक्शन में दिए गए निर्देशों का पालन करके, टेस्ट रिपोर्ट जनरेट करें.

आईडीई में

@PreviewTest फ़ंक्शन के बगल में मौजूद गटर आइकॉन पर क्लिक करें और 'ScreenshotTests' चलाएं को चुनें.

अगर कोई टेस्ट फ़ेल होता है, तो रन पैनल में टेस्ट के नाम पर क्लिक करें. ज़ूम और पैन के इंटिग्रेट किए गए कंट्रोल का इस्तेमाल करके, इमेज के अंतर की जांच करने के लिए, स्क्रीनशॉट टैब चुनें.

Gradle के टास्क की मदद से

नया स्क्रीनशॉट लेने और उसकी तुलना रेफ़रंस इमेज से करने के लिए, पुष्टि करने वाला टास्क चलाएं:

• Linux और macOS: ./gradlew validateDebugScreenshotTest (./gradlew :{module}:validate{Variant}ScreenshotTest)
• Windows: gradlew validateDebugScreenshotTest (gradlew :{module}:validate{Variant}ScreenshotTest)

पुष्टि करने वाला टास्क, {module}/build/reports/screenshotTest/preview/{variant}/index.html पर एक एचटीएमएल रिपोर्ट बनाता है.

समस्या का हल

Compose Preview Screenshot Testing, होस्ट-साइड टेस्ट चलाता है. इसमें ज़्यादा मेमोरी इस्तेमाल हो सकती है. टेस्ट जेवीएम के लिए, ज़्यादा से ज़्यादा हीप साइज़ बढ़ाया जा सकता है. इसके लिए, gradle.properties फ़ाइल में यह प्रॉपर्टी जोड़ें:

android.compose.screenshot.maxHeapSize=4g

पहले से मालूम समस्याएं

• Kotlin Multiplatform (KMP): आईडीई और प्लगिन, दोनों को सिर्फ़ Android प्रोजेक्ट के लिए डिज़ाइन किया गया है. ये KMP प्रोजेक्ट में, Android के अलावा अन्य टारगेट के साथ काम नहीं करते.

टूल के समस्या ट्रैकर कॉम्पोनेंट में, फ़िलहाल पहले से मालूम समस्याओं की पूरी सूची देखी जा सकती है. सुझाव/राय या शिकायत और समस्याओं के बारे में, समस्या ट्रैकर के ज़रिए बताएं.

रिलीज़ अपडेट

रिलीज़ अपडेट की पूरी सूची देखने के लिए, रिलीज़ नोट देखें.