Angular Academy · درس

المحدّدات وعمليات التحقق

استهدف العناصر وتحقّق من الحالة

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

المحددات الجيدة تجعل الاختبارات مستقرة

تحدد طريقة العثور على العناصر مدى متانة اختباراتك. فالمحددات المرتبطة بفئات CSS أو ببنية DOM تتعطل عند كل إعادة تصميم. أما Locators الدلالية الموجهة للمستخدم فتصمد أمام إعادة الهيكلة لأنها تعكس ما يدركه المستخدمون فعليًا.

getByRole: الـ Locator المفضل

يعثر getByRole على العناصر باستخدام دورها في إمكانية الوصول واسمها المتاح. وهو أكثر Locators قدرة على الصمود، ويعمل أيضًا كفحص لإمكانية الوصول.

page.getByRole('button', { name: 'Submit' });
page.getByRole('heading', { name: 'Dashboard' });
page.getByRole('link', { name: 'Profile' });

getByLabel وgetByPlaceholder

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

page.getByLabel('Email address');
page.getByPlaceholder('Search products');

getByText وgetByTestId

يطابق getByText النص الظاهر. وعندما لا يتوفر مقبض دلالي، استخدم getByTestId كخيار احتياطي، إذ يقرأ سمة data-testid التي تضيفها عمدًا.

page.getByText('Order confirmed');
page.getByTestId('cart-total'); // <span data-testid="cart-total">

تجنّب محددات CSS الهشة

لا يزال بإمكانك استخدام page.locator('.css-selector')، لكن اعتبره خيارًا أخيرًا. تتغير أسماء الفئات والتداخل كثيرًا، بينما نادرًا ما تتغير الأدوار والتسميات.

// Fragile, avoid when possible:
page.locator('div.row > button.primary');

التأكيدات المعتمدة على الويب أولًا

إن expect في Playwright الخاص بـ Locators هو معتمد على الويب أولًا: إذ يعيد المحاولة تلقائيًا حتى يتحقق الشرط أو تنتهي المهلة. وهذه هي النقطة الأساسية لتأكيدات لا تفشل بشكل متقطع.

await expect(page.getByText('Saved')).toBeVisible();
await expect(page.getByRole('button', { name: 'Save' })).toBeEnabled();

مطابقات التأكيد الشائعة

تصف المطابقة الحالة المتوقعة لعنصر أو صفحة.

await expect(locator).toBeVisible();
await expect(locator).toHaveText('Hello');
await expect(locator).toHaveValue('ada@example.com');
await expect(locator).toHaveCount(3);
await expect(page).toHaveURL(/dashboard/);

التأكيد على أعداد القوائم

للتحقق من العناصر المتكررة، حدّد موقعها جميعًا ثم أكّد العدد. يطابق Locator كل عنصر، ويعيد toHaveCount المحاولة حتى يستقر العدد.

const rows = page.getByRole('listitem');
await expect(rows).toHaveCount(5);
await expect(rows.first()).toContainText('First');

التأكيدات السلبية

استخدم .not للتأكيد على غياب شيء أو كونه مخفيًا، مثلًا بعد حذف عنصر.

await page.getByRole('button', { name: 'Delete' }).click();
await expect(page.getByText('Item 1')).not.toBeVisible();

تصفية Locators وتسلسلها

حسّن Locator باستخدام filter أو اربطه لتحديد النطاق داخل عنصر أب، مما يحافظ على دقة التأكيدات.

const card = page.getByRole('listitem').filter({ hasText: 'Pro plan' });
await expect(card.getByRole('button', { name: 'Choose' })).toBeVisible();

لماذا تتفوق التأكيدات المعتمدة على الويب أولًا على الاستطلاع اليدوي

تعيد التأكيدات المعتمدة على الويب أولًا محاولة التعبير الكامل، لا مجرد إعادة قراءة لقطة قديمة. لذلك ينتظر await expect(loc).toHaveText('Done') ظهور النص، فيلغي حالات السباق التي تكثر في أساليب الانتظار المكتوبة يدويًا.

تحقّق سريعًا

اختر Locator الأكثر قدرة على الصمود.

مراجعة

فضّل Locators الدلالية: getByRole وgetByLabel وgetByText، مع استخدام getByTestId كخيار احتياطي. أجرِ التأكيدات باستخدام المطابقات المعتمدة على الويب أولًا (toBeVisible وtoHaveText وtoHaveCount وtoHaveURL) التي تعيد المحاولة تلقائيًا، واستخدم .not وfilter للحفاظ على الدقة.

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

هل درس «المحدّدات وعمليات التحقق» مجاني؟

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

ماذا ستتعلم في «المحدّدات وعمليات التحقق»؟

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

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

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

كم من الوقت يستغرق درس «المحدّدات وعمليات التحقق»؟

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

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

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

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

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