ما هو DOM في Selenium WebDriver؟ البنية والشكل الكامل

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

⚡ ملخص ذكي

يعرض نموذج كائن المستند صفحة HTML لـ Javaالبرنامج النصي كشجرة من الكائنات، مما يسمح للبرامج النصية و Selenium يقوم برنامج WebDriver بقراءة وتحديد موقع وتغيير أي عنصر على الصفحة أثناء تشغيل المتصفح.

  • 🔘 بالشكل الكامل: DOM تعني نموذج كائن المستند، وهي واجهة موحدة من قبل W3C لمستندات HTML و XML.
  • ☑️ هيكل الشجرة: يصبح كل وسم بمثابة عقدة، لذا فإن html و head و body و article و p تشكل تسلسلًا هرميًا بين الأصل والفرع.
  • ✅ ثلاثة أشياء: يحيط عنصر Window بالعلامة التبويب، ويحدد عنصر Document جذر الشجرة، ويمثل عنصر Element كل علامة على حدة.
  • 🧪 الأساليب الأساسية: تقوم getElementById و querySelector و querySelectorAll باسترجاع العقد؛ بينما تقوم innerHTML بقراءة محتواها وإعادة كتابته.
  • 🛠️ التصحيح: تكشف أدوات مطوري المتصفح عن الشجرة التي تم تحليلها، وتستمر التعديلات التي يتم إجراؤها هناك فقط حتى يتم إعادة تحميل الصفحة.
  • 📊 الأحداث: إجراءات مثل النقر وتحميل رسائل البث التي يمكن لسمات النقر أو إضافة مستمع للأحداث اعتراضها.
اقرأ المزيد

ما هو DOM في Selenium بنية WebDriver وشكله الكامل

ما هو DOM في Selenium برنامج تشغيل الويب؟

DOM in Selenium WebDriver هو عنصر أساسي في تطوير مواقع الويب باستخدام HTML5 و Javaالنص. الشكل الكامل لـ DOM هو نموذج كائن المستند. DOM ليس مفهومًا في علوم الكمبيوتر. إنه مجموعة بسيطة من الواجهات الموحدة بين مطوري الويب للوصول إلى المستندات ومعالجتها في HTML أو XML باستخدام Javaالنصي.

تساعد هذه المعايير المطورين على إنشاء صفحة ويب دون القلق بشأن تفاصيل التنفيذ. بعض المنظمات المشاركة في توحيد معايير هذه الواجهات هي مثل Mozilla وApple و Microsoft, Googleأدوبي وغيرها. ومع ذلك، فإن اتحاد شبكة الويب العالمية (W3C) هو الذي يُضفي الطابع الرسمي على المعيار وينشره - انظر هنا (https://dom.spec.whatwg.org/).

تتناول الأقسام التالية بنية المستند، والعناصر التي يعرضها نموذج كائن المستند (DOM)، وكيفية فحصها. تحتفظ موزيلا بمرجع واجهة برمجة التطبيقات (API) الحالي على صفحات نموذج كائن المستند MDN.

كل ما Selenium يُحلّل المُحدِّد هذا إلى نفس الشجرة، لذا فإن البنية أدناه هي ما العثور على العنصر () البحث.

فهم بنية DOM

ستحتاج إلى فهم بنية DOM إذا كنت تقوم بإنشاء أي موقع ويب يتضمن استخدام البرمجة النصية Javaيعد فهم DOM أكثر أهمية إذا كنت تقوم بأي من المهام المعقدة التالية أو كلها في موقع الويب الخاص بك -

  1. ديفيلوping محتوى يتم تحديثه باستمرار دون الحاجة إلى إعادة تحميل الصفحة بأكملها - مثل السعر الحالي لجميع الأسهم في محفظة المستخدم الخاصة بك
  2. ديفيلوping تفاعلات المستخدم المتقدمة مثل إضافة المحتوى أو تعديله ديناميكيًا - مثل القدرة على إضافة المزيد من الأسهم إلى محفظتك
  3. ديفيلوping محتوى قابل للتخصيص من قِبل المستخدم – مثل القدرة على تغيير التخطيط بحيث تظهر محفظة صناديق الاستثمار المشتركة قبل محفظة الأسهم
  4. ديفيلوping محتوى متجاوب في موقعك الإلكتروني، مما يجعل موقعك يتكيف تلقائيًا مع شاشات الوسائط المختلفة مثل أجهزة iPhone وأجهزة الكمبيوتر المكتبية والأجهزة اللوحية وغيرها.

صفحة HTML أساسية

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
         <head>
            <title>my page title</title>
          </head>
<body>
         <article>
                  <p>
                         my first article
                   </p>
         </article>
        <aside>side bar content</aside>
</body>
</html>

كيف يبدو الأمر بالنسبة لمحلل DOM الخاص بالمتصفح؟

html    >     head    >    title
    >    body    >    aside
            >    article    >    p

كيف يمكنك الوصول إلى عنصر الجسم؟

<script>
    var body = window.document.body;
</script>

كيف تقول "أهلاً بالعالم"؟

<script>
    var body = document.querySelector("body > article > p").innerHTML = "Hello World!";
			</script>

وأخيرًا سيبدو ملف HTML بأكمله

ساعات العمل Windows استخدم المفكرة والصق المحتوى التالي بداخلها. ثم احفظ الملف باسم "MyFileNewFile.html" (تأكد من أن اسم الملف ينتهي بـ .html).

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>my page title</title>
</head>
<body>
<article><p>my first article</p></article>
<aside>side bar content</aside>
<script>

    var body = document.querySelector("body > article > p").innerHTML = "Hello World!";
			</script>
</body>
</html>

أخيرًا، ما عليك سوى فتح الملف باستخدام أي متصفح مفضل لديك وسترى "Hello World!"

مكونات DOM في Selenium

فيما يلي المكونات الرئيسية لـ DOM Selenium برنامج تشغيل الويب:

  • نافذة
  • وثيقة
  • العنصر

يقع كل مكون في مستوى مختلف من الشجرة، بدءًا من المستوى الخارجي.

نافذة

النافذة هي الكائن الذي يحتوي على كائن المستند في DOM. إنه يجلس على رأس كل شيء.

للوصول إلى كائن النافذة من مستند معين

<script>
      var window = document.defaultView;
</script>

في البيئة المبوبة، تحتوي كل علامة تبويب على كائن النافذة الخاص بها. ومع ذلك، إذا رغب أحد في التقاط أحداث مثل window.resizeTo وwindow.resizeBy وتنفيذها، فإنها تنطبق على النافذة بأكملها وليس على علامة التبويب وحدها.

خصائص كائن النافذة في DOM

window.localStorage – يتيح الوصول إلى التخزين المحلي للمتصفح. يمكن استخدام التخزين المحلي لتخزين واسترجاع البيانات من الجلسة.

<script>
    window.localStorage.setItem('name','xyz');
	var name = window.localStorage.getItem('name');
</script>

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

طرق مفيدة لكائن النافذة

نافذة.تنبيه() – يعرض مربع حوار تنبيه مع رسالة.

<script>
		window.alert('say hello');
</script>

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

ذات المواد

وثيقة

يمثل المستند بداية شجرة DOM. وهو العقدة الأولى في DOM. يحتوي على عدة طرق وخصائص، ينطبق نطاقها على المستند بأكمله، مثل: URL، getElementById، querySelector، إلخ.

خصائص كائن المستند في DOM

Document.documentURI و وثيقة.URL – كلاهما يُعيد الموقع الحالي للمستند. ولكن، إذا لم يكن المستند من نوع مستند HTML.URL لن يعمل.

Document.activeElement – تُعيد هذه الطريقة العنصر المُحدد في DOM. هذا يعني أنه إذا كان المستخدم typing في مربع النص، ستُعيد الدالة Document.activeElement مرجعًا إلى مربع النص هذا.

Document.title - يُستخدم هذا لقراءة أو تعيين عنوان لمستند معين.

طرق مفيدة لكائن المستند

Document.getElementById(معرف السلسلة) – هذه هي الطريقة الأكثر أهمية وفائدة في التعامل مع DOM. تُستخدم للبحث عن عنصر في شجرة DOM. باستخدام معرّفه الفريدعملية البحث حساسة لحالة الأحرف، أي في المثال التالي " لا يمكن البحث عن العنصر " باستخدام كلمات مثل IntroDiv أو introdiv أو iNtrodiv وما إلى ذلك.

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head></head>
<body>
<div id='introDiv'></div>
<script>
		var label = Document.getElementById('introDiv');
		label.setInnerHTML('say hello again');
	</script>
</body>
</html>

Document.querySelectorAll (محدد السلسلة) – هذه طريقة أخرى شائعة الاستخدام لاختيار عنصر أو أكثر بناءً على قواعد مُحدِّد CSS (إذا كنتَ مُلِمًّا برمز $ في jQuery، فهو يستخدم هذه الطريقة أيضًا). لن نتطرق كثيرًا إلى مُحدِّدات CSS. مُحدِّد CSS هو مجموعة من القواعد التي تُتيح لك الحصول على قائمة بالعناصر المُتشابهة (بناءً على قاعدة المُحدِّد). وقد استخدمنا هذه الطريقة سابقًا في قسم "مرحباً بالعالم".

العنصر

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

عنصر معروض كعقدة داخل التسلسل الهرمي لشجرة DOM

كائن العنصر في DOM

العنصر هو أي كائن يُمثله عقدة في شجرة DOM الخاصة بالمستند. وكما هو الحال دائمًا، فإن كائن العنصر نفسه ليس سوى مُصطنع.tracمجموعة من الخصائص والأساليب والأحداث بين المتصفح ومستند HTML. توجد أنواع خاصة من العناصر مثل HTMLElement وSVGElement وXULElement وغيرها. سنركز في هذا الدرس على HTMLElement فقط.

خصائص كائن العنصر في DOM

Element.id – يمكن استخدام هذه الخاصية لتعيين أو قراءة “ID” (معرف فريد) لعنصر HTML. يجب أن يكون المعرف فريدًا بين العناصر الموجودة في شجرة DOM. كما ذكرنا من قبل، يتم استخدام المعرف أيضًا بواسطة طريقة Document.getElementById لتحديد كائن عنصر معين داخل شجرة DOM.

HTMLElement.contentEditable – تحدد خاصية contentEditable لعنصر ما ما إذا كان محتوى هذا العنصر قابلاً للتعديل أو التعديل. يمكن تعيين هذه الخاصية كما هو موضح في البرنامج النصي أدناه. يمكن أيضًا استخدام هذه الخاصية لتحديد ما إذا كان عنصر معين قابلاً للتعديل أم لا. جرب البرنامج النصي التالي داخل أي نص HTML وستلاحظ أنه يمكنك تعديل أي محتوى في النص.

<script>
		document.body.contentEditable = true;
</script>

Element.innerHTML – innerHTML هي خاصية مهمة أخرى نستخدمها للوصول إلى محتوى HTML داخل عنصر. كما تستخدم لتعيين محتوى HTML جديد للعنصر. تُستخدم على نطاق واسع لتعيين/تغيير محتوى حقول البيانات. على سبيل المثال، إذا كنت تريد أن تقوم صفحة الويب الخاصة بك بتحديث درجة حرارة مدينة مومباي كل ساعة، فيمكنك تشغيل البرنامج النصي في المثال التالي كل ساعة.

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>my page title</title>
</head>
<body>
<section>
<h1>Mumbai</h1>
<h2>Temperature</h2>
<span id='tempValue'></span><sup>o</sup>C
</section>
<script>
    document.getElementById('tempValue').innerHTML = '26';
			</script>
</body>
</html>

طرق مفيدة لكائن العنصر

HTMLElement.blur() & HTMLElement.focus() – تُستخدم طرق التمويه والتركيز لإزالة التركيز من عنصر HTML أو التركيز عليه على التوالي. تُستخدم هذه الطرق على نطاق واسع لنقل تركيز المؤشر بين مربعات النص في صفحة ويب لإدخال البيانات.

Element.querySelectorAll - تشبه هذه الطريقة طريقة querySelector التي تمت مناقشتها بالفعل لكائن المستند. ومع ذلك، فإن هذه الطريقة ستحد من بحثها ضمن أحفاد العنصر نفسه.

ملاحظة بشأن الدقة: تمت إعادة إنتاج الكتلة أعلاه كما نُشرت. يستخدم الكود العامل وثيقة بحرف د صغير و HTML الداخلي خاصية، وليس setInnerHTML().

تصحيح الأخطاء في DOM

أدوات المطور Google Chromeموزيلا Firefoxأو Internet Explorer (10 أو أعلى) أو Safari يسمحان بتصحيح الأخطاء بسهولة داخل المتصفح. في بعض الأحيان، تفسر المتصفحات المختلفة نفس علامة HTML بشكل مختلف، وذلك عندما يساعدك تصحيح الأخطاء على فحص DOM كما تم تفسيره بواسطة محرك DOM الخاص بهذا المتصفح المعين.

ملاحظة للمتصفح: تم إيقاف دعم متصفح إنترنت إكسبلورر في عام 2022، لذا فإن أدوات المطورين الخاصة به موجودة الآن في Microsoft Edgeالخطوات التالية لم تتغير؛ يتم فتح أدوات المطورين باستخدام F12.

لنفترض الآن أنك تريد تغيير قيمة درجة الحرارة من 26oC ل32oC في المثال الأخير. سنتخذ بعض الخطوات البسيطة للقيام بذلك. لقطات الشاشة المعروضة هنا مأخوذة من Mozilla Firefox- ومع ذلك، فإن الخطوات هي نفسها في جميع المتصفحات الأخرى.

  1. افتح MyFileNewFile.html (أو أي اسم أعطيته لملف HTML الخاص بك في البرامج التعليمية أعلاه) باستخدام متصفحك
  2. استخدم الفأرة وانقر بزر الماوس الأيمن على قيمة درجة الحرارة 26oC وانقر على "فحص العنصر"

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

  3. لاحظ أن العنصر الذي اخترت "فحص العنصر" يظهر مميزًا في متصفحك (عادةً ما تظهر نافذة مصحح الأخطاء في الجزء السفلي من الشاشة)

    أدوات مطوري المتصفح التي تُبرز عنصر span الذي تم فحصه في شجرة DOM

  4. افتح العنصر بالنقر فوق المثلث المائل بجانبه

    توسيع عنصر span في مُفتش DOM باستخدام زر التبديل المثلثي

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

    عرض توضيحي متحرك لتعديل قيمة نص DOM من 26 إلى 32 في نافذة الخصائص.

  6. لاحظ التغيير في محتوى صفحة HTML الخاصة بك. يمكنك إغلاق نافذة التصحيح الآن.

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

    كتمرين ممتع، حاول القيام بما يلي. افتح www.facebook.com في متصفحك واستخدم أداة تصحيح الأخطاء للحصول على النتيجة التالية - لاحظ كيف تقول "لقد قمت باختراق Facebook".

تبدو نتيجة هذا التمرين كما في لقطة الشاشة أدناه.

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

تشمل قراءة وتحرير العقد الصفحات الثابتة. أما الصفحات التفاعلية فتتفاعل أيضاً مع ما يفعله المستخدم.

أحداث DOM

ما هي الأحداث في DOM؟

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

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

  1. تعيين إجراء لحدث onclick لعنصر HTML
  2. قم بتعيين إجراء لحدث النقر باستخدام طريقة addEventListener

طريقة 1

<!DOCTYPE html>
<html>
<head>
    <title>my page title</title>
</head>
<body>
    <section>
        <h1>Mumbai<h1>
        <h2>Temperature</h2>
        <span id='tempValue'></span><sup>o</sup>C
        <br/>
        <br/>
        <button onclick='onRefreshClick()'>Refresh</button>
    </section>
<script>
    	document.getElementById('tempValue').innerHTML = '26';

 function onRefreshClick(e) {
   document.getElementById('tempValue').innerHTML = '32';
}
			</script>
</body>
</html>

طريقة 2

<!DOCTYPE html>
<html>
<head>
    <title>my page title</title>
</head>
<body>
    <section>
        <h1>Mumbai<h1>
        <h2>Temperature</h2>
        <span id='tempValue'></span><sup>o</sup>C
        <br/>
        <br/>
        <button id='btnRefresh'>Refresh</button>
    </section>
<script>
    document.getElementById('tempValue').innerHTML = '26';
    document.getElementById('btnRefresh').addEventListener('click', function(event) {
    document.getElementById('tempValue').innerHTML = '32' },false);
			</script>
</body>
</html>

استكشاف الأخطاء وإصلاحها في DOM

ملاحظة حول واجهة برمجة التطبيقات القديمة: يستخدم الحلان أدناه الدالة document.write(). لا يزال هذا الحل يعمل، ولكن استدعاءه بعد تحميل الصفحة سيؤدي إلى مسح المستند. يُفضل استخدام console.log() أو innerHTML.

س: كيف أعرف إذا كان العنصر موجودا أم لا؟

A. حاول البحث عن العنصر باستخدام أي من المحددات وتحقق مما إذا كان العنصر الذي تم إرجاعه خاليًا. انظر المثال أدناه -

if(document.getElementById("elementIDWhichIsNotPresentInDOM") === null)
{
    //do something
}

س. أحصل على خطأ TypeError: document.getElementByID ليس دالة...

A. تأكد من أن اسم الطريقة يتطابق تمامًا مع طريقة API. كما هو الحال في السؤال أعلاه - فهو getElementById وليس getElementByID.

س: ما الفرق بين الأطفال وchildNodes؟

A. الطريقة children توفر لنا مجموعة من جميع العناصر داخل العنصر المستدعي. المجموعة التي تم إرجاعها هي من نوع HTMLCollection. ومع ذلك، فإن الطريقة childNodes توفر لنا مجموعة من جميع العقد داخل العنصر المستدعي. أضف البرامج النصية التالية إلى مثالنا وشاهد الفرق -

تقوم طريقة ChildNodes بإرجاع 14 عنصرًا

document.write("Using childNodes method")
document.write("<br>");
document.write("<br>");
for(i=0;i<document.getElementsByTagName("section")[0].childNodes.length;i++)
{
    document.write((i+1)+".");
    document.write(document.getElementsByTagName("section")[0].childNodes[i].toString());
    document.write("<br>");
}
document.write("<br>");
document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].childNodes.length);

بينما تقوم طريقة الأطفال بإرجاع 7 عناصر فقط

document.write("Using children method")
document.write("<br>");
document.write("<br>");
for(i=0;i<document.getElementsByTagName("section")[0].children.length;i++)
{
    document.write((i+1)+".");
    document.write(document.getElementsByTagName("section")[0].children[i].toString());
    document.write("<br>");
}
document.write("<br>");
document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].children.length);

س. أحصل على خطأ TypeError: لا يمكن قراءة الخاصية 'innerHTML' ذات القيمة غير المحددة...

A. تأكد من أن مثيل HTMLElement الذي تستدعي الخاصية innerHTML عليه تم تعيينه بعد الإعلان الأولي. يحدث هذا الخطأ عادةً في السيناريو التالي. تعرف على كيفية تجنب الخطأ في كتلة التعليمات البرمجية التالية...

var element;
if(false) //say condition was false
{
    element = document.getElementById('tempValue1');
}
element.innerHTML = '32';

var element = null;
if(false) //say condition was false
{
    element = document.getElementById('tempValue1');
}
if(element != null)
{
    element.innerHTML = '32';
}

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

تُعدّ Shadow DOM ميزةً في المتصفح تُتيح للمكوّن شجرةً فرعيةً معزولةً خاصةً به، ما يمنع تسرب الأنماط والبرامج النصية. أما Virtual DOM فهي تقنيةٌ مكتبيةٌ، تستخدمها React وVue، تُقارن نسخةً موجودةً في الذاكرة لتقليل التحديثات الفعلية.

يرسل WebDriver محدد موقع إلى المتصفح، والذي يتجول في الشجرة التي تم تحليلها حتى يظهر تطابق، ثم يعيد معالج WebElement. تحديد المواقع مثل المعرف والاسم ومحدد CSS و XPath تصف ببساطة قواعد بحث مختلفة على نفس العقد.

استخدم دالة getElementById عندما يكون للعنصر المستهدف معرّف فريد؛ فهي أسرع عملية بحث وتعيد عقدة واحدة. استخدم دالة querySelector أو querySelectorAll عندما يعتمد التطابق على الفئات أو السمات أو مسار الأصل والفرع.

لا يزال هذا الأمر يُنفَّذ، لكن المتصفحات لا تُشجِّعه. استدعاء document.write() بعد تحميل الصفحة يستبدل المستند بأكمله، ويمنع تحليله أثناء التحميل. استخدم console.log() لـ tracing، أو innerHTML لإدراج المحتوى.

يُمثل نموذج كائن المستند (DOM) محتوى الصفحة: رأس الصفحة، وجسمها، وكل عنصر من عناصرها. أما نموذج كائن المتصفح فيغطي المتصفح المحيط، بما في ذلك شريط التنقل، والشاشة، والموقع، وسجل التصفح. ويمثل كائن النافذة نقطة التقاء النموذجين.

تم إيقاف دعم متصفح إنترنت إكسبلورر في عام 2022، لذا فإن أدوات المطورين الخاصة به موجودة الآن داخل Microsoft Edgeلم يتغير سير العمل: اضغط على F12 أو انقر بزر الماوس الأيمن على عنصر، واختر فحص، ثم قم بتحرير العقدة في اللوحة التي تفتح.

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

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

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