أطلق بثقة عبر أتمتة تدقيقات واجهة المستخدم
الاختبار اليدوي عملية بطيئة ومليئة بالأخطاء وتقتل الزخم. في كل مرة أدفع فيها تغييرًا، كنت أقلق من الروابط المعطلة أو أخطاء الـ console المختبئة بوضوح في الموقع الإنتاجي. هذا يعني ساعات من النقر اليدوي كل أسبوع فقط للحفاظ على مستوى أساسي من الجودة.
بدأت أستخدم مهارة webapp-testing لإسناد هذا العمل إلى Eigent. ومن خلال الجمع بين أتمتة Playwright وسير العمل الوكالي (agentic workflow) في Eigent، يمكنني الآن تشغيل تدقيق كامل للموقع—بما في ذلك اللقطات المرئية وفحوصات السجلات—بمُدخل واحد فقط.
إليك كيف أعددت سير العمل لاختبار موقع Eigent.ai.
إعداد سكربت الاختبار
أبدأ بتحديد منطق الاختبار في سكربت Python. وباستخدام API غير المتزامن (async) في Playwright، يمكنني تتبع رسائل الـ console وإخفاقات الشبكة أثناء التنقل. يعمل هذا السكربت كعقل العملية، حيث يوجه Eigent بدقة إلى ما يجب البحث عنه—من روابط تنقل محددة إلى لقطات شاشة للصفحة كاملة.
نفّذ اختبارًا وظيفيًا وواجهة مستخدم شاملًا للموقع https://www.eigent.ai/ باستخدام مهارة webapp-testing.
إعداد مستمعي الأخطاء
أحد أكثر أجزاء هذا سير العمل قيمة هو التقاط الإخفاقات الصامتة. قمت بإعداد السكربت للاستماع إلى أخطاء console في المتصفح وطلبات الشبكة الفاشلة. يتيح ذلك لـ Eigent تسجيل المشكلات التقنية مثل رمز PostHog المفقود الذي وجدته—وهو خطأ في الإعداد قد يكون من السهل تفويته أثناء مراجعة يدوية.
التنقل في الموقع بشكل مستقل
يتولى Eigent القيادة في التنقل. يبدأ من الصفحة الرئيسية ويحدد روابط التنقل الأساسية مثل Environments وEnterprise. ومن خلال النقر عبر هذه الأقسام والانتظار حتى يصبح الشبكة في حالة خمول، يضمن أن كل انتقال بين الصفحات يتم بسلاسة وأن المحتوى يُحمَّل كما هو متوقع.
التقاط لقطات مرئية
تُعد لقطات الشاشة أفضل طريقة للتحقق من اتساق واجهة المستخدم عبر الصفحات. أثناء الاختبار، يأخذ Eigent تلقائيًا لقطات شاشة كاملة للصفحة الرئيسية والأقسام الداخلية. التقطت عدة عروض، بما في ذلك:
- الصفحة الرئيسية: /Users/celinexie/eigent/yuqinxie27/project_1773233237823-6389/task_1773240157579-7533/homepage.png
- صفحة Environments: /Users/celinexie/eigent/yuqinxie27/project_1773233237823-6389/task_1773240157579-7533/environments_page.png
- صفحة Enterprise: /Users/celinexie/eigent/yuqinxie27/project_1773233237823-6389/task_1773240157579-7533/enterprise_page.png
إنشاء التقرير الآلي
بمجرد اكتمال التنقل، يجمع Eigent كل شيء في تقرير Markdown. يتضمن ذلك ملخصًا للنتائج، وقائمة بأخطاء console، والمسارات المطلقة لجميع لقطات الشاشة الملتقطة. وجود كل هذه البيانات في مكان واحد يجعل عملية المراجعة فورية.
تحليل النتائج
أراجع المخرجات لتحديد أي عوائق حرجة. في هذه الجولة، التقط التدقيق خطأ تهيئة PostHog ووسم أصل فيديو تم إجهاضه عند task_splitting.mp4. هذه ليست مجرد أخطاء—بل فرص لتحسين تجربة المستخدم قبل أن يراها أي عميل.
توسيع نطاق الجودة دون توسيع الجهد
الأمر لا يتعلق فقط بالتقاط بضعة أخطاء في الـ console. يوضح هذا سير العمل كيف يحول Eigent أداة تقنية مثل Playwright إلى شريك جودة مستقل. بدلًا من كتابة وصيانة مجموعات اختبار معقدة لكل تغيير صغير في واجهة المستخدم، يمكنني ببساطة توجيه Eigent إلى عنوان URL والحصول على تقرير كامل بالنتائج.
إن أتمتة الأجزاء "المملة" من QA تتيح للمطورين التركيز على بناء الميزات مع ضمان بقاء الموقع الحالي قويًا وموثوقًا.
ما الذي يمكنك تجربته بعد ذلك
راجع https://eigent.ai/pricing من حيث التوافق مع الجوال والتقط لقطة شاشة بدقة 375x812. تحقّق من الصور المعطلة عبر جميع منشورات المدونة في الموقع وسجّل أي أخطاء 404. تأكد من أن زر 'Book a Demo' في صفحة Enterprise يفتح نافذة الجدولة المنبثقة بشكل صحيح.
يستفيد كل واحد من هذه من مهارة webapp-testing نفسها—دون الحاجة إلى أي إعداد إضافي.
نصائح للحصول على نتائج أفضل
- استخدم حالات الانتظار networkidle. يضمن ذلك أن الأصول غير المتزامنة وبرامج التتبع النصية قد انتهت من التحميل قبل أن يلتقط Eigent لقطة شاشة أو يتحقق من الأخطاء.
- استبعد الطلبات الملغاة. تقوم العديد من المتصفحات بإلغاء الطلبات أثناء التنقل السريع أو التحميل الكسول. يساعدك استبعادها على التركيز على أخطاء 404 الحقيقية وأخطاء الخادم.
- كن محددًا بشأن الأدوار. عند توجيه Eigent للنقر على الأزرار، استخدم محددات قائمة على الدور مثل link أو button لجعل الاختبارات أكثر مرونة أمام تغييرات CSS.
