Antigravity (AGY) CLI, BrowserMCP, Playwright, और ब्राउज़र एजेंट की मदद से, यूज़र इंटरफ़ेस (यूआई) की टेस्टिंग को ऑटोमेट करना

1. परिचय

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

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

इस कोडलैब में, हम एजेंट की क्षमताओं और BrowserMCP जैसे मल्टीमॉडल एमसीपी टूल के साथ-साथ Antigravity CLI का इस्तेमाल करने का तरीका जानेंगे. आपको यह भी पता चलेगा कि नैचुरल लैंग्वेज का इस्तेमाल करके, यूज़र इंटरफ़ेस (यूआई) के ऑटोमेटेड टेस्ट कैसे बनाए और चलाए जाते हैं. इससे यह भी पता चलेगा कि एजेंटिक टूल, मुश्किल कामों को कैसे मैनेज कर सकते हैं और डेवलपर के तौर पर आपको बेहतर सुविधाएं कैसे दे सकते हैं.

इस कोडलैब में, यूज़र इंटरफ़ेस (यूआई) ऑटोमेशन और ब्राउज़र रिमोट कंट्रोल के खास इस्तेमाल के उदाहरणों पर फ़ोकस किया गया है. हालांकि, इसके बुनियादी सिद्धांत और उनसे मिलने वाले फ़ायदों के बारे में जानना ज़्यादा ज़रूरी है. एजेंट को लोकल सीएलआई और एमसीपी सर्वर का इस्तेमाल करना सिखाकर, हम ऐसे जटिल वर्कफ़्लो को सौंप सकते हैं जिन्हें हम खुद नहीं कर सकते. ऐसा इसलिए, क्योंकि हमारे पास उन्हें पूरा करने के लिए समय या विशेषज्ञता नहीं होती.

आपको क्या सीखने को मिलेगा

• Antigravity CLI क्या है और यह Antigravity के इकोसिस्टम में कैसे काम करता है.
• मॉडल कॉन्टेक्स्ट प्रोटोकॉल (एमसीपी) क्या है और यह गेम चेंजर क्यों है.
• BrowserMCP, एआई एजेंट को वेब ब्राउज़र कंट्रोल करने की सुविधा कैसे देता है.
• Antigravity CLI से, यूज़र इंटरफ़ेस (यूआई) की ऑटोमेटेड जांच कैसे की जाती है.
• एजेंट की क्षमताओं और उनके फ़ायदों को समझना.
• किसी एजेंट को Playwright का इस्तेमाल करने के बारे में सिखाना.
• Antigravity में पहले से मौजूद ब्राउज़र एजेंट के बारे में जानकारी.
• ब्राउज़र कंट्रोल के लिए इस्तेमाल के अन्य उदाहरण.

आपको क्या करना होगा

इस कोडलैब में, Antigravity CLI, एमसीपी टूल, एजेंट स्किल, और React डेमो ऐप्लिकेशन का इस्तेमाल किया गया है.

आपको:

• अपना डेवलपमेंट एनवायरमेंट सेट अप करें.
• उस डेमो ऐप्लिकेशन को एक्सप्लोर करें जिसकी जांच करनी है.
• BrowserMCP के ज़रिए ऐप्लिकेशन से इंटरैक्ट करने के लिए, Antigravity CLI का इस्तेमाल करें.
• अपने एजेंट को, एजेंट स्किल के साथ Playwright का इस्तेमाल करने का तरीका सिखाएं.

2. Antigravity का नेटवर्क

यह कोडलैब, Antigravity CLI का नया वर्शन है. यह लैब के Gemini CLI के पुराने वर्शन की जगह लेता है, ताकि Google के नए टूल के साथ काम कर सके.

मई 2026 में, Google ने Antigravity का नया सुइट लॉन्च किया. यह Antigravity का एक बड़ा बदलाव था. इसे इन चार प्रॉडक्ट में बांटा गया था:

• Antigravity 2.0, जो अब आपके डेस्कटॉप पर एजेंट-फ़र्स्ट "बिल्डर" एनवायरमेंट है. खास तौर पर, इसमें कोई आईडीई शामिल नहीं है. इसके बजाय, अब हम सिर्फ़ एजेंट मैनेजर से इंटरैक्ट करते हैं. इस प्लैटफ़ॉर्म का मकसद, एजेंट का इस्तेमाल करके "आइडिया से प्रॉडक्ट" बनाने के दौर की शुरुआत करना है. इसके लिए, हमें कोड के बारे में चिंता करने की ज़रूरत नहीं है. कोडिंग के बैकग्राउंड से न आने वाले कई बिल्डर को यह सुविधा पसंद आएगी.
• Antigravity IDE, जो हमें VS Code जैसा कोडिंग एनवायरमेंट देता है. यह Antigravity एजेंट हार्नेस के साथ काम करता है. यहां हम एजेंट की मदद से डेवलपमेंट कर सकते हैं. साथ ही, हमें हमेशा कोड दिखता है. कोडर को यहां का माहौल काफ़ी पसंद आएगा.
• Antigravity SDK, जो आपको Antigravity को बेहतर बनाने वाले टूल और सुविधाओं का ऐक्सेस देता है. हालांकि, इसे Python Agent SDK के तौर पर उपलब्ध कराया जाता है. google.antigravity से इंपोर्ट करके, हम प्रोग्राम के हिसाब से Antigravity की क्षमताओं का फ़ायदा उठा सकते हैं.
• Antigravity CLI, जो Gemini CLI का अगला वर्शन है. Gemini मॉडल से इंटरैक्ट करने के लिए, अब भी टर्मिनल-फ़र्स्ट एनवायरमेंट का इस्तेमाल किया जाता है. हालांकि, Antigravity का नया सीएलआई, Go में बनाया गया है. इसे इस्तेमाल करने पर आपको पता चल जाएगा कि यह Gemini सीएलआई से ज़्यादा तेज़ है. यह स्टार्टअप के दौरान और सामान्य इस्तेमाल के दौरान, दोनों ही स्थितियों में ज़्यादा तेज़ है. यह Antigravity 2.0 और आईडीई की तरह ही एजेंट "हार्नेस" का इस्तेमाल करता है. इससे Antigravity सुइट में सामान्य सेटिंग और कॉन्फ़िगरेशन की अनुमति मिलती है.

हालांकि, इस लैब में Antigravity CLI का इस्तेमाल करने पर फ़ोकस किया गया है, लेकिन इस लैब में मौजूद सभी टास्क, Agy IDE या Agy 2.0 की मदद से भी किए जा सकते हैं.

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

इससे पहले कि हम इस बारे में ज़्यादा जानकारी दें, आइए पक्का कर लें कि आपके पास सभी ज़रूरी चीज़ें हों.

टूल

इस लैब में यह माना गया है कि आपके पास पहले से ही ये चीज़ें मौजूद हैं:

• Chrome ब्राउज़र
• Node.js
• Antigravity CLI
• Git

Antigravity सीएलआई का इस्तेमाल करने के लिए, आपको Google से पुष्टि करनी होगी. पहली बार agy लॉन्च करने पर, यह आपको डिफ़ॉल्ट वेब ब्राउज़र के ज़रिए Google खाते से साइन इन करने के लिए अपने-आप प्रॉम्प्ट करेगा. इस विकल्प के साथ, Gemini के इस्तेमाल के लिए काफ़ी ज़्यादा मुफ़्त कोटा मिलता है. इसके लिए, Google Cloud प्रोजेक्ट की ज़रूरत नहीं होती. अगर आपके पास Gemini API पासकोड या Google Cloud प्रोजेक्ट है, तो इसे भी कॉन्फ़िगर किया जा सकता है.

इन निर्देशों में यह माना गया है कि आप Linux (या WSL) या macOS एनवायरमेंट में काम कर रहे/रही हैं. अगर आप Windows का इस्तेमाल कर रहे हैं, तो WSL का इस्तेमाल करके इन निर्देशों का पालन किया जा सकता है.

(ध्यान दें कि BrowserMCP, Google Cloud Shell से काम नहीं करेगा. ऐसा इसलिए, क्योंकि यह सिर्फ़ उसी मशीन पर चल रहे लोकल ब्राउज़र से कनेक्ट होगा.)

डेवलपमेंट एनवायरमेंट सेट अप करना

मैंने GitHub पर एक डेमो रेपो बनाया है. इसमें एक सैंपल ऐप्लिकेशन शामिल है. इसका इस्तेमाल हम यूज़र इंटरफ़ेस (यूआई) की जांच के लिए कर सकते हैं. इसे क्लोन करने के लिए, अपने लोकल टर्मिनल से यह कमांड चलाएं:

git clone https://github.com/derailed-dash/agentic-ui-testing
cd agentic-ui-testing

इसमें एक Makefile है, ताकि डेमो ऐप्लिकेशन लॉन्च करने के लिए एनवायरमेंट को आसानी से सेट अप किया जा सके. आइए, इसे चलाकर अपने एनवायरमेंट को शुरू करें:

make install

# Or if you don't have make
npm install --prefix demo-app

4. हमारा डेमो ऐप्लिकेशन

आज हम जिस ऐप्लिकेशन की टेस्टिंग कर रहे हैं वह The Dazbo Omni-Dash है. यह सुरक्षा टेलीमेट्री को मैनेज करने के लिए, डार्क थीम वाला एक फ़्यूचरिस्टिक डैशबोर्ड है. (हां, इसे वाइब कोडिंग की मदद से बनाया गया है!)

यह ऐप्लिकेशन क्यों?

इसे असली जैसी टेस्टिंग की सुविधा देने के लिए बनाया गया है. इसमें ये सुविधाएं शामिल हैं:

• नकली पुष्टि: यह एक ऐसा लॉगिन फ़्लो है जिसमें खास क्रेडेंशियल की ज़रूरत होती है.
• डाइनैमिक कॉन्टेंट: टेलीमेट्री कार्ड और सुरक्षा लॉग, जो रीयल-टाइम डेटा को सिम्युलेट करते हैं.
• इंटरैक्टिव स्टेट: नेविगेशन मेन्यू और फ़ॉर्म इनपुट, जो उपयोगकर्ता की कार्रवाई के आधार पर बदलते हैं.
• मॉडर्न टेक्नोलॉजी: इसे React और Vite का इस्तेमाल करके बनाया गया है, ताकि यह तेज़ी से काम करे और उपयोगकर्ता को बेहतर अनुभव मिले.

ऐप्लिकेशन लॉन्च करना

ऐप्लिकेशन शुरू करने के लिए, बस यह कमांड चलाएं:

make dev

# Or if you don't have make
npm run dev --prefix demo-app

डेवलपमेंट सर्वर बहुत तेज़ी से शुरू होना चाहिए. साथ ही, ऐप्लिकेशन http://localhost:5173 पर उपलब्ध होगा.

हम लिंक पर क्लिक करके, ऐप्लिकेशन को अपने ब्राउज़र में खोल सकते हैं. इस प्रोसेस को अपने टर्मिनल में चलने दें. हम टर्मिनल की अगली कमांड को अलग टर्मिनल सेशन में लागू करेंगे.

5. यूज़र इंटरफ़ेस (यूआई) की जांच करने से जुड़ी चुनौती

पारंपरिक यूज़र इंटरफ़ेस (यूआई) टेस्टिंग को सही तरीके से करना बहुत मुश्किल होता है. साथ ही, इसे बनाए रखना और भी मुश्किल होता है. आम तौर पर, इन समस्याओं का सामना करना पड़ता है:

• सीखने में ज़्यादा समय लगता है: डेवलपर को किसी बुनियादी इंटरैक्शन को ऑटोमेट करने के लिए, डोमेन के हिसाब से मुश्किल भाषाओं और फ़्रेमवर्क से जुड़ी खास बातों (जैसे, Selenium या Playwright) को समझने में बहुत ज़्यादा समय लगाना पड़ता है.
• ब्रिटल सिलेक्टर और ऑटोमेशन: पारंपरिक स्क्रिप्ट, डीओएम स्ट्रक्चर (जैसे कि div > div > button) या खास टेक्स्ट लेबल पर निर्भर करती हैं. अगर "लॉग आउट करें" बटन का नाम बदलकर "लॉग ऑफ़ करें" कर दिया जाए, तो क्या होगा? या किसी बटन को किसी दूसरे मेन्यू में ले जाया जाए? या अपने एचटीएमएल के स्ट्रक्चर में बदलाव किया जाए? ऐसा करने पर, पारंपरिक टेस्टिंग टूल काम नहीं करेंगे. इससे स्क्रिप्ट को लगातार बनाए रखना होगा.
• "फ़्लेकीनेस" की जांच करें: ऐसे टेस्ट जो समय से जुड़ी समस्याओं, रेस कंडीशन या धीरे-धीरे लोड होने वाली ऐसेट की वजह से, एक मिनट में पास हो जाते हैं और अगले मिनट में फ़ेल हो जाते हैं.
• एनवायरमेंट पैरिटी: ऐप्लिकेशन की ऐसी स्थितियों से जूझना जिन्हें दोहराना मुश्किल होता है. साथ ही, टेस्ट डेटा को हटाने में ज़्यादा समय लगता है.

इरादा बनाम लागू करना

इन समस्याओं को हल करने के लिए, हमें एक ऐसा तरीका चाहिए जिससे हम यह जांच कर सकें कि डेवलपर का मकसद क्या है, न कि वह किस तरह से काम कर रहा है.

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

6. एमसीपी की मदद से

मॉडल कॉन्टेक्स्ट प्रोटोकॉल (एमसीपी) एक ओपन स्टैंडर्ड है. इससे एआई मॉडल और एजेंट, बाहरी टूल, एपीआई, और डेटा के साथ इंटरैक्ट कर सकते हैं. इसे एक यूनिवर्सल अडैप्टर के तौर पर समझें. यह मॉडल और एजेंट को उन टूल को ढूंढने और इस्तेमाल करने की अनुमति देता है जिन्हें ऐक्सेस करने की अनुमति उसके पास है.

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

जब कोई उपयोगकर्ता नैचुरल लैंग्वेज में कमांड देता है, जैसे कि "localhost:5173 पर जाएं, ‘admin' के तौर पर लॉगिन करें, और सबमिट बटन पर क्लिक करें", तो एलएलएम उपलब्ध सुविधाओं का पता लगाता है. इसके बाद, किसी टूल को चालू करने के लिए स्ट्रक्चर्ड अनुरोध जनरेट करता है. एमसीपी क्लाइंट, अनुवादक के तौर पर काम करता है. यह इस अनुरोध को एमसीपी सर्वर को भेजता है. एमसीपी सर्वर, कार्रवाई करता है या डेटा फ़ेच करता है और मॉडल को कॉन्टेक्स्ट वापस भेजता है. इससे एआई को अपने-आप कार्रवाई करने की सुविधा मिलती है. इसके लिए, डेवलपर को खास एक्ज़ीक्यूशन पाथ को हार्ड-कोड करने की ज़रूरत नहीं होती.

एमसीपी, एक यूनिवर्सल स्टैंडर्ड बनाता है. इसे अक्सर "एआई ऐप्लिकेशन के लिए यूएसबी-सी" के तौर पर बताया जाता है. इससे, पहले से मौजूद कॉम्पोनेंट को बार-बार इस्तेमाल करने की सुविधा मिलती है. डेवलपर, एमसीपी सर्वर को एक बार बना सकते हैं. इसके बाद, एमसीपी के साथ काम करने वाला कोई भी एआई होस्ट तुरंत इससे कनेक्ट हो सकता है. इससे, M x N इंटिग्रेशन की समस्या खत्म हो जाती है. अब आपको हर प्लैटफ़ॉर्म के लिए, कस्टम एपीआई ब्रिज बनाने की ज़रूरत नहीं है. इसके बजाय, GitHub, Slack, डेटाबेस वगैरह जैसी सामान्य सेवाओं के लिए, पहले से बने ओपन-सोर्स एमसीपी सर्वर के नेटवर्क का फ़ायदा उठाया जा सकता है. इन्हें सीधे तौर पर अपने एजेंटिक वर्कफ़्लो में प्लग किया जा सकता है. मॉड्यूलर और प्लग-एंड-प्ले आर्किटेक्चर की वजह से, अगर बाद में एलएलएम की सेवा देने वाली कंपनियों को बदला जाता है या टूल अपग्रेड किए जाते हैं, तो आपके इंटिग्रेशन के मुख्य इन्फ़्रास्ट्रक्चर में कोई बदलाव नहीं होता.

7. BrowserMCP की मदद से ऑटोमेशन

BrowserMCP क्या है?

आज हम इस टूल का इस्तेमाल करेंगे. BrowserMCP, एक एमसीपी सर्वर है. यह एआई एजेंट को "आंखें" और "हाथ" देता है, ताकि वह वेब ब्राउज़र के साथ इंटरैक्ट कर सके. कम शब्दों में कहें, तो यह ब्राउज़र के साथ इंसानों के इंटरैक्शन की नकल करता है. यह ओपन सोर्स है. GitHub रिपॉज़िटरी को यहां देखा जा सकता है. BrowserMCP से जुड़े मुख्य दस्तावेज़ यहां देखें.

यहां इसकी कुछ सुविधाएं दी गई हैं:

• यह यूआरएल पर जा सकता है.
• यह DOM की जांच कर सकता है.
• यह बटन पर क्लिक कर सकता है और फ़ॉर्म में टेक्स्ट टाइप कर सकता है.
• इसमें खींचकर छोड़ने की सुविधा होती है.
• यह ब्राउज़र कंसोल लॉग पढ़ सकता है.
• यह तेज़ है: ऑटोमेशन, आपके कंप्यूटर पर ही होता है.

Browser MCP इंस्टॉल करना

BrowserMCP का इस्तेमाल करने के लिए, आपको ये दो काम करने होंगे:

1. BrowserMCP एक्सटेंशन को Chrome या Chromium पर आधारित किसी भी ब्राउज़र में इंस्टॉल करें.
2. Antigravity कॉन्फ़िगरेशन में, एमसीपी सर्वर को मैन्युअल तरीके से कॉन्फ़िगर करें.

एक्सटेंशन इंस्टॉल करने के लिए, यहाँ दिए गए निर्देशों का पालन करें. इसमें कुछ ही सेकंड लगते हैं. इंस्टॉल हो जाने के बाद, एक्सटेंशन में "कनेक्ट करें" पर क्लिक करें, ताकि आपका एजेंट मौजूदा टैब को कंट्रोल कर सके. (ज़ाहिर है, आपको मौजूदा टैब को उस टैब के तौर पर सेट करना होगा जहाँ डेमो ऐप्लिकेशन चल रहा है!)

इसके बाद, हम Antigravity में असली एमसीपी सर्वर को कॉन्फ़िगर करते हैं. इसके लिए, हम अपनी ग्लोबल mcp_config.json फ़ाइल में browsermcp सर्वर की परिभाषा जोड़ते हैं.

~/.gemini/config/mcp_config.json फ़ाइल बनाएं या उसमें बदलाव करें और यह कॉन्फ़िगरेशन जोड़ें:

{
  "mcpServers": {
    "browsermcp": {
      "command": "npx",
      "args": [
        "-y",
        "@browsermcp/mcp@latest"
      ]
    }
  }
}

Antigravity के इकोसिस्टम में एमसीपी सर्वर और स्किल सेट अप करने के बारे में पूरी जानकारी के लिए, ये संसाधन देखें:

• Antigravity CLI और आईडीई के लिए, एमसीपी सर्वर और स्किल कॉन्फ़िगर करना
• Dialling Our Agents to 11: My Favourite MCP Servers

BrowserMCP की मदद से टेस्टिंग करना

अब हम आपको कमाल की सुविधा के बारे में बताते हैं. सबसे पहले, नए टर्मिनल सेशन में agy चलाकर, Antigravity CLI लॉन्च करें. (याद रखें कि डेमो ऐप्लिकेशन, हमारे शुरुआती टर्मिनल सेशन में चल रहा है.) इंटरैक्टिव टीयूआई में, /mcp टाइप करके चालू टूल की सूची की पुष्टि करें और पक्का करें कि browsermcp उपलब्ध है.

अगर आपने डेमो ऐप्लिकेशन को पहले लॉन्च नहीं किया है, तो अब इसे लॉन्च करें:

make dev

अगर आपने पहले से ऐसा नहीं किया है, तो आपको Chrome ब्राउज़र में ऐप्लिकेशन खोलना होगा. साथ ही, उस टैब में BrowserMCP एक्सटेंशन को कनेक्ट करना होगा. run कमांड में दिए गए लिंक पर जाएं. इसके बाद, BrowserMCP एक्सटेंशन आइकॉन पर क्लिक करें और "कनेक्ट करें" पर क्लिक करें.

अब हम टेस्ट चलाने के लिए, Agy CLI का इस्तेमाल कर सकते हैं. इस प्रॉम्प्ट को कॉपी करें और CLI में चिपकाएं:

Using BrowserMCP, connect to the application at http://localhost:5173. If the application is not showing a login screen, first logout. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

सीएलआई, सबसे पहले यह देख सकता है कि डेमो ऐप्लिकेशन, तय किए गए पोर्ट पर चल रहा है या नहीं. इसके बाद, यह टूल आपसे उन कार्रवाइयों की पुष्टि करने के लिए कहेगा जिन्हें वह करने वाला है.

इस सेशन के लिए, सीएलआई को सभी BrowserMCP टूल चलाने की अनुमति दें. इसके बाद, ब्राउज़र पर वापस जाएं और देखें कि अपने-आप होने वाले इंटरैक्शन कैसे काम करते हैं!

ऊपर दिए गए प्रॉम्प्ट के बारे में कुछ बातें:

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

बहुत बढ़िया, है न?

फ़िलहाल, हमें BrowserMCP की ज़रूरत नहीं है. इसलिए, इसे अपने ब्राउज़र से डिसकनेक्ट करें.

8. Skills और Playwright की मदद से ऑटोमेशन

BrowserMCP की सीमाएं

BrowserMCP एक बेहतरीन टूल है, लेकिन इसकी कुछ सीमाएं हैं. उदाहरण के लिए:

• इसके लिए, ब्राउज़र का मौजूदा सेशन होना ज़रूरी है. साथ ही, BrowserMCP एक्सटेंशन कनेक्ट होना चाहिए. (इससे नए सेशन नहीं बनते.)
• यह सुविधा, Chromium के अलावा अन्य ब्राउज़र पर काम नहीं करती.
• इसके लिए, एक अलग ब्राउज़र प्रोसेस चालू होनी चाहिए. यह प्रोसेस, उसी मशीन पर चालू होनी चाहिए जिस पर एमसीपी सर्वर चालू है.
• यह लोकल फ़ाइल सिस्टम के साथ काम नहीं कर सकता. उदाहरण के लिए, यह इन कामों को नहीं कर सकता: सबूत के तौर पर स्क्रीनशॉट के लिए स्थानीय फ़ाइलें बनाना या वेब ऐप्लिकेशन से फ़ाइलें डाउनलोड और सेव करना. जैसे, डाउनलोड की जा सकने वाली PDF फ़ाइल.
• यह नॉन-डिटरमिनिस्टिक है. यह आपके बताए गए तरीके से कार्रवाई करने की कोशिश करेगा. हालांकि, स्थानीय स्थिति, जैसे कि अचानक दिखने वाला पॉप-अप, इंटरैक्शन को रोक सकता है.
• यह "बिना डिसप्ले वाला ब्राउज़र" ऑपरेशन के साथ काम नहीं करता. इसका मतलब है कि यह CI/CD पाइपलाइन में, असली ब्राउज़र विंडो के बिना नहीं चल सकता.

Playwright

Playwright एक ज़्यादा बेहतर टूल है. यह ब्राउज़र ऑटोमेशन और टेस्टिंग फ़्रेमवर्क के लिए, एक लोकप्रिय और ओपन-सोर्स टूल है. यह कई ऐसे काम कर सकता है जो BrowserMCP नहीं कर सकता. इनमें ऊपर बताई गई सभी बातें शामिल हैं.

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

हालांकि, इस तरह की अतिरिक्त सुविधा के साथ, इसे इस्तेमाल करने का तरीका सीखने में ज़्यादा समय लगता है.

स्किल

अच्छी बात यह है कि हमें सीधे तौर पर Playwright का इस्तेमाल करने का तरीका सीखने की ज़रूरत नहीं है. इसके बजाय, हम एजेंट स्किल का इस्तेमाल कर सकते हैं.

तो, एजेंट स्किल क्या होती है? इसे डोमेन के हिसाब से विशेषज्ञता वाले ऐसे बंडल के तौर पर समझें जिसे एआई एजेंट को तब दिया जा सकता है, जब उसे कोई खास काम करना हो. इसमें निर्देश, सबसे सही तरीके, और कभी-कभी किसी खास काम के लिए तैयार की गई हेल्पर स्क्रिप्ट भी शामिल होती हैं.

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

इसे मैट्रिक्स फ़िल्म के उस सीन की तरह समझें, जिसमें एजेंट किसी समस्या को देखता है और उसे पता चलता है कि इसके लिए Playwright की जानकारी होना ज़रूरी है. इसके बाद, वह Playwright की जानकारी डाउनलोड करता है और अचानक कहता है: "मुझे कुंग फ़ू आता है." बूम माइक. तुरंत एक्सपर्ट से बात करें.

अगर आपको स्किल के बारे में ज़्यादा जानना है, तो यहां दिया गया लेख पढ़ें:

• ट्यूटोरियल : Google Antigravity Skills का इस्तेमाल शुरू करना
• कोडलैब: Google Antigravity के लिए Skills तैयार करना

Playwright के लिए Skills क्यों सही हैं

यहां किसी स्किल का इस्तेमाल करना एक अच्छा विकल्प है. Playwright एक बहुत ही दमदार टूल है, लेकिन इसका सिंटैक्स मुश्किल हो सकता है. एजेंट को Playwright की स्किल देने से, हमें इस बात की चिंता नहीं करनी पड़ती कि हमारा एलएलएम, पुराने सिंटैक्स का इस्तेमाल कर रहा है या ऐसे सिलेक्टर लिख रहा है जो आसानी से टूट जाते हैं. हम इसे Playwright का सही तरीके से इस्तेमाल करने के बारे में, एक भरोसेमंद और चुनिंदा प्लेबुक दे रहे हैं.

मैं Playwright CLI और इससे जुड़ी स्किल का इस्तेमाल करने जा रहा/रही हूं.

इस तरीके से, हम Playwright CLI को स्थानीय तौर पर इंस्टॉल करते हैं. इसके बाद, हम अपने एजेंट को वह जानकारी देते हैं जिसकी उसे इसका इस्तेमाल करने के लिए ज़रूरत होती है. किसी भी तरह के भ्रम से बचने के लिए: मैं कोई Playwright MCP सर्वर इंस्टॉल नहीं कर रहा हूं.

इंस्टॉल किया जा रहा है

सबसे पहले, ओपन सोर्स Microsoft Playwright CLI इंस्टॉल करते हैं. अगर आपने अब तक ऐसा नहीं किया है, तो /quit`` टाइप करके इंटरैक्टिव सीएलआई से बाहर निकलें. इसके बाद, अपने टर्मिनल में यह करें:

# Pre-req: nodejs installed
npm install -g @playwright/cli@latest # Install Playwright CLI globally
npm install @playwright/test # Install Playwright test framework

npx playwright install-deps # Install dependencies
npx playwright install chromium chrome # Install browser binaries in Linux / WSL

अब हम स्किल जोड़ते हैं. इस कमांड से, स्किल का सबफ़ोल्डर सीधे GitHub से हमारे Gemini skills फ़ोल्डर में डाउनलोड हो जाएगा:

mkdir -p ~/.gemini/skills
npx degit microsoft/playwright-cli/skills/playwright-cli ~/.gemini/skills/playwright-cli

अब हम इसे आज़मा सकते हैं.

# Launch Playwright CLI with visible browser
playwright-cli open https://playwright.dev --headed

इससे ब्राउज़र सेशन शुरू हो जाएगा और यह सेशन, तय किए गए यूआरएल पर खुलेगा.

मुझे यह भी चाहिए कि Gemini, Playwright को "हेडेड" मोड में इस्तेमाल कर सके. इसका मतलब है कि Gemini को Playwright का यूज़र इंटरफ़ेस (यूआई) दिखे. हालाँकि, इस स्किल में Gemini को यह नहीं बताया गया है कि ऐसा कैसे किया जाए. इसलिए, मैंने Core सेक्शन में ~/.gemini/skills/playwright-cli/SKILL.md में ये लाइनें जोड़ी हैं:

# Add the following under the "playwright-cli open" command

# Run in headed mode so we can see the browser
playwright-cli open https://playwright.dev --headed

Playwright की मदद से टेस्टिंग करना

पहले की तरह, हमें ऐप्लिकेशन लॉन्च करना होगा. अगर यह पहले से नहीं चल रहा है, तो इसे शुरुआती टर्मिनल सेशन से लॉन्च करें:

make dev

इसके बाद, दूसरे टर्मिनल सेशन में, BrowserMCP को कुछ समय के लिए बंद कर दें, ताकि एजेंट को यह पता चल सके कि किन टूल का इस्तेमाल करना है. Antigravity CLI (agy) को फिर से लॉन्च करें. हम ब्राउज़रएमसीपी सर्वर को सीधे तौर पर टीयूआई के ज़रिए कुछ समय के लिए बंद कर सकते हैं:

1. एमसीपी मैनेजमेंट पैनल खोलने के लिए, प्रॉम्प्ट बॉक्स में /mcp टाइप करें.
2. browsermcp को चुनने के लिए, ऐरो बटन (ऊपर/नीचे) का इस्तेमाल करें. इसके बाद, Enter/Return दबाएं.
3. 'बंद करें' विकल्प चुनने के लिए, राइट ऐरो दबाएं. इसके बाद, इसे बंद करने के लिए Enter दबाएं.

अब हम एजेंट से, Playwright की मदद से हमारे ऐप्लिकेशन पर जाने के लिए कहेंगे. हालांकि, BrowserMCP के उलट, हमें पहले ब्राउज़र को चालू करने की ज़रूरत नहीं है. Playwright, स्थानीय प्रोसेस का इस्तेमाल करके हमारे लिए यह काम करेगा.

इस प्रॉम्प्ट को Agy CLI में डालें:

Using Playwright, connect to the application at http://localhost:5173. Then login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown, and present them back to me in a markdown table.

(हमेशा की तरह, सीएलआई किसी भी टूल को चलाने से पहले, आपसे अनुमति मांगेगा.)

यहां क्या अलग है?

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

इसके कुछ समय बाद, आपको आउटपुट फ़ोल्डर में dashboard.png फ़ाइल दिखेगी.

ध्यान दें कि आपको Agy CLI में टूल कॉल दिखेंगे, लेकिन ब्राउज़र यूज़र इंटरफ़ेस (यूआई) नहीं दिखेगा. ऐसा इसलिए है, क्योंकि Playwright डिफ़ॉल्ट रूप से "हेडलेस मोड" में काम करता है.

हालांकि, इस बदले हुए प्रॉम्प्ट के साथ फिर से चलाने पर, आपको यूज़र इंटरफ़ेस (यूआई) भी दिखेगा:

Using Playwright, connect to the application at http://localhost:5173 in **headed** mode, and keep the browser open when you're done. Login as 'admin' with password 'password', and verify that the dashboard title says 'System Overview'. Take a screenshot of the dashboard and save it to output/dashboard.png. In the main dashboard, read the telemetry values shown and record them. Then wait 3 seconds, read them again. Now present the data back to me in a markdown table.

Agy CLI का आउटपुट कुछ ऐसा दिखना चाहिए:

यह कितना शानदार था?

9. Antigravity का ब्राउज़र एजेंट

Google Antigravity में, पहले से मौजूद ब्राउज़र एजेंट ( ब्राउज़र सब-एजेंट) होता है. यह ब्राउज़र को अपने-आप काम करने की सुविधा देता है. इसके लिए, आपको Playwright CLI जैसे किसी अलग टूल को इंस्टॉल करने की ज़रूरत नहीं होती.

यह सुविधा कैसे काम करती है

ब्राउज़र को कंट्रोल करने के लिए, ब्राउज़र में पहले से मौजूद एजेंट, Chrome DevTools प्रोटोकॉल (सीडीपी) के ज़रिए सीधे तौर पर काम करता है. इससे Antigravity 2.0 और IDE में, ब्राउज़र एक्सटेंशन या इंटरमीडिएट प्लगिन की ज़रूरत नहीं पड़ती.

लॉन्च होने पर, Antigravity आपके Chrome इंस्टेंस से कनेक्ट होता है. इसके लिए, यह WebSocket कनेक्शन के ज़रिए लोकल डीबगिंग पोर्ट का इस्तेमाल करता है. एजेंट से मिले निर्देशों को सीधे तौर पर, सीडीपी की लो-लेवल कमांड में बदला जाता है. ये कमांड:

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

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

टूल की उपलब्धता

टर्मिनल-फ़र्स्ट Antigravity CLI (Agy CLI) में, ब्राउज़र एजेंट की सुविधा अभी काम नहीं करती. हालांकि, आज ही Antigravity IDE और Antigravity 2.0 में इसका इस्तेमाल किया जा सकता है. उम्मीद है कि आने वाले समय में, Agy CLI में ब्राउज़र एजेंट की सुविधा उपलब्ध होगी!

WSL का इस्तेमाल करने वालों के लिए सूचना: WSL में Antigravity के साथ Browser Agent को इस्तेमाल करना अब पहले से ज़्यादा आसान हो गया है. अब आपको नेटवर्क राउटिंग और पोर्ट फ़ॉरवर्डिंग की जटिलताओं से नहीं जूझना पड़ेगा. इसके लिए, आपको बस WSL कॉन्फ़िगरेशन में "मिरर किया गया" नेटवर्क मोड चालू करना होगा. पूरी जानकारी के लिए, यह गाइड देखें: Google Antigravity के साथ WSL की समस्याओं को हल करना: Agy 2.0 और Agy IDE Edition.

10. ब्राउज़र ऑटोमेशन के अन्य इस्तेमाल के उदाहरण

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

अगर आपको खुद के एआई एजेंट बनाने हैं, तो यहां कुछ तरीके दिए गए हैं. इनकी मदद से, BrowserMCP या Playwright CLI जैसे टूल का इस्तेमाल करके, मुश्किल काम आसानी से किए जा सकते हैं:

• निजी रिसर्च असिस्टेंट: मान लें कि आपने अपने एजेंट को किसी यूआरएल पर पॉइंट किया और उससे किसी विषय पर रिसर्च करने के लिए कहा. हालांकि, साइट पर लॉग इन करना और मुश्किल मेन्यू पर नेविगेट करना ज़रूरी है. अगले हफ़्ते काम न करने वाले कस्टम वेब स्क्रैपर को लिखने के बजाय, अपने एजेंट को लॉग इन करने, डेटा पर जाने, और आपके लिए उसका खास जानकारी तैयार करने के लिए कहें.
• "स्विवेल-चेयर" इंटिग्रेटर: हम सभी के पास ऐसे लेगसी इंट्रानेट सिस्टम होते हैं जिनमें एपीआई नहीं होते. आपको पता है कि ये कौनसी प्रोसेस हैं. इनमें आपको सिस्टम A से डेटा को मैन्युअल तरीके से कॉपी करना होता है और उसे सिस्टम B के फ़ॉर्म में चिपकाना होता है. ब्राउज़र ऑटोमेशन की सुविधा वाला एजेंट, यूनिवर्सल ग्लू की तरह काम कर सकता है. यह लेगसी सिस्टम की स्क्रीन को पढ़कर, नए सिस्टम में फ़ॉर्म भर सकता है.
• समस्या की गंभीरता का अपने-आप पता लगाना और उसे ठीक करना: क्या आपको सुबह 3 बजे मॉनिटरिंग सिस्टम से P1 लेवल की सूचना मिली? आपका एजेंट, उस सूचना से जुड़े डैशबोर्ड का यूआरएल अपने-आप खोल सकता है. साथ ही, मल्टीमॉडल विज़न की क्षमताओं का इस्तेमाल करके, ग्राफ़ या लॉग पढ़ सकता है. इसके बाद, वह सीधे आपके Slack चैनल में समस्या की खास जानकारी पोस्ट कर सकता है. इससे, आपको किसी घटना के दौरान कीमती समय बचाने में मदद मिलती है.

इस तरीके का फ़ायदा यह है कि अब आपको यह देखने की ज़रूरत नहीं है कि कौनसे एपीआई उपलब्ध हैं. अगर कोई व्यक्ति ब्राउज़र में यह काम कर सकता है, तो आपका एजेंट भी ऐसा कर सकता है.

11. नतीजा

बधाई हो! आपने अभी-अभी, अपने-आप होने वाले यूज़र इंटरफ़ेस (यूआई) टेस्ट बनाए और उन्हें लागू किया है. इसके लिए, आपने एआई एजेंट को सामान्य अंग्रेज़ी में बताया कि आपको क्या करना है. इसमें ऐसे सीएसएस सिलेक्टर का इस्तेमाल नहीं किया जाता जो आसानी से टूट जाते हैं. साथ ही, इसमें सेटअप करने के लिए जटिल स्क्रिप्ट का इस्तेमाल नहीं किया जाता.

आपको इनके बारे में जानकारी मिली:

• यूज़र इंटरफ़ेस (यूआई) की टेस्टिंग मुश्किल नहीं होनी चाहिए: डोम के कमज़ोर स्ट्रक्चर को लागू करने के बजाय, टेस्ट के मकसद पर फ़ोकस करके, हम रखरखाव के खर्च को काफ़ी हद तक कम कर सकते हैं.
• मॉडल कॉन्टेक्स्ट प्रोटोकॉल (एमसीपी) की मदद से, आपके एजेंट को टूल, डेटा, और एनवायरमेंट का यूनिवर्सल और प्लग-एंड-प्ले ऐक्सेस मिलता है.
• BrowserMCP एक बेहतरीन टूल है. इसकी मदद से, अपने मौजूदा Chrome सेशन में एजेंटिक एआई की सुविधाएँ जोड़ी जा सकती हैं.
• स्किल्स और Playwright CLI की मदद से, बार-बार की जाने वाली और तय की गई ऑटोमेशन टेस्टिंग को नए लेवल पर ले जाएं. यह सब, प्रोग्रेसिव डिसक्लोज़र की मदद से किया जाता है.
• Antigravity का ब्राउज़र सब-एजेंट, इस सुविधा को एक कदम आगे ले जाता है. इसमें ऑटोनॉमस, मल्टीमॉडल नेविगेशन और आर्टफ़ैक्ट रिकॉर्डिंग की सुविधा मिलती है.

अब आगे बढ़ें और बोरिंग कामों को अपने-आप होने की सुविधा का इस्तेमाल करके पूरा करें!

12. काम के लिंक

अगर आपको आज बताए गए टूल और कॉन्सेप्ट के बारे में ज़्यादा जानना है, तो यहां दिए गए संसाधन देखें:

रिपॉज़िटरी कोड

• agentic-ui-testing GitHub repo - अगर आपको यह कोडलैब काम का लगा, तो कृपया repo को स्टार दें!

कोर टूल और फ़्रेमवर्क

• BrowserMCP GitHub रिपॉज़िटरी
• BrowserMCP का दस्तावेज़
• Playwright
• Google AI Studio
• Antigravity CLI इंस्टॉल करना
• Nodejs

एजेंटिक एआई के कॉन्सेप्ट और कौशल

• Antigravity CLI और आईडीई के लिए, एमसीपी सर्वर और स्किल कॉन्फ़िगर करना
• Dialling Our Agents to 11: My Favourite MCP Servers
• ट्यूटोरियल: Google Antigravity Skills का इस्तेमाल शुरू करना, रोमिन ईरानी का ट्यूटोरियल
• कोडलैब: Antigravity Skills का इस्तेमाल शुरू करना
• मेरा ओरिजनल ब्लॉग: कुछ ही सेकंड में ऑटोमेटेड यूज़र इंटरफ़ेस (यूआई) टेस्ट बनाना

अन्य

• Google Antigravity की मदद से WSL की समस्याओं को हल करना: Agy 2.0 और Agy IDE Edition
• Dazbo का पोर्टफ़ोलियो
• Medium पर Dazbo के लेख
• LinkedIn पर Dazbo