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

स्क्रीनशॉट टेस्टिंग, यह पुष्टि करने का एक असरदार तरीका है कि आपका यूज़र इंटरफ़ेस (यूआई) लोगों को कैसा दिखता है. 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 में, IDE के साथ पूरी तरह से इंटिग्रेट किया गया है. इससे आपको आईडीई में ही रेफ़रंस इमेज जनरेट करने, टेस्ट चलाने, और पुष्टि करने से जुड़ी गड़बड़ियों का विश्लेषण करने की सुविधा मिलती है. यहां कुछ मुख्य सुविधाएं दी गई हैं:

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

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

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

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

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

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

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

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

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

सेटअप

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

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

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

    android {
        experimentalProperties["android.experimental.enableScreenshotTest"] = true
    }
    
  3. अपने प्रोजेक्ट में com.android.compose.screenshot प्लगिन का 0.0.1-alpha16 वर्शन जोड़ें.

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

      [versions]
      agp = "9.0.0-rc03"
      kotlin = "2.2.10"
      screenshot = "0.0.1-alpha16"
      
      [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 फ़ंक्शन के बगल में मौजूद गटर आइकॉन पर क्लिक करें. इसके बाद, Run '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, होस्ट-साइड टेस्ट चलाता है. इसमें ज़्यादा मेमोरी की ज़रूरत पड़ सकती है. टेस्ट JVM के लिए, ज़्यादा से ज़्यादा हीप साइज़ को बढ़ाया जा सकता है. इसके लिए, अपनी gradle.properties फ़ाइल में यह प्रॉपर्टी जोड़ें:

android.compose.screenshot.maxHeapSize=4g

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

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

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

रिलीज़ अपडेट

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