00:00:00الطريقة التي يبني بها فريقنا تطبيقاتنا تحسنت بشكل كبير.
00:00:03السبب؟
00:00:03امتداد Claude Code على Chrome تم إطلاقه مؤخراً.
00:00:06قد تعتقد أن هذا كان ممكناً بالفعل مع أدوات Playwright أو Puppeteer MCP.
00:00:09لكن تلك الأدوات كانت تعاني من مشاكل خطيرة مثل نافذة السياق المنتفخة بلا داع، ومجلد المشروع الفوضوي المليء بلقطات عشوائية، وفي معظم الأحيان لم تتمكن حتى من إكمال الإجراءات على التطبيق.
00:00:20هذا هو السبب في أنني لم أكن أنصاراً كبيراً للاختبار الآلي باستخدام الذكاء الاصطناعي.
00:00:24لكن هذا أيضاً السبب في أنني كنت متحمساً جداً لهذا الامتداد الجديد من Claude.
00:00:28إذا كنت تتابع القناة، قد تعرف أننا صنعنا فيديو عنه منذ بعض الوقت.
00:00:32الشيء الطريف هو أنه لم يكن مخصصاً لـ Claude Code لكننا قلنا بوضوح أن هذا الامتداد لديه إمكانات أكبر بكثير إذا كان كذلك.
00:00:39والآن نحن هنا.
00:00:39الآن أخيراً تم إطلاقه كـ MCP متكامل ويعطي Claude Code جميع الأدوات المخصصة التي يحتاجها.
00:00:45الآن من البداية، لديه بعض المشاكل الكبيرة التي يجب أن نصلحها.
00:00:48لكن قبل أن نخوض فيها، دعنا نأخذ فترة راحة سريعة للحديث عن Automata.
00:00:52بعد تعليم ملايين الأشخاص كيفية البناء باستخدام الذكاء الاصطناعي، بدأنا بتطبيق هذه سير العمل بأنفسنا.
00:00:57اكتشفنا أنه يمكننا بناء منتجات أفضل بشكل أسرع من أي وقت مضى.
00:01:01ساعدنا في تحقيق أفكارك، سواء كانت تطبيقات أو مواقع ويب.
00:01:04ربما شاهدت مقاطعنا وفكرت: 'لدي فكرة رائعة، لكن ليس لدي فريق تقني لبناؤها.' هذا بالضبط المكان الذي نأتي فيه.
00:01:11فكر بنا كمساعدك التقني.
00:01:13نطبق سير العمل نفسه الذي علمناه لملايين الأشخاص مباشرة على مشروعك، مما يحول المفاهيم إلى حلول حقيقية وعملية بدون متاعب التوظيف أو إدارة فريق تطوير.
00:01:23هل أنت مستعد لتسريع فكرتك إلى الواقع؟
00:01:25تواصل معنا على hello@automata.dev والآن بخصوص المشاكل.
00:01:29أكبر واحدة واجهتها كانت أنها استغرقت عدداً كبيراً جداً من الخطوات المتسلسلة فقط لاختبار شيء بسيط جداً.
00:01:34قد تكون لاحظت أنه عند طلب Claude اختبار صفحة الهبوط على موقع ويب بصرياً، فإنه يقوم بعملية تمرير لكل قسم ويلتقط لقطة شاشة في كل خطوة.
00:01:43ثم يجمع كل لقطات الشاشة معاً لتحليل واجهة المستخدم قسماً تلو الآخر.
00:01:47قد تعتقد أن هذا نهج جيد، لكنه ليس كذلك.
00:01:49بدلاً من هذا، يمكننا أن نأخذ لقطة شاشة لصفحة كاملة وننقذ جميع تلك الرموز.
00:01:53لحل هذا، استخدمت سكريبت يستفيد من أدوات ويب مختلفة لأخذ لقطات كاملة.
00:01:57أضفت أيضاً تعليمات لاستخدام هذا السكريبت في أمر شرطة مخصص في مشروعي.
00:02:02الآن، عندما أستخدم هذا الأمر لاختبار صفحة الهبوط، يتعرف على أن هذا اختبار صفحة كاملة بناءً على التعليمات التي أضفتها ويستخدم السكريبت مباشرة بدلاً من الطريقة المعتادة قسماً تلو الآخر.
00:02:13بسبب هذا، يحدث الاختبار بشكل أسرع بكثير وله نفس الدقة.
00:02:17المشكلة الثانية التي واجهتها كانت عندما حاولت هذه أدوات MCP تحميل كمية ضخمة من المحتوى في وقت واحد لمهمة بسيطة.
00:02:24بدلاً من تحميل divs محددة، غالباً ما تحمل كل HTML داخل الوسم الرئيسي، والذي يحتوي على كمية ضخمة من الرموز حتى عندما لا يكون ضرورياً.
00:02:32هذا ينتهي به بـ استهلاك جزء كبير من نافذة السياق، وحتى مهامك الأبسط يمكن أن تنتفخ بشكل كبير.
00:02:37لحل هذا، أضفت تعليمات في ملف Claude.md حول كيفية إدارة السياق بشكل صحيح عند استخدام امتداد Claude Chrome.
00:02:44بهذه الطريقة، أي استخراج يقتصر بدقة ولا ينتفخ السياق بمعلومات غير ضرورية.
00:02:50مشكلة أخرى هي أن Claude يضيع الكثير من الوقت عندما يواجه مواقع ويب تحتوي على نوافذ منبثقة غير مرغوبة مثل إشعارات ملفات تعريف الارتباط والمطالبات المماثلة.
00:02:58للتخلص منها، يستخدم نفس تسلسل لقطات الشاشة والتمرير.
00:03:01لكن هذا خطأ.
00:03:02بدلاً من ترك Claude يستهلك رموز وقت غير ضروري، يمكننا استخدام حلول بديلة أخرى للتعامل مع هذه النوافذ المنبثقة.
00:03:08كبديل، أنشأت سكريبت يتضمن أكثر أزرار 'إغلاق' شائعة ونمط محددة لإنهاء لافتات ملفات تعريف الارتباط.
00:03:15يجد تلك المحددات في الكود وينفذ وظائف لإغلاق النوافذ المنبثقة تلقائياً.
00:03:19أضفت أيضاً تعليمات في ملف Claude.md حتى يشغل هذا السكريبت أولاً قبل المضي قدماً مع المحتوى الرئيسي.
00:03:25الآن، كلما طلبت من Claude الذهاب إلى موقع ويب، فإنه يتبع أولاً التعليمات في Claude.md وينفذ هذا JavaScript.
00:03:32هذا يغلق تلقائياً لافتات ملفات تعريف الارتباط، مما يسمح لـ Claude بالمتابعة مع المحتوى الرئيسي بدون إضاعة أي رموز أو إجراء خطوات غير ضرورية.
00:03:40لأسباب أمان، تم تقييد Claude من إجراء التقاط أو إكمال المصادقة نيابة عنك.
00:03:46لذا إذا صادفت موقع ويب يحتوي عليهما، فلا يمكن لـ Claude إكمال هذه العملية لك.
00:03:51هذا شيء عليك أن تتعامل معه بنفسك.
00:03:53كلما عملت على موقع ويب يتطلب تسجيل دخول أو تحقق CAPTCHA، تأكد من أنك قد قمت بالمصادقة بالفعل قبل إعطاء Claude المهمة.
00:04:00بهذه الطريقة، لن يتم حظره ولن يضيع أي وقت.
00:04:02لذا هذه كانت المشاكل الرئيسية التي استطعت حلها.
00:04:05لكن لاستخدامه بشكل صحيح للاختبار، تحتاج فعلاً إلى سير عمل صحيح لاختبار أي تطبيق.
00:04:10لكن قبل أن نصل إلى ذلك، أريد أن أتحدث قليلاً أكثر عن سبب تفضيلي لتكامل Chrome من Claude على Puppeteer.
00:04:16هذا بشكل أساسي لأنها أداة أصلية بنيت من قبل المطورين الذين طوروا Claude Code بأنفسهم، وتوفر تكاملاً أفضل بكثير مع تحكم وميزات محسّنة.
00:04:23هذه MCPs تركز على الاختبار في بيئة منفصلة مخصصة لا تحافظ على أي جلسات.
00:04:29غالباً ما تكون مزعجة للتثبيت وتملأ مجلد مشروعك بكل لقطات الشاشة.
00:04:33من ناحية أخرى، مع هذا التكامل الجديد مع Chrome، لدى Claude القدرة على التفاعل مع حساباتك المسجلة الدخول.
00:04:38يمكنه التفاعل مع خدمات مثل Google Docs و Google Sheets.
00:04:42يمكنه حتى الاحتفاظ بجميع معلومات الجلسة واستخدامها لإجراء مهام بشكل أفضل.
00:04:46قبل أن نصل إلى سير العمل، أريد أن أذكر أن تكاملات المتصفح تستخدم الكثير من السياق لأنها مجرد أكثر كثافة حسابياً من استدعاءات الأدوات العادية.
00:04:54حتى أنهم ذكروا ذلك في أحد مدوناتهم.
00:04:56لذا تحتاج إلى الانتباه لـ الضغط التلقائي أثناء العمل مع Claude Code.
00:05:00أيضاً، بما أن هذا تكامل Chrome، فإنه يعمل فقط مع Chrome.
00:05:04توقعت أنه سيعمل مع أي متصفح يعتمد على Chromium، لكن لا يعمل.
00:05:07ولا يمكننا حقاً حل ذلك.
00:05:08وبالنسبة لأولئك منا الذين يستخدمون ملفات تعريف Chrome متعددة، سيكون الأمر محبطاً قليلاً لأنه يفتح باستمرار الملفات الخاطئة.
00:05:15وأتمنى أن يحلوا هذا الخلل قريباً جداً.
00:05:17مع جميع الإصلاحات التي ذكرتها سابقاً والتكامل بين Claude و Chrome، تحسن سير عملي في التطوير بشكل كبير.
00:05:24ومع ذلك، امتدادات Chrome لديها قيود في Manifest V3.
00:05:27يمكن حظرها إذا عملت لفترة طويلة جداً.
00:05:29الكثير من الناس يطلبون من مطوري Claude Code إصلاح هذا على مستودعهم أيضاً.
00:05:33إذا كنت تقوم باختبار شامل من نهاية إلى نهاية لتطبيق الويب الخاص بك من البداية إلى النهاية، فقد يؤدي هذا إلى حظر الجلسة من قبل Chrome وسيتوقف Claude بشكل غير متوقع.
00:05:41ستضطر بعد ذلك إلى إعادة موجهة له لإعادة بدء التنفيذ.
00:05:44هذا يمكن أن يكون محبطاً بشكل خاص إذا أسندت مهمة طويلة المدى إلى Claude وابتعدت عن جهازك، فقط لتعود وتجد أن المهمة تمت بشكل جزئي فقط.
00:05:53لهذا السبب بالذات، بدلاً من الاختبار الشامل، أنشأت ملفات اختبار متعددة تغطي جميع جوانب مختلفة من التطبيق.
00:06:00يحتوي كل ملف على معلومات مفصلة حول مستويات الأولوية والشروط الأولية وخطوات الاختبار والنتائج المتوقعة.
00:06:06هناك أيضاً دليل اختبار حول كيفية إجراء هذه الاختبارات، جنباً إلى جنب مع ملف تعريف لتوثيق الاختبار.
00:06:11كما تعلم، Claude لديه نافذة سياق محدودة، وعندما يتم الوصول إلى تلك الحد، يمكن أن تُفقد التعليمات والتقدم.
00:06:16لهذا السبب، أضفت تعليمات في ملف Claude.md تخبر Claude بإنشاء وثيقة تقرير اختبار شاملة بعد اختبار كل ملف.
00:06:24بهذه الطريقة، حتى لو كان عليك الضغط لأن أدوات المتصفح تستهلك الكثير من السياق، يمكن لـ Claude الاحتفاظ بالوعي بما تم اختباره وما لا يزال يتعين اختباره من خلال الإشارة إلى هذه ملفات التقدم.
00:06:34الآن، قبل الشروع في أي اختبار، من الأفضل تشغيل ضغط الذاكرة لأن اختبار تطبيقك باستخدام Chrome سيستهلك الكثير من نافذة السياق لديك.
00:06:42لتبسيط عملية الاختبار، أنشأت أمر شرطة مخصص آخر.
00:06:46هذا الأمر يختبر بطريقة موجهة وينشئ توثيقًا بهيكل صحيح بعد الاختبار متبعًا تعليمات Claude.md.
00:06:54كما أضفت تعليمات لمراقبة السياق قبل بدء أي مهمة، حتى عندما يبدأ الاختبار لا يفقد السياق في منتصف الطريق ويقوم بالضغط بينما يعمل.
00:07:02بهذه الطريقة، عندما تبدأ عملية الاختبار، ما عليك سوى استخدام أمر الشرطة وتوفير الملف الذي تريد البدء باختباره ويبدأ Claude الاختبار باتباع التعليمات بالضبط.
00:07:11يحدد المشاكل من تلقاء نفسه ويستخدم المتصفح وجميع الأدوات اللازمة للاختبار.
00:07:16يتفاعل مع العناصر تلقائيًا ويكون قادرًا على العثور على أخطاء لا تكون عادة مرئية لكن يمكن اكتشافها من خلال قراءة مخرجات وحدة التحكم.
00:07:23كما يوثق الاختبار في النهاية حسب التعليمات.
00:07:26بهذه الطريقة، تتحسن عملية الاختبار بأكملها بشكل كبير لأن Claude لديه إمكانية الوصول إلى سجلات وحدة التحكم ويمكنه إجراء اختبار آلي في المتصفح بفعالية أكثر من ذي قبل.
00:07:35هذا يأتينا إلى نهاية هذا الفيديو.
00:07:37إذا كنت تريد دعم القناة ومساعدتنا في الاستمرار بإنتاج مقاطع فيديو مثل هذه، يمكنك فعل ذلك باستخدام زر الشكر الخاص بنا أدناه.
00:07:43كما هو الحال دائمًا، شكرًا لك على المشاهدة وسأراك في الحلقة القادمة.