В какво е DOM Selenium WebDriver: структура, пълна форма

В какво е DOM Selenium WebDriver?

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 е още по-критично, ако изпълнявате някоя или всички от следните сложни задачи във вашия уебсайт –

Разработване на съдържание, което се актуализира непрекъснато, без да опреснява цялата страница – като текущата цена на всички акции в портфолиото на вашия потребител
Разработване на усъвършенствани потребителски взаимодействия, като динамично добавяне или модифициране на съдържание – като възможност за добавяне на повече акции към вашето портфолио
Разработване на съдържание, което може да се персонализира от потребителя – като възможност за промяна на оформлението, така че портфолиото на взаимните фондове да се показва преди портфолиото с акции
Разработване на адаптивно съдържание във вашия уебсайт, като по този начин вашият уебсайт се адаптира към различни медийни екрани, т.е. 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 Notepad и поставете следното съдържание вътре в него. След това запазете файла като „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>

Накрая просто отворете файла с някой от предпочитаните от вас браузъри и ще видите „Здравей свят!“

Компоненти на DOM в Selenium

По-долу са основните компоненти на DOM Selenium Уебдрайвер:

Прозорец
Документ
Element

Прозорец

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.open)

Полезни методи на Window Object

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 селекторът е набор от правила, чрез които можете да получите списък с подобни елементи (на базата на правилото за селектор). Използвали сме този метод и преди в раздела „Здравей свят“.

Element

Елемент е всеки обект, представен от възел в DOM дърво на документ. Както винаги, самият обект Element е просто договор от свойства, методи и събития между браузър и HTML документ. Има специални видове елементи като HTMLElement, SVGElement, XULElement и т.н. В този урок ще се съсредоточим само върху HTMLElement.

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

Element.id – Това свойство може да се използва за задаване или четене на „ID“ (уникален идентификатор) за HTML елемент. ID трябва да бъде уникален сред елементите в DOM дърво. Както бе споменато по-горе, ID се използва и от метода 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>

Полезни методи на елементен обект

HTMLElement.blur() & HTMLElement.focus() – методите за замъгляване и фокусиране се използват съответно за премахване на фокуса от или придаване на фокус на HTML елемент. Тези методи се използват най-широко за преместване на фокуса на курсора между текстовите полета в уеб страница за въвеждане на данни.

Element.querySelectorAll – Този метод е подобен на вече обсъдения метод querySelector за обекта документ. Този метод обаче ще ограничи търсенето в наследниците на самия елемент.

Отстраняване на грешки в DOM

Инструменти за разработчици на Google Chrome, Mozilla 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. Децата на метода ни дават колекцията от всички елементи в рамките на извикващия елемент. Върнатата колекция е от тип 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);

В. Получавам 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';
}

Oбобщение

В този урок научихме какво е DOM и как това е основна концепция, която трябва да се разбере, за да се създават динамични уеб страници.
Също така засегнахме видовете DOM елементи като Window, Document и Element.
Научихме някои полезни DOM методи и свойства, налични във всеки вид.
Видяхме как повечето браузъри предлагат инструменти за разработчици, за да играят с всяка уеб страница, налична в Интернет – като по този начин се научихме да отстраняваме грешки и разрешаваме проблеми с нашия собствен уебсайт.
Също така накратко се спряхме на механизмите за DOM събития.
Накрая разгледахме няколко елемента за отстраняване на неизправности в DOM.
Интернет е пълен с ресурси на DOM. Един от най-добрите и актуални справочни материали е достъпен в мрежата за разработчици на Mozilla. Вижте – https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model