Что такое ДОМ Selenium WebDriver: структура, полная форма

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

DOM in Selenium WebDriver — важный компонент веб-разработки с использованием HTML5 и JavaСкрипт. Полная форма DOM — Document Object Model. 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 становится еще более важным, если вы выполняете одну или все из следующих сложных задач на своем веб-сайте:

Девело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>

Как сказать «Привет, мир»?

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

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

Документ

Документ отмечает начало дерева DOM. Документ — это первый узел в 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, которая сама использует этот метод). Мы не будем сильно углубляться в селекторы CSS. CSS-селектор — это набор правил, по которым можно получить список похожих элементов (на основе правила селектора). Мы уже использовали этот метод раньше в разделе «Hello World».

Элемент

Элемент — это любой объект, представленный узлом в 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 для объекта документа. Однако этот метод ограничит поиск среди потомков самого элемента.

Отладка в DOM

Инструменты разработчика Google ChromeМозилла 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, и аналогичным образом, когда пользователь нажимает кнопку, которая срабатывает событие щелчка элемента.

Эти сообщения могут быть перехвачены любым 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.

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

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

Резюме

В этом уроке мы узнали, что такое DOM и как важно понимать эту концепцию для создания динамических веб-страниц.
Мы также коснулись типов элементов DOM, таких как «Окно», «Документ» и «Элемент».
Мы изучили некоторые полезные методы и свойства DOM, доступные в каждом виде.
Мы увидели, как большинство браузеров предлагают инструменты разработчика, позволяющие работать с любой веб-страницей, доступной в Интернете, и таким образом научились отлаживать и решать проблемы на нашем собственном веб-сайте.
Мы также кратко коснулись механизмов событий DOM.
Наконец, мы рассмотрели несколько вопросов по устранению неполадок в DOM.
Интернет наполнен ресурсами по DOM. Один из лучших и актуальных справочных материалов доступен в сети разработчиков Mozilla. Видеть - https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

Что такое ДОМ Selenium WebDriver: структура, полная форма

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

Понимание структуры DOM

Базовая HTML-страница

Как это выглядит для DOM PARSER браузера?

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

Как сказать «Привет, мир»?

Наконец, весь HTML-файл будет выглядеть так

Компоненты DOM в Selenium

Окно

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

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

Документ

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

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

Элемент

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

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

Отладка в DOM

События DOM

Что такое события в DOM?

Метод 1

Метод 2

Устранение неполадок в DOM

Резюме

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

Подпишитесь на рассылку

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

Понимание структуры DOM

Базовая HTML-страница

Как это выглядит для DOM PARSER браузера?

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

Как сказать «Привет, мир»?

Наконец, весь HTML-файл будет выглядеть так

Компоненты DOM в Selenium

Окно

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

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

Документ

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

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

Элемент

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

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

Отладка в DOM

События DOM

Что такое события в DOM?

Метод 1

Метод 2

Устранение неполадок в DOM

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

Резюме

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

Подпишитесь на рассылку