محددات في السيلينيوم

ما هي محددات المواقع؟

محدد الموقع هو أمر يخبر Selenium IDE عن عناصر واجهة المستخدم الرسومية (على سبيل المثال Text Box، أزرار، تحقق Boxes إلخ) احتياجاته للعمل عليها. يعد تحديد عناصر واجهة المستخدم الرسومية الصحيحة شرطًا أساسيًا لإنشاء برنامج نصي للأتمتة. لكن التحديد الدقيق لعناصر واجهة المستخدم الرسومية أصعب مما يبدو. في بعض الأحيان، ينتهي بك الأمر إلى العمل باستخدام عناصر واجهة المستخدم الرسومية غير الصحيحة أو عدم وجود عناصر على الإطلاق! وبالتالي، يوفر السيلينيوم عددًا من محددات المواقع لتحديد موقع عنصر واجهة المستخدم الرسومية بدقة

هناك أوامر لا تحتاج إلى محدد موقع (مثل الأمر "فتح"). ومع ذلك، فإن معظمها يحتاج إلى محددات مواقع العناصر في برنامج تشغيل الويب الخاص بالسيلينيوم.

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

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

هذه هي الطريقة الأكثر شيوعًا لتحديد موقع العناصر نظرًا لأنه من المفترض أن تكون المعرفات فريدة لكل عنصر.

تنسيق الهدف: معرف = معرف العنصر

في هذا المثال، سنستخدم Facebook كتطبيق اختباري لأن Mercury Tours لا تستخدم سمات المعرف.

الخطوة 1) منذ إنشاء هذا البرنامج التعليمي، قام Facebook بتغيير تصميم صفحة تسجيل الدخول الخاصة به. استخدم هذه الصفحة التجريبية http://demo.guru99.com/test/facebook.html للاختبار. فحص "إيmail أو نص "الهاتف". box باستخدام Firebug ولاحظ معرفه. في هذه الحالة، المعرف هو "email".

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

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

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

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

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

تنسيق الهدف: الاسم=اسم العنصر

في فولوwing في العرض التوضيحي، سوف نستخدم الآن Mercury Tours لأن جميع العناصر المهمة لها أسماء.

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

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

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

الخطوة 2) في Selenium IDE، أدخل "name=userName" في الهدف box وانقر على زر البحث. يجب أن يكون Selenium IDE قادرًا على تحديد موقع نص اسم المستخدم box من خلال تسليط الضوء عليه.

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

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

يمكن استخدام المرشحات عندما يكون لعناصر متعددة نفس الاسم. المرشحات هي سمات إضافية تستخدم لتمييز العناصر التي تحمل نفس الاسم.

تنسيق الهدف: name=name_of_the_element filter=value_of_filter

دعونا نرى مثالا -

الخطوة 1) قم بتسجيل الدخول إلى ميركوري تورز.

قم بتسجيل الدخول إلى Mercury Tours باستخدام "البرنامج التعليمي" كاسم المستخدم وكلمة المرور. من المفترض أن ينقلك إلى صفحة Flight Finder الموضحة أدناه.

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

الخطوة 2) باستخدام Firebug استخدم سمات VALUE.

باستخدام Firebug، لاحظ أن أزرار الاختيار ذهابًا وإيابًا واتجاه واحد لها نفس الاسم "tripType". ومع ذلك، فهي تحتوي على سمات VALUE مختلفة حتى نتمكن من استخدام كل منها كمرشح لدينا.

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

الخطوة 3) انقر على السطر الأول.

  • سنقوم بالوصول إلى زر الاختيار One Way أولاً. انقر فوق السطر الأول في المحرر.
  • في الأمر box من السيلينيوم IDE، أدخل الأمر "انقر".
  • في الهدف box، أدخل "الاسم=قيمة tripType=اتجاه واحد". الجزء "القيمة = اتجاه واحد" هو مرشحنا.

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

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

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

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

الخطوة 5) حدد زر الاختيار One Way.

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

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

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

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

ينطبق هذا النوع من محدد مواقع CSS في السيلينيوم فقط على نصوص الارتباطات التشعبية. نحن نصل إلى الرابط عن طريق بادئة هدفنا بـ "link =" ثم يتبعه نص الارتباط التشعبي.

تنسيق الهدف: الرابط=link_text

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

الخطوة 1)

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

الخطوة 2)

  • باستخدام Firebug، قم بفحص رابط "التسجيل". تم العثور على نص الارتباط بين العلامات.
  • في هذه الحالة، نص الرابط الخاص بنا هو "تسجيل". انسخ نص الرابط.

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

الخطوة 3) انسخ نص الرابط في Firebug والصقه على هدف Selenium IDE box. ابدأ بـ "link=".

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

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

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

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

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

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

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

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

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

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

دعونا نركز على الطريقة الأولى – باستخدام طريقة getElementById الخاصة بـ DOM في السيلينيوم. بناء الجملة سيكون:

بناء الجملة

document.getElementById("id of the element")

  • معرف العنصر = هذه هي قيمة سمة معرف العنصر المراد الوصول إليه. يجب أن تكون هذه القيمة دائمًا محاطة بزوج من الأقواس ("").

الخطوة 1) استخدم هذه الصفحة التجريبية http://demo.guru99.com/test/facebook.html انتقل إليه واستخدم Firebug لفحص علامة الاختيار "احتفظ بتسجيل الدخول". box. يحيط علما معرف لها.

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

يمكننا أن نرى أن المعرف الذي يجب أن نستخدمه هو "persist_"box".

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

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

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

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

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

getElementById

  • سوف تحصل على عنصر واحد فقط بالنسبة لك.
  • يحمل هذا العنصر المعرف الذي حددته بين قوسين getElementById().

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

getElementsByName

  • سيحصل على مجموعة من العناصر التي تتشابه أسماؤها.
  • تتم فهرسة كل عنصر برقم يبدأ من 0 تمامًا مثل المصفوفة
  • يمكنك تحديد العنصر الذي ترغب في الوصول إليه عن طريق وضع رقم الفهرس الخاص به في المربع brackets في بناء جملة getElementsByName أدناه.

بناء الجملة

document.getElementsByName(“name“)[index]

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

الخطوة 1) انتقل إلى الصفحة الرئيسية لـ Mercury Tours وقم بتسجيل الدخول باستخدام "البرنامج التعليمي" كاسم المستخدم وكلمة المرور. Firefox يجب أن ينقلك إلى شاشة Flight Finder.

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

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

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

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

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

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

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

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

بناء الجملة

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

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

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

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

الخطوة 2) في Selenium IDE، اكتب "document.forms["home"].elements["userName"]" وانقر فوق الزر "بحث". يجب أن يكون Selenium IDE قادرًا على الوصول إلى العنصر بنجاح.

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

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

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

بناء الجملة

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

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

يجب علينا الوصول إلى النص "الهاتف". box ضمن صفحة التسجيل في Mercury Tours. النموذج الموجود في تلك الصفحة لا يحتوي على سمة اسم ومعرف، لذلك سيكون هذا مثالًا جيدًا.

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

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

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

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

الخطوة 3) وبدلاً من ذلك، يمكنك استخدام اسم العنصر بدلاً من فهرسه والحصول على نفس النتيجة. أدخل "document.forms[0].elements["phone"]" في هدف Selenium IDE box. نص الهاتف box لا يزال ينبغي أن يتم تسليط الضوء عليه.

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

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

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

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

لحسن الحظ، يستطيع Firebug إنشاء محددات مواقع XPath Selenium تلقائيًا. في فولوwing على سبيل المثال، سوف نصل إلى صورة لا يمكن الوصول إليها من خلال الطرق التي ناقشناها سابقًا.

الخطوة 1) انتقل إلى الصفحة الرئيسية لـ Mercury Tours واستخدم Firebug لفحص المستطيل البرتقالي الموجود على يمين "الروابط" الصفراء box. الرجوع إلى الصورة أدناه.

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

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

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

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

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

الخطوة 4) انقر على زر البحث. يجب أن يكون السيلينيوم IDE قادرًا على إبراز اللون البرتقالي box كما هو مبين أدناه.

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

نبذة عامة

بناء الجملة لاستخدام محدد المواقع

خدمة التوصيل بناء الجملة الهدف مثال
بواسطة معرف id=id_of_the_element معرف = هmail
بالاسم name=name_of_the_element name=userName
بالاسم باستخدام المرشحات name=name_of_the_element filter=value_of_filter name=tripType value=oneway
عن طريق نص الرابط link=link_text الرابط=تسجيل