خريطة الكورس — شو تقدر تتخطى وشو لأ

مقدمة

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

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

الهدف من الكورس جملة وحدة: تطلع منه قادر تبني مشروع أتمتة حقيقي من الصفر — مش تعرف syntax، مش تحفظ أوامر. مشروع كامل: بنية مجلدات، Page Objects، اختبار API، و Reporters مضبوطة.

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

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

• تعرف شو بيغطي كل قسم من الأقسام السبعتعش وليش هو بمكانه
• تحدد إذا الكورس مناسب إلك من وين لازم تبلش بالضبط
• تفهم ليش JavaScript و TypeScript جزء من الكورس مش شرط مسبق برّا
• ترسم إلك خطة دراسة واقعية بدل ما تفتح الدروس عشوائي

ليش Playwright

Playwright أداة من Microsoft لأتمتة المتصفح. لكن هاد التعريف ما بيقول شيء مفيد. خلينا نحكي عملي.

السبب الأول: الثبات. الشكوى الأولى من أي فريق أتمتة هي الـ Flaky Tests — تست بتنجح اليوم وبتفشل بكرا بدون ما يتغير شيء. Playwright بتعالج جزء كبير من هاد بالـ Auto-waiting: بتستنى العنصر يكون جاهز فعلياً قبل كل action، بدون ما تطلب منها.

السبب الثاني: السرعة. بتشتغل بالتوازي افتراضياً، وبتعزل كل تست بـ Browser Context مستقل. يعني مية تست ما بتاخد مية ضعف الوقت.

السبب الثالث: الأدوات. الـ Trace Viewer لحاله بيستاهل. لما تفشل تست على الـ CI الساعة ثلاثة الفجر، بتفتح الـ Trace وبتشوف الصفحة كاملة بكل خطوة — الـ DOM، الشبكة، الـ console. بتشخّص بدقيقة بدل ساعة.

شو رح تتعلم — قسم قسم

الكورس سبعتعش قسم، مرتبين عن قصد.

الأساس (قسم 2)

أفضل الممارسات في أتمتة الاختبار. قبل أي كود. هون بتتعلم شو معنى تست ذرية ومركزة ونظيفة، ما هي الـ Flakiness وكيف تعالجها، ما هو الـ Shift-Left، ومفهوم الـ Page Object Model كفكرة قبل ما نطبقها.

ليش هون؟ لأنه اللي بيتعلم الأداة قبل المبدأ بيكتب كود سيء بسرعة كبيرة.

اللغة (أقسام 3 إلى 6)

ثلاث أقسام JavaScript وقسم TypeScript. الأساسيات، الـ Classes والـ Arrays والـ Objects، الـ async و الـ Promises و الـ Node و الـ npm، وبعدها TypeScript كامل لحد الـ Generics و الـ tsconfig.

Playwright (أقسام 7 إلى 12)

هون بتبلش الأداة فعلياً:

• البداية — تثبيت المشروع، هيكلة الملفات، الـ Command Line، وأدوات التشخيص
• كتابة الاختبارات — أول Test، الـ Tags، الـ Annotations، الـ describe، الـ Hooks، الـ Test Steps، والـ Fixtures
• الإعدادات — ثلعش درس على playwright.config وحده، لأنه هاد الملف بيتحكم بكل شيء
• التنقل — الـ goto والتحقق من الـ URL والـ Title
• الـ Locators — أهم قسم بالكورس، لأنه الـ Locators هي السبب الأول لانهيار الأتمتة
• الـ Actions — الضغط والكتابة والرفع والـ Drag and Drop والـ iFrames

المشروع (أقسام 13 إلى 16)

وهون بنجمع كل شيء على تطبيق Todo حقيقي: تسجيل دخول، إنشاء حساب، إضافة مهمة، وحذف مهمة.

بنأتمته أول مرة بشكل مباشر، وبعدين بنعيد بناءه بـ Page Object Model كامل مع Components. وبعدها بنتعلم اختبار الـ API بـ request fixture ونبني Clients و Models حقيقية. وبآخر قسمين بندمج الاثنين: نستخدم الـ API لتجهيز البيانات، والـ UI لاختبار اللي يستاهل يتفحص بالـ UI.

هاي بالضبط طريقة الشغل بالشركات. مش تمرين تعليمي.

المواضيع المتقدمة (قسم 17)

وبالنهاية الأشياء اللي بتحتاجها بمشروع حقيقي: الـ waitForRequest و الـ waitForResponse، والـ Routing واعتراض الطلبات، وبناء Custom Fixtures بإيدك، والـ addLocatorHandler للحواجب اللي بتظهر فجأة.

لمين هاد الكورس

• مهندس اختبار يدوي بدّه ينتقل للأتمتة — ابدأ من القسم الأول ولا تتخطى شيء
• مؤتمت شغال بـ Selenium بدّه يضيف Playwright — ابدأ من القسم الأول، وبعدها اقفز على السادس
• مطور بدّه يكتب E2E لمشروعه — ابدأ من السادس، وارجع للأول لما تحتاج المبادئ
• خريج جديد — الكورس كامل مصمم إلك بالضبط، من الصفر

اللي مش مناسب إله: حدا بدّه اختصار. ما في اختصار بالأتمتة. في ترتيب صح، وهاد اللي بنقدمه.

كيف تدرس هاد الكورس

أربع قواعد، ما بتزيد:

1. افتح المحرر مع كل درس. مشاهدة الفيديو بدون كتابة كود هي أضعف طريقة تعلّم موجودة. اكتب الكود بإيدك، حتى لو نسخ.
2. كسّر الكود عن قصد. غيّر Locator ليصير غلط، شوف رسالة الخطأ، افهمها. رسائل خطأ Playwright من أوضح اللي رح تشوفها — تعلّم تقرأها من بدري.
3. لا تتخطى قسم الإعدادات. بيبين ممل وهو أكثر قسم رح تستفيد منه بأول شغل حقيقي إلك.
4. المشروع مش اختياري. الأقسام الأخيرة هي اللي بتحوّل المعرفة لمهارة. لو وقفت قبلهم، بتكون تعرف Playwright بس ما بتعرف تبني مشروع أتمتة.

خلاصة الدرس

1. الهدف من الكورس إنك تبني مشروع أتمتة كامل، مش تحفظ أوامر Playwright.
2. القسم الأول مبادئ قبل أي كود، لأنه اللي بيتعلم الأداة قبل المبدأ بيكتب كود سيء بسرعة.
3. JavaScript و TypeScript جواني الكورس — مش شرط مسبق. تخطاهم إذا إنت قوي، وخذهم كاملين إذا لأ.
4. أقسام 6 إلى 11 هي Playwright نفسها: الإعداد، كتابة الاختبارات، الإعدادات، التنقل، الـ Locators، والـ Actions.
5. المشروع العملي تطبيق Todo حقيقي — أتمتة مباشرة، بعدها Page Object Model، بعدها API، وبالآخر دمج الاثنين زي الشغل الحقيقي.
6. اكتب الكود بإيدك، كسّره عن قصد، ولا تتخطى قسم الإعدادات ولا المشروع.

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

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