Playwright 1.56 يأتي مع ثلاثة وكلاء ذكاء اصطناعي مدمجين يقومون بتخطيط مجموعة الاختبارات، وكتابة سكربتات TypeScript المقابلة، وإصلاح المحددات (locators) المعطلة فوراً. والنتيجة: يتحول عناء الاختبار اليدوي إلى سير عمل مدعوم بالذكاء الاصطناعي.

لماذا يهم هذا التغيير

لطالما اتبع مهندسو الأتمتة حلقة تكرارية: تحويل المتطلبات إلى حالات اختبار، ثم كتابة السكربتات يدوياً، ثم تشغيلها، وبعد ذلك مطاردة المحددات (selectors) غير المستقرة كلما تغيرت واجهة المستخدم. يمكن أن يفوق عبء الصيانة الوقت الذي تم توفيره بواسطة الأتمتة، خاصة في الواجهات الأمامية سريعة التطور. ومن خلال دمج وكلاء الذكاء الاصطناعي مباشرة في إطار عمل الاختبار، يقلص Playwright دورة "الإصلاح والتشغيل" ويسمح للمهندسين بالتركيز على استراتيجية الاختبار عالية المستوى بدلاً من البحث عن المحددات.

شرح الوكلاء الثلاثة

  • Planner Agent – يأخذ وصفاً بلغة طبيعية لما يجب أن يفعله التطبيق، ويستكشف الموقع المباشر، ويخرج خطة Markdown منظمة. تسرد الخطة تدفقات المستخدم الأساسية وسيناريوهات الحالات الاستثنائية، مما يوفر مخططاً واضحاً قبل كتابة أي كود.
  • Generator Agent – يستوعب خطة Markdown وينتج كود اختبار TypeScript قابلاً للتنفيذ. يتواصل مع المتصفح قيد التشغيل للتحقق من استقرار المحددات، ويمكنه اتباع نمط Page Object Model (وهو نمط تصميم يفصل هيكل الصفحة عن منطق الاختبار) إذا طُلب منه ذلك.
  • Healer Agent – يراقب عمليات تشغيل الاختبار؛ وعندما يعود الفشل إلى تغيير في واجهة المستخدم، يقوم بإعادة تشغيل الخطوات الفاشلة، ويفحص الـ DOM المحدث، ويقترح محدداً (selector or locator) مصححاً. تظهر الاقتراحات كمسودة إصلاح يمكن للمطور قبولها أو تعديلها.

تعمل هذه الوكلاء في "حلقة وكيلة" (agentic loop): Planner ← Generator ← Healer. تغذي كل خطوة الخطوة التالية، مما يخلق خط إنتاج ذاتي الضبط يظل متزامناً مع التطبيق قيد الاختبار.

كيف يختلف عن أدوات الذكاء الاصطناعي العامة

يمكن للنماذج القائمة على الدردشة أو إضافات إكمال الكود إنتاج مقتطفات برمجية، لكنها تفتقر إلى الوصول المباشر إلى الـ DOM المباشر وإعدادات المشروع المحددة. تستخدم وكلاء Playwright بروتوكول سياق النموذج (Model Context Protocol) الذي يتدفق بهيكل الصفحة الحالي وإعدادات إطار عمل الاختبار إلى النموذج، مما يسمح للذكاء الاصطناعي بالاستنتاج بشأن العناصر الدقيقة التي سيتفاعل معها. الكود الذي يتم إنتاجه ليس صحيحاً من الناحية النحوية فحسب، بل هو مرتبط أيضاً بواجهة المستخدم الحقيقية في لحظة الإنشاء.

البدء ببضع أوامر

  1. قم بإعداد مشروع Node وأضف Playwright كاعتمادية (dependency).
  2. قم بتشغيل npx playwright init-agents --loop=vscode لبدء تشغيل حلقة الذكاء الاصطناعي داخل المحرر الخاص بك.
  3. اكتب اختبار "بذرة" (seed) بسيطاً يقوم بتحميل التطبيق؛ فهذا يمنح الوكلاء سياقاً ملموساً.
  4. أرسل مطالبات بلغة طبيعية (مثل: "Create a checkout flow covering discount codes") لتفعيل الـ Planner، واترك الـ Generator ينتج السكربت، واترك الـ Healer يحافظ على سلامته.

نصائح لجعل الوكلاء يعملون بشكل أفضل

  • اختبار بذرة واضح – يجب أن يقوم الاختبار الأولي بتشغيل التطبيق بشكل موثوق وكشف عناصر واجهة المستخدم الرئيسية؛ فنقاط الدخول الغامضة تربك الـ Planner.
  • بيانات بذرة منظمة – توفير ملفات JSON fixtures تصف المدخلات المتوقعة يساعد الـ Generator على اختيار المحددات المناسبة.
  • اطلب استخدام Page Object Model – إخبار الـ Generator صراحةً ببناء هياكل (scaffold) كائنات الصفحة ينتج كوداً أنظف وأسهل في الصيانة.
  • تعامل مع مخرجات الذكاء الاصطناعي كمسودة – راجع السكربتات التي تم إنشاؤها قبل اعتمادها؛ فلا يزال بإمكان الوكلاء تفويت تفاصيل منطق العمل الدقيقة أو إنتاج محددات عامة للغاية.

المخاطر والنقاط المقابلة

ما يجب مراقبته لاحقاً