شو بتحتاج قبل ما تبلش

مقال مجاني 3 دقيقة

مقدمة

آخر درس بهاد القسم، وبعده بنبلش فعلياً.

هون بنحكي عن التجهيز: شو لازم يكون منصّب على جهازك، وشو التطبيقات اللي رح نشتغل عليها، ووين تلاقي كل شيء لما تحتاجه.

كل الروابط اللي رح تحتاجها بهاد الكورس مرفقة مع هاد الدرس — تلاقيها بصندوق المصادر. حطه بـ bookmark وارجعله وقت ما بدك.


الأهداف التعليمية

بنهاية هاد الدرس، رح تكون قادر على:

  • تجهّز جهازك بالكامل للكورس
  • تعرف شو هي التطبيقات اللي رح نأتمتها وليش اخترناها
  • تلاقي التوثيق الرسمي والمستودعات بسرعة
  • تبلش القسم الجاي وإنت جاهز مش نص جاهز

اللي لازم يكون على جهازك

Node.js

هاد الوحيد الإجباري. Playwright بتشتغل عليه.

node -v      # لازم 18 أو أحدث
npm -v

إذا ما طلع لك رقم، نزّله من الموقع الرسمي. خذ نسخة LTS — الأحدث مش دايماً الأنسب.

محرر كود

VS Code هو المستخدم بالكورس، ومعه إضافة Playwright Test for VSCode الرسمية — بتخليك تشغّل تست بضغطة زر من جنب الكود وتشوف النتيجة مباشرة.

بتقدر تستخدم أي محرر ثاني، بس الشرح رح يكون على VS Code.

Git

مش إجباري للدروس، لكن رح تحتاجه تنزّل مشاريع التمارين. ولو بتشتغل بفريق فأنت أصلاً بتستخدمه.

نصيحة
ما تنصّب المتصفحات يدوياً. أول أمر رح نشغّله — npx playwright install — بينزّل Chromium و Firefox و WebKit لحاله. هاي وحدة من أحلى الأشياء بـ Playwright.

التطبيقات اللي رح نشتغل عليها

مش مواقع تجريبية عليها أزرار بلا معنى. تطبيقات حقيقية شغالة، وكودها مفتوح تقدر تقرأه.

تطبيق Todo

هاد مشروعنا الأساسي من قسم المشروع العملي لآخر الكورس. تطبيق مهام كامل: تسجيل، دخول، إضافة، حذف، وله API حقيقي — وهاد بالضبط اللي بيخلينا نقدر نأتمت الـ UI و الـ API ونربطهم ببعض.

تطبيق FIFA 26

بنستخدمه بقسم المواضيع المتقدمة، لما ناخد الـ waitForRequest و الـ waitForResponse و الـ Routing. فيه طلبات شبكة أكثر وأغنى، وهاد اللي بنحتاجه لهديك الدروس.

مهم
نزّل المشروعين وشغّلهم محلياً من بدري. ما تستنى لحد ما نوصل للقسم اللي بيستخدمهم. رح تحتاج شوي وقت لأول تشغيل (تنزيل الحزم)، وأحسن تعمله وأنت فاضي مش وأنت بنص درس.

كل مستودع فيه ملف README بيشرح التشغيل خطوة خطوة. الروابط بصندوق المصادر تحت.

وصفحة تمارين صغيرة

بقسم الـ Actions رح نشتغل على صفحة تمارين فيها كل عنصر بتحتاجه — زر، حقل، checkbox، radio، قائمة، رفع ملف، وdrag and drop — كل واحد بمثاله. صفحة وحدة بدون تنصيب، بتفتحها بالمتصفح وبتشتغل عليها مباشرة. رابطها كمان بصندوق المصادر.


التوثيق الرسمي

playwright.dev هو المرجع، وبصراحة من أفضل التوثيقات الموجودة بعالم الأدوات.

وهون نصيحة عملية: تعوّد ترجعله من هسا، مش بعد ما تخلص الكورس. الكورس بيعلمك تفهم وتشتغل؛ التوثيق بيعطيك التفاصيل الدقيقة لكل دالة. المؤتمت الشاطر بيقرأ التوثيق، مش بيحفظ.

بالمقابل، في بالكورس مقالات مرجعية جمعت لك فيها اللي بتستخدمه فعلياً — مرجع الـ Locators، ومرجع الـ Actions، وملف playwright.config كامل. هدول أسرع من التوثيق لما تكون بنص شغل.


قبل ما تبلش — قائمة سريعة

  • Node.js 18+ منصّب وnode -v بيشتغل
  • VS Code مع إضافة Playwright الرسمية
  • Git منصّب
  • مستودع تطبيق Todo منزّل وشغّال محلياً
  • مستودع FIFA 26 منزّل (بتحتاجه بآخر الكورس)
  • playwright.dev بالـ bookmarks

خلاصة الدرس

  1. Node.js 18+ هو الشرط الوحيد الإجباري. خذ نسخة LTS.
  2. VS Code + إضافة Playwright الرسمية هي البيئة المستخدمة بالكورس.
  3. ما تنصّب المتصفحات يدوياًnpx playwright install بيعملها لحاله.
  4. بنشتغل على تطبيقين حقيقيين: Todo للمشروع الأساسي، و FIFA 26 للمواضيع المتقدمة. نزّلهم من بدري.
  5. تعوّد على playwright.dev من هسا. والمقالات المرجعية بالكورس أسرع منه وأنت بنص شغل.

في الدرس الجاي: بنبلش أول قسم فعلي — أفضل الممارسات في أتمتة الاختبار. وزي ما حكينا: ما تتخطاه.

يلا، نلتقي بالدرس الجاي!