اختبار تطبيقات الويب

# اختبار تطبيقات الويب

لاختبار تطبيقات الويب المحلية، اكتب سكريبتات Playwright أصلية بلغة Python.

**السكريبتات المساعدة المتاحة**: - `scripts/with_server.py` - يدير دورة حياة الخادم (يدعم عدة خوادم)

**دائما قم بتشغيل السكريبتات مع `--help` أولا** لمعرفة الاستخدام. لا تقرأ الكود المصدري حتى تحاول تشغيل السكريبت أولا وتجد أن حلا مخصصا ضروري تماما. قد تكون هذه السكريبتات كبيرة جدا وبالتالي تستهلك نافذة السياق الخاصة بك. فهي موجودة لكي يتم استدعاؤها مباشرة كصناديق سوداء بدلا من إدراجها في نافذة السياق الخاصة بك.

## شجرة القرار: اختيار نهجك

``` مهمة المستخدم → هل هي HTML ثابتة؟ ├─ نعم → اقرأ ملف HTML مباشرة لتحديد المحددات │ ├─ نجح → اكتب سكريبت Playwright باستخدام المحددات │ └─ فشل/غير مكتمل → تعامل معها كديناميكية (أدناه) │ └─ لا (تطبيق ويب ديناميكي) → هل الخادم قيد التشغيل بالفعل؟ ├─ لا → قم بتشغيل: python scripts/with_server.py --help │ ثم استخدم المساعد واكتب سكريبت Playwright مبسط │ └─ نعم → الاستطلاع ثم التنفيذ: 1. انتقل وانتظر networkidle 2. خذ لقطة شاشة أو افحص DOM 3. حدد المحددات من الحالة المعروضة 4. نفذ الإجراءات باستخدام المحددات المكتشفة ```

## مثال: استخدام with_server.py

لبدء خادم، قم بتشغيل `--help` أولا، ثم استخدم المساعد:

**خادم واحد:** ```bash python scripts/with_server.py --server "npm run dev" --port 5173 -- python your_automation.py ```

**عدة خوادم (مثل backend + frontend):** ```bash python scripts/with_server.py \ --server "cd backend && python server.py" --port 3000 \ --server "cd frontend && npm run dev" --port 5173 \ -- python your_automation.py ```

لإنشاء سكريبت الأتمتة، قم بتضمين منطق Playwright فقط (يتم إدارة الخوادم تلقائيا): ```python from playwright.sync_api import sync_playwright

with sync_playwright() as p: browser = p.chromium.launch(headless=True) # دائما قم بتشغيل chromium في الوضع headless page = browser.new_page() page.goto('http://localhost:5173') # الخادم قيد التشغيل وجاهز بالفعل page.wait_for_load_state('networkidle') # حرج: انتظر تنفيذ JavaScript # ... منطق الأتمتة الخاص بك browser.close() ```

## نمط الاستطلاع ثم التنفيذ

1. **افحص DOM المعروض**: ```python page.screenshot(path='/tmp/inspect.png', full_page=True) content = page.content() page.locator('button').all() ```

2. **حدد المحددات** من نتائج الفحص

3. **نفذ الإجراءات** باستخدام المحددات المكتشفة

## الخطأ الشائع

❌ **لا** تفحص DOM قبل انتظار `networkidle` على التطبيقات الديناميكية ✅ **افعل** انتظر `page.wait_for_load_state('networkidle')` قبل الفحص

## أفضل الممارسات

- **استخدم السكريبتات المجمعة كصناديق سوداء** - لإنجاز مهمة، فكر فيما إذا كان أحد السكريبتات المتاحة في `scripts/` يمكنه المساعدة. تتعامل هذه السكريبتات مع سير العمل الشائعة والمعقدة بشكل موثوق دون تلويث نافذة السياق الخاصة بك. استخدم `--help` لمعرفة الاستخدام، ثم قم بالاستدعاء مباشرة. - استخدم `sync_playwright()` للسكريبتات المتزامنة - أغلق المتصفح دائما عند الانتهاء - استخدم محددات وصفية: `text=` أو `role=` أو محددات CSS أو IDs - أضف انتظارات مناسبة: `page.wait_for_selector()` أو `page.wait_for_timeout()`

## ملفات المرجع

- **examples/** - أمثلة توضح الأنماط الشائعة: - `element_discovery.py` - اكتشاف الأزرار والروابط والمدخلات على الصفحة - `static_html_automation.py` - استخدام عناوين URL file:// لـ HTML محلي - `console_logging.py` - التقاط سجلات وحدة التحكم أثناء الأتمتة