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

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

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

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

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

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

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

  • Android Gradle प्लगिन 8.5.0-beta01 या इसके बाद का वर्शन.
  • Kotlin 1.9.20 या इसके बाद का वर्शन. हमारा सुझाव है कि Kotlin 2.0 या इसके बाद के वर्शन का इस्तेमाल करें, ताकि Compose Compiler Gradle प्लगिन का इस्तेमाल किया जा सके.
  • JDK 23 या इससे पहले का वर्शन. यह टूल, JDK 24 या उसके बाद के वर्शन के साथ काम नहीं करता है. इसकी वजह यह है कि यह Java Security Manager पर निर्भर करता है. इसे JDK के नए वर्शन में हटा दिया गया है
  • आपके प्रोजेक्ट के लिए, कंपोज़ करने की सुविधा चालू हो. हमारा सुझाव है कि Compose Compiler Gradle प्लगिन का इस्तेमाल करके, Compose की सुविधा चालू करें.

सेटअप

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

  1. अपने प्रोजेक्ट में com.android.compose.screenshot प्लगिन, वर्शन 0.0.1-alpha10 जोड़ें.
    1. प्लगिन को अपने वर्शन कैटलॉग फ़ाइल में जोड़ें:
      [versions]
      agp = "8.11.0-alpha06"
      kotlin = "2.1.20"
      screenshot = "0.0.1-alpha10"
      
      [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 सोर्स सेट का इस्तेमाल किया जा सके.
    android {
        experimentalProperties["android.experimental.enableScreenshotTest"] = true
    }
    
  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 टास्क चलाएं:

  • 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) में ढूंढें.

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

रेफ़रंस इमेज मौजूद होने के बाद, पुष्टि करने वाला टास्क चलाएं. इससे नया स्क्रीनशॉट लिया जाएगा और उसकी तुलना रेफ़रंस इमेज से की जाएगी:

  • 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-alpha10

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

  • इस वर्शन से, आपको झलक वाले सभी फ़ंक्शन को @PreviewTest एनोटेशन के साथ मार्क करना होगा. एनोटेशन के बिना झलकें नहीं दिखाई जाएंगी.

  • रेफ़रंस इमेज डायरेक्ट्री को {module}/src/{variant}/screenshotTest/reference से बदलकर {module}/src/screenshotTest{Variant}/reference कर दिया गया है. ऐसा इसलिए किया जाता है, ताकि जनरेट की गई रेफ़रंस इमेज, प्रोडक्शन कोड का हिस्सा न बनें. साथ ही, यह भी पक्का किया जा सके कि वे अन्य टेस्ट टाइप के डायरेक्ट्री स्ट्रक्चर के मुताबिक हों.

  • {variant}PreviewScreenshotRender टास्क हटा दिया जाता है. इमेज रेंडरिंग को JUnit Test Engine में माइग्रेट किया गया है.

  • update{Variant}ScreenshotTest टास्क में, अपडेट करने से पहले रेंडर की गई नई इमेज की तुलना रेफ़रंस इमेज से की जाएगी. यह सिर्फ़ उन इमेज को अपडेट करेगा जिनमें तय सीमा से ज़्यादा अंतर है. --updateFilter कमांडलाइन फ़्लैग को हटा दिया गया है.

0.0.1-alpha06

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

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

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

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

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