مجموعة أدوات للتفاعل مع تطبيقات الويب المحلية واختبارها باستخدام Playwright، مع التحقق من وظائف الواجهة الأمامية، وتصحيح سلوك الواجهة، والتقاط لقطات شاشة، ومراجعة سجلات المتصفح.
من نص البرومبت
--- name: web-application-testing-skill description: مجموعة أدوات للتفاعل مع تطبيقات الويب المحلية واختبارها باستخدام Playwright. --- # اختبار تطبيقات الويب تساعدك هذه المهارة على اختبار تطبيقات الويب المحلية واستكشاف أخطائها بشكل شامل باستخدام أتمتة Playwright. ## متى تستخدم هذه المهارة استخدم هذه المهارة عندما تحتاج إلى: - اختبار وظائف الواجهة الأمامية في متصفح حقيقي - التحقق من سلوك واجهة المستخدم وتفاعلاتها - استكشاف مشاكل تطبيق الويب وإصلاحها - التقاط لقطات شاشة للتوثيق أو تصحيح الأخطاء - فحص سجلات Console في المتصفح - التحقق من إرسال النماذج ورحلات المستخدم - فحص استجابة التصميم عبر أحجام شاشة مختلفة ## المتطلبات المسبقة - تثبيت Node.js على النظام - تطبيق ويب يعمل محليًا أو عنوان URL يمكن الوصول إليه - سيتم تثبيت Playwright تلقائيًا إذا لم يكن موجودًا ## القدرات الأساسية ### 1. أتمتة المتصفح - الانتقال إلى عناوين URL - النقر على الأزرار والروابط - تعبئة حقول النماذج - اختيار القيم من القوائم المنسدلة - التعامل مع مربعات الحوار والتنبيهات ### 2. التحقق - التأكد من وجود العناصر - التحقق من محتوى النص - التحقق من ظهور العناصر - التحقق من عناوين URL - اختبار السلوك المتجاوب ### 3. تصحيح الأخطاء واستكشاف المشاكل - التقاط لقطات شاشة - عرض سجلات Console - فحص طلبات الشبكة - تشخيص الاختبارات الفاشلة ## أمثلة استخدام ### مثال 1: اختبار تنقّل بسيط ```javascript // الانتقال إلى صفحة والتحقق من عنوانها await page.goto('http://localhost:3000'); const title = await page.title(); console.log('عنوان الصفحة:', title); ``` ### مثال 2: التفاعل مع نموذج ```javascript // تعبئة نموذج الدخول وإرساله await page.fill('#username', 'testuser'); await page.fill('#password', 'password123'); await page.click('button[type="submit"]'); await page.waitForURL('**/dashboard'); ``` ### مثال 3: التقاط لقطة شاشة ```javascript // التقاط لقطة شاشة للمساعدة في تصحيح الأخطاء await page.screenshot({ path: 'debug.png', fullPage: true }); ``` ## إرشادات 1. **تأكد دائمًا من أن التطبيق يعمل** - تحقق من إمكانية الوصول إلى الخادم المحلي قبل تشغيل الاختبارات 2. **استخدم انتظارًا صريحًا** - انتظر اكتمال ظهور العناصر أو التنقّل قبل التفاعل معها 3. **التقط لقطات شاشة عند الفشل** - تساعد اللقطات في فهم المشكلة وتصحيحها بشكل أسرع 4. **نظّف الموارد بعد الانتهاء** - أغلق المتصفح دائمًا بعد انتهاء العمل 5. **تعامل مع انتهاء المهلة بشكل مناسب** - حدّد مدد انتظار معقولة للعمليات البطيئة 6. **اختبر بالتدرّج** - ابدأ بتفاعلات بسيطة قبل الانتقال إلى مسارات معقدة 7. **اختر المحددات بعناية** - فضّل data-testid أو المحددات المبنية على الدور بدل الاعتماد على أصناف CSS ## أنماط شائعة ### نمط: انتظار ظهور عنصر ```javascript await page.waitForSelector('#element-id', { state: 'visible' }); ``` ### نمط: التحقق من وجود عنصر ```javascript const exists = await page.locator('#element-id').count() > 0; ``` ### نمط: التقاط سجلات Console ```javascript page.on('console', msg => console.log('سجل المتصفح:', msg.text())); ``` ### نمط: التعامل مع الأخطاء ```javascript try { await page.click('#button'); } catch (error) { await page.screenshot({ path: 'error.png' }); throw error; } ``` ## القيود - تتطلب بيئة Node.js - لا يمكنها اختبار تطبيقات الجوال الأصلية؛ استخدم React Native Testing Library بدلًا من ذلك - قد تواجه صعوبات مع مسارات المصادقة المعقدة - قد تتطلب بعض أطر العمل الحديثة إعدادات خاصة
