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