شفت مقدمة مكتبة QAcart بالدرس السابق. وأنا متأكد إنه في سؤال براسك:
«أنا دفعت حتى أتعلّم Playwright. ما هذه المكتبة؟ ليش ما نبدأ بـ Playwright مباشرة؟»
سؤال محترم تماماً، ويستاهل جواب صريح. وهذا الدرس هو الجواب.
وخليني أبدأ بالتطمين: ستتعلّم Playwright كامل — أكثر من 17 ساعة منه، من أول أمر لتصميم إطار عمل ودمج الـ API مع الـ E2E. هذه المكتبة مش بديل ولا اختصار. هي تحضير.
بنهاية هذا الدرس، ستكون قادراً على:
خليني أزيح أكبر سوء فهم من الطريق. مكتبة QAcart مبنية على Playwright — هي غلاف رفيع فوقه. الأوامر التي ستكتبها بالقسمين الجايين هي أوامر Playwright نفسها:
await page.getByRole('button', { name: 'إضافة' }).click();
await expect(page.getByTestId('task-title')).toHaveText('اشترِ حليب');هذا السطران Playwright صافي. ما في لغة تانية ولا أداة تانية ولا شي سترميه بعدين.
تعلّم الأتمتة فيه مهارتان مستقلتان تماماً:
1. تفكير الأتمتة
2. تشغيل مشروع Playwright
npm init و npx playwright install و tsconfigplaywright.config.ts — المشاريع والمتصفحات والـ ReportersbeforeEach و الـ HookswebServer بملف الإعدادات ما اشتغل. الدماغ لا يستطيع يتعلّم مفهومين جديدين بنفس اللحظة بكفاءة — يتعلّم واحد منهم سطحياً والثاني بالحفظ.
والنتيجة التي بشوفها كل يوم: مؤتمت يعرف يعدّل playwright.config.ts ممتاز، لكن اختباراته متذبذبة ومربوطة ببعضها — لأنه تعلّم الأداة ولا تعلّم التفكير.المكتبة تخفي المشروع حتى تركّز على الاختبار. بهذا القسم واللي بعده ما في عندك:
npm install تنتظرهكل هذا حتى يبقى شي واحد بتفكّر فيه: الاختبار نفسه.
لأنك ما بتحتاجها بعد.
الجافاسكربت بالكورس تبدأ بالقسم الرابع، وهي 15 ساعة كاملة — Functions و Classes و Arrays و Objects و Async و Node. وهذا كثير حتى تنتظره قبل ما تكتب أول اختبار بحياتك.
وأوامر المكتبة ما بتحتاج منها إشي. سطر واحد، اسم واضح، ونتيجة تشوفها بالمتصفح:
await page.getByLabel('البريد الإلكتروني').fill('hatem@qacart.com');هون الفرق الأهم عن أي مسار تاني: الانتقال شبه مجاني.
لأن المكتبة هي Playwright، فاللي تعلّمته بهذا القسم واللي بعده ما بينترجم — بيكمل. بالقسم الثامن (البداية مع Playwright) بتبلش تبني المشروع من الصفر، وبتلاقي إنه:
getByRole و getByLabel و getByTestId هي هي، وبالقسم 12 بتتعمّق فيهاclick و fill و check و hover، وبالقسم 13 بتشوف خياراتها الكاملةexpect(...).toHaveText(...)، وبتضيف عليها الـ auto-retry والـ soft assertionsواللي بتضيفه هو الغلاف اللي كنّا شايلينه عنك: المشروع والإعدادات (القسم 10) والـ Page Object Model (القسم 15) والـ API (القسم 16) والـ CI.
| الجزء | المدة | النسبة |
|---|---|---|
| مكتبة QAcart (القسمان 2-3) | ~3.5 ساعة | 9% |
| JavaScript و TypeScript (الأقسام 4-7) | ~15.5 ساعة | 42% |
| Playwright وتصميم الأطر (الأقسام 8-18) | ~17.5 ساعة | 48% |
أقل من عُشر الوقت للتفكير، والباقي للغة والأداة والأطر. ومعظم اللي بالعُشر الأول ينتقل معك للباقي.
بصراحة: أه، إذا انطبق عليك الثلاثة:
وقتها روح للقسم الرابع (أساسيات JavaScript) مباشرة، أو للقسم الثامن لو الجافاسكربت عندك جاهزة.
المكتبة هي Playwright — غلاف رفيع فوقه، وأوامرها أوامره. ما في شي سترميه.
ستتعلّم Playwright كامل — أكثر من 17 ساعة، من أول أمر لتصميم إطار ودمج API مع E2E.
في مهارتان مستقلتان: تفكير الأتمتة وتشغيل المشروع.
وتعلّمهم مع بعض يضاعف الصعوبة — الدماغ يتعلّم مفهوم جديد واحد بكفاءة، والثاني بالحفظ.
والنتيجة الشائعة: مؤتمت يعرف ملف الإعدادات ممتاز واختباراته متذبذبة ومربوطة.
ما بتحتاج جافاسكربت حتى تبدأ — أوامر المكتبة سطر واحد، والجافاسكربت تبدأ بالقسم الرابع.
الانتقال شبه مجاني — نفس المحددات ونفس الـ Actions ونفس الـ Assertions، وبتضيف عليها المشروع والإعدادات والأطر.
وستدخل Playwright تعرف لا تريد منه — محددات متينة، واستقلال، واستراتيجية Assertions.
أقل من عُشر وقت الكورس — ومعظمه ينتقل معك.
تستطيع أن تتخطّى إذا عندك سنة خبرة فعلية — وإذا ما كنت متأكد ما معنى "Atomic"، فلا تتخطّى.
في الدرس الجاي: رح نبلش فعلياً — أمر الإغلاق (Close Command)، وأول سطر كود إلك بالكورس.
يلا، نلتقي بالدرس الجاي!