كيفية البحث عن العناصر بواسطة CSS Selector في السيلينيوم

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

مقدمة إلى محددات CSS

تسمح لك محددات CSS بتحديد عناصر HTML استنادًا إلى المعرف والفئة والسمة والموضع في شجرة DOM والمزيد. فيما يلي بعض محددات CSS الأكثر استخدامًا:

• محدد الهوية - تحديد عنصر بناءً على المعرف الفريد الخاص به. على سبيل المثال #main-header سيحدد العنصر ذو المعرف = "main-header".

• محدد الصف – تحديد العناصر بناءً على اسم الفئة. على سبيل المثال .article سيحدد كافة العناصر ذات الفئة = "المادة".

• محدد السمة - تحديد العناصر بناءً على سمة أو قيمة سمة معينة. على سبيل المثال input[type="text"] سيحدد كافة عناصر الإدخال مع type = "text".

• محدد السلالة – تحديد العناصر التي تنحدر من عنصر محدد آخر. على سبيل المثال div p سيحدد جميع عناصر p داخل عناصر div.

• محدد الطفل - تحديد العناصر التي تعتبر أبناء مباشرين لعنصر محدد آخر. على سبيل المثال div > p سيحدد عناصر p التي تعتبر أبناء مباشرين لـ div.

• محدد الأخوة المجاور - تحديد العنصر الشقيق الذي يتبع عنصرًا آخر مباشرةً. على سبيل المثال h2 + p سيحدد العنصر p الذي يأتي مباشرة بعد عنصر h2.

• محدد الأشقاء العام – تحديد جميع العناصر الشقيقة التي تتبع عنصرًا آخر. على سبيل المثال h2 ~ p سيتم تحديد كافة العناصر p التي تأتي بعد عنصر h2.

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

البحث عن العناصر بواسطة CSS Selector في السيلينيوم

يوفر السيلينيوم طريقتين رئيسيتين للعثور على العناصر باستخدام محددات CSS:

driver.find_element_by_css_selector()

ستعيد هذه الطريقة العنصر المطابق الأول.

element = driver.find_element_by_css_selector(‘#main-header‘)

driver.find_elements_by_css_selector()

ستعيد هذه الطريقة قائمة بجميع العناصر المطابقة.

elements = driver.find_elements_by_css_selector(‘.article‘)

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

حسب المعرف:

driver.find_element_by_css_selector(‘#signup-form‘)

حسب الفئة:

driver.find_element_by_css_selector(‘.footer-links‘)

حسب السمة:

driver.find_element_by_css_selector(‘input[name="first_name"]‘)

تنازلي:

driver.find_element_by_css_selector(‘div#content p.summary‘)

الطفل:

driver.find_element_by_css_selector(‘ul.menu > li.active‘) 

الأخ المجاور:

driver.find_element_by_css_selector(‘h1 + p.intro‘)

الأخوة العامة:

driver.find_element_by_css_selector(‘h2 ~ p.related-posts‘)

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

نصائح لكتابة محددات CSS الفعالة

فيما يلي بعض النصائح التي يجب اتباعها عند كتابة محددات CSS للعثور على العناصر في السيلينيوم:

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

• تفضيل الفئة على اسم العلامة - أسماء العلامات مثل div وp وa وما إلى ذلك ليست مميزة جدًا. تسمح الفصول باستهداف أكثر تحديدًا.

• استخدم سمات فريدة مثل الاسم أو العنوان - تحتوي سمات الاسم والعنوان عادةً على قيم فريدة يمكنها تحديد عنصر واحد.

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

• تجنب المحددات المتداخلة المعقدة - يمكن أن يؤدي تسلسل الكثير من المحددات التابعة إلى جعل المحددات عرضة للكسر. حاول قصر كل محدد على 3-4 مستويات متسلسلة.

• قم بتقسيم المحددات الطويلة إلى أسطر متعددة - ليس من الضروري أن تكون محددات CSS عبارة عن سطر واحد. يمكن أن يؤدي تقسيمها إلى أسطر متعددة إلى تحسين إمكانية القراءة.

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

الأمثلة الشائعة وحالات الاستخدام

الآن دعونا نلقي نظرة على بعض الأمثلة الشائعة لكيفية استخدام محددات CSS لاستخراج الويب واختبار المتصفح باستخدام السيلينيوم:

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

لتحديد روابط التنقل الرئيسية، يمكننا استخدام محدد الفئة:

nav_links = driver.find_elements_by_css_selector(‘ul.main-nav > li > a‘)

اختيار حقول النموذج

يمكننا تحديد حقول إدخال النموذج بناءً على علامة الإدخال ونوع السمة:

username = driver.find_element_by_css_selector(‘input[type="text"][name="username"]‘)
password = driver.find_element_by_css_selector(‘input[type="password"]‘)

اختيار صفوف وأعمدة الجدول

تعمل محددات CSS على تسهيل استهداف صفوف وخلايا محددة في جدول HTML:

# Get second row 
row = driver.find_element_by_css_selector(‘#data-table tr:nth-child(2)‘) 

# Get cell in specific row/column
cell = driver.find_element_by_css_selector(‘#data-table tr:nth-child(2) td:nth-child(3)‘)

اختيار العناصر الفرعية

لتحديد أبناء div المباشرين فقط للحاوية، يمكننا استخدام المحدد الفرعي:

children = driver.find_elements_by_css_selector(‘#container > div‘)

اختيار العناصر على أساس النص

يمكننا مطابقة نص الرابط جزئيًا باستخدام المحدد *:

contact_link = driver.find_element_by_css_selector(‘a[href*="contact"]‘]

توضح هذه الأمثلة كيف يمكن استخدام محددات CSS في سيناريوهات التشغيل الآلي للاختبار في العالم الحقيقي.

استخدام محددات CSS في لغات أخرى

استخدمت الأمثلة حتى الآن لغة Python، ولكن يمكن استخدام محددات CSS في أي روابط لغة للسيلينيوم:

جافا

// By.cssSelector 
WebElement element = driver.findElement(By.cssSelector("div.main #login-form"));

C#

// FindElement 
IWebElement element = driver.FindElement(By.CssSelector("div.main #login-form"));

جافا سكريبت

// $ 
const element = await driver.$(‘div.main #login-form‘);

بغض النظر عن اللغة التي تستخدمها، توفر محددات CSS طريقة قوية ومرنة لاستهداف العناصر.

تحديد العناصر حسب اسم الفئة

حالة الاستخدام الشائعة هي تحديد موقع العناصر حسب اسم الفئة. فيما يلي بعض النصائح للاختيار حسب الفصل في السيلينيوم:

• تطابق اسم الفئة بالضبط - driver.find_element_by_class_name(‘primary-btn‘)

• استخدم محدد فئة CSS - driver.find_element_by_css_selector(‘.primary-btn‘)

• تطابق جزئي لفئات متعددة - driver.find_element_by_css_selector(‘.primary.btn‘)

• مطابقة السليل مع الطبقة - driver.find_element_by_css_selector(‘div .primary-btn‘)

• استخدم فئات متعددة للتفرد - driver.find_element_by_css_selector(‘.primary-btn.large‘)

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

البحث عن العناصر حسب اسم العلامة

يعد تحديد موقع العناصر حسب اسم علامة HTML مهمة أخرى شائعة للسيلينيوم. وهنا بعض الأمثلة:

البحث عن المثيل الأول لاسم العلامة:

element = driver.find_element_by_tag_name(‘button‘) 

البحث عن كافة مثيلات اسم العلامة:

buttons = driver.find_elements_by_tag_name(‘button‘)

ادمج مع محدد CSS:

submit_btn = driver.find_element_by_css_selector(‘form button[type="submit"]‘)

منذ أسماء العلامات مثل <div> و <span> شائعة، حاول أيضًا استخدام المعرفات أو الفئات أو السمات لتعريف العنصر بشكل فريد.

البحث عن العناصر بالاسم أو المعرف

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

البحث عن طريق المعرف الدقيق:

element = driver.find_element_by_id(‘signup-form‘)

البحث بالاسم الدقيق:

element = driver.find_element_by_name(‘email‘) 

ستتطابق محددات المعرف والاسم فقط مع قيم السمات الدقيقة. وهذا يجعلها محددة للغاية ولكنها أيضًا عرضة للكسر إذا تغيرت المعرفات أو الأسماء.

البحث عن العناصر بواسطة XPath مقابل CSS Selector

XPath هي إستراتيجية موقع العنصر المشترك الأخرى في السيلينيوم. إذن متى يجب عليك استخدام محددات XPath مقابل CSS؟

فيما يلي بعض الاختلافات:

• قراءة - تعتبر محددات CSS أكثر قابلية للقراءة وأسهل للفهم بالنسبة لمعظم المطورين.

• الصيانة - محددات CSS أقل هشاشة وعرضة لكسر التغييرات مقارنة بمسارات XPath الطويلة والمعقدة.

• قدرات - يمكن لـ XPath الوصول إلى بعض خصائص العناصر التي لا تستطيع محددات CSS الوصول إليها، مثل محتوى النص.

• الأداء - تعتبر محددات CSS أسرع بالنسبة للمتصفحات للمطابقة مقارنة بمسارات XPath المعقدة.

بشكل عام، تفضل محددات CSS لقابلية الصيانة والأداء. استخدم XPath فقط عند الحاجة للوصول إلى شيء غير ممكن باستخدام CSS.

أفضل الممارسات عند استخدام محددات CSS

فيما يلي بعض أفضل الممارسات التي يجب اتباعها عند تحديد موقع العناصر باستخدام محددات CSS:

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

• استخدم المعرفات والفئات على أسماء العلامات والتداخل.

• حاول مطابقة 3 مستويات متسلسلة أو أقل - المزيد من المستويات يزيد من الهشاشة.

• تجنب المحددات العامة مثل * - هذه عرضة لمطابقات إيجابية كاذبة.

• قم بتقسيم المحددات الطويلة إلى أسطر متعددة – يحسن إمكانية القراءة.

• ذاكرة التخزين المؤقت للمحددات شائعة الاستخدام - تحفظ عمليات البحث المتكررة عن المحددات.

• استخدم أسماء المحددات الوصفية - يساعد في توضيح النية ويتجنب السلاسل السحرية.

سيساعد اتباع أفضل الممارسات هذه في كتابة محددات CSS قوية وقابلة للقراءة وموثوقة لأتمتة السيلينيوم.

نصائح لتصحيح محددات CSS

يعد تصحيح أخطاء محددات CSS مهارة أساسية لأتمتة الاختبار. فيما يلي بعض النصائح لاستكشاف الأخطاء وإصلاحها:

• استخدم أدوات المطورين في المتصفح الخاص بك لاختبار المحددات - يوفر Chrome DevTools مفتشًا مناسبًا للعناصر.

• طباعة وفحص العناصر المطابقة – بعد التشغيل find_elements()، قم بطباعة النتائج لمعرفة ما تمت مطابقته.

• يو كاتش NoSuchElementException - التفاف الاكتشافات في كتلة محاولة/باستثناء للالتقاط عند عدم العثور على عنصر.

• إنشاء XPath من العنصر المستهدف – تتيح لك العديد من المتصفحات نسخ XPath، مما يمكن أن يساعد في إنشاء محدد CSS.

• تبسيط المحددات المعقدة – حاول إزالة السمات/الفئات/التداخل حتى يعمل المحدد.

• استخدم فترات الانتظار الصريحة إذا لزم الأمر - قد تتطلب الصفحات الديناميكية فترات انتظار حتى تصبح المحددات متاحة.

• التحقق من دقة المحدد - تأكد من أن المحدد يعثر فعليًا على العنصر المطلوب، وليس أي عنصر فقط.

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

وفي الختام

يغطي هذا الدليل جميع الجوانب الرئيسية لتحديد موقع العناصر بواسطة محدد CSS في السيلينيوم:

• بناء جملة محدد CSS وأنواعه
• الاستخدام مع السيلينيوم find_element طرق
• كتابة محددات دقيقة وقابلة للصيانة
• حالات وأمثلة الاستخدام الشائع
• مقارنة بـ XPath
• تصحيح الأخطاء وأفضل الممارسات

توفر محددات CSS طريقة قوية ومرنة لاستهداف العناصر لتجميع الويب واختبار التشغيل الآلي. من خلال إتقان التقنيات الموضحة هنا، يمكنك كتابة نصوص برمجية قوية للتشغيل الآلي تقاوم التغييرات في واجهة مستخدم التطبيق. يعد الاستخدام السليم لمحددات CSS مهارة لا بد منها لأي مهندس سيلينيوم متمرس.