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

1. परिचय

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

लेकिन, अगर आपको किसी एजेंट को सामान्य भाषा में यह बताना हो कि क्या टेस्ट करना है और वह उसे पूरा कर दे, तो क्या होगा?

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

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

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

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

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

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

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

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

टूल

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

Chrome ब्राउज़र
Gemini CLI (जो खुद nodejs पर निर्भर करता है)
Git

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

ध्यान दें कि

BrowserMCP, Google Cloud Shell से काम नहीं करेगा

, क्योंकि यह सिर्फ़ उसी मशीन पर चल रहे लोकल ब्राउज़र से कनेक्ट होगा.)

Google Cloud प्रोजेक्ट बनाना

अगर आपके पास पहले से ही Gemini API की कुंजी है, तो इसका इस्तेमाल करें और इस चरण को छोड़ दें.

अगर आपके पास Google Cloud प्रोजेक्ट नहीं है, तो आपको इसे बनाना होगा. हम Google Cloud की किसी भी सेवा को डिप्लॉय नहीं करेंगे. हालांकि, Gemini API पासकोड को जोड़ने के लिए आपको प्रोजेक्ट की ज़रूरत होगी. (Gemini का इस्तेमाल करने के लिए, आपको कुंजी की ज़रूरत होगी.)

अगर आपको Google Cloud के बारे में जानकारी है, तो यहां एक नया प्रोजेक्ट बनाया जा सकता है. इसके अलावा, Google AI Studio में जाकर भी Google Cloud प्रोजेक्ट बनाया जा सकता है.

बिना किसी शुल्क के Gemini API पासकोड बनाना

अब आपको Google AI Studio में जाकर, Gemini API पासकोड बनाना होगा. "एपीआई पासकोड पाएं" पर क्लिक करें.

आपको कुछ ऐसा दिखेगा:

अगर आपके पास पहले से कोई पासकी है, तो वह यहां दिखेगी. इसके अलावा, नई कुंजी बनाने के लिए "एपीआई पासकोड बनाएं" पर क्लिक करें.

यहां, आपके पास किसी मौजूदा Google Cloud प्रोजेक्ट को चुनने या नया प्रोजेक्ट बनाने का विकल्प होता है. यहां मैंने agentic-ui-demo नाम का एक नया प्रोजेक्ट बनाया है:

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

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

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

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

इसके बाद, .env.template फ़ाइल की कॉपी बनाएं. इसे .env कहा जाता है. ऐसा एडिटर में जाकर किया जा सकता है. इसके अलावा, इस कमांड को चलाकर भी ऐसा किया जा सकता है:

cp .env.template .env

इस .env फ़ाइल को अपनी एपीआई कुंजी से अपडेट करें. (ध्यान दें: अपनी .env फ़ाइल को कभी भी चेक-इन न करें. इसमें एपीआई पासकोड जैसी जानकारी होती है!) इसे करने का सबसे आसान तरीका है कि आप इसे अपने एडिटर में खोलें.

अब एनवायरमेंट वैरिएबल लोड करें:

source .env

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

make install

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

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

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

इसे इस तरह से बनाया गया है कि यह टेस्टिंग के लिए एक असल प्लैटफ़ॉर्म की तरह काम करे:

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

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

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

make dev

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

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

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

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

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

हमें ऐसा टेस्ट चाहिए जिसमें इरादे पर फ़ोकस किया जाए, न कि लागू करने के तरीके पर.

5. MCP की मदद से

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

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

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

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

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

BrowserMCP क्या है?

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

यहां इसकी कुछ क्षमताओं के बारे में बताया गया है:

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

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

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

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

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

इसके बाद, हमें अपने क्लाइंट में एमसीपी कॉन्फ़िगरेशन जोड़ना होगा:

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

इसे कहां कॉन्फ़िगर किया जाता है? यह आपके एजेंट पर निर्भर करता है. उदाहरण के लिए, Gemini CLI में: ~/.gemini/settings.json. यह कुछ-कुछ ऐसा दिखाई देगा:

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

अब जादू दिखाने की बारी है. सबसे पहले, नए टर्मिनल सेशन में gemini चलाकर, Gemini CLI लॉन्च करें. (याद रखें कि डेमो ऐप्लिकेशन, हमारे शुरुआती टर्मिनल सेशन में चल रहा है.) Gemini CLI में, /mcp चलाकर देखें कि यह सही तरीके से इंस्टॉल हुआ है या नहीं. आपको टूल की सूची दिखेगी. जैसे, यह:

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

make dev

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

अब हम Gemini CLI का इस्तेमाल करके, टेस्ट चला सकते हैं. इस प्रॉम्प्ट को कॉपी करके, Gemini 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.

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

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

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

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

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

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

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

BrowserMCP की सीमाएं

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

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

Playwright

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

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

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

स्किल

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

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

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

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

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

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

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

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

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

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

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

# 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 कौशल फ़ोल्डर में डाउनलोड हो जाएगा:

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 को कुछ समय के लिए बंद कर दें, ताकि एजेंट को यह पता चल सके कि उसे किन टूल का इस्तेमाल करना है. Gemini CLI को फिर से लॉन्च करें. इसके बाद, यह कमांड चलाएं:

/mcp disable browsermcp

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

Gemini 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.

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

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

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

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

ध्यान दें कि आपको Gemini 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 present them back to me in a markdown table.

कुछ ही देर में, Gemini CLI का आउटपुट कुछ ऐसा दिखेगा:

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

8. Antigravity Out of the Box में ऐसा किया जा सकता है!

Google Antigravity में Browser Subagent शामिल है. यह Playwright CLI की तरह ही काम करता है. Antigravity में Gemini से किसी यूआरएल को इंटरैक्टिव तरीके से स्पिन अप करने के लिए कहने पर, यह सब-एजेंट अपने-आप स्पिन अप हो जाएगा.

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

WSL का इस्तेमाल करने वाले लोगों के लिए जानकारी: Antigravity में ब्राउज़र एजेंट को काम करने के लिए सेट अप करना थोड़ा मुश्किल है. मैंने इसे काम करने के लिए सेट अप कर लिया है. हालांकि, मुझे इस माहौल में सब-एजेंट के काम करने का तरीका भरोसेमंद नहीं लगता. इसलिए, मुझे Playwright CLI बहुत पसंद है!

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

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

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

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

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

10. नतीजा

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

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

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

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

काम के लिंक

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

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

agentic-ui-testing GitHub repo

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

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

अन्य

WSL में Google Antigravity के साथ काम करना