محدد CSS بتنسيق Selenium

من قبل: Krishna رونجتا Krishna رونجتا
Hours تحديث

⚡ ملخص ذكي

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

  • 🆔 الوسم والمعرف: قم بدمج علامة HTML مع البادئة # لاستهداف العناصر التي تحتوي على سمة ID فريدة بدقة.
  • 🎯 الوسم والفئة: استخدم صيغة النقطة (.) لتحديد موقع العناصر التي تشترك في فئة CSS، وهو أمر مفيد لمكونات واجهة المستخدم المتكررة.
  • 🧩 الوسم والصفة: قم بتطبيق الأقواس [attribute=value] لتحديد العناصر من خلال الاسم أو النوع أو أي زوج من السمات المخصصة.
  • 🪜 الوسم، والفئة، والسمة: قم بتجميع شروط متعددة لإزالة الغموض عن العناصر التي تشترك في كل من أسماء الفئات وقيم السمات.
  • 🔤 مطابقة النص الداخلي: استخدم نمط :contains(“text”) لتحديد موقع التسميات والعناصر التي تفتقر إلى المعرفات أو الأسماء أو الفئات.
  • ✅ أفضل ممارسة: يُفضّل استخدام المعرّفات الثابتة بدلاً من المحددات المتداخلة بعمق للحفاظ على Selenium برامج أتمتة مقاومة لتغييرات واجهة المستخدم.
اقرأ المزيد

محدد CSS بتنسيق Selenium

ما هو مُحدِّد CSS في Selenium?

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

محددات CSS في Selenium تأتي بأشكال عديدة، لكن هذا الدليل يركز على الأنماط الخمسة الأكثر شيوعًا المستخدمة في Selenium SDI:

  • العلامة والهوية
  • العلامة والفئة
  • العلامة والسمة
  • العلامة والفئة والسمة
  • النص الداخلي

عند استخدام هذه الاستراتيجية في Selenium بيئة التطوير المتكاملة (IDE)، أضف البادئة دائمًا إلى Target صندوق مع "css="كما هو موضح في كل مثال أدناه".

لماذا نستخدم مُحدِّدات CSS في Selenium?

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

تشمل المزايا الرئيسية لاستخدام مُحدِّدات CSS ما يلي:

  • الأداء: تتم معالجة محددات CSS بواسطة محرك المتصفح الأصلي، لذا يتم تنفيذها بشكل أسرع من تعبيرات XPath المكافئة، خاصة في المتصفحات القديمة مثل Internet Explorer.
  • المرونة: فهي تجمع بين العلامات والفئات والسمات ومنطق المطابقة الجزئية، مما يسمح للمختبرين باستهداف العناصر التي تفتقر إلى معرف ثابت.
  • قراءة: يعكس بناء الجملة الطريقة التي يكتب بها المطورون بالفعل قواعد CSS، مما يقلل من منحنى التعلم لكل من مهندسي ضمان الجودة وفرق الواجهة الأمامية.
  • استقرار المتصفحات المختلفة: تتصرف مُحدِّدات CSS بشكل متسق عبر متصفح Chrome، Firefox، إيدج، وسفاري، مما يقلل من حالات فشل الاختبارات غير المستقرة.

الوسم والمعرف - مُحدِّد CSS

يستخدم هذا المثال مربع نص البريد الإلكتروني في صفحة تسجيل الدخول إلى فيسبوك. العنصر له معرّف "البريد الإلكترونيوقد تم الوصول إليه بالفعل في قسم "تحديد الموقع بواسطة المعرف". والآن يتم استهداف العنصر نفسه باستخدام Selenium محدد CSS مع سمة المعرف (ID).

بناء الجملة

css=tag#id

  • العلامة = علامة HTML للعنصر الذي يتم الوصول إليه
  • # = علامة التجزئة، والتي يجب أن تكون موجودة دائمًا عند استخدام Selenium محدد CSS مع معرف
  • معرف = معرف العنصر الذي يتم الوصول إليه

ضع في اعتبارك أن المعرف يسبقه دائمًا علامة التجزئة (#).

الخطوة 1) انتقل إلى www.facebook.comباستخدام أدوات مطوري المتصفح (أو أداة قديمة مثل Firebug)، افحص مربع النص "البريد الإلكتروني أو رقم الهاتف".

لاحظ أن علامة HTML هي "إدخال"ومعرّفها هو "البريد الإلكترونيوبالتالي، يصبح مُحدِّد CSS الكامل هو:css=الإدخال#البريد الإلكتروني".

الوسم والمعرف - مُحدِّد CSS في Selenium

الخطوة 2) أدخل "css=الإدخال#البريد الإلكتروني" داخل ال Target صندوق من Selenium IDE وانقر على زر البحث. Selenium يقوم برنامج IDE بتمييز العنصر المطابق في الصفحة.

Selenium بيئة التطوير المتكاملة (IDE) تُبرز حقل البريد الإلكتروني عبر الوسم والمعرف

الوسوم والفئات - مُحدِّد CSS

مُحدِّد CSS في Selenium الذي يستخدم علامة HTML واسم فئة يتبع نفس فكرة العلامة والمعرف، ولكن النقطة (.) تحل محل علامة التجزئة.

بناء الجملة

css=tag.class

  • العلامة = علامة HTML للعنصر الذي يتم الوصول إليه
  • . = علامة النقطة، والتي يجب أن تكون موجودة دائمًا عند استخدام مُحدِّد CSS مع فئة
  • class = فئة العنصر الذي يتم الوصول إليه

الخطوة 1) افتح صفحة العرض التوضيحي https://demo.guru99.com/test/facebook.html وتفقد مربع نص "البريد الإلكتروني أو رقم الهاتف". لاحظ أن علامة HTML هي "إدخالوفئتها هيinputtext".

الوسوم والفئات - مُحدِّد CSS في Selenium

الخطوة 2) In Selenium في بيئة التطوير المتكاملة، أدخل "css=input.inputtext"في Target المربع ثم انقر فوق بحث. Selenium يتعرف برنامج IDE على مربع نص البريد الإلكتروني أو رقم الهاتف.

Selenium تحديد موقع العنصر بواسطة الوسم والفئة في بيئة التطوير المتكاملة

لاحظ أنه عندما تشترك عناصر متعددة في نفس علامة HTML والفئة، يتم التعرف فقط على أول عنصر مطابق في الكود المصدري. قم بفحص مربع نص كلمة المرور في نفس الصفحة ولاحظ أنه يشترك في نفس الفئة مع مربع نص البريد الإلكتروني أو رقم الهاتف.

عناصر متعددة تشترك في نفس الوسم والفئة

تم تمييز مربع نص البريد الإلكتروني أو رقم الهاتف فقط في الرسم التوضيحي السابق لأنه يظهر أولاً في مصدر الصفحة.

تحديد ترتيب مصادر الصفحات Selenium مباراة

الوسوم والسمات - مُحدِّد CSS

تجمع هذه الاستراتيجية بين علامة HTML وسمة محددة تنتمي إلى العنصر الذي تريد الوصول إليه.

بناء الجملة

css=tag[attribute=value]

  • العلامة = علامة HTML للعنصر الذي يتم الوصول إليه
  • [ و ] = أقواس مربعة تُحيط بالخاصية وقيمتها المقابلة
  • السمة = السمة المراد استخدامها. اختر سمة فريدة للعنصر، مثل الاسم أو المعرّف.
  • value = القيمة المقابلة للسمة المختارة.

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

الوسوم والسمات - مُحدِّد CSS في Selenium

الخطوة 2) In Selenium في بيئة التطوير المتكاملة، أدخل "CSS=الإدخال[الاسم=اسم العائلة]"في Target المربع ثم انقر فوق بحث. Selenium نجح برنامج IDE في تحديد موقع حقل اسم العائلة.

Selenium تحديد اسم العائلة في بيئة التطوير المتكاملة عبر السمة

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

لا تفوت:

الوسوم، والفئات، والسمات - مُحدِّد CSS

بناء الجملة

css=tag.class[attribute=value]

  • العلامة = علامة HTML للعنصر الذي يتم الوصول إليه
  • . = علامة النقطة، والتي يجب أن تكون موجودة دائمًا عند استخدام مُحدِّد CSS مع فئة
  • class = فئة العنصر الذي يتم الوصول إليه
  • [ و ] = أقواس مربعة تُحيط بسمة معينة وقيمتها المقابلة
  • السمة = السمة المراد استخدامها. اختر سمة فريدة للعنصر، مثل الاسم أو المعرّف.
  • value = القيمة المقابلة للسمة المختارة.

الخطوة 1) افتح صفحة العرض التوضيحي https://demo.guru99.com/test/facebook.html وتفحص مربعي إدخال "البريد الإلكتروني أو رقم الهاتف" و"كلمة المرور". لاحظ علامة HTML الخاصة بهما، وفئتهما، وخصائصهما. يستخدم هذا المثال "فهرس التبويب" يصف.

العلامة والفئة والسمة - محدد CSS

الخطوة 2) قم بالوصول إلى مربع نص "البريد الإلكتروني أو رقم الهاتف" أولاً باستخدام قيمة tabindex تساوي 1. أدخل "css=input.inputtext[tabindex=1]" إلى Selenium IDE's Target انقر على مربع البحث ثم انقر على "بحث". سيتم تمييز حقل البريد الإلكتروني أو رقم الهاتف.

Selenium تحديد موقع البريد الإلكتروني بواسطة الوسم، أو الفئة، أو السمة في بيئة التطوير المتكاملة

الخطوة 3) لاستهداف مربع إدخال كلمة المرور، ما عليك سوى استبدال قيمة tabindex. أدخل "css=input.inputtext[tabindex=2]"في Target المربع ثم انقر فوق بحث. Selenium نجح برنامج IDE في تحديد موقع مربع نص كلمة المرور.

Selenium تحديد موقع كلمة المرور بواسطة الوسم أو الفئة أو السمة في بيئة التطوير المتكاملة

النص الداخلي – مُحدِّد CSS

نادرًا ما تُمنح تسميات HTML سمات id أو name أو class. فكيف يمكنك الوصول إليها في Seleniumالجواب يكمن في نصها الداخلي. النصوص الداخلية هي أنماط السلاسل الفعلية التي يعرضها عنصر HTML على الصفحة.

بناء الجملة

css=tag:contains("inner text")

  • العلامة = علامة HTML للعنصر الذي يتم الوصول إليه
  • النص الداخلي = محتوى النص المرئي للعنصر

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

النص الداخلي - فحص مُحدِّد CSS

الخطوة 2) النوع css=font:يحتوي على("كلمة المرور:") إلى Selenium IDE's Target المربع ثم انقر فوق بحث. Selenium يحدد برنامج IDE موقع تسمية كلمة المرور كما هو موضح أدناه.

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

الخطوة 3) هذه المرة، استبدل النص الداخلي بـ "بوسطن" حتى Target يصبح "css=font:contains(“Boston”)انقر على "بحث". سيتم تمييز علامة "من بوسطن إلى سان فرانسيسكو"، مما يدل على ذلك. Selenium يمكن لبيئة التطوير المتكاملة (IDE) تحديد موقع تسمية طويلة حتى عند توفير الكلمة الأولى فقط من نصها الداخلي.

Selenium مطابقة النص الداخلي الجزئي في بيئة التطوير المتكاملة

مقارنة بين مُحدِّد CSS و XPath في Selenium

تُستخدم كل من مُحدِّدات CSS و XPath لتحديد عناصر الويب في Seleniumومع ذلك، لكل منهما نقاط قوة مختلفة. يقارن الجدول أدناه بين استراتيجيتي تحديد المواقع من حيث الأبعاد الرئيسية:

المعايير CSS محدد كسباث
سرعة أسرع، ويعمل على محرك المتصفح الأصلي أبطأ، خاصة في المتصفحات القديمة
طريقة الاستخدام: إعادة توجيه فقط (من الوالد إلى الطفل) للأمام وللخلف (من الطفل إلى الوالد)
بناء الجملة أقصر وأشبه بقواعد CSS تعبيرات المسار الهرمية الأطول
مطابقة النص يقتصر على الفئة الزائفة :contains() دالتا النص القوي () و () يحتويان على
أفضل ل التصميمات الثابتة وتطبيقات الويب الحديثة التنقل المعقد عبر نموذج كائن المستند (DOM) ومحددات المواقع النصية

أفضل الممارسات لكتابة مُحدِّدات CSS في Selenium

إن كتابة مُحدِّدات CSS موثوقة لا يقتصر على معرفة قواعد اللغة فقط. تساعد الممارسات التالية المختبرين على إنشاء مُحدِّدات مستقرة وقابلة للصيانة. Selenium البرامج النصية التي تبقى بعد تغييرات واجهة المستخدم:

  1. يفضل السمات الفريدة: اختر دائمًا سمات المعرّف (id) أو معرّف اختبار البيانات (data-test-id) أو الاسم (name) التي تمت إضافتها صراحةً لأغراض الأتمتة. تظل هذه السمات ثابتة حتى عند تغيير التصميم المرئي.
  2. تجنب استخدام المحددات المتداخلة بشكل مفرط: سلاسل طويلة مثل div > div > ul > li > a تتعطل بسهولة عند قيام المطورين بإعادة هيكلة الترميز. حافظ على المحددات قصيرة قدر الإمكان.
  3. استخدم التطابقات الجزئية بحكمة: أنماط مثل [class*="btn-primary"] تتسامح مع تغييرات طفيفة في أسماء الفئات، ولكنها قد تتطابق أيضًا مع عناصر غير مقصودة.
  4. تجنب محددات المواقع القائمة على الفهرسة: محددات مثل nth-child(3) تكون هشة لأن إضافة عنصر شقيق يغير كل موضع.
  5. التحقق من صحة المحددات في أدوات المطورين: قبل تشغيل أ Selenium قم بلصق المحدد في وحدة تحكم أدوات مطوري Chrome باستخدام البرنامج النصي document.querySelector() للتأكد من أنها تُرجع عنصرًا واحدًا فقط.
  6. اجمع السمات لتحقيق التفرد: عندما تشترك عدة عناصر في فئة معينة، أضف عامل تصفية للسمات مثل: input.form-control[name="email"] لإزالة الغموض عن الهدف.
  7. توثيق وإعادة استخدام: قم بتمركز المحددات داخل فئة كائن الصفحة بحيث يؤدي تحديث واحد إلى إصلاح كل اختبار يشير إلى نفس العنصر.

يؤدي اتباع هذه الإرشادات إلى تقليل عدم الاستقرار، وتحسين سرعة تنفيذ الاختبار، ويجعل Selenium الأجنحة أسهل في الصيانة مع مرور الوقت.

ملخص: مرجع سريع لصيغة مُحدِّدات CSS

يجمع الجدول أدناه كل Selenium نمط مُحدِّد CSS الذي تم تناوله في هذا الدليل:

الأسلوب Target بناء الجملة مثال
العلامة والهوية css=tag#id css=الإدخال#البريد الإلكتروني
العلامة والفئة css=tag.class css=input.inputtext
العلامة والسمة المغلق=العلامة[السمة=القيمة] CSS=الإدخال[الاسم=اسم العائلة]
العلامة والفئة والسمة css=tag.class[السمة=القيمة] css=input.inputtext[tabindex=1]
النص الداخلي css=tag:contains(“text”) css=font:يحتوي على("كلمة المرور:")

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

نعم. تُنفَّذ مُحدِّدات CSS بشكل أسرع عمومًا من XPath لأن المتصفحات تعالج قواعد CSS بشكل أصلي. يكون الفرق أكثر وضوحًا في الإصدارات القديمة من Internet Explorer، بينما في المتصفحات الحديثة مثل Chrome و Firefox تضييق الفجوة.

نعم. مُحدِّدات CSS مكتوبة لـ Selenium تعمل بيئة التطوير المتكاملة (IDE) بشكل مباشر في Selenium WebDriver من خلال By.cssSelector()الفرق الوحيد هو أن WebDriver لا يتطلب البادئة "css="، حيث يتم تحديد نوع المحدد بواسطة الطريقة نفسها.

لا، تم إيقاف برنامج Firebug في عام 2017 بعد دمجه في Firefox أدوات المطورين. يستخدم المختبرون اليوم أدوات المطورين المدمجة في متصفح كروم، Firefoxأو استخدم متصفح Edge لفحص العناصر والتحقق من صحة مُحدِّدات CSS قبل إضافتها إلى Selenium مخطوطات.

نعم. يمكن لأدوات الذكاء الاصطناعي مثل Mabl وChatGPT اقتراح مُحدِّدات CSS من خلال تحليل DOM. وهي تُقلِّل من جهد الصيانة عن طريق تعديل المُحدِّدات عندما يُعيد المطورون تسمية الفئات أو يُعيدون هيكلة الصفحة.

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

استخدم أنماط المطابقة الجزئية مثل [id^="user_"] بالنسبة للبادئات، [id$="_btn"] بالنسبة لللاحقات، أو [id*="cart"] بالنسبة للسلاسل الفرعية. تتطابق هذه الأنماط مع المعرفات التي يتم إنشاؤها ديناميكيًا دون الحاجة إلى قيمة محددة.

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

افتح أدوات مطوري المتصفح، وانتقل إلى علامة تبويب وحدة التحكم، وقم بتشغيل document.querySelectorAll("your-selector")تُظهر قائمة العقد المُعادة كل عنصر مطابق. موثوقة Selenium يجب أن يُرجع المحدد عنصرًا واحدًا فقط للاستهداف الفريد.

تلخيص هذه التدوينة بـ: