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

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

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

Compose की झलक दिखाने वाले स्क्रीनशॉट की जांच करने वाले टूल की मदद से, ये काम किए जा सकते हैं:

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

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

कॉम्पोज़ की झलक वाले स्क्रीनशॉट की जांच करने की सुविधा का इस्तेमाल करने के लिए, आपके पास ये चीज़ें होनी चाहिए:

  • Android Gradle 8.5.0-beta01 या इसके बाद का वर्शन.
  • Kotlin 1.9.20 या इसके बाद का वर्शन.

सेटअप

टूल को चालू करने के लिए, यह तरीका अपनाएं:

  1. अपने प्रोजेक्ट में com.android.compose.screenshot प्लग इन, वर्शन 0.0.1-alpha07 जोड़ें.
    1. प्लग इन को अपने वर्शन कैटलॉग की फ़ाइल में जोड़ें:
      [versions]
      agp = "8.5.0-beta01"
      kotlin = "1.9.20"
      ...
      screenshot = "0.0.1-alpha07"
      
      [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. अपने मॉड्यूल-लेवल की build.gradle.kts फ़ाइल के android {} ब्लॉक में, 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)

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

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

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

रिलीज़ से जुड़े अपडेट

मौजूदा वर्शन के लिए रिलीज़ नोट और बदलाव

0.0.1-alpha06

इस रिलीज़ में ये सुविधाएं शामिल हैं:

इमेज में अंतर का थ्रेशोल्ड: इस नई ग्लोबल थ्रेशोल्ड सेटिंग की मदद से, स्क्रीनशॉट की तुलना पर बेहतर तरीके से कंट्रोल किया जा सकता है. कॉन्फ़िगर करने के लिए, अपने मॉड्यूल के build.gradle.kts को अपडेट करें:

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

यह थ्रेशोल्ड, मॉड्यूल में तय किए गए सभी स्क्रीनशॉट टेस्ट पर लागू होगा.

  • गड़बड़ियां ठीक की गईं: Compose रेंडरर की कुछ गड़बड़ियां ठीक की गईं. साथ ही, खाली Compose के लिए सहायता जोड़ी गई
  • परफ़ॉर्मेंस को बेहतर बनाने के लिए किए गए बदलाव: इमेज के अंतर का पता लगाने वाले एल्गोरिदम को तेज़ करने के लिए अपडेट किया गया