00:00:00हमारी टीम जिस तरीके से ऐप्स बनाती है उसमें बहुत बड़ा सुधार आया है।
00:00:03क्या कारण है?
00:00:03Claude Code ने हाल ही में अपना Chrome एक्सटेंशन लॉन्च किया है।
00:00:06आप सोचते हैं कि यह Playwright या Puppeteer MCP से पहले से ही संभव था।
00:00:09लेकिन इन टूल्स में गंभीर समस्याएं थीं जैसे अनावश्यक रूप से बड़ा कॉन्टेक्स्ट विंडो,
00:00:14प्रोजेक्ट फ़ोल्डर में बेतरतीब स्क्रीनशॉट भरे हुए,
00:00:17और अधिकतर बार ये ऐप पर कार्रवाई पूरी कर भी नहीं पाते थे।
00:00:20इसी वजह से मैं AI का उपयोग करके स्वचालित परीक्षण का कभी बड़ा समर्थक नहीं रहा।
00:00:24लेकिन इसी वजह से मैं इस नए Claude एक्सटेंशन के बारे में वाकई उत्साहित था।
00:00:28अगर आप इस चैनल को फॉलो कर रहे हैं तो आप जानते होंगे कि हमने कुछ समय पहले इस पर एक वीडियो बनाया था।
00:00:32मजेदार बात यह है कि यह Claude Code के लिए नहीं बनाया गया था लेकिन हमने स्पष्ट रूप से कहा कि अगर यह Claude Code के लिए होता तो इस एक्सटेंशन में बहुत अधिक संभावनाएं हो सकती थीं।
00:00:39और यही तो हुआ।
00:00:39अब यह आखिरकार एक एकीकृत MCP के रूप में बाहर आ गया है और यह Claude Code को वह सभी कस्टम टूल्स देता है जिनकी उसे जरूरत है।
00:00:45अब शुरुआत से ही इसमें कुछ बड़ी समस्याएं हैं जिन्हें हमें ठीक करना चाहिए।
00:00:48लेकिन उनमें जाने से पहले,
00:00:49आइए Automata के बारे में बात करने के लिए एक छोटा ब्रेक लेते हैं।
00:00:52लाखों लोगों को AI के साथ बनाना सिखाने के बाद,
00:00:54हमने खुद ये वर्कफ़्लोज लागू करना शुरू किया।
00:00:57हमने पाया कि हम पहले से कहीं अधिक तेजी से बेहतर उत्पाद बना सकते हैं।
00:01:01हमने आपके विचारों को जीवंत करने में मदद की,
00:01:03चाहे वह ऐप्स हों या वेबसाइटें।
00:01:04शायद आपने हमारे वीडियो देखते हुए सोचा होगा कि मेरे पास एक शानदार विचार है,
00:01:07लेकिन इसे बनाने के लिए मेरे पास तकनीकी टीम नहीं है। यह बिल्कुल वही जगह है जहां हम आते हैं।
00:01:11हमें अपने तकनीकी सह-पायलट के रूप में सोचें।
00:01:13हम उन्हीं वर्कफ़्लोज को सीधे आपके प्रोजेक्ट पर लागू करते हैं जो हमने लाखों लोगों को सिखाई हैं,
00:01:17विचारों को वास्तविक,
00:01:18काम करने वाले समाधानों में बदलते हैं,
00:01:20बिना डेव टीम को नियुक्त करने या प्रबंधित करने की परेशानियों के।
00:01:23अपने विचार को वास्तविकता में बदलने के लिए तैयार हैं?
00:01:25hello@automata.dev पर संपर्क करें। अब समस्याओं पर लौटते हैं।
00:01:29सबसे बड़ी समस्या जिसका मुझे सामना करना पड़ा वह यह थी कि कुछ साधारण चीज को परीक्षित करने के लिए बहुत सारे क्रमिक कदमों की आवश्यकता थी।
00:01:34आपने शायद ध्यान दिया होगा कि जब आप Claude को किसी वेबसाइट के लैंडिंग पेज की दृश्य रूप से जांच करने के लिए कहते हैं,
00:01:39तो यह प्रत्येक सेक्शन के लिए स्क्रॉल ऑपरेशन करता है और हर कदम पर स्क्रीनशॉट लेता है।
00:01:43फिर यह सभी स्क्रीनशॉट को एक साथ जोड़ता है ताकि UI को सेक्शन दर सेक्शन विश्लेषित किया जा सके।
00:01:47आप सोचते हैं कि यह एक अच्छा तरीका है, लेकिन ऐसा नहीं है।
00:01:49इसके बजाय,
00:01:50हम पूरे पेज का स्क्रीनशॉट ले सकते हैं और सभी टोकन बचा सकते हैं।
00:01:53इसे हल करने के लिए,
00:01:54मैंने एक स्क्रिप्ट का उपयोग किया जो पूर्ण स्क्रीनशॉट लेने के लिए विभिन्न वेब टूल्स का लाभ उठाती है।
00:01:57मैंने अपने प्रोजेक्ट में एक कस्टम स्लैश कमांड में उस स्क्रिप्ट का उपयोग करने के लिए निर्देश भी जोड़े।
00:02:02अब जब मैं उस कमांड का उपयोग करके लैंडिंग पेज को परीक्षित करता हूं,
00:02:05तो यह पहचानता है कि यह एक पूर्ण पेज परीक्षण है और मेरे द्वारा जोड़े गए निर्देशों के आधार पर सीधे स्क्रिप्ट का उपयोग करता है,
00:02:11सामान्य सेक्शन दर सेक्शन विधि के बजाय।
00:02:13इसके कारण परीक्षण बहुत तेजी से होता है और इसकी सटीकता समान रहती है।
00:02:17दूसरी समस्या जिसका मुझे सामना करना पड़ा वह यह थी कि ये MCP टूल्स एक साधारण कार्य के लिए भी एक बार में बहुत सारी सामग्री लोड करने की कोशिश करते थे।
00:02:24विशिष्ट divs लोड करने के बजाय,
00:02:26यह अक्सर main टैग के अंदर सभी HTML लोड करता है,
00:02:28जिसमें भारी मात्रा में टोकन होते हैं भले ही यह आवश्यक न हो।
00:02:32इससे संदर्भ विंडो का एक बड़ा हिस्सा खपत होता है,
00:02:34और आपके सबसे साधारण कार्य भी इसे महत्वपूर्ण रूप से बड़ा सकते हैं।
00:02:37इसे हल करने के लिए,
00:02:38मैंने Claude.md फ़ाइल में Claude Chrome एक्सटेंशन का उपयोग करते समय संदर्भ को सही तरीके से कैसे प्रबंधित करें,
00:02:43इसके बारे में निर्देश जोड़े।
00:02:44इस तरीके से,
00:02:45किसी भी निष्कर्षण को सटीक रूप से सीमित किया जाता है और यह अनावश्यक जानकारी से संदर्भ को बड़ा नहीं करता।
00:02:50एक और समस्या यह है कि Claude बहुत समय बर्बाद करता है जब वह उन वेबसाइटों का सामना करता है जिनमें अवांछित पॉप-अप जैसे कुकी नोटिस और समान संकेत होते हैं।
00:02:58उनसे छुटकारा पाने के लिए,
00:02:59यह समान स्क्रीनशॉट और स्क्रॉल अनुक्रम का उपयोग करता है।
00:03:01लेकिन यह गलत है।
00:03:02Claude को अनावश्यक टोकन और समय खपत करने देने के बजाय,
00:03:05हम इन पॉप-अप को संभालने के लिए अन्य समाधान का उपयोग कर सकते हैं।
00:03:08एक विकल्प के रूप में,
00:03:09मैंने एक स्क्रिप्ट बनाई जिसमें सबसे सामान्य
00:03:11"बंद करें"
00:03:11बटन सिलेक्टर और कुकी बैनर को खारिज करने के पैटर्न शामिल हैं।
00:03:15यह कोड में उन सिलेक्टर को खोजता है और पॉप-अप को स्वचालित रूप से बंद करने के लिए फ़ंक्शन निष्पादित करता है।
00:03:19मैंने Claude.md फ़ाइल में निर्देश भी जोड़े ताकि यह मुख्य सामग्री के साथ आगे बढ़ने से पहले पहले इस जावास्क्रिप्ट को चलाए।
00:03:25अब जब भी मैं Claude को किसी वेबसाइट पर जाने के लिए कहता हूं,
00:03:28तो यह पहले Claude.md में निर्देशों का पालन करता है और इस जावास्क्रिप्ट को निष्पादित करता है।
00:03:32यह स्वचालित रूप से कुकी बैनर को बंद करता है,
00:03:35जिससे Claude बिना किसी टोकन बर्बाद किए या अनावश्यक कदम उठाए मुख्य सामग्री के साथ आगे बढ़ सकता है।
00:03:40सुरक्षा कारणों से,
00:03:41Claude को कैप्चर करने या आपकी ओर से प्रमाणीकरण पूरा करने से सीमित किया गया है।
00:03:46तो अगर आप किसी ऐसी वेबसाइट पर आते हैं जिसमें यह है,
00:03:48तो Claude इस प्रक्रिया को आपके लिए पूरा नहीं कर सकता।
00:03:51यह कुछ ऐसा है जिसे आपको स्वयं संभालना होगा।
00:03:53जब भी आप किसी ऐसी वेबसाइट पर काम करते हैं जिसके लिए लॉगिन या CAPTCHA सत्यापन की आवश्यकता हो,
00:03:56तो सुनिश्चित करें कि आप Claude को कार्य देने से पहले पहले से ही प्रमाणित हो चुके हैं।
00:04:00इस तरीके से, यह ब्लॉक नहीं होगा और समय बर्बाद नहीं करेगा।
00:04:02तो ये मुख्य समस्याएं थीं जिन्हें मैं हल कर सका।
00:04:05लेकिन इसे परीक्षण के लिए सही तरीके से उपयोग करने के लिए,
00:04:07आपको वास्तव में किसी भी एप्लिकेशन को परीक्षित करने के लिए एक सही वर्कफ़्लो की आवश्यकता है।
00:04:10लेकिन उससे पहले,
00:04:11मैं इस बारे में थोड़ा और बात करना चाहता हूं कि मैं Puppeteer पर Claude Chrome एकीकरण को क्यों अधिक पसंद करता हूं।
00:04:16यह मुख्य रूप से इसलिए है कि यह Claude Code के डेवलपर्स द्वारा स्वयं बनाया गया एक मूल टूल है,
00:04:20और यह बेहतर एकीकरण और बेहतर नियंत्रण और सुविधाएं प्रदान करता है।
00:04:23ये MCPs एक समर्पित अलग वातावरण में परीक्षण पर केंद्रित हैं जो कोई सत्र बनाए नहीं रखते।
00:04:29इन्हें स्थापित करना अक्सर मुश्किल होता है और ये आपके प्रोजेक्ट फ़ोल्डर को सभी स्क्रीनशॉट से भर देते हैं।
00:04:33दूसरी ओर,
00:04:33इस नए Chrome एकीकरण के साथ,
00:04:35Claude के पास आपके साइन-इन खातों के साथ इंटरैक्ट करने की क्षमता है।
00:04:38यह Google Docs और Google Sheets जैसी सेवाओं के साथ इंटरैक्ट कर सकता है।
00:04:42यह सभी सत्र की जानकारी को भी बनाए रख सकता है और काम बेहतर तरीके से करने के लिए इसका उपयोग कर सकता है।
00:04:46हम वर्कफ़्लो पर जाने से पहले,
00:04:47मैं यह बताना चाहता हूं कि ब्राउज़र एकीकरण बहुत सारे संदर्भ का उपयोग करते हैं क्योंकि वे नियमित टूल कॉल की तुलना में बहुत अधिक कम्प्यूटेशनल रूप से गहन होते हैं।
00:04:54उन्होंने इसे अपने एक ब्लॉग में भी बताया है।
00:04:56तो आपको Claude Code के साथ काम करते समय स्वचालित-संपीड़न पर ध्यान रखना होगा।
00:05:00साथ ही,
00:05:01चूंकि यह Chrome एकीकरण है,
00:05:02यह केवल Chrome के साथ काम करता है।
00:05:04मैंने उम्मीद की थी कि यह किसी भी Chromium ब्राउज़र के साथ काम करेगा,
00:05:06लेकिन ऐसा नहीं है।
00:05:07और हम इसे वास्तव में हल नहीं कर सकते।
00:05:08और जो लोग कई Chrome प्रोफ़ाइल का उपयोग करते हैं उनके लिए यह थोड़ा अधिक निराशाजनक होगा क्योंकि यह लगातार गलत प्रोफ़ाइल खोलता है।
00:05:15और मुझे उम्मीद है कि वे इस बग को जल्द ही ठीक कर देंगे।
00:05:17पहले बताई गई सभी सुधारों और Claude के Chrome के साथ एकीकरण के साथ,
00:05:21मेरा विकास वर्कफ़्लो काफी हद तक बेहतर हो गया है।
00:05:24हालांकि, Chrome एक्सटेंशन में Manifest V3 में एक सीमा है।
00:05:27अगर वे बहुत लंबे समय तक चलते हैं तो उन्हें ब्लॉक किया जा सकता है।
00:05:29बहुत से लोग Claude Code के डेवलपर्स से अपने रिपो पर भी इसे ठीक करने के लिए कह रहे हैं।
00:05:33अगर आप अपनी वेब एप्लिकेशन का शुरू से अंत तक end-to-end परीक्षण कर रहे हैं,
00:05:37तो यह Chrome द्वारा सत्र को ब्लॉक कर सकता है और Claude अचानक रुक जाएगा।
00:05:41फिर आपको इसे फिर से चलाने के लिए इसे पुनः प्रेरित करना होगा।
00:05:44यह विशेष रूप से परेशानी भरा हो सकता है अगर आप Claude को एक लंबे समय तक चलने वाला कार्य सौंपते हैं और अपने कंप्यूटर से दूर चले जाते हैं,
00:05:50और फिर वापस आते हैं और पाते हैं कि कार्य केवल आंशिक रूप से पूरा हुआ है।
00:05:53इसी कारण से,
00:05:53end-to-end परीक्षण के बजाय,
00:05:55मैंने एप्लिकेशन के सभी विभिन्न पहलुओं को कवर करने वाली कई परीक्षण फ़ाइलें बनाईं।
00:06:00प्रत्येक फ़ाइल में प्राथमिकता स्तर,
00:06:02पूर्वशर्तें,
00:06:02परीक्षण कदम और अपेक्षित परिणाम के बारे में विस्तृत जानकारी है।
00:06:06यह परीक्षण कैसे करें इस पर एक परीक्षण गाइड भी है,
00:06:08साथ ही परीक्षण दस्तावेज के लिए एक readme भी है।
00:06:11जैसा कि आप जानते हैं,
00:06:12Claude के पास एक सीमित संदर्भ विंडो है,
00:06:14और जब वह सीमा पहुंच जाती है,
00:06:15तो निर्देश और प्रगति खो सकती है।
00:06:16इसी कारण से,
00:06:17मैंने Claude.md फ़ाइल में निर्देश जोड़े जो Claude को प्रत्येक फ़ाइल का परीक्षण करने के बाद एक व्यापक परीक्षण रिपोर्ट दस्तावेज बनाने के लिए कहते हैं।
00:06:24इस तरीके से,
00:06:25भले ही आपको संपीड़न करना पड़े क्योंकि ब्राउज़र टूल्स बहुत सारे संदर्भ खपत करते हैं,
00:06:28Claude इन प्रगति फ़ाइलों को देखकर इस बात की जानकारी बनाए रख सकता है कि क्या परीक्षण किया गया है और क्या अभी भी परीक्षण किए जाने की आवश्यकता है।
00:06:34अब,
00:06:34किसी भी परीक्षण के साथ आगे बढ़ने से पहले,
00:06:36सबसे अच्छा तरीका एक कॉम्पैक्ट चलाना है क्योंकि Chrome का उपयोग करके आपके एप्लिकेशन का परीक्षण आपकी संदर्भ विंडो का बहुत सारा उपयोग करेगा।
00:06:42अपनी परीक्षण प्रक्रिया को सुव्यवस्थित करने के लिए,
00:06:44मैंने एक और कस्टम स्लैश कमांड बनाया।
00:06:46यह कमांड एक निर्देशित तरीके से परीक्षण करता है और Claude.md निर्देशों का पालन करते हुए परीक्षण के बाद उचित संरचना में दस्तावेज़ बनाता है।
00:06:54मैंने किसी भी कार्य शुरू करने से पहले संदर्भ की निगरानी के लिए भी निर्देश जोड़े,
00:06:58ताकि परीक्षण शुरू होने पर यह बीच में संदर्भ न खो सके और काम करते समय कॉम्पैक्ट हो सके।
00:07:02इस तरह,
00:07:03जब आप परीक्षण प्रक्रिया शुरू करते हैं,
00:07:04तो आप बस स्लैश कमांड का उपयोग करते हैं और वह फ़ाइल प्रदान करते हैं जिसका परीक्षण शुरू करना है,
00:07:08और Claude सटीक निर्देशों का पालन करके परीक्षण शुरू करता है।
00:07:11यह अपने आप समस्याओं की पहचान करता है और परीक्षण के लिए ब्राउज़र और सभी आवश्यक उपकरणों का उपयोग करता है।
00:07:16यह तत्वों के साथ स्वचालित रूप से इंटरैक्ट करता है और ऐसी त्रुटियों को खोज सकता है जो आमतौर पर दिखाई नहीं देती लेकिन कंसोल आउटपुट को पढ़कर पता लगाई जा सकती हैं।
00:07:23यह अंत में निर्देशों के अनुसार परीक्षण का दस्तावेज़ भी करता है।
00:07:26इस तरह,
00:07:26पूरी परीक्षण प्रक्रिया में काफी सुधार होता है क्योंकि Claude के पास कंसोल लॉग्स तक पहुँच होती है और वह ब्राउज़र में स्वचालित परीक्षण पहले से कहीं अधिक प्रभावी तरीके से कर सकता है।
00:07:35यह हमें इस वीडियो के अंत तक ले जाता है।
00:07:37अगर आप चैनल को सपोर्ट करना चाहते हैं और हमें इस तरह के वीडियो बनाते रहने में मदद करना चाहते हैं,
00:07:41तो आप नीचे सुपर थैंक्स बटन का उपयोग करके ऐसा कर सकते हैं।
00:07:43हमेशा की तरह,
00:07:44देखने के लिए धन्यवाद और मैं आपको अगले वीडियो में देखूंगा।