Playwright

من نص البرومبت

--- name: web-application-testing-skill description: مجموعة أدوات للتفاعل مع تطبيقات الويب المحلية واختبارها باستخدام Playwright. --- # اختبار تطبيقات الويب تمكّنك هذه المهارة من اختبار تطبيقات الويب المحلية واستكشاف أخطائها بشكل شامل باستخدام أتمتة Playwright. ## متى تستخدم هذه المهارة استخدم هذه المهارة عندما تحتاج إلى: - اختبار وظائف الواجهة الأمامية في متصفح حقيقي - التحقق من سلوك واجهة المستخدم وتفاعلاتها - استكشاف مشكلات تطبيقات الويب وإصلاحها - التقاط لقطات شاشة لأغراض التوثيق أو التصحيح - فحص سجلات وحدة تحكّم المتصفح - التحقق من إرسال النماذج ومسارات المستخدم - التحقق من تجاوب التصميم عبر أحجام منافذ عرض مختلفة ## المتطلبات المسبقة - تثبيت Node.js على النظام - وجود تطبيق ويب يعمل محليًا، أو عنوان URL يمكن الوصول إليه - سيتم تثبيت Playwright تلقائيًا إذا لم يكن متوفرًا ## القدرات الأساسية ### 1. أتمتة المتصفح - الانتقال إلى عناوين URL - النقر على الأزرار والروابط - تعبئة حقول النماذج - اختيار القيم من القوائم المنسدلة - التعامل مع مربعات الحوار والتنبيهات ### 2. التحقق - التأكد من وجود العناصر - التحقق من محتوى النصوص - التأكد من ظهور العناصر - التحقق من عناوين URL - اختبار السلوك المتجاوب ### 3. التصحيح - التقاط لقطات شاشة - عرض سجلات وحدة التحكّم - فحص طلبات الشبكة - تصحيح الاختبارات الفاشلة ## أمثلة على الاستخدام ### مثال 1: اختبار تنقّل أساسي ```javascript // الانتقال إلى صفحة والتحقق من عنوانها await page.goto('http://localhost:3000'); const title = await page.title(); console.log('Page title:', 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 أو المحددات المبنية على role بدل الاعتماد على فئات CSS ## أنماط شائعة ### النمط: انتظار ظهور عنصر ```javascript await page.waitForSelector('#element-id', { state: 'visible' }); ``` ### النمط: التحقق من وجود عنصر ```javascript const exists = await page.locator('#element-id').count() > 0; ``` ### النمط: الحصول على سجلات وحدة التحكّم ```javascript page.on('console', msg => console.log('Browser 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 بدلًا من ذلك - قد يواجه تحديات مع مسارات المصادقة المعقدة - قد تتطلب بعض أطر العمل الحديثة إعدادات محددة