استخدام XPath و Selenium للبحث عن عنصر في صفحة HTML

Using Xpath Selenium Find An Element Html Page



XPath ، المعروف أيضًا باسم XML Path Language ، هي لغة لتحديد العناصر من مستند XML. نظرًا لأن HTML و XML يتبعان نفس بنية المستند ، يمكن أيضًا استخدام XPath لتحديد عناصر من صفحة ويب.

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







في هذه المقالة ، سأوضح لك كيفية تحديد موقع العناصر وتحديدها من صفحات الويب باستخدام محددات XPath في السيلينيوم مع مكتبة Selenium python. لذلك دعونا نبدأ.



المتطلبات الأساسية:

لتجربة أوامر وأمثلة هذه المقالة ، يجب أن يكون لديك ،



  1. توزيع Linux (يفضل Ubuntu) مثبت على جهاز الكمبيوتر الخاص بك.
  2. تم تثبيت Python 3 على جهاز الكمبيوتر الخاص بك.
  3. تم تثبيت PIP 3 على جهاز الكمبيوتر الخاص بك.
  4. بايثون فيرتالينف حزمة مثبتة على جهاز الكمبيوتر الخاص بك.
  5. Mozilla Firefox أو متصفحات الويب Google Chrome مثبتة على جهاز الكمبيوتر الخاص بك.
  6. يجب أن تعرف كيفية تثبيت Firefox Gecko Driver أو Chrome Web Driver.

لاستيفاء المتطلبات 4 و 5 و 6 ، اقرأ مقالتي مقدمة عن السيلينيوم في بايثون 3 . يمكنك العثور على العديد من المقالات حول الموضوعات الأخرى على LinuxHint.com . تأكد من التحقق منها إذا كنت بحاجة إلى أي مساعدة.





إعداد دليل المشروع:

للحفاظ على كل شيء منظمًا ، قم بإنشاء دليل مشروع جديد xpath السيلينيوم / على النحو التالي:

$مكدير -pvxpath السيلينيوم/السائقين



انتقل إلى ملف xpath السيلينيوم / دليل المشروع على النحو التالي:

$قرص مضغوطxpath السيلينيوم/

قم بإنشاء بيئة افتراضية Python في دليل المشروع على النحو التالي:

$virtualenv .venv

تفعيل البيئة الافتراضية كالتالي:

$مصدر.venv/صباحا/تفعيل

قم بتثبيت مكتبة Selenium Python باستخدام PIP3 على النحو التالي:

$ pip3 قم بتثبيت السيلينيوم

قم بتنزيل وتثبيت جميع برامج تشغيل الويب المطلوبة في ملف السائقين/ دليل المشروع. لقد شرحت عملية تنزيل برامج تشغيل الويب وتثبيتها في مقالتي مقدمة عن السيلينيوم في بايثون 3 .

احصل على XPath Selector باستخدام Chrome Developer Tool:

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

للحصول على محدد XPath باستخدام متصفح الويب Google Chrome ، افتح Google Chrome ، وقم بزيارة موقع الويب الذي تريد استخراج البيانات منه. ثم اضغط على زر الفأرة الأيمن (RMB) في منطقة فارغة من الصفحة وانقر فوق فحص لفتح ملف أداة مطوري Chrome .

يمكنك أيضًا الضغط على + تحول + أنا لفتح ملف أداة مطوري Chrome .

أداة مطوري Chrome يجب فتحه.

للعثور على تمثيل HTML لعنصر صفحة الويب المطلوب ، انقر فوق فحص (

) ، كما هو موضح في لقطة الشاشة أدناه.

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

سيتم تمييز تمثيل HTML لعنصر الويب الذي حددته في ملف عناصر علامة التبويب أداة مطور Chrome ، كما ترى في لقطة الشاشة أدناه.

للحصول على محدد XPath للعنصر المطلوب ، حدد العنصر من ملف عناصر علامة التبويب أداة مطوري Chrome وانقر بزر الماوس الأيمن (RMB) عليها. ثم حدد ينسخ > نسخ XPath ، كما هو موضح في لقطة الشاشة أدناه.

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

احصل على XPath Selector باستخدام Firefox Developer Tool:

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

للحصول على محدد XPath باستخدام متصفح الويب Firefox ، افتح Firefox وقم بزيارة موقع الويب الذي تريد استخراج البيانات منه. ثم اضغط على زر الفأرة الأيمن (RMB) في منطقة فارغة من الصفحة وانقر فوق فحص العنصر (س) لفتح ملف أداة مطور Firefox .

أداة مطور Firefox يجب فتحه.

للعثور على تمثيل HTML لعنصر صفحة الويب المطلوب ، انقر فوق فحص (

) ، كما هو موضح في لقطة الشاشة أدناه.

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

سيتم تمييز تمثيل HTML لعنصر الويب الذي حددته في ملف مفتش علامة التبويب أداة مطور Firefox ، كما ترى في لقطة الشاشة أدناه.

للحصول على محدد XPath للعنصر المطلوب ، حدد العنصر من ملف مفتش علامة التبويب أداة مطور Firefox وانقر بزر الماوس الأيمن (RMB) عليها. ثم حدد ينسخ > XPath كما هو موضح في لقطة الشاشة أدناه.

يجب أن يبدو محدد XPath للعنصر الذي تريده مثل هذا.

استخراج البيانات من صفحات الويب باستخدام XPath Selector:

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

أولاً ، قم بإنشاء برنامج نصي جديد من Python ex01.py واكتب سطور الرموز التالية.

من عندالسيلينيوميستوردwebdriver
من عندالسيلينيوم.webdriver.مشترك.مفاتيح يستوردمفاتيح
من عندالسيلينيوم.webdriver.مشترك.بواسطة يستوردبواسطة
والخيارات=webdriver.خيارات Chrome()
والخيارات.مقطوعة الرأس = حقيقي
المتصفح=webdriver.كروم(قابل للتنفيذ='./drivers/chromedriver'و
والخيارات=والخيارات)
المتصفح.احصل على('https://www.unixtimestamp.com/')
الطابع الزمني=المتصفح.find_element_by_xpath('/ html / body / div [1] / div [1]
/ div [2] / div [1] / div / div / h3 [2] '
)
مطبعة(الطابع الزمني الحالي:٪ s٪(الطابع الزمني.نص.الانقسام(')[0]))
المتصفح.أغلق()

بمجرد الانتهاء ، احفظ ملف ex01.py نص بايثون.

يستورد الخط 1-3 جميع مكونات السيلينيوم المطلوبة.

ينشئ Line 5 كائنًا من خيارات Chrome ، ويمكّن السطر 6 وضع بدون رأس لمتصفح الويب Chrome.

الخط 8 يخلق كروم المتصفح كائن باستخدام chromedriver ثنائي من السائقين/ دليل المشروع.

يخبر السطر 10 المتصفح بتحميل موقع الويب unixtimestamp.com.

يجد السطر 12 العنصر الذي يحتوي على بيانات الطابع الزمني من الصفحة باستخدام محدد XPath ويخزنها في ملف الطابع الزمني عامل.

يوزع السطر 13 بيانات الطابع الزمني من العنصر ويطبعها على وحدة التحكم.

لقد قمت بنسخ محدد XPath للملف h2 عنصر من unixtimestamp.com باستخدام أداة Chrome Developer Tool.

السطر 14 يغلق المتصفح.

قم بتشغيل نص بايثون ex01.py على النحو التالي:

$ python3 ex01.السنة التحضيرية

كما ترى ، تتم طباعة بيانات الطابع الزمني على الشاشة.

هنا ، لقد استخدمت ملف browser.find_element_by_xpath (محدد) طريقة. المعلمة الوحيدة لهذه الطريقة هي محدد وهو محدد XPath للعنصر.

بدلا من browser.find_element_by_xpath () الطريقة ، يمكنك أيضًا استخدام browser.find_element (بواسطة ، محدد) طريقة. هذه الطريقة تحتاج إلى معلمتين. المعلمة الأولى بواسطة سوف يكون By.XPATH حيث سنستخدم محدد XPath والمعامل الثاني محدد سيكون محدد XPath نفسه. وستكون النتيجة نفسها.

لنرى كيف browser.find_element () تعمل الطريقة مع محدد XPath ، قم بإنشاء برنامج نصي جديد لبيثون ex02.py ، انسخ والصق جميع الأسطر من ex01.py إلى ex02.py والتغيير السطر 12 كما هو موضح في لقطة الشاشة أدناه.

كما ترون ، نص بايثون ex02.py يعطي نفس النتيجة مثل ex01.py .

$ python3 ex02.السنة التحضيرية

ال browser.find_element_by_xpath () و browser.find_element () يتم استخدام الطرق للعثور على عنصر واحد وتحديده من صفحات الويب. إذا كنت تريد البحث عن عناصر متعددة وتحديدها باستخدام محددات XPath ، فيجب عليك استخدام browser.find_elements_by_xpath () أو browser.find_elements () أساليب.

ال browser.find_elements_by_xpath () تأخذ الطريقة نفس الوسيطة مثل browser.find_element_by_xpath () طريقة.

ال browser.find_elements () تأخذ الطريقة نفس الحجج مثل browser.find_element () طريقة.

دعونا نرى مثالاً لاستخراج قائمة بالأسماء باستخدام محدد XPath من مولد اسم عشوائي مع مكتبة Selenium Python.

القائمة غير المرتبة ( موت علامة) لديها 10 في ال العلامات داخل كل منها تحتوي على اسم عشوائي. XPath لتحديد جميع ملفات في ال العلامات داخل ملف موت العلامة في هذه الحالة هي // * [@ id = main] / div [3] / div [2] / ol // li

لنستعرض مثالاً لتحديد عناصر متعددة من صفحة الويب باستخدام محددات XPath.

قم بإنشاء برنامج نصي جديد من لغة بايثون ex03.py واكتب سطور الرموز التالية فيه.

من عندالسيلينيوميستوردwebdriver
من عندالسيلينيوم.webdriver.مشترك.مفاتيح يستوردمفاتيح
من عندالسيلينيوم.webdriver.مشترك.بواسطة يستوردبواسطة
والخيارات=webdriver.خيارات Chrome()
والخيارات.مقطوعة الرأس = حقيقي
المتصفح=webdriver.كروم(قابل للتنفيذ='./drivers/chromedriver'و
والخيارات=والخيارات)
المتصفح.احصل على('http://random-name-generator.info/')
الأسماء=المتصفح.find_elements_by_xpath('
// * [@ id = 'main'] / div [3] / div [2] / ol // li '
)
لاسمفيالأسماء:
مطبعة(اسم.نص)
المتصفح.أغلق()

بمجرد الانتهاء ، احفظ ملف ex03.py نص بايثون.

السطر 1-8 هو نفسه في ex01.py نص بايثون. لذا ، لن أشرحها هنا مرة أخرى.

يخبر السطر 10 المتصفح بتحميل موقع الويب random-name-generator.info.

يحدد السطر 12 قائمة الأسماء باستخدام ملف browser.find_elements_by_xpath () طريقة. تستخدم هذه الطريقة محدد XPath // * [@ id = main] / div [3] / div [2] / ol // li للعثور على قائمة الأسماء. بعد ذلك ، يتم تخزين قائمة الأسماء في ملف الأسماء عامل.

في السطر 13 و 14 ، أ ل حلقة تستخدم للتكرار من خلال الأسماء قائمة وطباعة الأسماء على وحدة التحكم.

السطر 16 يغلق المتصفح.

قم بتشغيل نص بايثون ex03.py على النحو التالي:

$ python3 ex03.السنة التحضيرية

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

بدلاً من استخدام ملف browser.find_elements_by_xpath () الطريقة ، يمكنك أيضًا استخدام browser.find_elements () الطريقة كما كان من قبل. الحجة الأولى لهذه الطريقة هي بواسطة .XPATH ، والوسيطة الثانية هي محدد XPath.

لتجربة browser.find_elements () طريقة جديدة ، قم بإنشاء برنامج نصي جديد للبايثون ex04.py ، انسخ جميع الرموز من ex03.py إلى ex04.py ، وقم بتغيير السطر 12 كما هو موضح في لقطة الشاشة أدناه.

يجب أن تحصل على نفس النتيجة كما كان من قبل.

$ python3 ex04.السنة التحضيرية

أساسيات منتقي XPath:

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

قم بإنشاء دليل جديد شبكة الاتصالات العالمية / في دليل المشروع الخاص بك على النحو التالي:

$مكدير -الخامسwww

قم بإنشاء ملف جديد web01.html في ال شبكة الاتصالات العالمية / الدليل واكتب الأسطر التالية في هذا الملف.


< لغة البرمجة لانج='تشغيل'>
< رئيس >
< ميتا محارف='UTF-8'>
< ميتا اسم='منفذ العرض' المحتوى='العرض = عرض الجهاز ، المقياس الأولي = 1.0'>
< لقب >مستند HTML الأساسي</ لقب >
</ رئيس >
< هيئة >
< h1 >مرحبا بالعالم</ h1 >
</ هيئة >
</ لغة البرمجة >

بمجرد الانتهاء ، احفظ ملف web01.html ملف.

قم بتشغيل خادم HTTP بسيط على المنفذ 8080 باستخدام الأمر التالي:

$ python3 -m http.الخادم- دليل www /8080

يجب أن يبدأ خادم HTTP.

يجب أن تكون قادرًا على الوصول إلى ملف web01.html ملف باستخدام URL http: // localhost: 8080 / web01.html ، كما ترى في لقطة الشاشة أدناه.

أثناء فتح Firefox أو Chrome Developer Tool ، اضغط على + F لفتح مربع البحث. يمكنك كتابة محدد XPath الخاص بك هنا ومعرفة ما يتم تحديده بسهولة بالغة. سأستخدم هذه الأداة خلال هذا القسم.

يبدأ محدد XPath بـ مائل (/) معظم الوقت. إنها مثل شجرة دليل Linux. ال / هو جذر جميع العناصر على صفحة الويب.

العنصر الأول هو لغة البرمجة . لذلك ، محدد XPath /لغة البرمجة يختار كامل لغة البرمجة بطاقة شعار.

داخل لغة البرمجة علامة ، لدينا هيئة بطاقة شعار. ال هيئة يمكن تحديد العلامة باستخدام محدد XPath / html / body

ال h1 رأس داخل هيئة بطاقة شعار. ال h1 يمكن تحديد الرأس باستخدام محدد XPath / html / body / h1

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

لمعرفة كيفية عمل المسار النسبي أو المسار الجزئي ، قم بإنشاء ملف جديد web02.html في ال شبكة الاتصالات العالمية / الدليل واكتب سطور الرموز التالية فيه.


< لغة البرمجة لانج='تشغيل'>
< رئيس >
< ميتا محارف='UTF-8'>
< ميتا اسم='منفذ العرض' المحتوى='العرض = عرض الجهاز ، المقياس الأولي = 1.0'>
< لقب >مستند HTML الأساسي</ لقب >
</ رئيس >
< هيئة >
< h1 >مرحبا بالعالم</ h1 >

< شعبة >
< ص >هذه رسالة</ ص >
</ شعبة >

< شعبة >
< فترة >مرحبا بالعالم</ فترة >
</ شعبة >
</ هيئة >
</ لغة البرمجة >

بمجرد الانتهاء ، احفظ ملف web02.html ملف وتحميله في متصفح الويب الخاص بك.

كما ترى ، محدد XPath // div / p يختار ص علامة داخل شعبة بطاقة شعار. هذا مثال على محدد XPath نسبي.

يبدأ محدد XPath النسبي بـ // . ثم تحدد هيكل العنصر الذي تريد تحديده. في هذه الحالة، شعبة / ص .

وبالتالي، // div / p يعني تحديد ص عنصر داخل أ شعبة لا يهم ما يأتي قبله.

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

قم بإنشاء ملف جديد web03.html في ال شبكة الاتصالات العالمية / الدليل واكتب سطور الرموز التالية فيه.


< لغة البرمجة لانج='تشغيل'>
< رئيس >
< ميتا محارف='UTF-8'>
< ميتا اسم='منفذ العرض' المحتوى='العرض = عرض الجهاز ، المقياس الأولي = 1.0'>
< لقب > مستند HTML الأساسي</ لقب >
</ رئيس >
< هيئة >
< h1 > أهلاً بالعالم</ h1 >
< شعبة صف دراسي='حاوية 1'>
< ص > هذه رسالة</ ص >
< فترة > هذه رسالة أخرى</ فترة >
</ شعبة >
< شعبة صف دراسي='حاوية 1'>
< h2 > العنوان2</ h2 >
< ص > بعض الناس
من الحكمة أن تختار الآلام والمتاعب والتي لا تقع على عاتق المختار
ليست رحلات سهلة وخدمات أخرى رائعة؟ من أين أو من أين ولد؟</ ص >
</ شعبة >

< فترة هوية شخصية='footer-msg'> هذا تذييل</ فترة >
</تذييل>
</ هيئة >
</ لغة البرمجة >

بمجرد الانتهاء ، احفظ ملف web03.html ملف وتحميله في متصفح الويب الخاص بك.

لنفترض أنك تريد تحديد كل شعبة العناصر التي تحتوي على صف دراسي اسم الحاوية 1 . للقيام بذلك ، يمكنك استخدام محدد XPath // div [@ class = ’container1 ′]

كما ترى ، لدي عنصرين يتطابقان مع محدد XPath // div [@ class = ’container1 ′]

لتحديد أول شعبة عنصر مع صف دراسي اسم الحاوية 1 ، يضيف [1] في نهاية XPath حدد ، كما هو موضح في لقطة الشاشة أدناه.

بنفس الطريقة ، يمكنك تحديد الثانية شعبة عنصر مع صف دراسي اسم الحاوية 1 باستخدام محدد XPath // div [@ class = ’container1 ′] [2]

يمكنك تحديد العناصر من خلال هوية شخصية أيضا.

على سبيل المثال ، لتحديد العنصر الذي يحتوي على الامتداد هوية شخصية من تذييل الرسالة ، يمكنك استخدام محدد XPath // * [@ id = ’footer-msg’]

هنا ، * قبل [@ id = 'footer-msg'] يستخدم لتحديد أي عنصر بغض النظر عن علامته.

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

استنتاج:

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