احترف Playwright — الدليل الكامل

من الصفر لمهندس أتمتة يبني Framework كامل بـ Playwright

معظم كورسات الأتمتة تبدأ من نصف الطريق. تفترض أنك تعرف JavaScript، وتفترض أنك تعرف ما معنى اختبار جيد، وتأخذك مباشرة على أوامر الأداة.

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

هذا الكورس ما يفترض شيء. يبدأ من مبادئ الأتمتة نفسها — قبل أي أداة — وبعدها يأخذك على اللغة اللي ستكتب فيها، وبعدها Playwright من أول أمر لآخر Framework.

كل درس فيه تطبيق عملي على شاشة حقيقية. مش شرائح.

ماذا ستتعلم؟

المرحلة الأولى — المبادئ قبل الأداة

قبل ما تفتح Playwright أصلاً: ما معنى اختبار Atomic و Focused و Clean، وليش تصير الاختبارات Flaky وكيف تشخّصها، واستراتيجية الـ Assertions، والـ Page Object Model كفكرة، والبيئات الديناميكية، و الـ Shift-Left — إيمتى يبدأ شغل المؤتمت.

هذه المرحلة اللي تفرق. الأدوات تتغير كل سنتين؛ هذا الجزء يضل معك.

المرحلة الثانية — تكتب اختبارات من أول يوم (مجاناً)

قبل أي npm install وقبل أول سطر جافاسكربت: 33 درس على مكتبة QAcart (21 منهم بالقسم الثاني المجاني) — غلاف رفيع فوق Playwright، على تطبيق مجهّز مسبقاً. تفتح الصفحة وتلاقي العنصر وتضغط وتكتب وتتحقق، وبعدها تمرين Register كامل بحلّه، وطلب واجهة برمجة واستجابتها، والاستماع لطلب الواجهة ومحاكاة استجابته، واختبار تكامل بين الواجهة والـ API.

والأوامر هي أوامر Playwright نفسها — getByRole و fill و expect(...).toHaveText(...) — فما في شي سترميه لاحقاً؛ بالمرحلة الرابعة بتضيف حوله المشروع والإعدادات.

أول قسمين مجاناً بالكامل — 28 درس، بلا حساب وبلا بطاقة. كل أوامر المكتبة جوّاهم، فتجرّب أسلوب الشرح وتكتب اختبارات فعلية قبل ما تدفع.

المرحلة الثالثة — اللغة اللي ستشتغل فيها

JavaScript كاملة من الصفر — 82 درس على ثلاثة أقسام: المتغيرات وأنواع البيانات، والـ Functions و الـ Arrow Functions و الـ Closures، والـ Classes و الـ Inheritance، والـ Arrays و الـ Objects بكل دوالهم، والـ Event Loop و الـ Promises و async/await و fetch، وبعدها Node و npm والـ Modules.

وبعدها TypeScript — 16 درس: الأنواع الأساسية والـ Union، والـ Interfaces، والـ Generics، والـ Enums، وملف tsconfig مشروح، و الـ Type Safety داخل الـ Page Objects تطبيقاً عملياً.

هذا مش كورس لغة منفصل — كل مثال مربوط بشغل المؤتمت. تتعلم async/await لأنه كل سطر بـ Playwright يحتاج await، وتتعلم الـ Interfaces لأنه Page Object بدونها ينكسر بصمت.

المرحلة الرابعة — تمسك Playwright صح

الإعداد وهيكلة المشروع، والـ Command Line، والـ UI Mode و الـ Trace Viewer و الـ Inspector. وبعدها كتابة الاختبارات: الـ Auto-waiting و الـ Web-First Assertions (وليش ما في sleep بـ Playwright)، والـ Tags و الـ Annotations و الـ Hooks و الـ Test Steps، و الـ Fixtures بدل الـ Hooks — الطريقة الحديثة.

المرحلة الخامسة — تتحكم بالإعدادات كلها

قسم كامل — 18 درس — على playwright.config: الـ Workers و الـ Retries و الـ Timeouts (وأيها يغلب أيها)، والـ Reporters، والـ baseURL، والـ viewport و الـ geolocation و الـ locale و الـ permissions، وإعدادات الشبكة و الـ Screenshot و الـ Video و الـ Trace، والـ Projects وتعدد المتصفحات، وتشغيل الكل على GitHub Actions.

معظم مشاكل الأتمتة تنحل من هذا الملف، وأكثر الناس ما تفتحه.

المرحلة السادسة — الـ Locators و الـ Actions

استراتيجية الـ Locators والترتيب الصحيح، والـ CSS Selectors، و getByPlaceholder و getByText و getByLabel و getByTestId، والـ filter و الـ Chaining، و الـ Strict Mode وليش يفشل الاختبار لما يلاقي عنصرين. وبعدها كل الـ Actions — من الـ click لرفع الملفات و الـ Drag and Drop و الـ iFrames و الـ Dialogs، مع الـ Actionability Checks اللي يعملها Playwright قبل كل Action.

المرحلة السابعة — مشروع حقيقي

تطبيق Todo كامل: Login و Register وإضافة وحذف، مع بيانات اختبار واستقلالية بين الاختبارات. مشروع واحد تشتغل عليه من القسم الرابع عشر لآخر الكورس، مش أمثلة متفرقة.

المرحلة الثامنة — Framework تسلّمه لفريق

الـ Page Object Model خطوة بخطوة — الـ Constructor، والـ Components، والـ Base Page و الـ Helpers، وإخفاء الـ Implementation عن الاختبار، ومقارنة الـ POM بالـ Fixtures و الـ Helpers.

وبعدها اختبار الـ API بالـ request fixture: الـ Assertions، وبناء الـ Auth Client و الـ Todo Client و الـ Models، ومعالجة الـ Tokens، و الـ storageState لتسريع الـ E2E بتخطي الـ Login. وبالنهاية تستخدم الـ API جوّا الـ E2E، وتعرف إيمتى API وإيمتى UI.

المرحلة التاسعة — المواضيع المتقدمة

هنا الأشياء اللي تفرّق بمشروع حقيقي، ونادراً تلاقيها بكورس عربي:

• التحكم بالشبكة — waitForRequest و waitForResponse: تنتظر طلباً معيّناً حسب الـ URL أو الـ Method بدل ما تنتظر وقتاً.
• الـ Routing واعتراض الطلبات — تعترض أي طلب وترجّع اللي تريده. هيك تفحص شكل الشاشة لما يرجّع الـ API خطأ 500 بدون ما تكسر السيرفر.
• بناء Custom Fixtures بإيدك — توسّع الـ test نفسها وتمرّر بيانات جاهزة لكل اختبار، بدل ما تكرر التجهيز.
• الـ addLocatorHandler — للإعلانات و الـ banners اللي تظهر بأوقات عشوائية وتكسر اختباراتك بدون سبب واضح.

وهذا كله على تطبيق FIFA — تطبيق ثانٍ فيه طلبات شبكة أغنى، لأنه هذه الدروس تحتاج شبكة حقيقية مش نموذجاً بسيطاً.

لمن هذا الكورس؟

• ✅ مهندس اختبار يدوي يريد ينتقل للأتمتة وما يعرف من وين يبدأ — ما تحتاج تعرف برمجة قبله
• ✅ مهندس أتمتة على Selenium يريد ينتقل لـ Playwright
• ✅ مطوّر يريد يكتب E2E tests لمشروعه
• ✅ من اشتغل شوي Playwright لكن اختباراته تنكسر وما يعرف ليش
• ❌ مش لمن يبحث عن شهادة بدون شغل عملي — هذا كورس تكتب فيه كود من أول قسم

ليش هذا الكورس مختلف؟

يبدأ قبل الأداة. قسم كامل على مبادئ الأتمتة قبل ما نفتح Playwright — لأنه الأداة بإيد من ما يعرف ما هو الاختبار الجيد تنتج اختبارات هشة بسرعة أكبر.

اللغة جوّا الكورس. ما في «روح تعلّم JavaScript وارجع». JavaScript و TypeScript كاملين هنا — 98 درس — بأمثلة من شغل الأتمتة.

يوصل لآخر الطريق. أكثر الكورسات تقف عند الـ Locators و الـ Actions. هنا تكمل للـ Page Object Model و الـ Models و اختبار الـ API — الشغل اللي تُبنى عليه المقابلات — وبعدها لمواضيع متقدمة زي الـ Routing و الـ Custom Fixtures، اللي عادة تتعلمها بعد سنة بالشغل مش بكورس.

كله على شاشة حقيقية. كل مفهوم تشوفه ينفّذ قدامك، بالكود، مع الأخطاء اللي تطلع وكيف تنحل.

ماذا ستستطيع أن تعمل بعد الكورس؟

• تبني Framework أتمتة كامل بـ Playwright و TypeScript من الصفر
• تقرأ وتكتب JavaScript و TypeScript بثقة — مش نسخ ولصق
• تكتب Locators ما تنكسر مع أول تغيير بالتصميم
• تضبط playwright.config لمشروعك: Parallel و Retries و Reporters و Projects
• تصمّم Page Objects و Components يشتغل عليها فريق كامل
• تختبر الـ API لحاله، وتستخدمه جوّا الـ E2E حتى تسرّع اختباراتك وتثبّتها
• تعترض طلبات الشبكة وتفحص حالات الفشل بدون ما تلمس السيرفر
• تبني Custom Fixtures تختصر التجهيز المتكرر على فريقك
• تشغّل اختباراتك على GitHub Actions
• تقرأ اختباراً فاشلاً وتعرف وين المشكلة بدل ما تعيد تشغيله وتتمنى

أرقام الكورس

• 274 درس — 213 فيديو و61 درس مكتوب
• 35 ساعة فيديو عملية
• 19 قسم — من مبادئ الأتمتة لـ Framework كامل، وبالآخر قسم تجهيز الجهاز
• 64 ألف كلمة مكتوبة (≈ 255 صفحة) — مراجع وجداول قرار ومواضيع مش بالفيديوهات
• JavaScript و TypeScript جوّا الكورس، مش متطلب خارجي — 98 درس
• مشروع واحد كامل تشتغل عليه من القسم الرابع عشر لآخر الكورس
• دفع مرة واحدة — وصول مستمر طول ما المنصة شغالة، وبكل التحديثات الجاية
• 28 درس مجاني — أول قسمين كاملين، تجرّبها هسا قبل ما تشتري

أسئلة شائعة

هل أحتاج خبرة برمجة؟

لأ. JavaScript و TypeScript جوّا الكورس — أربعة أقسام كاملة. وإذا كنت تعرفهم، تخطّاهم وابدأ من Playwright مباشرة؛ خريطة الكورس بالقسم الأول تقول لك بالضبط ماذا تستطيع تتخطى.

هل الكورس بالعربي؟

نعم، الشرح كله بالعربي والمصطلحات التقنية تبقى بالإنجليزي زي ما هي بسوق العمل.

أنا شغال Selenium — هل أستفيد؟

كثيراً. المفاهيم مألوفة لكن الأدوات أسرع وأوضح، وفي درس كامل يقارن Playwright بـ Selenium و Cypress ومتى تختار كل واحد. وقسم المبادئ وقسم دمج الـ API مع الـ E2E يشتغلوا مع أي أداة.

الكورس خلص تسجيل؟

لسا تُضاف عليه دروس، ونقولها بصراحة. اللي موجود هسا كامل ومرتّب — من المبادئ لحد المواضيع المتقدمة — واللي جاي يُضاف لحسابك تلقائياً بدون دفعة إضافية.

في تمارين؟

في تطبيق عملي بكل درس، وقسم كامل عبارة عن مشروع تبنيه خطوة خطوة، وتمارين على تطبيق FIFA بالقسم المتقدم.

لَإيمتى يضل الكورس إلي؟

تدفع مرة واحدة، ويضل الكورس إلك طول ما منصة QAcart شغالة، وأي درس جديد يوصلك بدون دفع إضافي.

لكن بصراحة: ما في منصة تستطيع تضمن «مدى الحياة» حرفياً. إذا سكّرت المنصة، ينتهي الوصول. هذه مش الخطة — لكن نفضّل تعرفها من هسا.

كيف أستطيع أدفع؟

• بطاقة (فيزا/ماستركارد) — $37 مرة واحدة، ويُفتح الكورس فوراً.
• كليك (الأردن) — 26 دينار على الاسم المستعار QACART. بعد التحويل ابعث لنا على واتساب إيميلك وصورة الحوالة.

سجّل حساب بنفس الإيميل قبل ما تبعث لنا.

جاهز تبدأ؟

الكورس بـ 37 دولار أو 26 دينار، دفعة وحدة، ووصول يضل معك مع كل درس جديد يُضاف.

جرّب الدروس المجانية أول — إذا ناسبك أسلوب الشرح، ستعرف بالضبط ماذا تشتري.