ما هو DOM في Selenium WebDriver: الهيكل، النموذج الكامل

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

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

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

يهدف هذا البرنامج التعليمي إلى تغطية المفاهيم الأساسية لبنية مستند HTML وكيفية التعامل معها باستخدام Javaالبرنامج النصي. سوف نغطي المواضيع التالية في هذا البرنامج التعليمي:

فهم بنية DOM
مكونات DOM في Selenium
تصحيح الأخطاء في DOM
أحداث DOM
استكشاف الأخطاء وإصلاحها في DOM

فهم بنية DOM

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

تطوير محتوى يقوم بتحديث نفسه بشكل مستمر دون تحديث الصفحة بأكملها - مثل السعر الحالي لجميع الأسهم الموجودة في محفظة المستخدم الخاصة بك
تطوير تفاعلات المستخدم المتقدمة مثل إضافة المحتوى أو تعديله ديناميكيًا - مثل القدرة على إضافة المزيد من الأسهم إلى محفظتك الاستثمارية
تطوير محتوى قابل للتخصيص من قبل المستخدم - مثل القدرة على تغيير التخطيط بحيث تظهر محفظة صناديق الاستثمار المشتركة قبل محفظة الأسهم
تطوير محتوى متجاوب في موقع الويب الخاص بك، مما يجعل موقع الويب الخاص بك يتكيف مع شاشات الوسائط المختلفة مثل 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 Document.URL - يقوم كلاهما بإرجاع الموقع الحالي للمستند. ومع ذلك، إذا لم يكن المستند من النوع HTML Document.URL فلن يعمل.

Document.activeElement – تعيد هذه الطريقة العنصر الموجود في DOM والذي يتم التركيز عليه. وهذا يعني أنه إذا كان المستخدم يكتب في مربع نص، فسوف يعيد 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 عبارة عن مجموعة من القواعد التي يمكنك من خلالها الحصول على قائمة بالعناصر المتشابهة (استنادًا إلى قاعدة المحدد). لقد استخدمنا هذه الطريقة من قبل في قسم "Hello World".

العنصر

العنصر هو أي كائن يتم تمثيله بواسطة عقدة في شجرة DOM الخاصة بالمستند. كما هو الحال دائمًا، فإن كائن العنصر نفسه هو مجرد عقد من الخصائص والأساليب والأحداث بين المتصفح ومستند 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 التي تمت مناقشتها بالفعل لكائن المستند. ومع ذلك، فإن هذه الطريقة ستحد من بحثها ضمن أحفاد العنصر نفسه.

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

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

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

افتح MyFileNewFile.html (أو أي اسم أعطيته لملف HTML الخاص بك في البرامج التعليمية أعلاه) باستخدام متصفحك
استخدم الفأرة وانقر بزر الماوس الأيمن على قيمة درجة الحرارة 26^oC وانقر على "فحص العنصر"
لاحظ أن العنصر الذي اخترت "فحص العنصر" يظهر مميزًا في متصفحك (عادةً ما تظهر نافذة مصحح الأخطاء في الجزء السفلي من الشاشة)
افتح العنصر بالنقر فوق المثلث المائل بجانبه
حدد ما تريد تعديله وانقر عليه مرتين. سوف تحصل على خيار لتغيير النص. قم بما هو موضح في الصورة المتحركة أدناه.
لاحظ التغيير في محتوى صفحة HTML الخاصة بك. يمكنك إغلاق نافذة التصحيح الآن.

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

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

عملية التصحيح في DOM

أحداث DOM

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

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

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

تعيين إجراء لحدث onclick لعنصر HTML
قم بتعيين إجراء لحدث النقر باستخدام طريقة 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

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

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';
}

الملخص

في هذا البرنامج التعليمي، تعلمنا ما هو DOM وكيف أنه مفهوم أساسي يجب فهمه لإنشاء صفحات ويب ديناميكية.
لقد تطرقنا أيضًا إلى أنواع عناصر DOM مثل Window وDocument وElement.
لقد تعلمنا بعض طرق وخصائص DOM المفيدة المتوفرة في كل نوع.
لقد رأينا كيف توفر معظم المتصفحات أدوات المطورين للتعامل مع أي صفحة ويب متاحة على الإنترنت - وبالتالي تعلم كيفية تصحيح الأخطاء وحل المشكلات في موقعنا الإلكتروني.
لقد تطرقنا أيضًا بإيجاز إلى آليات حدث DOM.
أخيرًا قمنا بتغطية بعض عناصر استكشاف الأخطاء وإصلاحها في DOM.
الإنترنت مليء بالموارد الموجودة على DOM. تتوفر إحدى أفضل وأحدث المواد المرجعية على شبكة مطوري Mozilla. يرى - https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model