Vue Academy · درس

الاختبار الشامل

تحقّق من مسارات المستخدم الكاملة باستخدام اختبارات شاملة.

الاختبار الشامل درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 3 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 3 دروس في المجموع.

الاختبار كما يفعل المستخدم

يقود اختبار من البداية إلى النهاية تطبيقك الحقيقي في متصفح حقيقي، وينقر الأزرار ويملأ النماذج تمامًا كما يفعل المستخدم. ويتحقق من عمل كل شيء معًا، بدءًا من واجهة المستخدم ووصولًا إلى الواجهة الخلفية.

لماذا اختبارات E2E؟

تتحقق اختبارات الوحدة من الأجزاء بشكل مستقل، لكن اختبارات e2e وحدها تؤكد الرحلة الكاملة: أن يتمكن المستخدم من تسجيل الدخول والتنقل وإرسال نموذج ورؤية النتيجة. وهي تكتشف فجوات التكامل التي لا يكتشفها أي شيء آخر.

تثبيت Cypress

إن Cypress إطار شائع لاختبارات e2e، ويضم مشغّل اختبارات تفاعليًا. ثبّته كتبعية للتطوير وافتح مشغّله.

npm install -D cypress
npx cypress open

بنية اختبار Cypress

يستخدم اختبار Cypress describe لتجميع الاختبارات، وit لكل سيناريو، بما يحاكي صيغة الاختبارات المألوفة.

describe("Login flow", () => {
  it("logs in a user", () => {
    // steps go here
  })
})

زيارة صفحة

استخدم cy.visit لتحميل عنوان URL في المتصفح، وهو نقطة البداية لمعظم الاختبارات.

cy.visit("http://localhost:5173/login")

العثور على العناصر

تحدد cy.get العناصر باستخدام محدد CSS. وينتظر Cypress ظهور العناصر تلقائيًا، مما يقلل الاختبارات غير المستقرة.

cy.get("input[name=email]")
cy.get("button[type=submit]")

الكتابة في حقول الإدخال

سلسِل type إلى حقل إدخال محدد لمحاكاة الكتابة باستخدام لوحة المفاتيح.

cy.get("input[name=email]").type("user@example.com")
cy.get("input[name=password]").type("secret123")

النقر على العناصر

استخدم click للتفاعل مع الأزرار والروابط، تمامًا كما يفعل المستخدم.

cy.get("button[type=submit]").click()

التحقق من النتيجة

بعد التفاعل، تحقّق مما ينبغي أن يراه المستخدم الآن باستخدام should. يعيد Cypress محاولة عمليات التحقق حتى تنجح أو تنتهي المهلة.

cy.url().should("include", "/dashboard")
cy.contains("Welcome back").should("be.visible")

اختبار E2E متكامل

يؤدي جمع الخطوات معًا إلى اختبار واضح لمسار حقيقي ينفذه المستخدم.

describe("Login flow", () => {
  it("logs in successfully", () => {
    cy.visit("/login")
    cy.get("input[name=email]").type("user@example.com")
    cy.get("input[name=password]").type("secret123")
    cy.get("button[type=submit]").click()
    cy.url().should("include", "/dashboard")
  })
})

بديل Playwright

يُعد Playwright أداة E2E قوية أخرى ذات مفاهيم مشابهة: فهو يشغّل متصفحًا، ويتنقل بين الصفحات، ويتفاعل معها، ثم يجري عمليات التحقق. تختلف واجهة برمجته، لكن منهجية الاختبار واحدة.

// Playwright style
// await page.goto("/login")
// await page.fill("input[name=email]", "user@example.com")
// await page.click("button[type=submit]")
// await expect(page).toHaveURL(/dashboard/)

اختبار سريع

اختبر معرفتك باختبارات E2E.

مراجعة

تتحكم اختبارات النهاية إلى النهاية في التطبيق الحقيقي داخل متصفح. باستخدام Cypress، نظّم الاختبارات عبر describe/it، وحمّل الصفحات باستخدام cy.visit، واعثر على العناصر باستخدام cy.get، وتفاعل معها عبر type وclick، وتحقّق من النتائج باستخدام should. يتبع Playwright الأفكار نفسها. ستعمل بعد ذلك على تحسين بنية تطبيقك وتجهيزها للنشر.

الأسئلة الشائعة

هل درس «الاختبار الشامل» مجاني؟

نعم — نص درس «الاختبار الشامل» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 3 دروس في المجموع.

ماذا ستتعلم في «الاختبار الشامل»؟

تحقّق من مسارات المستخدم الكاملة باستخدام اختبارات شاملة. تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 3.

كم من الوقت يستغرق درس «الاختبار الشامل»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Vue Academy