CSS Assert Rule: CSS मधील Assertion टेस्टिंगसाठी एक सर्वसमावेशक मार्गदर्शक

वेब डेव्हलपमेंटच्या गतिमान जगात, तुमच्या CSS ची विश्वसनीयता आणि सुसंगतता सुनिश्चित करणे अत्यंत महत्त्वाचे आहे. जसे प्रकल्प गुंतागुंतीचे होत जातात, तसे मॅन्युअल व्हिज्युअल तपासणी करणे अधिक त्रासदायक आणि त्रुटी-प्रवण बनते. इथेच CSS Assert Rule उपयोगी पडतो, जो थेट तुमच्या स्टाईलशीट्समध्ये असर्शन टेस्टिंगसाठी एक मजबूत यंत्रणा प्रदान करतो. हे सर्वसमावेशक मार्गदर्शक CSS असर्शन टेस्टिंगच्या बारकाव्यांचा शोध घेईल, त्याचे फायदे, अंमलबजावणी तंत्र आणि देखरेख करण्यायोग्य व दृष्यदृष्ट्या सुसंगत वेब ॲप्लिकेशन्स तयार करण्यासाठी सर्वोत्तम पद्धती शोधेल.

CSS Assertion टेस्टिंग म्हणजे काय?

CSS असर्शन टेस्टिंग म्हणजे वेब पेजवरील घटकांना लागू केलेल्या स्टाईल्स अपेक्षित व्हिज्युअल परिणामांशी जुळतात की नाही हे प्रोग्रामॅटिकली तपासण्याची प्रक्रिया आहे. पारंपरिक युनिट टेस्टिंग जे जावास्क्रिप्ट कोडवर लक्ष केंद्रित करते, त्याच्या विपरीत CSS असर्शन टेस्टिंग थेट तुमच्या ॲप्लिकेशनच्या रेंडर केलेल्या स्वरूपाची पडताळणी करते. हे तुम्हाला विशिष्ट घटकांच्या CSS प्रॉपर्टीजबद्दल दावे किंवा अपेक्षा परिभाषित करण्याची आणि त्या अपेक्षा पूर्ण झाल्या आहेत की नाही हे आपोआप तपासण्याची परवानगी देते. जर एखादा दावा अयशस्वी झाला, तर ते अपेक्षित आणि वास्तविक व्हिज्युअल स्थितीत तफावत दर्शवते, ज्यामुळे तुमच्या CSS कोडमधील संभाव्य समस्या हायलाइट होतात.

CSS Assertion टेस्टिंग का वापरावे?

CSS असर्शन टेस्टिंग लागू केल्याने अनेक फायदे मिळतात, विशेषतः मोठ्या आणि गुंतागुंतीच्या प्रकल्पांसाठी:

• व्हिज्युअल रिग्रेशन टाळा: नवीन कोड किंवा रिफॅक्टरिंगमुळे स्टाईल्समध्ये होणारे अनपेक्षित बदल पकडा. हे वेगवेगळ्या ब्राउझर्स आणि डिव्हाइसेसवर व्हिज्युअल सुसंगतता राखण्यास मदत करते. कल्पना करा की एका मोठ्या ई-कॉमर्स साइटवर उत्पादन सूची पेजच्या CSS मध्ये थोडासा बदल केल्याने बटणाच्या स्टाईल्स अनपेक्षितपणे बदलतात. CSS असर्शन टेस्टिंग हे रिग्रेशन वापरकर्त्यांपर्यंत पोहोचण्यापासून पटकन ओळखू शकते आणि प्रतिबंधित करू शकते.
• कोडची देखभालक्षमता सुधारा: CSS मध्ये बदल करताना एक सुरक्षा जाळे प्रदान करते, ज्यामुळे बदल विद्यमान स्टाईल्स खराब करत नाहीत याची खात्री होते. जसजसा तुमचा कोडबेस वाढतो, तसतसे प्रत्येक CSS बदलाचे परिणाम लक्षात ठेवणे कठीण होत जाते. असर्शन टेस्ट्स डॉक्युमेंटेशन म्हणून काम करतात आणि अपघाती स्टाईल ओव्हरराइड्स टाळतात.
• क्रॉस-ब्राउझर सुसंगतता सुनिश्चित करा: स्टाईल्स वेगवेगळ्या ब्राउझर्स आणि आवृत्त्यांमध्ये योग्यरित्या रेंडर होतात की नाही हे तपासा. वेगवेगळे ब्राउझर्स CSS प्रॉपर्टीजचा अर्थ वेगळ्या पद्धतीने लावू शकतात, ज्यामुळे व्हिज्युअल स्वरूपात विसंगती निर्माण होते. असर्शन टेस्टिंग तुम्हाला ब्राउझर-विशिष्ट रेंडरिंग समस्यांची स्पष्टपणे चाचणी घेण्यास आणि त्या सोडवण्यास अनुमती देते. उदाहरणार्थ, एखादे विशिष्ट फॉन्ट रेंडरिंग क्रोममध्ये ठीक दिसते पण फायरफॉक्समध्ये अयोग्यरित्या दिसते.
• डिप्लॉयमेंटमधील आत्मविश्वास वाढवा: प्रोडक्शनमध्ये दृष्यदृष्ट्या तुटलेला कोड तैनात करण्याचा धोका कमी करा. व्हिज्युअल पडताळणी स्वयंचलित करून, तुम्ही तुमच्या CSS च्या स्थिरतेवर आणि अचूकतेवर विश्वास मिळवू शकता. हे विशेषतः जास्त रहदारी असलेल्या वेबसाइट्ससाठी महत्त्वाचे आहे जिथे किरकोळ व्हिज्युअल त्रुटी वापरकर्त्याच्या अनुभवावर परिणाम करू शकतात.
• सहयोगास सुविधा द्या: डेव्हलपर्स आणि डिझायनर्समधील संवाद आणि सहयोग सुधारते. व्हिज्युअल स्वरूपासाठी स्पष्ट अपेक्षा परिभाषित करून, असर्शन टेस्ट्स ॲप्लिकेशनच्या इच्छित लूक आणि फीलची सामायिक समज प्रदान करतात.

CSS Assertion टेस्टिंगचे विविध दृष्टिकोन

CSS असर्शन टेस्टिंगसाठी अनेक दृष्टिकोन आणि साधने वापरली जाऊ शकतात, प्रत्येकाची स्वतःची ताकद आणि कमकुवतता आहे:

• व्हिज्युअल रिग्रेशन टेस्टिंग: हे तंत्र व्हिज्युअल फरक शोधण्यासाठी वेगवेगळ्या वेळी ॲप्लिकेशनच्या स्क्रीनशॉट्सची तुलना करते. BackstopJS, Percy, आणि Applitools सारखी साधने स्क्रीनशॉट्स घेण्याची, त्यांची तुलना करण्याची आणि कोणतीही विसंगती हायलाइट करण्याची प्रक्रिया स्वयंचलित करतात. याचे एक चांगले उदाहरण म्हणजे A/B चाचणी परिस्थिती, जिथे कोणती आवृत्ती चांगली कामगिरी करते हे निर्धारित करण्यासाठी लहान व्हिज्युअल बदल केले जातात. व्हिज्युअल रिग्रेशन टेस्ट्स तुम्हाला नियंत्रण गट बेसलाइनशी जुळतो की नाही हे पटकन तपासण्याची परवानगी देतील.
• प्रॉपर्टी-आधारित असर्शन टेस्टिंग: या दृष्टिकोनात घटकांच्या विशिष्ट CSS प्रॉपर्टीजच्या मूल्यांचा थेट दावा करणे समाविष्ट आहे. Selenium, Cypress, आणि Puppeteer सारखी साधने घटकांच्या कंप्यूटेड स्टाईल्स मिळवण्यासाठी आणि अपेक्षित मूल्यांशी त्यांची तुलना करण्यासाठी वापरली जाऊ शकतात. उदाहरणार्थ, तुम्ही दावा करू शकता की बटणाचा बॅकग्राउंड कलर एक विशिष्ट हेक्स कोड आहे किंवा हेडिंगचा फॉन्ट आकार एक निश्चित पिक्सेल मूल्य आहे.
• असर्शनसह CSS लिंटिंग: stylelint सारखे काही CSS लिंटर्स तुम्हाला कस्टम नियम परिभाषित करण्याची परवानगी देतात जे विशिष्ट स्टाईलिंग नियमांची अंमलबजावणी करतात आणि उल्लंघनांची आपोआप तपासणी करतात. तुम्ही विशिष्ट CSS प्रॉपर्टीज आणि व्हॅल्यूजची अंमलबजावणी करण्यासाठी हे नियम वापरू शकता, प्रभावीपणे तुमच्या लिंटिंग कॉन्फिगरेशनमध्ये थेट असर्शन तयार करू शकता.

CSS Assertion टेस्टिंगची अंमलबजावणी: एक प्रात्यक्षिक उदाहरण

चला Cypress, एक लोकप्रिय जावास्क्रिप्ट टेस्टिंग फ्रेमवर्क, वापरून प्रॉपर्टी-आधारित दृष्टिकोनाने CSS असर्शन टेस्टिंग कसे लागू करावे हे पाहूया:

परिस्थिती: बटणाच्या स्टाईलची पडताळणी करणे

समजा तुमच्याकडे खालील HTML सह एक बटण घटक आहे:

<button class="primary-button">Click Me</button>

आणि संबंधित CSS:

.primary-button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
}

बटणाच्या स्टाईल्सचा दावा करण्यासाठी तुम्ही Cypress चाचणी कशी लिहू शकता ते येथे आहे:

// cypress/integration/button.spec.js

describe('Button Style Test', () => {
  it('should have the correct styles', () => {
    cy.visit('/index.html'); // तुमच्या ॲप्लिकेशन URL ने बदला
    cy.get('.primary-button')
      .should('have.css', 'background-color', 'rgb(0, 123, 255)') // बॅकग्राउंड कलरचा दावा करा
      .should('have.css', 'color', 'rgb(255, 255, 255)') // टेक्स्ट कलरचा दावा करा
      .should('have.css', 'padding', '10px 20px') // पॅडिंगचा दावा करा
      .should('have.css', 'border-radius', '5px'); // बॉर्डर रेडियसचा दावा करा
  });
});

स्पष्टीकरण:

• cy.visit('/index.html'): बटण असलेल्या पेजला भेट देते.
• cy.get('.primary-button'): बटण घटकाला त्याच्या क्लास वापरून निवडते.
• .should('have.css', 'property', 'value'): घटकाकडे दिलेल्या मूल्याहस विशिष्ट CSS प्रॉपर्टी आहे याचा दावा करते. लक्षात घ्या की ब्राउझरद्वारे रंग `rgb()` मूल्ये म्हणून परत केले जाऊ शकतात, म्हणून दाव्यांमध्ये ते विचारात घेतले पाहिजे.

CSS Assertion टेस्टिंगसाठी सर्वोत्तम पद्धती

तुमच्या CSS असर्शन टेस्टिंग धोरणाची प्रभावीता वाढवण्यासाठी, खालील सर्वोत्तम पद्धतींचा विचार करा:

• महत्वपूर्ण स्टाईल्सवर लक्ष केंद्रित करा: वापरकर्त्याच्या अनुभवासाठी महत्त्वपूर्ण असलेल्या किंवा रिग्रेशनची शक्यता असलेल्या स्टाईल्सची चाचणी करण्यास प्राधान्य द्या. यात मूळ घटक, लेआउट घटक किंवा ब्रँडिंग घटकांसाठीच्या स्टाईल्सचा समावेश असू शकतो.
• विशिष्ट दावे लिहा: अनेक प्रॉपर्टीज किंवा घटकांना कव्हर करणारे अत्यंत व्यापक दावे टाळा. त्याऐवजी, तपासण्यासाठी सर्वात महत्त्वाच्या असलेल्या विशिष्ट प्रॉपर्टीजवर लक्ष केंद्रित करा.
• अर्थपूर्ण चाचणी नावे वापरा: वर्णनात्मक चाचणी नावे वापरा जी काय तपासले जात आहे हे स्पष्टपणे दर्शवतात. यामुळे प्रत्येक चाचणीचा उद्देश समजणे आणि अपयशाचे कारण ओळखणे सोपे होईल.
• चाचण्या वेगळ्या ठेवा: प्रत्येक चाचणी इतर चाचण्यांपासून स्वतंत्र असल्याची खात्री करा. हे एका अयशस्वी चाचणीमुळे इतर चाचण्या अयशस्वी होण्यापासून प्रतिबंधित करेल.
• CI/CD सह एकत्रित करा: तुमच्या CSS असर्शन चाचण्यांना तुमच्या सतत एकत्रीकरण आणि सतत उपयोजन (CI/CD) पाइपलाइनमध्ये समाकलित करा. हे सुनिश्चित करेल की प्रत्येक कोड बदलासह चाचण्या आपोआप चालवल्या जातात, संभाव्य व्हिज्युअल रिग्रेशनवर लवकर अभिप्राय मिळतो.
• चाचण्यांचे नियमितपणे पुनरावलोकन आणि अद्यतन करा: जसे तुमचे ॲप्लिकेशन विकसित होते, तसे तुमच्या CSS असर्शन चाचण्यांचे नियमितपणे पुनरावलोकन आणि अद्यतन करा जेणेकरून त्या संबंधित आणि अचूक राहतील. यात स्टाईल्समधील बदलांनुसार दावे अद्यतनित करणे किंवा नवीन वैशिष्ट्ये कव्हर करण्यासाठी नवीन चाचण्या जोडणे समाविष्ट आहे.
• ॲक्सेसिबिलिटीचा विचार करा: व्हिज्युअल स्वरूपाची चाचणी करताना, CSS बदलांचा ॲक्सेसिबिलिटीवर कसा परिणाम होतो याचा विचार करा. कलर कॉन्ट्रास्ट आणि सिमेंटिक HTML तपासण्यासाठी साधनांचा वापर करा. उदाहरणार्थ, बटणाच्या मजकुराचा बॅकग्राउंड रंगाच्या तुलनेत पुरेसा कॉन्ट्रास्ट आहे याची खात्री करा, जेणेकरून WCAG मार्गदर्शक तत्त्वांचे पालन होईल.
• अनेक ब्राउझर्स आणि डिव्हाइसेसवर चाचणी करा: क्रॉस-ब्राउझर सुसंगतता समस्या ओळखण्यासाठी आणि त्या सोडवण्यासाठी तुमच्या चाचण्या विविध ब्राउझर्स आणि डिव्हाइसेसना कव्हर करतात याची खात्री करा. BrowserStack आणि Sauce Labs सारख्या सेवा तुम्हाला विविध प्लॅटफॉर्मवर चाचण्या चालवण्याची परवानगी देतात.

योग्य साधने आणि फ्रेमवर्क निवडणे

यशस्वी CSS असर्शन टेस्टिंगसाठी योग्य साधने आणि फ्रेमवर्क निवडणे महत्त्वाचे आहे. येथे काही लोकप्रिय पर्याय आहेत:

• Cypress: एक जावास्क्रिप्ट टेस्टिंग फ्रेमवर्क जो एंड-टू-एंड टेस्टिंगसाठी उत्कृष्ट समर्थन प्रदान करतो, ज्यात CSS असर्शन टेस्टिंगचा समावेश आहे. त्याचे टाइम-ट्रॅव्हल डीबगिंग वैशिष्ट्य चाचणी दरम्यान कोणत्याही क्षणी ॲप्लिकेशनची स्थिती तपासणे सोपे करते.
• Selenium: एक मोठ्या प्रमाणावर वापरले जाणारे ऑटोमेशन फ्रेमवर्क जे अनेक प्रोग्रामिंग भाषा आणि ब्राउझरला समर्थन देते. हे व्हिज्युअल रिग्रेशन टेस्टिंग आणि प्रॉपर्टी-आधारित असर्शन टेस्टिंग दोन्हीसाठी वापरले जाऊ शकते.
• Puppeteer: एक Node.js लायब्ररी जी हेडलेस क्रोम किंवा क्रोमियम नियंत्रित करण्यासाठी उच्च-स्तरीय API प्रदान करते. हे स्क्रीनशॉट्स घेण्यासाठी, CSS प्रॉपर्टीज तपासण्यासाठी आणि ब्राउझर संवाद स्वयंचलित करण्यासाठी वापरले जाऊ शकते.
• BackstopJS: एक लोकप्रिय व्हिज्युअल रिग्रेशन टेस्टिंग साधन जे स्क्रीनशॉट्स घेण्याची, त्यांची तुलना करण्याची आणि फरक हायलाइट करण्याची प्रक्रिया स्वयंचलित करते.
• Percy: एक क्लाउड-आधारित व्हिज्युअल टेस्टिंग प्लॅटफॉर्म जो व्हिज्युअल बदल शोधण्यासाठी आणि त्यांचे विश्लेषण करण्यासाठी प्रगत वैशिष्ट्ये प्रदान करतो.
• Applitools: आणखी एक क्लाउड-आधारित व्हिज्युअल टेस्टिंग प्लॅटफॉर्म जो सूक्ष्म व्हिज्युअल फरक ओळखण्यासाठी AI-शक्तीवर चालणाऱ्या इमेज कंपॅरिझनचा वापर करतो.
• stylelint: एक शक्तिशाली CSS लिंटर जो विशिष्ट स्टाईलिंग नियमांची अंमलबजावणी करण्यासाठी आणि उल्लंघनांची आपोआप तपासणी करण्यासाठी कस्टम नियमांसह कॉन्फिगर केला जाऊ शकतो.

प्रगत CSS Assertion तंत्र

मूलभूत प्रॉपर्टी दाव्यांच्या पलीकडे, तुम्ही मजबूत आणि सर्वसमावेशक CSS असर्शन चाचण्या तयार करण्यासाठी अधिक प्रगत तंत्रांचा वापर करू शकता:

• डायनॅमिक स्टाईल्सची चाचणी: वापरकर्त्याच्या संवादांवर किंवा ॲप्लिकेशनच्या स्थितीवर आधारित बदलणाऱ्या स्टाईल्स हाताळताना, तुम्ही एपीआय प्रतिसादांचे मॉकिंग करणे किंवा वापरकर्त्याच्या घटनांचे अनुकरण करणे यासारख्या तंत्रांचा वापर करून इच्छित स्टाईल बदल ट्रिगर करू शकता आणि नंतर परिणामी स्टाईल्सचा दावा करू शकता. उदाहरणार्थ, वापरकर्त्याने ड्रॉपडाउन मेनूवर हॉव्हर केल्यावर त्याची स्थिती तपासा.
• मीडिया क्वेरीजची चाचणी: मीडिया क्वेरीजद्वारे लागू केलेल्या स्टाईल्सची चाचणी घेऊन तुमचे ॲप्लिकेशन वेगवेगळ्या स्क्रीन आकारांना आणि डिव्हाइसेसना योग्यरित्या जुळवून घेते की नाही हे तपासा. तुम्ही Cypress सारख्या साधनांचा वापर करून वेगवेगळ्या व्ह्यूपोर्ट आकारांचे अनुकरण करू शकता आणि नंतर परिणामी स्टाईल्सचा दावा करू शकता. लहान स्क्रीनवर नेव्हिगेशन बार मोबाईल-फ्रेंडली हॅम्बर्गर मेनूमध्ये कसा बदलतो हे तपासा.
• ॲनिमेशन आणि ट्रांझिशनची चाचणी: ॲनिमेशन आणि ट्रांझिशन योग्यरित्या आणि सुरळीतपणे कार्य करत आहेत याचा दावा करा. तुम्ही Cypress सारख्या साधनांचा वापर करून ॲनिमेशन पूर्ण होण्याची प्रतीक्षा करू शकता आणि नंतर अंतिम स्टाईल्सचा दावा करू शकता.
• कस्टम मॅचर्स वापरणे: गुंतागुंतीच्या असर्शन लॉजिकला समाविष्ट करण्यासाठी आणि तुमच्या चाचण्या अधिक वाचनीय आणि देखरेख करण्यायोग्य बनवण्यासाठी कस्टम मॅचर्स तयार करा. उदाहरणार्थ, तुम्ही एखाद्या घटकाकडे विशिष्ट ग्रेडियंट बॅकग्राउंड आहे हे तपासण्यासाठी कस्टम मॅचर तयार करू शकता.
• घटक-आधारित चाचणी: घटक-आधारित चाचणी धोरण वापरा जिथे तुम्ही तुमच्या ॲप्लिकेशनचे वैयक्तिक घटक वेगळे करून त्यांची चाचणी घेता. यामुळे तुमच्या चाचण्या अधिक केंद्रित आणि देखरेख करण्यास सोप्या होऊ शकतात. सर्व इंटरॅक्टिव्ह घटक योग्यरित्या कार्य करत आहेत याची खात्री करण्यासाठी पुन्हा वापरता येण्याजोग्या डेट पिकर घटकाची चाचणी करण्याचा विचार करा.

CSS Assertion टेस्टिंगचे भविष्य

CSS असर्शन टेस्टिंगचे क्षेत्र सतत विकसित होत आहे, आधुनिक वेब डेव्हलपमेंटच्या आव्हानांना तोंड देण्यासाठी नवीन साधने आणि तंत्रे उदयास येत आहेत. जसजसे वेब ॲप्लिकेशन्स अधिक गुंतागुंतीचे आणि दृष्यदृष्ट्या समृद्ध होत आहेत, तसतशी मजबूत CSS टेस्टिंगची गरज वाढतच जाईल.

CSS असर्शन टेस्टिंगमधील काही संभाव्य भविष्यातील ट्रेंडमध्ये हे समाविष्ट आहे:

• AI-शक्तीवर चालणारे व्हिज्युअल टेस्टिंग: व्हिज्युअल टेस्टिंगची अचूकता आणि कार्यक्षमता सुधारण्यासाठी कृत्रिम बुद्धिमत्तेचा (AI) वापर. AI चा वापर किरकोळ फॉन्ट रेंडरिंगमधील फरकांसारखे असंबद्ध व्हिज्युअल फरक ओळखण्यासाठी आणि दुर्लक्षित करण्यासाठी आणि सर्वात महत्त्वाच्या व्हिज्युअल बदलांवर लक्ष केंद्रित करण्यासाठी केला जाऊ शकतो.
• डिक्लेरेटिव्ह CSS टेस्टिंग: CSS टेस्टिंगसाठी अधिक डिक्लेरेटिव्ह दृष्टिकोनांचा विकास, जिथे तुम्ही व्हिज्युअल स्वरूपासाठी तुमच्या अपेक्षा अधिक संक्षिप्त आणि मानवी-वाचनीय स्वरूपात परिभाषित करू शकता.
• डिझाइन सिस्टम्ससह एकत्रीकरण: CSS टेस्टिंग साधने आणि डिझाइन सिस्टम्स यांच्यात घट्ट एकत्रीकरण, ज्यामुळे तुमचे ॲप्लिकेशन डिझाइन सिस्टम मार्गदर्शक तत्त्वांचे पालन करते की नाही हे आपोआप तपासता येईल.
• घटक लायब्ररींचा वाढता अवलंब: पूर्व-निर्मित घटक लायब्ररींचा वाढता वापर ज्यात त्यांच्या स्वतःच्या CSS असर्शन चाचण्यांचा संच असतो, ज्यामुळे डेव्हलपर्सना सुरवातीपासून चाचण्या लिहिण्याची गरज कमी होते.

निष्कर्ष

तुमच्या वेब ॲप्लिकेशन्सची विश्वसनीयता, सुसंगतता आणि देखभालक्षमता सुनिश्चित करण्यासाठी CSS असर्शन टेस्टिंग ही एक आवश्यक प्रथा आहे. एक सर्वसमावेशक CSS टेस्टिंग धोरण लागू करून, तुम्ही व्हिज्युअल रिग्रेशन टाळू शकता, कोडची गुणवत्ता सुधारू शकता आणि तुमच्या डिप्लॉयमेंटमधील आत्मविश्वास वाढवू शकता. तुम्ही व्हिज्युअल रिग्रेशन टेस्टिंग किंवा प्रॉपर्टी-आधारित असर्शन टेस्टिंग वापरण्याचे निवडले तरी, महत्त्वाचे म्हणजे महत्त्वपूर्ण स्टाईल्सची चाचणी करण्यास प्राधान्य देणे, विशिष्ट दावे लिहिणे आणि तुमच्या चाचण्या तुमच्या CI/CD पाइपलाइनमध्ये समाकलित करणे.

जसजसे वेब विकसित होत आहे, तसतसे उच्च-गुणवत्तेचे वापरकर्ता अनुभव देण्यासाठी CSS असर्शन टेस्टिंग आणखी महत्त्वाचे होईल. ही तंत्रे आणि साधने स्वीकारून, तुम्ही खात्री करू शकता की तुमचे वेब ॲप्लिकेशन्स सर्व ब्राउझर्स आणि डिव्हाइसेसवर उद्देशानुसार दिसतात आणि कार्य करतात.