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

⚡ Розумний підсумок

Модель об'єктів документа надає доступ до HTML-сторінки JavaСкрипт як дерево об'єктів, що дозволяє скриптам та Selenium WebDriver зчитує, знаходить та змінює будь-який елемент на сторінці під час роботи браузера.

🔘 Повна форма: DOM розшифровується як Document Object Model (Модель об'єкта документа) — стандартизований W3C інтерфейс для документів HTML та XML.
☑️ Деревоподібна структура: Кожен тег стає вузлом, тому html, head, body, article та p утворюють ієрархію батьків-дитина.
✅ Три об'єкти: Вікно обгортає вкладку, Документ позначає корінь дерева, а Елемент представляє кожен окремий тег.
🧪 Основні методи: getElementById, querySelector та querySelectorAll отримують вузли; innerHTML зчитує та перезаписує їхній вміст.
🛠️ Налагодження: Інструменти розробника браузера відображають проаналізоване дерево, а внесені там зміни зберігаються лише до перезавантаження сторінки.
📊 Події: Такі дії, як click та load широкомовні повідомлення, які можуть перехоплювати атрибути onclick або addEventListener.

Детальніше

У чому полягає 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/).

У розділах нижче розглядається структура документа, об'єкти, які надає DOM, та способи їх перевірки. Mozilla зберігає поточне посилання на API на Сторінки моделі об'єкта документа MDN.

Кожен Selenium локатор розв'язується з цим самим деревом, тому структура нижче є тим, що findElement() пошуки.

Розуміння структури DOM

Вам потрібно буде зрозуміти структуру DOM, якщо ви створюєте будь-який веб-сайт із використанням сценаріїв JavaСценарій. Розуміння DOM ще важливіше, якщо ви виконуєте будь-яке одне або всі наступні складні завдання на своєму веб-сайті:

Розвитокping контент, який постійно оновлюється без оновлення всієї сторінки – наприклад, поточна ціна всіх акцій у портфелі вашого користувача
Розвитокping розширені можливості взаємодії з користувачем, такі як динамічне додавання або зміна контенту, наприклад, можливість додавати більше акцій до вашого портфеля
Розвитокping контент, який можна налаштувати користувачем, наприклад, можливість змінити макет, щоб портфель взаємних фондів відображався перед портфелем акцій
Розвиток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 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-документ.URL не буде працювати.

Document.activeElement – Цей метод повертає елемент у DOM, який знаходиться у фокусі. Це означає, що якщо користувач typing У текстовому полі 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 — це набір правил, за допомогою яких можна отримати список схожих елементів (на основі правила селектора). Ми вже використовували цей метод раніше в розділі «Привіт, світ».

Елемент

На діаграмі нижче показано, як об'єкт Element розташовується всередині дерева DOM, під вузлом документа.

Об’єкт елемента в DOM

Елемент — це будь-який об'єкт, представлений вузлом у DOM-дереві документа. Як завжди, сам об'єкт Element — це лише конформізм.tracвластивостей, методів та подій між браузером та 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 для об’єкта документа. Однак цей метод обмежить пошук серед нащадків самого елемента.

Примітка щодо точності: Блок вище відтворено так, як опубліковано. Робочий код використовує документ з малою літерою d та innerHTML властивість, а не setInnerHTML().

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

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

Примітка браузера: Internet Explorer припинив підтримку у 2022 році, тому його DevTools тепер доступні в Microsoft EdgeНаведені нижче кроки залишаються незмінними; DevTools відкриваються за допомогою F12.

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

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

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

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

Результат цієї вправи виглядає як на скріншоті нижче.

Читання та редагування вузлів охоплює статичні сторінки. Інтерактивні сторінки також реагують на дії користувача.

Події DOM

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

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

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

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

Примітка щодо застарілого API: Дві відповіді нижче використовують document.write(). Він все ще працює, але виклик після завантаження сторінки стирає документ. Віддавайте перевагу console.log() або innerHTML.

З. Як дізнатися, існує елемент чи ні?

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 — це бібліотечний метод, що використовується React та Vue, який розрізняє копію в пам'яті, щоб мінімізувати реальні оновлення.

WebDriver надсилає локатор до браузера, який переглядає проаналізоване дерево, доки не з'явиться збіг, а потім повертає дескриптор WebElement. Локатори такі як id, name, CSS-селектор та XPath просто описують різні правила пошуку для тих самих вузлів.

Використовуйте getElementById, коли ціль має унікальний ідентифікатор; це найшвидший пошук і повертає один вузол. Використовуйте querySelector або querySelectorAll, коли збіг залежить від класів, атрибутів або шляху батьків-дитина.

Він все ще виконується, але браузери не рекомендують цього робити. Виклик document.write() після завантаження сторінки замінює весь документ і блокує розбір під час завантаження. Використовуйте console.log() для tracing або innerHTML для вставки вмісту.

Вміст сторінки моделей DOM: заголовок, тіло та кожен тег. Об'єктна модель браузера охоплює навколишній браузер, включаючи навігатор, екран, розташування та історію. Об'єкт window — це місце, де вони зустрічаються.

Internet Explorer припинив підтримку у 2022 році, тому його інструменти для розробників тепер знаходяться всередині Microsoft EdgeРобочий процес не змінився: натисніть F12 або клацніть правою кнопкою миші на елементі, виберіть «Перевірити» та відредагуйте вузол на панелі, що відкриється.

Інструменти машинного навчання оцінюють кілька атрибутів вузлів одночасно, тому, коли клас або ідентифікатор змінюється, вони повторно зіставляють той самий елемент, а не зазнають невдачі. Платформи самовідновлюваного тестування будують це поверх звичайних DOM-запитів.

Copilot створює чернетки слухачів подій, ланцюжків querySelector та циклів обходу з коментаря, і він надійний на поширених шаблонах. Завжди перевіряйте пропозицію на реальній сторінці, оскільки він не може бачити вашу розмітку.