مجموعة أدوات للتفاعل مع تطبيقات الويب المحلية واختبارها باستخدام 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 بدلًا من ذلك
- قد تواجه صعوبات مع مسارات المصادقة المعقدة
- قد تتطلب بعض أطر العمل الحديثة إعدادات خاصة
