محددو المواقع في Selenium

ما هي محددات المواقع في Selenium?

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

بينما لا تتطلب بعض الأوامر، مثل الأمر "فتح"، مُحدد موقع، فإن غالبية Selenium تعتمد الأوامر على محددات العناصر. يعتمد اختيار الموقع إلى حد كبير على التطبيق قيد الاختبار (AUT). في هذا الدرس التعليمي، سنتناوب بين فيسبوك و Mercury موقع تجريبي للجولات السياحية (newtours.demoaut)، بناءً على محددات المواقع التي يدعمها كل تطبيق. وبالمثل، في موقعك الخاص تجريب في المشروع، ستختار محدد موقع العنصر في Selenium يعتمد WebDriver على بنية تطبيقك.

تحديد الموقع عن طريق الهوية

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

Target شكل: معرف = معرف العنصر

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

الخطوة 1) استخدم هذه الصفحة التجريبية https://demo.guru99.com/test/facebook.html للاختبار. افحص مربع نص "البريد الإلكتروني أو رقم الهاتف" باستخدام أدوات المطورين المدمجة في متصفحك (اضغط F12 في Chrome أو Edge أو Firefox) ولاحظ معرّفه. في هذه الحالة، المعرّف هو "البريد الإلكتروني".

الخطوة 2) إطلاق Selenium IDE وأدخل "id=email" في Target انقر على زر "بحث" ولاحظ أن مربع النص "البريد الإلكتروني أو رقم الهاتف" مُظلل باللون الأصفر مع إطار أخضر، مما يشير إلى أن Selenium لقد حدد برنامج IDE موقع العنصر بشكل صحيح.

تحديد الموقع بالاسم

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

Target شكل: الاسم=اسم العنصر

سنستخدم في العرض التوضيحي التالي Mercury الجولات لأن جميع عناصر النموذج المهمة على الموقع تحمل سمة اسم.

الخطوة 1) انتقل إلى https://demo.guru99.com/test/newtours/ واستخدم أدوات مطوري المتصفح لفحص مربع نص "اسم المستخدم". لاحظ سمة الاسم الخاصة به.

هنا، اسم العنصر هو "userName".

الخطوة 2) In Selenium IDE، أدخل "اسم = اسم المستخدم" في ملف Target المربع ثم انقر على زر البحث. Selenium ينبغي أن يحدد برنامج IDE مربع نص اسم المستخدم عن طريق تمييزه.

كيفية تحديد موقع العنصر بالاسم باستخدام المرشحات

تُعدّ المرشحات مفيدة عندما تشترك عدة عناصر في نفس سمة الاسم. تُعدّ المرشحات سمات إضافية تُستخدم لتمييز العناصر التي تشترك في نفس الاسم. بدون فلاتر، Selenium سيتم افتراضياً اختيار العنصر الأول المطابق فقط.

Target شكل: name=name_of_the_element filter=value_of_filter

دعونا نستعرض مثالاً.

الخطوة 1) تسجيل الدخول إلى Mercury جولات.

سجل الدخول إلى Mercury استخدم كلمة "tutorial" كاسم مستخدم وكلمة مرور للجولات. ستظهر صفحة البحث عن الرحلات كما هو موضح أدناه.

الخطوة 2) استخدم أدوات المطورين لفحص سمات القيمة.

لاحظ أن زري الاختيار "رحلة ذهاب وعودة" و"ذهاب فقط" يحملان نفس الاسم "tripType". ومع ذلك، فإن لهما سمات VALUE مختلفة، لذا يمكننا استخدام كل قيمة كعامل تصفية.

الخطوة 3) انقر على الصف الأول في المحرر.

• سنستخدم زر الراديو "اتجاه واحد" أولاً. انقر على السطر الأول في Selenium محرر بيئة التطوير المتكاملة (IDE).
• في مربع الأوامر، أدخل الأمر "click".
• في خانة رمز الخصم، أدخل TABBYDAY. Target في المربع، أدخل "name=tripType value=oneway". الجزء "value=oneway" يعمل كعامل تصفية.

الخطوة 4) انقر فوق الزر "بحث".

لاحظ أن Selenium يقوم برنامج IDE بتمييز زر الاختيار "اتجاه واحد" باللون الأخضر، مما يؤكد أنه تم الوصول إلى العنصر بنجاح من خلال سمة VALUE الخاصة به.

الخطوة 5) حدد زر الراديو أحادي الاتجاه.

اضغط على مفتاح "X" في لوحة المفاتيح لتنفيذ أمر النقر. تم الآن تحديد زر الاختيار "اتجاه واحد".

يمكنك تنفيذ نفس الإجراء على زر الاختيار "رحلة ذهاب وعودة"، هذه المرة باستخدام "name=tripType value=roundtrip" كهدف لك.

تحديد الموقع عن طريق نص الارتباط

تُطبّق استراتيجية تحديد المواقع هذه على نصوص الروابط التشعبية فقط. نصل إلى الرابط بإضافة البادئة "link=" متبوعةً بنص الرابط التشعبي الظاهر. هذه الطريقة سهلة القراءة وفعّالة لاختبارات التنقل.

Target شكل: link=link_text

في المثال التالي، سنستخدم رابط "التسجيل" الموجود على Mercury الصفحة الرئيسية للجولات.

الخطوة 1)

• أولاً، تأكد من تسجيل خروجك من Mercury جولات.
• انتقل إلى Mercury الصفحة الرئيسية للجولات.

الخطوة 2)

• استخدم أدوات المطورين لفحص رابط "التسجيل". يظهر نص الرابط بين وسمي الفتح والإغلاق.
• في هذه الحالة، نص الرابط هو "تسجيل". انسخ نص الرابط.

الخطوة 3) انسخ نص الرابط والصقه في Selenium IDE Target الصندوق. ضع البادئة "link=" أمامه.

الخطوة 4) انقر فوق الزر "بحث". Selenium سيقوم برنامج IDE بتمييز رابط التسجيل بشكل صحيح.

الخطوة 5) للتحقق بشكل أكبر، أدخل "clickAndWait" في مربع الأوامر وقم بتنفيذه. Selenium سيقوم برنامج IDE بالنقر على رابط التسجيل بنجاح وسينقلك إلى صفحة التسجيل الموضحة أدناه.

تحديد الموقع باستخدام DOM (نموذج كائن المستند)

استخدم نموذج كائن المستند (DOM)وبعبارة بسيطة، يصف هذا كيفية تنظيم عناصر HTML على شكل شجرة من العقد. Selenium يمكن لبيئة التطوير المتكاملة (IDE) التنقل عبر هذه الشجرة للوصول إلى عناصر الصفحة. عند استخدام هذه الطريقة، فإن Target يبدأ المربع دائمًا بـ "dom=document…". عادةً ما يتم حذف البادئة "dom=" لأن Selenium يقوم برنامج IDE تلقائيًا بتفسير أي قيمة تبدأ بـ "document" كمسار DOM.

هناك أربع طرق أساسية لتحديد موقع عنصر ما من خلال DOM في Selenium:

• getElementById
• getElementsByName
• dom:name (ينطبق فقط على العناصر الموجودة في نموذج مسمى)
• دوم:index

تحديد الموقع بواسطة DOM - getElementById

لنستكشف أولاً طريقة getElementById الخاصة بـ DOM في Seleniumتُعيد هذه الطريقة عنصرًا واحدًا عن طريق مطابقة سمة المعرف الخاصة به.

بناء الجملة

document.getElementById("id of the element")

• معرّف العنصر = قيمة سمة المعرّف (ID) للعنصر المراد الوصول إليه. يجب دائمًا وضع هذه القيمة بين علامتي اقتباس.

الخطوة 1) استخدم هذه الصفحة التجريبية https://demo.guru99.com/test/facebook.htmlانتقل إلى هناك واستخدم أدوات المطورين لفحص خانة الاختيار "ابقني مسجلاً". دوّن معرّفها.

المعرف الذي يجب استخدامه هو "persist_box".

الخطوة 2) ساعات العمل Selenium IDE وفي Target أدخل في مربع البحث document.getElementById(“persist_box”)، ثم انقر فوق بحث. Selenium سيحدد برنامج IDE خانة الاختيار "ابقني مسجلاً". ورغم أنه لا يستطيع تمييز الجزء الداخلي من خانة الاختيار، إلا أنه يحيط العنصر بإطار أخضر ساطع، كما هو موضح أدناه.

تحديد الموقع بواسطة DOM - getElementsByName

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

	getElementById لا تُرجع هذه الدالة سوى عنصر واحد. يحمل هذا العنصر المعرّف المحدد داخل الأقواس في الدالة getElementById().
	getElementsByName تُعيد هذه الدالة مجموعة من العناصر التي تحمل أسماءً متطابقة. يُفهرس كل عنصر برقم يبدأ من 0، كما هو الحال في المصفوفات. يمكنك تحديد عنصر معين بوضع فهرسه داخل الأقواس المربعة في الصيغة الموضحة أدناه.

بناء الجملة

document.getElementsByName("name")[index]

• الاسم = اسم العنصر كما هو محدد بواسطة سمة "الاسم" الخاصة به
• الفهرس = عدد صحيح يشير إلى العنصر الذي سيتم استخدامه داخل مصفوفة getElementsByName.

الخطوة 1) انتقل إلى Mercury ادخل إلى الصفحة الرئيسية للجولات السياحية وسجّل الدخول باستخدام كلمة "tutorial" كاسم المستخدم وكلمة المرور. سيتم تحميل شاشة البحث عن الرحلات في المتصفح.

الخطوة 2) استخدم أدوات المطورين لفحص أزرار الاختيار الثلاثة في أسفل الصفحة (الدرجة السياحية، درجة الأعمال، والدرجة الأولى). لاحظ أنها جميعًا تحمل نفس الاسم، "servClass".

الخطوة 3) لنبدأ بالوصول إلى زر الاختيار "الدرجة الاقتصادية". من بين أزرار الاختيار الثلاثة، يظهر هذا العنصر أولاً، لذا فإن فهرسه هو 0. Selenium في بيئة التطوير المتكاملة، اكتب document.getElementsByName(“servClass”)[0] وانقر على زر البحث. Selenium سيتعرف برنامج IDE على زر اختيار الدرجة السياحية بشكل صحيح.

الخطوة 4) غيّر رقم الفهرس إلى 1، حتى Target يصبح document.getElementsByName(“servClass”)[1]. انقر على زر البحث، و Selenium سيقوم برنامج IDE بتمييز زر الاختيار "درجة الأعمال" كما هو موضح أدناه.

تحديد الموقع بواسطة DOM – dom:name

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

بناء الجملة

document.forms["name of the form"].elements["name of the element"]

• اسم النموذج = قيمة سمة الاسم الخاصة بعلامة النموذج التي تحتوي على العنصر الذي ترغب في الوصول إليه
• اسم العنصر = قيمة سمة اسم العنصر الذي ترغب في الوصول إليه

الخطوة 1) انتقل إلى Mercury الصفحة الرئيسية للجولات https://demo.guru99.com/test/newtours/ استخدم أدوات المطورين لفحص مربع نص اسم المستخدم. لاحظ أنه موجود في نموذج باسم "الصفحة الرئيسية".

الخطوة 2) In Selenium في بيئة التطوير المتكاملة، اكتب document.forms[“home”].elements[“userName”] وانقر على زر البحث. Selenium سيتمكن برنامج IDE من الوصول إلى العنصر بنجاح.

تحديد الموقع بواسطة DOM – dom:index

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

بناء الجملة

document.forms[index of the form].elements[index of the element]

• فهرس النموذج = رقم فهرس النموذج (بدءًا من 0) بالنسبة للصفحة بأكملها
• فهرس العنصر = رقم فهرس العنصر (بدءًا من 0) بالنسبة للصيغة التي تحتوي عليه

سندخل إلى مربع نص "الهاتف" في Mercury صفحة تسجيل الجولات. لا يحتوي النموذج الموجود في هذه الصفحة على اسم أو سمة معرف، لذا فهو يُعد مثالاً جيداً.

الخطوة 1) انتقل إلى Mercury قم بزيارة صفحة تسجيل الجولات السياحية وتفقد مربع نص الهاتف. ستلاحظ أن النموذج المحيط لا يحتوي على سمات المعرف أو الاسم.

الخطوة 2) أدخل document.forms[0].elements[3] في Selenium IDE Target المربع ثم انقر على زر البحث. Selenium سيتمكن برنامج IDE من الوصول إلى مربع نص الهاتف بشكل صحيح.

الخطوة 3) بدلاً من ذلك، يمكنك استخدام اسم العنصر بدلاً من فهرسه للحصول على النتيجة نفسها. أدخل document.forms[0].elements[“phone”] في Target مربع. سيظل مربع نص الهاتف مُظللاً.

تحديد الموقع عن طريق XPath

لغة XPath هي لغة الاستعلام المستخدمة للتنقل بين عناصر XML (لغة الترميز القابلة للتوسيع). ولأن لغة HTML يمكن اعتبارها تطبيقًا للغة XML، كسباث يمكنه أيضًا تحديد مواقع عناصر HTML. إنها إحدى أقوى استراتيجيات تحديد المواقع في Selenium.

• ميزة: يمكنه الوصول إلى أي عنصر تقريبًا، بما في ذلك العناصر التي لا تحتوي على سمات الفئة أو الاسم أو المعرف.
• العيب: إنها استراتيجية تحديد المواقع الأكثر تعقيدًا نظرًا لكثرة قواعدها وتنوعاتها النحوية.

تستطيع أدوات مطوري المتصفحات الحديثة إنشاء تعبيرات XPath تلقائيًا. في متصفحات Chrome و Edge و Firefoxانقر بزر الماوس الأيمن على عنصر في لوحة العناصر واختر نسخ > نسخ XPath. في المثال التالي، سنصل إلى صورة لا يمكن تحديد موقعها باستخدام الطرق المذكورة سابقًا.

الخطوة 1) انتقل إلى Mercury انتقل إلى الصفحة الرئيسية للجولات واستخدم أدوات المطور لفحص المستطيل البرتقالي الموجود على يمين مربع "الروابط" الأصفر، كما هو موضح أدناه.

الخطوة 2) انقر بزر الماوس الأيمن على كود HTML الخاص بالعنصر، ثم حدد خيار "نسخ XPath".

الخطوة 3) In Selenium IDEاكتب شرطة مائلة واحدة "/" في Target ثم قم بلصق XPath الذي تم نسخه في الخطوة السابقة. المدخل في Target يجب أن يبدأ المربع الآن بعلامتي شرطة مائلتين للأمام "//".

الخطوة 4) انقر فوق الزر "بحث". Selenium سيقوم برنامج IDE بتظليل المربع البرتقالي، كما هو موضح أدناه.

لماذا يُعد اختيار الموقع المناسب أمراً بالغ الأهمية؟

يُعد اختيار استراتيجية تحديد المواقع الصحيحة أحد أهم القرارات المؤثرة في Selenium تُعدّ الأتمتة بالغة الأهمية لأنها تؤثر بشكل مباشر على استقرار البرامج النصية وسرعة تنفيذها وتكاليف صيانتها على المدى الطويل. قد يؤدي اختيار مُحدِّد موقع غير مناسب إلى اختبارات غير مستقرة، وفشل غير مُبرَّر، وإعادة عمل متكررة كلما تغيّرت واجهة المستخدم للتطبيق. يُوصي مهندسو الأتمتة ذوو الخبرة بترتيب تفضيلي كالتالي: المعرّف أولًا، ثم الاسم، ثم مُحدِّد CSS، ثم نص الرابط، وأخيرًا XPath.

تُعدّ مُحدِّدات المواقع القائمة على المعرّفات الأسرع لأنّ عملية البحث في المتصفح مُحسَّنة للمعرّفات الفريدة. وتُعتبر مُحدِّدات المواقع القائمة على الأسماء فعّالة تقريبًا بنفس القدر عندما تكون الأسماء فريدة. توفّر مُحدِّدات CSS وXPath مرونةً، لكنّها تميل إلى أن تكون أبطأ وأقلّ استقرارًا عند قيام المطوّرين بإعادة هيكلة DOM. يُعدّ نص الرابط ممتازًا لروابط التنقّل، لكنّه محدود الاستخدام.

يعتمد استقرار الأتمتة أيضًا على التعاون مع المطورين. فعندما يطلب المختبرون سمات تعريف أو بيانات متسقة وذات دلالة أثناء مراجعات الكود، تتحسن موثوقية المحددات بشكل ملحوظ. تجنب الاعتماد على المعرفات المُولّدة تلقائيًا (مثل تلك التي تُنتجها الأطر البرمجية) لأنها قد تتغير بين الإصدارات. من خلال إعطاء الأولوية للمحددات المقروءة والموجهة نحو الغرض، تستطيع الفرق الحفاظ على سهولة صيانة مجموعات الاختبار وتقليل الديون التقنية مع تطور التطبيق.

أفضل ممارسات لكتابة محددات مواقع موثوقة

تُعدّ أجهزة تحديد المواقع الموثوقة أساسًا لصيانة قابلة للصيانة Selenium مجموعة الاختبارات. تساعد الممارسات التالية في تقليل حالات فشل البرامج النصية، وتحسين قابلية القراءة، وجعل الاختبارات مرنة في مواجهة تغييرات واجهة المستخدم.

1. يفضل استخدام معرفات فريدة: تحقق دائمًا من وجود سمة المعرّف (ID) أولًا. المعرّفات مصممة لتكون فريدة داخل الصفحة، وهي الخيار الأمثل من حيث الأداء.
2. استخدم سمات الاسم الدلالي وسمات البيانات *: شجع المطورين على إضافة سمات اختبار ثابتة مثل data-testid أو data-qa. تظل هذه السمات ثابتة حتى عند تغيير فئات CSS.
3. تجنب استخدام XPath المطلق: تتعطل المسارات المطلقة مثل /html/body/div[2]/div[3]/span بسهولة. استخدم تعبيرات XPath النسبية مع سمات مثل //input[@name='userName'].
4. دمج السمات لتحقيق الدقة: عندما لا تكون السمة الواحدة فريدة، قم بدمج سمات متعددة (على سبيل المثال، //button[@type='submit' and @name='login']) لاستهداف العنصر الصحيح.
5. استخدم النص بحكمة: قد لا تعمل محددات المواقع التي تعتمد على النصوص المرئية بشكل صحيح عند استخدام لغات متعددة. استخدم محددات المواقع النصية فقط عندما يكون المحتوى ثابتًا وبلغة واحدة.
6. مركزية محددات المواقع: قم بتخزين محددات المواقع في فئة نموذج كائن الصفحة (POM) بحيث يمكن إجراء التحديثات في مكان واحد بدلاً من إجرائها عبر العديد من نصوص الاختبار.
7. التحقق من الصحة في أدوات المطورين: قبل إضافة محدد موقع إلى نص برمجي، اختبره في وحدة تحكم المتصفح باستخدام $x(“//xpath”) لـ XPath أو document.querySelector لـ CSS للتأكد من أنه يُرجع عنصرًا واحدًا بالضبط.
8. تجنب استخدام محددات المواقع القائمة على الفهرسة كلما أمكن ذلك: تعتمد مواضع الفهرسة مثل [3] على ترتيب العناصر. حتى التغييرات الطفيفة في التخطيط يمكن أن تُغيّر الفهرس وتُعطّل البرنامج النصي.

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

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