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

1. परिचय

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

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

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

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

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

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

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

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

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

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

टूल

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

Chrome ब्राउज़र
Nodejs
Gemini CLI
Git

Gemini CLI का इस्तेमाल करने के लिए, आपको Google से पुष्टि करानी होगी. ऐसा करने के कुछ तरीके हैं. हालांकि, हमारा सुझाव है कि आप "Google खाते से साइन इन करें" विकल्प का इस्तेमाल करें. इस विकल्प में, Gemini के इस्तेमाल के लिए बिना किसी शुल्क के एक बड़ा कोटा मिलता है. इसके लिए, Google Cloud प्रोजेक्ट की ज़रूरत नहीं होती. अगर कोडलैब के निर्देशों का पालन करते समय इस विकल्प का इस्तेमाल किया जाता है, तो कोई शुल्क नहीं लगेगा. (अगर आपके पास पहले से ही Gemini API की कुंजी है, तो इसका इस्तेमाल किया जा सकता है.)

इन निर्देशों में यह माना गया है कि आप 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

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

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

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

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

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

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

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

make dev

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

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

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

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

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

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

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

5. MCP to the Rescue

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

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

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

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

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

BrowserMCP क्या है?

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

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

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

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

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

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

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

इसके बाद, हमें आपके क्लाइंट में BrowserMCP सर्वर जोड़ना होगा. Gemini CLI में ऐसा करना बहुत आसान है. सिर्फ़ एक्सटेंशन इंस्टॉल करें:

gemini extensions install https://github.com/derailed-dash/browsermcp-ext

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 की जानकारी डाउनलोड करता है और अचानक कहता है: "मुझे कुंग फ़ू आता है." बूम माइक. तुरंत विशेषज्ञ की सलाह.

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

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 सीएलआई में टूल कॉल को एक्ज़ीक्यूट होते हुए दिखेगा, लेकिन आपको ब्राउज़र का यूज़र इंटरफ़ेस (यूआई) नहीं दिखेगा. ऐसा इसलिए होता है, क्योंकि 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.

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

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

8. लेकिन रुकें, Chrome DevTools MCP भी है!

Chrome DevTools, वेब डेवलपर टूल का एक सेट है. यह Chrome ब्राउज़र में बनाया गया है. इसका इस्तेमाल वेब डेवलपमेंट और डीबग करने के लिए किया जाता है. यह सुविधा काफ़ी समय से उपलब्ध है. आपको पता है... Chrome में ज़्यादा टूल -> डेवलपर टूल खोलने पर, जिस कंसोल का इस्तेमाल किया जा सकता है.

हालांकि, अब इसका अपना एमसीपी सर्वर है. पिछले साल Gemini CLI से ब्राउज़र ऑटोमेशन के बारे में सोचते समय, यह मौजूद नहीं था. हालांकि, अब आपको ब्राउज़र में कुछ भी इंस्टॉल करने की ज़रूरत नहीं है. साथ ही, आपको लोकल सीएलआई भी इंस्टॉल करने की ज़रूरत नहीं है. अब BrowserMCP और Playwright की ज़्यादातर सुविधाओं का इस्तेमाल किया जा सकता है.

चलिए, इसे आज़माकर देखते हैं!

फ़िलहाल, हमने पुष्टि की है कि यह Google Cloud Shell में काम कर रहा है. इसलिए, इस हिस्से के लिए Google Cloud Console में Google Cloud Shell का इस्तेमाल करते हैं.

कंसोल खोलें और Cloud Shell सेशन खोलें. वहां से:

# Clone the sample app - like we did before
git clone https://github.com/derailed-dash/agentic-ui-testing
cd agentic-ui-testing

# Build the application - like we did before
make install

# Install the Chrome DevTools MCP server Gemini CLI Extension
gemini extensions install https://github.com/ChromeDevTools/chrome-devtools-mcp

अब हमें Cloud Shell में Chrome एक्ज़ीक्यूटेबल इंस्टॉल करना होगा:

# Get the latest executable for Ubuntu
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb

# Install it
sudo apt install ./google-chrome-stable_current_amd64.deb -y

# Check it and get the executable path
which google-chrome

# Cleanup
rm google-chrome-stable_current_amd64.deb

एक आखिरी चरण: हमें Chrome DevTools MCP सर्वर को यह बताना होगा कि Chrome एक्ज़ीक्यूटेबल कहां मिलेगा. इसके लिए, एमसीपी सर्वर कॉन्फ़िगरेशन में executable-path विकल्प को सेट करके, इसे headless पर सेट किया जा सकता है. हम फ़ाइल ~/.gemini/extensions/chrome-devtools-mcp/gemini-extension.json में बदलाव करके ऐसा करते हैं:

{
  "name": "chrome-devtools-mcp",
  "version": "latest",
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--executable-path=/usr/bin/google-chrome",
        "--headless"
      ]
    }
  }
}

बढ़िया! अब हम आगे बढ़ सकते हैं. Cloud Shell से gemini लॉन्च करें. साथ ही, /mcp list कमांड का इस्तेमाल करके यह देखें कि एमसीपी सर्वर चल रहा है या नहीं.

आखिर में, हम इसे किसी प्रॉम्प्ट के साथ टेस्ट करने के लिए तैयार हैं.

चलिए, इसे थोड़ा अलग तरीके से करते हैं. इस बार, हम Gemini CLI को डेमो ऐप्लिकेशन लॉन्च करने और उससे कनेक्ट करने के लिए कहेंगे:

Launch my demo application with `make dev`. Then, using Chrome DevTools MCP, connect to the application at  the exposed localhost URL. 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 को टेबल में नतीजे दिखाने चाहिए. साथ ही, उसे स्क्रीनशॉट सेव कर लेना चाहिए. स्क्रीनशॉट को Cloud Shell से डाउनलोड करके देखें कि वह ठीक दिख रहा है या नहीं.

9. Antigravity Out of the Box में यह सुविधा उपलब्ध है!

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

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

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

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

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

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

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

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

11. नतीजा

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

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

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

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

काम के लिंक

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

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

agentic-ui-testing GitHub रिपॉज़िटरी - अगर आपको यह कोडलैब काम का लगा, तो कृपया रिपॉज़िटरी में स्टार जोड़ें!

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

BrowserMCP GitHub रिपॉज़िटरी
BrowserMCP का दस्तावेज़
BrowserMCP Gemini CLI एक्सटेंशन - अगर आपको यह कोडलैब काम का लगा, तो कृपया रेपो को स्टार दें!
Playwright
Google AI Studio
Chrome DevTools
Chrome DevTools MCP

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

अन्य