XPath في Selenium: درس تعليمي

ما هو XPath في Selenium?

XPath في Selenium هو مسار XML يستخدم للتنقل عبر بنية HTML للصفحة. إنها صيغة أو لغة للعثور على أي عنصر على صفحة ويب باستخدام تعبير مسار XML. يمكن استخدام XPath لكل من مستندات HTML وXML للعثور على موقع أي عنصر على صفحة ويب باستخدام بنية HTML DOM.

In Selenium الأتمتة، إذا لم يتم العثور على العناصر بواسطة المحددات العامة مثل المعرف والفئة والاسم وما إلى ذلك، فسيتم استخدام XPath للعثور على عنصر على صفحة الويب.

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

بناء جملة XPath

يحتوي XPath على مسار العنصر الموجود في صفحة الويب. بناء جملة XPath القياسي لإنشاء XPath هو.

Xpath=//tagname[@attribute='value']

يتم شرح التنسيق الأساسي لـ XPath في Selenium أدناه مع لقطة شاشة.

• //: حدد العقدة الحالية.
• اسم العلامة: اسم العلامة للعقدة المحددة.
• @: حدد السمة.
• صفة، عزا: اسم السمة للعقدة.
• القيمة: قيمة السمة.

للعثور على العنصر على صفحات الويب بدقة، هناك أنواع مختلفة من محددات المواقع:

محددات مواقع XPath	البحث عن عناصر مختلفة على صفحة الويب
ID	للعثور على العنصر عن طريق معرف العنصر
اسم الفئة	للعثور على العنصر حسب Classname للعنصر
الاسم	للعثور على العنصر باسم العنصر
ربط النص	للعثور على العنصر عن طريق نص الرابط
كسباث	XPath مطلوب للعثور على العنصر الديناميكي والتنقل بين العناصر المختلفة لصفحة الويب
مسار CSS	يحدد مسار CSS أيضًا العناصر التي ليس لها اسم أو فئة أو معرف.

أنواع مسار X

هناك نوعان من XPath:

1) XPath المطلق

2) XPath النسبي

XPath المطلق

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

السمة الرئيسية لـ XPath هي أنه يبدأ بشرطة مائلة للأمام (/)، مما يعني أنه يمكنك تحديد العنصر من العقدة الجذرية.

فيما يلي مثال لتعبير Xpath المطلق للعنصر الموضح في الشاشة أدناه.

ملاحظة: يمكنك ممارسة تمرين XPath التالي على هذا https://demo.guru99.com/test/selenium-xpath.html

انقر اضغط هنا إذا لم يكن من الممكن الوصول إلى الفيديو

XPath المطلق:

/html/body/div[2]/div[1]/div/h4[1]/b/html[1]/body[1]/div[2]/div[1]/div[1]/h4[1]/b[1]

Xpath النسبي

Xpath النسبي يبدأ من منتصف بنية HTML DOM. ويبدأ بعلامة شرطة مائلة مزدوجة للأمام (//). ويمكنه البحث عن العناصر في أي مكان على صفحة الويب، مما يعني عدم الحاجة إلى كتابة مسار xpath طويل ويمكنك البدء من منتصف بنية HTML DOM. ويفضل دائمًا استخدام مسار xpath النسبي لأنه ليس مسارًا كاملاً من العنصر الجذر.

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

انقر اضغط هنا إذا لم يكن من الممكن الوصول إلى الفيديو

Relative XPath: //div[@class='featured-box cloumnsize1']//h4[1]//b[1]

ما هي محاور XPath؟

تبحث محاور XPath عن عقد مختلفة في مستند XML انطلاقًا من عقدة السياق الحالية. تُستخدم محاور XPath للعثور على عناصر ديناميكية، وهو أمر غير ممكن عادةً باستخدام طريقة XPath العادية التي لا تحتوي على مُعرّف أو اسم فئة أو اسم، إلخ. XPath في Selenium يتضمن عدة طرق مثل Contains وAND وAbsolute XPath وRelative XPath لتحديد العناصر الديناميكية وتحديد موقعها استنادًا إلى سمات وشروط مختلفة.

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

كيفية كتابة XPath الديناميكي في Selenium ويب درايفر

1) XPath الأساسي

يحدد تعبير XPath العقد أو قائمة العقد على أساس سمات مثل رقم الهوية، الاسم، اسم الفئة، وما إلى ذلك من مستند XML كما هو موضح أدناه.

Xpath=//input[@name='uid']

وهنا رابط للوصول إلى الصفحة https://demo.guru99.com/test/selenium-xpath.html

بعض تعبيرات xpath الأساسية:

Xpath=//input[@type='text']
Xpath=//label[@id='message23']
Xpath=//input[@value='RESET']
Xpath=//*[@class='barone']
Xpath=//a[@href='https://demo.guru99.com/']
Xpath=//img[@src='//guru99.com/images/home/java.png']

2) يحتوي على ()

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

تتمتع ميزة الاحتواء بالقدرة على العثور على العنصر بنص جزئي كما هو موضح في مثال XPath أدناه.

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

القيمة الكاملة لـ "النوع" هي "إرسال" ولكن باستخدام القيمة الجزئية "sub" فقط.

Xpath=//*[contains(@type,'sub')]

القيمة الكاملة لـ "name" هي "btnLogin" ولكن باستخدام القيمة الجزئية فقط "btn".

Xpath=//*[contains(@name,'btn')]

في التعبير أعلاه، اتخذنا "الاسم" كسمة و"btn" كقيمة جزئية كما هو موضح في لقطة الشاشة أدناه. سيجد هذا عنصرين (تسجيل الدخول وإعادة الضبط) حيث تبدأ سمة "الاسم" الخاصة بهم بـ "btn".

وبالمثل، في التعبير أدناه، اتخذنا "المعرف" كسمة و"رسالة" كقيمة جزئية. سيجد هذا عنصرين ("يجب ألا يكون معرف المستخدم فارغًا" و"يجب ألا تكون كلمة المرور فارغة") حيث تبدأ سمة "المعرف" الخاصة به بـ "الرسالة".

Xpath=//*[contains(@id,'message')]

في التعبير أدناه، اتخذنا "نص" الرابط كسمة و"هنا" كقيمة جزئية كما هو موضح في لقطة الشاشة أدناه. سيجد هذا الرابط ("هنا") لأنه يعرض النص "هنا".

Xpath=//*[contains(text(),'here')]
Xpath=//*[contains(@href,'guru99.com')]

3) استخدام OR & AND

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

في تعبير XPath أدناه، يحدد العناصر التي يكون شرطها الفردي أو كلاهما صحيحًا.

Xpath=//*[@type='submit' or @name='btnReset']

إبراز كلا العنصرين كعنصر "LOGIN" الذي يحتوي على السمة "type" وعنصر "RESET" الذي يحتوي على السمة "name".

في التعبير AND، يتم استخدام شرطين، يجب أن يكون كلا الشرطين صحيحًا للعثور على العنصر. يفشل في العثور على العنصر إذا كان أي شرط خاطئًا.

Xpath=//input[@type='submit' and @name='btnLogin']

في التعبير أدناه، قم بتمييز عنصر "تسجيل الدخول" لأنه يحتوي على السمتين "النوع" و"الاسم".

4) يبدأ Xpath بـ

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

على سبيل المثال -: افترض أن معرف عنصر معين يتغير ديناميكيًا مثل:

المعرف =”الرسالة12″

المعرف =”الرسالة345″

المعرف =”الرسالة8769″

وهكذا.. ولكن النص الأولي هو نفسه. في هذه الحالة، نستخدم تعبير البدء بـ.

في التعبير أدناه، يوجد عنصران بمعرف يبدأ بـ "رسالة" (على سبيل المثال، "يجب ألا يكون معرف المستخدم فارغًا" و"يجب ألا تكون كلمة المرور فارغة"). في المثال أدناه، يبحث XPath عن العنصر الذي يبدأ "معرفه" بـ "رسالة".

Xpath=//label[starts-with(@id,'message')]

5) دالة XPath Text()

استخدم وظيفة نص XPath (). هي وظيفة مدمجة في selenium webdriver تُستخدم لتحديد موقع العناصر استنادًا إلى نص عنصر الويب. وهي تساعد في العثور على عناصر النص الدقيقة وتحديد موقع العناصر داخل مجموعة عقد النص. يجب أن تكون العناصر المراد تحديد موقعها في شكل سلسلة.

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

Xpath=//td[text()='UserID']

طرق محاور XPath

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

لتوضيح طريقة محاور XPath هذه، سنستخدم Guruموقع تجريبي لبنك 99.

1) التالي

يقوم بتحديد جميع العناصر في مستند العقدة الحالية ( ) [مربع إدخال معرف المستخدم هو العقدة الحالية] كما هو موضح في الشاشة أدناه.

Xpath=//*[@type='text']//following::input

هناك 3 عقد "إدخال" تتطابق باستخدام المحور "التالي" - كلمة المرور، وتسجيل الدخول، وزر إعادة الضبط. إذا كنت تريد التركيز على أي عنصر معين، فيمكنك استخدام طريقة XPath أدناه:

Xpath=//*[@type='text']//following::input[1]

يمكنك تغيير XPath حسب المتطلبات وذلك بوضع [1]،[2]………… وهكذا.

مع الإدخال كـ "1"، تقوم لقطة الشاشة أدناه بالعثور على العقدة المحددة التي تعد عنصر مربع الإدخال "كلمة المرور".

2) الجد

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

في التعبير أدناه، نجد عنصر الأسلاف للعقدة الحالية (عقدة "ENTERPRISE TESTING").

Xpath=//*[text()='Enterprise Testing']//ancestor::div

هناك 13 عقدة "div" متطابقة باستخدام محور "الأسلاف". إذا كنت تريد التركيز على أي عنصر معين، فيمكنك استخدام XPath أدناه، حيث يمكنك تغيير الرقم 1، 2 وفقًا لمتطلباتك:

Xpath=//*[text()='Enterprise Testing']//ancestor::div[1]

يمكنك تغيير XPath حسب المتطلبات وذلك بوضع [1]، [2]………… وهكذا.

3) الطفل

تحديد جميع العناصر الفرعية للعقدة الحالية (Java) كما هو موضح في الشاشة أدناه.

Xpath=//*[@id='java_technologies']//child::li

هناك 71 عقدة "li" متطابقة باستخدام المحور "الفرعي". إذا كنت تريد التركيز على أي عنصر معين، فيمكنك استخدام xpath أدناه:

Xpath=//*[@id='java_technologies']//child::li[1]

يمكنك تغيير xpath حسب المتطلبات بوضع [1]،[2]………… وهكذا.

4) السابقة

حدد جميع العقد التي تأتي قبل العقدة الحالية كما هو موضح في الشاشة أدناه.

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

Xpath=//*[@type='submit']//preceding::input

هناك عقدتان "إدخال" متطابقتان باستخدام المحور "السابق". إذا كنت تريد التركيز على أي عنصر معين، فيمكنك استخدام XPath أدناه:

Xpath=//*[@type='submit']//preceding::input[1]

يمكنك تغيير xpath حسب المتطلبات بوضع [1]،[2]………… وهكذا.

5) الأخ أو الأخت التاليين

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

xpath=//*[@type='submit']//following-sibling::input

عقدة إدخال واحدة تتطابق باستخدام محور "التابع - الشقيق".

6) الوالدين

يحدد أصل العقدة الحالية كما هو موضح في الشاشة أدناه.

Xpath=//*[@id='rt-feature']//parent::div

هناك 65 عقدة "div" متطابقة باستخدام المحور "الأصل". إذا كنت تريد التركيز على أي عنصر معين، فيمكنك استخدام XPath أدناه:

Xpath=//*[@id='rt-feature']//parent::div[1]

يمكنك تغيير XPath حسب المتطلبات وذلك بوضع [1]،[2]………… وهكذا.

7) النفس

تحديد العقدة الحالية أو "الذات" يعني أنها تشير إلى العقدة نفسها كما هو موضح في الشاشة أدناه.

مطابقة عقدة واحدة باستخدام المحور "الذاتي". تجد دائمًا عقدة واحدة فقط لأنها تمثل عنصرًا ذاتيًا.

Xpath =//*[@type='password']//self::input

8) السلالة

تحديد أحفاد العقدة الحالية كما هو موضح في الشاشة أدناه.

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

Xpath=//*[@id='rt-feature']//descendant::a

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

Xpath=//*[@id='rt-feature']//descendant::a[1]

يمكنك تغيير XPath حسب المتطلبات وذلك بوضع [1]،[2]………… وهكذا.

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

ملخص

تحقق أيضا: - Selenium برنامج تعليمي للمبتدئين: تعلم WebDriver في 7 أيام