Что такое ДОМ Selenium WebDriver? Структура и полное название.

Автор: Krishna Рунгта Krishna Рунгта
Hours обновлено

⚡ Умное резюме

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

  • 🔘 Полная форма: DOM расшифровывается как Document Object Model (объектная модель документа) — стандартизированный W3C интерфейс для HTML и XML документов.
  • ☑️ Древовидная структура: Каждый тег становится узлом, поэтому html, head, body, article и p образуют иерархию "родитель-потомок".
  • ✅ Три объекта: Window обозначает вкладку, Document — корень дерева, а Element — каждый отдельный тег.
  • 🧪 Основные методы: Функции getElementById, querySelector и querySelectorAll извлекают узлы; innerHTML считывает и перезаписывает их содержимое.
  • 🇧🇷 Отладка: Инструменты разработчика браузера отображают проанализированное дерево, и внесенные в него изменения сохраняются только до перезагрузки страницы.
  • 📊 События: Такие действия, как клик и загрузка, транслируют сообщения, которые могут быть перехвачены атрибутами onclick или addEventListener.
Читать

Что такое ДОМ Selenium Структура WebDriver и его полное название.

Что такое ДОМ Selenium Вебдрайвер?

DOM in Selenium WebDriver - это важный компонент веб-разработки с использованием HTML5 и JavaСкрипт. Полная форма DOM — Document Object Model. DOM — это не концепция компьютерной науки. Это простой набор интерфейсов, стандартизированных среди веб-разработчиков для доступа и управления документами в HTML или XML с использованием JavaСценарий.

Эти стандарты помогают разработчикам создавать веб-страницы, не беспокоясь о деталях реализации. Некоторые организации, занимающиеся стандартизацией этих интерфейсов, такие как Mozilla, Apple, Microsoft, GoogleAdobe и др. Однако именно W3C формализует стандарт и публикует его — см. здесь (https://dom.spec.whatwg.org/).

В разделах ниже рассматривается структура документа, объекты, предоставляемые DOM, и способы их проверки. Mozilla хранит актуальную справочную информацию по 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 PARSER браузера?

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

Как получить доступ к элементу body?

<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, они применяются ко всему окну, а не только к вкладке.

Свойства объекта Window в DOM

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

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

window.opener – получает ссылку на объект окна, открывший это окно (либо путем нажатия на ссылку, либо с помощью метода window.open)

Полезные методы объекта Window

window.alert () – отображает диалоговое окно с сообщением.

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

Существует много полезных событий, которые предоставляет объект окна. Мы обсудим их в разделе «События» в разделе «Предварительные темы».

СТАТЬИ ПО ТЕМЕ

Документ

Объект Document обозначает начало дерева DOM. Document — это первый узел в DOM. Он имеет несколько методов и свойств, область действия которых распространяется на весь документ, например: URL, getElementById, querySelector и т. д.

Свойства объекта документа в DOM

Документ.documentURI и Документ.URL – Оба метода возвращают текущее местоположение документа. Однако, если документ не относится к типу HTML Document.URL не будет работать.

Документ.активныйЭлемент – Этот метод возвращает элемент в DOM, который находится в фокусе. Это означает, что если пользователь вводит текст…ping В текстовом поле метод 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, то вы знаете, что сам jQuery использует этот метод). Мы не будем подробно рассматривать селекторы CSS. Селектор CSS — это набор правил, с помощью которых можно получить список похожих элементов (на основе правила селектора). Мы уже использовали этот метод в разделе «Hello World».

Элемент

На приведенной ниже диаграмме показано, как объект Element располагается внутри дерева DOM, ниже узла документа.

Элемент отображается как узел внутри иерархии дерева DOM.

Элемент объекта в DOM

Элемент — это любой объект, представленный узлом в DOM-дереве документа. Как всегда, сам объект Element — это всего лишь конструктор.tracВзаимодействие между браузером и HTML-документом включает в себя множество свойств, методов и событий. Существуют специальные типы элементов, такие как HTMLElement, SVGElement, XULElement и т. д. В этом руководстве мы сосредоточимся только на HTMLElement.

Свойства объекта элемента в DOM

Элемент.id – Это свойство можно использовать для установки или чтения «ID» (уникального идентификатора) элемента HTML. ID должен быть уникальным среди элементов дерева DOM. Как упоминалось ранее, идентификатор также используется методом Document.getElementById для выбора конкретного объекта Element в дереве DOM.

HTMLElement.contentEditable – Свойство contentEditable элемента определяет, является ли содержимое этого элемента редактируемым/изменяемым. Это свойство можно установить, как показано в скрипте ниже. Это свойство также можно использовать для определения того, доступен ли данный элемент для редактирования или нет. Попробуйте следующий скрипт внутри любого тела HTML, и вы заметите, что можете редактировать любое содержимое тела.

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

Элемент.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-элементу соответственно. Эти методы наиболее широко используются для перемещения фокуса курсора между текстовыми полями на веб-странице ввода данных.

Элемент.querySelectorAll – Этот метод аналогичен уже обсуждавшемуся методу querySelector для объекта документа. Однако этот метод ограничит поиск среди потомков самого элемента.

Примечание о точности: Приведенный выше блок воспроизведен в том виде, в котором он был опубликован. В рабочем коде используется... документ с маленькой буквой d и innerHTML свойство, а не setInnerHTML().

Отладка в DOM

Инструменты разработчика Google ChromeМозилла Firefox, Internet Explorer (10 или более поздней версии) или Safari позволяют легко выполнять отладку прямо в браузере. Иногда разные браузеры интерпретируют одну и ту же разметку HTML по-разному, и тогда отладка помогает вам проверить DOM так, как он был интерпретирован механизмом DOM этого конкретного браузера.

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

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

  1. Откройте MyFileNewFile.html (или любое другое имя, которое вы дали своему HTML-файлу в уроках выше) с помощью браузера.
  2. Используйте мышь и щелкните правой кнопкой мыши на значении температуры 26.oC и нажмите «Проверить элемент».

    Щёлкните правой кнопкой мыши по значению температуры и выберите «Просмотреть элемент» в браузере.

  3. Обратите внимание, что элемент, для которого вы выбрали «Проверить элемент», выделен в вашем браузере (окно отладчика обычно появляется в нижней части экрана).

    Инструменты разработчика браузера подсвечивают проверяемый элемент `<span>` в дереве DOM.

  4. Откройте элемент, щелкнув наклоненный треугольник рядом с ним.

    Разворачивание элемента span в инспекторе DOM с помощью треугольного переключателя.

  5. Выберите то, что вы хотите отредактировать, и дважды щелкните по нему. У вас появится возможность изменить текст. Сделайте, как указано на анимированном изображении ниже.

    Анимированная демонстрация редактирования значения DOM-текста с 26 на 32 в инспекторе.

  6. Обратите внимание на изменение содержимого вашей HTML-страницы. Теперь вы можете закрыть окно отладки.

    Обратите внимание, что ваши изменения будут сохранены только для этого сеанса. Как только вы перезагрузите или обновите страницу (нажмете F5), изменения вернутся обратно. Это означает, что вы не изменили фактический источник HTML, а только локальную интерпретацию вашего браузера.

    В качестве забавного упражнения попробуйте сделать следующее. Открыть www.facebook.com в своем браузере и используйте инструмент отладчика, чтобы получить результат — обратите внимание, как там написано: «Я взломал Facebook».

Результат этого упражнения выглядит так, как показано на скриншоте ниже.

Страница Facebook была отредактирована в режиме реального времени в инспекторе браузера, и теперь на ней написано: «Я взломал 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

Примечание к устаревшему API: В двух ответах ниже используется document.write(). Он всё равно выполняется, но вызов после загрузки страницы удаляет документ. Лучше использовать console.log() или innerHTML.

Вопрос. Как узнать, существует элемент или нет?

A. Попробуйте найти элемент с помощью любого селектора и проверьте, является ли возвращаемый элемент нулевым. См. пример ниже –

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

Вопрос. Я получаю ошибку TypeError: document.getElementByID не является функцией…

A. Убедитесь, что имя метода точно соответствует методу API. Как и в вопросе выше – это getElementById, а не getElementByID.

Вопрос. В чем разница между дочерними узлами и дочерними узлами?

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);

Хотя метод Children возвращает всего 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);

Вопрос. Я получаю сообщение об ошибке Uncaught 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';
}

Часто задаваемые вопросы (FAQ)

Shadow DOM — это функция браузера, которая предоставляет компоненту собственное изолированное поддерево, предотвращая утечку стилей и скриптов. Virtual DOM — это библиотечная техника, используемая React и Vue, которая сравнивает изменения в копии компонента в памяти, чтобы минимизировать реальные обновления.

WebDriver отправляет в браузер локатор, который обходит разобранное дерево до тех пор, пока не найдет совпадение, после чего возвращает дескриптор WebElement. Локаторы Такие параметры, как id, name, CSS-селектор и XPath, просто описывают различные правила поиска по одним и тем же узлам.

Используйте getElementById, если целевой элемент имеет уникальный идентификатор; это самый быстрый способ поиска, возвращающий один узел. Используйте querySelector или querySelectorAll, если совпадение зависит от классов, атрибутов или пути родитель-потомок.

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

DOM-модель моделирует содержимое страницы: заголовок (head), тело (body) и каждый тег (tag). Объектная модель браузера (Browser Object Model) охватывает окружающий браузер, включая навигатор, экран, местоположение и историю. Объект window — это точка соприкосновения обеих моделей.

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

Инструменты машинного обучения оценивают сразу несколько атрибутов узла, поэтому при изменении класса или идентификатора они повторно сопоставляют тот же элемент, вместо того чтобы выдавать ошибку. Самовосстанавливающиеся тестовые платформы используют этот подход в качестве основы для обычных запросов к DOM.

Copilot Он обрабатывает обработчики событий, цепочки querySelector и циклы обхода из комментария и надежен для распространенных шаблонов. Всегда проверяйте предложенный вариант на реальной странице, поскольку он не может видеть вашу разметку.

Подведем итог этой публикации следующим образом: