الدرس 15 · الوحدة 8: سيناريوهات اختبار شاملة

اختبار الواجهة الآلي: Selenium و Cypress

المستخدم يرى الصفحة لا الدوال؛ كيف نختبر ما يراه آليًّا؟ ⏱ نحو 45 دقيقة.

بعد هذا الدرس ستستطيع أن:

تفهم اختبار الواجهة الآلي End-to-End.
تعرف Selenium و Cypress ونمطهما.
تستخدم معرّفات ثابتة لمتانة الاختبار.
تحاكي تدفّق «جِد ← تفاعل ← تحقّق».

١اختبار ما يراه المستخدم

اختبار الوحدة يفحص الدوال. لكن المستخدم لا يرى الدوال؛ يرى الصفحة: يضغط زرًّا، يملأ حقلًا، يتوقّع نتيجة. اختبار الواجهة الآلي End-to-End يحاكي هذا: يفتح متصفّحًا حقيقيًّا، ويتصرّف كمستخدم، ويتحقّق من النتيجة على الشاشة.

الأداة	الميزة	اللغة
Selenium WebDriver	يقود متصفّحات حقيقية، متعدّد اللغات	`Java/Python/C`#...
Cypress	حديث، سريع، للجافاسكربت	JavaScript
Playwright	يقود عدّة متصفّحات بثبات	`JS/Python...`

نمط العمل واحد: جِد عنصرًا (بمعرّفه أو نصّه) ← تفاعل معه (اضغط/اكتب) ← تحقّق من النتيجة. تمامًا كحالة اختبارٍ لكن على DOM.

٢كيف يبدو الكود حقًّا

تسجيل دخولٍ آليّ بـ Selenium (بايثون) وبـ Cypress (جافاسكربت) — لاحظ النمط المشترك:

// Selenium — Pythondriver.get("https://shop.sa/login")
driver.find_element(By.ID, "email").send_keys("a@b.sa")
driver.find_element(By.ID, "password").send_keys("1234")
driver.find_element(By.ID, "submit").click()
assert "لوحتي" in driver.page_source

// Cypress — JavaScriptcy.visit("/login")
cy.get("#email").type("a@b.sa")
cy.get("#password").type("1234")
cy.get("#submit").click()
cy.contains("لوحتي").should("be.visible")

كلاهما: زُر الصفحة، جِد الحقول بمعرّفاتها، اكتب، اضغط، تحقّق. المعرّفات الثابتة (id) تجعل الاختبار متينًا؛ الاعتماد على النصّ أو الموضع هشّ.

٣نحاكي الفكرة ببايثون

لا متصفّح هنا، لكن جوهر الاختبار (جِد ← تفاعل ← تحقّق) نحاكيه بـ «صفحةٍ» بسيطة لنفهم المنطق:

main.py

# صفحة وهمية: عناصر بمعرّفات، وحالة دخولpage = {"email": "", "password": "", "logged_in": False} def type_into(field, value):    page[field] = value def click_submit():    if page["email"] and page["password"]:        page["logged_in"] = True # سيناريو اختبار واجهةtype_into("email", "a@b.sa")      # جِد الحقل واكتبtype_into("password", "1234")click_submit()                     # اضغط الزرّassert page["logged_in"] is True   # تحقّق من النتيجةprint("✓ تسجيل الدخول نجح") # حالة سلبية: بلا كلمة مرورpage.update(email="x@y.sa", password="", logged_in=False)click_submit()assert page["logged_in"] is Falseprint("✓ رُفض الدخول بلا كلمة مرور")

Shell×

>>> %Run main.py

✓ تسجيل الدخول نجح

✓ رُفض الدخول بلا كلمة مرور

>>>

توقّع وتحقّق

اختبار الواجهة الآلي يحاكي:

أداة اختبار واجهة متعدّدة اللغات:

نمط اختبار الواجهة:

أمتن طريقة لإيجاد عنصر:

الخلاصة

اختبار الواجهة الآلي يحاكي المستخدم: يفتح متصفّحًا، يتفاعل، ويتحقّق من الشاشة.
Selenium (متعدّد اللغات) و Cypress (للجافاسكربت) أشهر الأدوات.
النمط: جِد عنصرًا بمعرّفٍ ثابت ← تفاعل معه ← تحقّق من النتيجة.
اختبارات الواجهة بطيئة وهشّة؛ قلّلها واعتمد على اختبارات الوحدة للمنطق.

تحدٍّ برمجي: اختبر تدفّقًا

متوسط

حاكِ اختبار واجهةٍ لعدّاد: الصفحة فيها count=0، وclick_plus تزيده. اضغط مرّتين وتحقّق أن العدّاد صار 2، ثم اطبع رسالة نجاح.

المطلوب:

استدعِ click_plus() مرّتين.
أكّد page["count"] == 2 ثم اطبع «نجح».

ابدأ من هذا الكود، واضغط ▶ شغّل هنا لتكتب حلّك وتجرّبه مباشرة:

main.py

page = {"count": 0}def click_plus():    page["count"] += 1# اضغط مرّتين، تحقّق أن count==2، واطبع "نجح"

المطلوب×

نجح

💡 تلميح 1

استدعِ click_plus() مرّتين.

💡 تلميح 2

assert page["count"] == 2 ثم print("نجح").

حاول بنفسك أولًا؛ للمسألة أكثر من حلّ صحيح.

main.py

page = {"count": 0}def click_plus():    page["count"] += 1click_plus()click_plus()assert page["count"] == 2print("نجح")

انتقل إلى تقييم الدرساختيار من متعدد، وصح وخطأ، وأكمل الفراغ، وتتبّع الناتج.ابدأ التقييم ←

📝 معلم؟ أرسل ملاحظة للمؤلف عن هذا الدرس