У чому полягає DOM Selenium WebDriver: структура, повна форма

У чому полягає DOM Selenium WebDriver?

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 PARSER браузера?

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

Як отримати доступ до елемента body?

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

Як сказати «Hello World»?

<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 WebDriver:

Window
Документ
Елемент

Window

Вікно — це об’єкт, який містить об’єкт документа в DOM. Він сидить поверх усього.

Щоб отримати доступ до віконного об’єкта з заданого документа

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

У середовищі з вкладками кожна вкладка має власний об’єкт вікна. Однак, якщо хтось хоче відловити та реалізувати такі події, як window.resizeTo та window.resizeBy, вони застосовуються до всього вікна, а не до окремої вкладки.

Властивості об’єкта Window у DOM

window.localStorage – надає доступ до локального сховища браузера. Локальне сховище можна використовувати для зберігання та отримання даних із сеансу.

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

window.opener - отримує посилання на об’єкт window, який відкрив це вікно (або клацнувши посилання, або використовуючи метод window.open)

Корисні методи об'єкта Window

window.alert() – відображає діалогове вікно попередження з повідомленням.

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

Існує багато корисних подій, які відкриває віконний об’єкт. Ми обговоримо їх у розділі «Події» в розділі «Додаткові теми».

Документ

Документ позначає початок дерева DOM. Документ є першим вузлом у DOM. Він має кілька методів і властивостей, область дії яких стосується всього документа, наприклад URL, getElementById, querySelector тощо.

Властивості об’єкта документа в DOM

Document.documentURI та Документ.URL – Вони обидва повертають поточне розташування документа. Однак якщо документ не має типу HTML Document.URL не працюватиме.

Document.activeElement – Цей метод повертає елемент у DOM, який перебуває у фокусі. Це означає, що якщо користувач вводить текст у текстове поле, Document.activeElement поверне посилання на це текстове поле.

Документ.заголовок – Використовується для читання або встановлення назви певного документа.

Корисні методи об'єкта документа

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 документа. Як завжди, сам об’єкт Element — це лише контракт властивостей, методів і подій між браузером і документом HTML. Існують спеціальні типи елементів, як-от HTMLElement, SVGElement, XULElement тощо. У цьому посібнику ми зосередимося лише на HTMLElement.

Властивості об’єкта елемента в DOM

Element.id – Цю властивість можна використовувати для встановлення або читання «ID» (унікального ідентифікатора) для елемента HTML. ID має бути унікальним серед елементів у дереві DOM. Як згадувалося раніше, ідентифікатор також використовується методом Document.getElementById для вибору конкретного об’єкта Element у дереві 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>

Корисні методи об'єкта Element

HTMLElement.blur() & HTMLElement.focus() – методи розмиття та фокусування використовуються для видалення фокусу з елемента HTML або надання йому фокусу відповідно. Ці методи найчастіше використовуються для переміщення фокуса курсору між текстовими полями на веб-сторінці введення даних.

Element.querySelectorAll – Цей метод подібний до вже розглянутого методу querySelector для об’єкта документа. Однак цей метод обмежить пошук серед нащадків самого елемента.

Налагодження в DOM

Інструменти розробника Google Chrome, Mozilla Firefox, Internet Explorer (10 або вище) або Safari дозволяють легко налагоджувати помилки прямо в браузері. Іноді різні браузери інтерпретують ту саму розмітку HTML по-різному, і саме тоді налагодження допомагає перевірити DOM, як він інтерпретував механізм DOM цього конкретного браузера.

Тепер, скажімо, ви хочете змінити значення температури з 26^oС до 32^oC у вашому останньому прикладі. Для цього ми зробимо кілька простих кроків. Скріншоти, показані тут, взяті з Mozilla Firefox– однак кроки однакові в усіх інших браузерах.

Відкрийте MyFileNewFile.html (або будь-яку іншу назву, яку ви дали своєму файлу HTML у посібниках вище) за допомогою свого браузера
Використовуйте мишу та клацніть правою кнопкою миші на значенні температури 26^oC і натисніть «Перевірити елемент»
Зверніть увагу, що елемент, для якого ви вибрали «Перевірити елемент», буде виділено у вашому браузері (вікно налагоджувача зазвичай відображається внизу екрана)
Відкрийте елемент, клацнувши похилений трикутник поруч із ним
Виберіть те, що ви хочете змінити, і двічі клацніть на ньому. Ви отримаєте можливість змінити текст. Виконайте вказівки на анімаційному зображенні нижче.
Зверніть увагу на зміни у вмісті вашої сторінки HTML. Ви можете закрити вікно налагодження.

Зауважте, що ваші зміни збережуться лише протягом цього сеансу. Щойно ви перезавантажите або оновите сторінку (натисніть F5), зміни буде скасовано. Це означає, що ви не змінювали вихідний код HTML, а лише локальну інтерпретацію вашого браузера.

У якості веселої вправи спробуйте зробити наступне. ВІДЧИНЕНО www.facebook.com у вашому браузері та скористайтеся інструментом налагодження, щоб отримати результат – зверніть увагу на те, як написано «Я зламав Facebook».

Процес налагодження в DOM

Події DOM

Що таке події в DOM?

Події — це модель програмування, у якій інциденти, ініційовані користувачем (або життєвим циклом сторінки веб-переглядача), транслюються як повідомлення. Наприклад, коли сторінка завершує завантаження, вона запускає подію window.load і аналогічно, коли користувач натискає кнопку, яка ініціюється подія клацання елемента.

Ці повідомлення можуть бути перехоплені будь-ким JavaScript код, а потім можна виконати визначену розробником дію. Скажімо, наприклад, ви хочете, щоб цифри на вашій веб-сторінці оновлювалися лише тоді, коли користувач натискає кнопку. Ви можете досягти цього будь-яким із наступних методів:

Призначте дію події 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
}

Q. Я отримую TypeError: document.getElementByID не є функцією…

A. Переконайтеся, що назва методу точно відповідає методу API. Як і в питанні вище – це getElementById, а не getElementByID.

Q. Яка різниця між дочірніми вузлами та дочірніми вузлами?

A. Діти методу отримують нам колекцію всіх елементів у викликаючому елементі. Повернена колекція має тип 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);

Q. Я отримую Uncaught TypeError: Cannot read property 'innerHTML' of undefined…

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 Event.
Нарешті ми розглянули кілька пунктів усунення несправностей у DOM.
Інтернет наповнений ресурсами на DOM. Один із найкращих і актуальних довідкових матеріалів доступний у мережі розробників Mozilla. Побачити - https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model